.openModalBtn {
    
    cursor: pointer;
 
}
.switch-small .switch-bg {
    border-radius: 16px;
    height: 16px;
    padding: 0 2px;
    width: 30px
}

.switch-small .switch-bg.switch-active-bg:before {
    transform: translateX(13px)
}

.switch-small .switch-bg:before {
    border-radius: 50%;
    content: "";
    height: 12px;
    left: 3px;
    position: absolute;
    top: 2px;
    transition: transform .3s;
    width: 12px;
    z-index: 10
}

.switch-small .switch-bg .switch-icon {
    transform: scale(.5);
    z-index: 1
}

.switch-normal .switch-bg {
    border-radius: 21px;
    height: 21px;
    padding: 0 2px;
    width: 40px
}

.switch-normal .switch-bg.switch-active-bg:before {
    transform: translateX(19px)
}

.switch-normal .switch-bg:before {
    border-radius: 50%;
    content: "";
    height: 17px;
    left: 2px;
    position: absolute;
    top: 2px;
    width: 17px;
    z-index: 10
}

.switch-normal .switch-bg:not(.disabled-ani):before {
    transition: transform .3s
}

.switch-normal .switch-icon {
    transform: scale(.6);
    z-index: 1
}

.switch-large .switch-bg {
    border-radius: 31px;
    height: 31px;
    padding: 0 2px;
    width: 60px
}

.switch-large .switch-bg.switch-active-bg:before {
    transform: translateX(29px)
}

.switch-large .switch-bg:before {
    background: #fff;
    border-radius: 50%;
    content: "";
    height: 27px;
    left: 2px;
    position: absolute;
    top: 2px;
    transition: transform .3s;
    width: 27px
}

.switch-large .switch-icon {
    transform: scale(.8);
    z-index: 1
}

.switch-root-white {
    cursor: pointer;
    position: relative
}

.switch-root-white .switch-bg {
    align-items: center;
    background: #ccd2da;
    cursor: pointer;
    display: flex;
    justify-content: space-around;
    transition: background .2s ease-in
}

.switch-root-white .switch-bg.switch-active-bg {
    background: var(--dexc-white-primary-color)
}

.switch-root-white .switch-bg.switch-active-bg:before {
    background: #fff
}

.switch-root-white .switch-bg.disabled {
    cursor: not-allowed
}

.switch-root-white .switch-bg:before {
    background: #fff
}

.switch-root-white .switch-bg .switch-icon {
    color: #fff;
    pointer-events: none
}

.switch-root-blue {
    cursor: pointer;
    position: relative
}

.switch-root-blue .switch-bg {
    align-items: center;
    background: #30353e;
    cursor: pointer;
    display: flex;
    justify-content: space-around;
    transition: background .2s ease-in
}

.switch-root-blue .switch-bg.switch-active-bg {
    background: var(--dexc-dark-primary-color)
}

.switch-root-blue .switch-bg.switch-active-bg:before {
    background: #fff
}

.switch-root-blue .switch-bg.disabled {
    cursor: not-allowed
}

.switch-root-blue .switch-bg:before {
    background: var(--dexc-trade-primary-container-bg)
}

.switch-root-blue .switch-bg .switch-icon {
    color: #fff;
    pointer-events: none
}

.switch-root-black {
    cursor: pointer;
    position: relative
}

.switch-root-black .switch-bg {
    align-items: center;
    background: #3f4254;
    cursor: pointer;
    display: flex;
    justify-content: space-around;
    transition: background .2s ease-in
}

.switch-root-black .switch-bg.switch-active-bg {
    background: var(--dexc-dark-primary-color)
}

.switch-root-black .switch-bg.switch-active-bg:before {
    background: #fff
}

.switch-root-black .switch-bg.disabled {
    cursor: not-allowed
}

.switch-root-black .switch-bg:before {
    background: #1f2126
}

.switch-root-black .switch-bg .switch-icon {
    color: #fff;
    pointer-events: none
}

.root-blue .switch-bg {
    background: #434954
}

.root-blue .switch-bg .switch-icon {
    color: #13161e
}

.root-blue .switch-bg.switch-active-bg:before,
.root-blue .switch-bg:before {
    background: #13161e
}

.select-body-wrap-modal-wrapper-white,
.select-white {
    border: 1px solid #ccd2da;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    outline: none;
    position: relative
}

.select-body-wrap-modal-wrapper-white.select-outer-wrap.disabled,
.select-white.select-outer-wrap.disabled {
    color: #8a8a8e;
    cursor: not-allowed
}

.select-body-wrap-modal-wrapper-white .select-value-input-wrapped,
.select-white .select-value-input-wrapped {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    position: relative
}

.select-body-wrap-modal-wrapper-white .select-value-input-wrapped input,
.select-white .select-value-input-wrapped input {
    background-color: transparent;
    border: none;
    color: #000;
    padding-left: 28px;
    padding-right: 10px;
    width: 100%
}

.select-body-wrap-modal-wrapper-white .select-value-input-wrapped .icon-search,
.select-white .select-value-input-wrapped .icon-search {
    bottom: 0;
    color: #9ca9b5;
    font-size: 14px;
    height: 100%;
    height: 14px;
    margin: auto;
    max-height: 100%;
    padding-left: 10px;
    position: absolute;
    top: -2px
}

.select-body-wrap-modal-wrapper-white .select-value-box,
.select-white .select-value-box {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 20px;
    position: relative
}

.select-body-wrap-modal-wrapper-white .select-value-box.disabled,
.select-white .select-value-box.disabled {
    color: #8a8a8e
}

.select-body-wrap-modal-wrapper-white .select-value-box .select-value,
.select-white .select-value-box .select-value {
    display: inline-block;
    overflow: hidden;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap
}

.select-body-wrap-modal-wrapper-white .select-value-box-title,
.select-white .select-value-box-title {
    margin-right: 12px
}

.select-body-wrap-modal-wrapper-white .select-value-box .select-arrow,
.select-body-wrap-modal-wrapper-white .select-value-input-wrapped .select-arrow,
.select-white .select-value-box .select-arrow,
.select-white .select-value-input-wrapped .select-arrow {
    border: 2px solid #8a8a8e !important;
    border-left: none !important;
    border-top: none !important;
    bottom: 0;
    display: inline-block;
    height: 6px;
    margin: auto;
    position: absolute;
    right: 10px;
    top: -4px;
    transform: rotate(45deg);
    width: 6px
}

.select-body-wrap-modal-wrapper-white .select-value-box .select-arrow-rotate,
.select-body-wrap-modal-wrapper-white .select-value-input-wrapped .select-arrow-rotate,
.select-white .select-value-box .select-arrow-rotate,
.select-white .select-value-input-wrapped .select-arrow-rotate {
    animation: common-arrow-rotate-reset .2s ease-out forwards
}

.select-body-wrap-modal-wrapper-white .select-value-box .select-arrow-rotate-reset,
.select-body-wrap-modal-wrapper-white .select-value-input-wrapped .select-arrow-rotate-reset,
.select-white .select-value-box .select-arrow-rotate-reset,
.select-white .select-value-input-wrapped .select-arrow-rotate-reset {
    animation: common-arrow-rotate .2s ease-out forwards
}

.select-body-wrap-modal-wrapper-white .select-list,
.select-white .select-list {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 20px 0 rgba(8, 31, 64, .12);
    display: none;
    min-width: 100%;
    overflow: auto;
    position: absolute;
    top: calc(100% + 1px);
    width: auto;
    z-index: 11
}

.select-body-wrap-modal-wrapper-white .select-list.select-list-with-children,
.select-white .select-list.select-list-with-children {
    overflow: auto
}

.select-body-wrap-modal-wrapper-white .select-list li,
.select-white .select-list li {
    color: #000;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    text-align: left;
    width: auto
}

.select-body-wrap-modal-wrapper-white .select-list li .select-arrow,
.select-white .select-list li .select-arrow {
    border: 2px solid #8a8a8e !important;
    border-left: none !important;
    border-top: none !important;
    display: inline-block;
    height: 6px;
    position: absolute;
    right: 10px;
    top: calc(50% - 3px);
    transform: rotate(-45deg);
    width: 6px
}

.select-body-wrap-modal-wrapper-white .select-list li span:last-child,
.select-white .select-list li span:last-child {
    float: right;
    margin-right: 20px
}

.select-body-wrap-modal-wrapper-white .select-list li span:first-child,
.select-white .select-list li span:first-child {
    float: none;
    margin-right: 0
}

.select-body-wrap-modal-wrapper-white .select-list li:hover,
.select-white .select-list li:hover {
    background-color: #f8fafd;
    color: var(--dexc-white-primary-color);
    transition: color .2s ease-in-out
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap,
.select-white .select-list .children-select-list-wrap {
    z-index: 31
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap li,
.select-white .select-list .children-select-list-wrap li {
    min-width: 120px;
    padding-right: 20px
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap .children-select-list,
.select-white .select-list .children-select-list-wrap .children-select-list {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 20px 0 rgba(8, 31, 64, .12);
    left: 100%;
    max-height: 194px;
    overflow: auto;
    position: absolute;
    top: 0;
    width: auto
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap,
.select-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap {
    position: relative
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-mask,
.select-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-mask {
    background: transparent;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .icon-search,
.select-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .icon-search {
    bottom: 0;
    color: #9ca9b5;
    font-size: 14px;
    height: 100%;
    height: 14px;
    margin: auto;
    max-height: 100%;
    padding-left: 10px;
    position: absolute;
    top: 0
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input,
.select-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input {
    border: none;
    border-radius: 4px;
    line-height: 30px;
    padding: 0 10px 0 30px;
    width: 100%
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input::-moz-placeholder,
.select-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input::-moz-placeholder {
    color: #8a8a8e
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input::placeholder,
.select-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input::placeholder {
    color: #8a8a8e
}

.select-body-wrap-modal-wrapper-white .select-list-click,
.select-white .select-list-click {
    animation: common-click-show .2s ease-out forwards;
    display: block
}

.select-body-wrap-modal-wrapper-white .select-hover-click,
.select-white .select-hover-click {
    animation: common-hover-show .3s ease-out forwards;
    display: block
}

.select-body-wrap-modal-wrapper-white {
    border: none
}

.select-blue,
.select-body-wrap-modal-wrapper-blue {
    border: 1px solid #30353e;
    color: #f9f9f9;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    outline: none;
    position: relative
}

.select-blue.select-outer-wrap.disabled,
.select-body-wrap-modal-wrapper-blue.select-outer-wrap.disabled {
    color: #8a8a8e;
    cursor: not-allowed
}

.select-blue .select-value-input-wrapped,
.select-body-wrap-modal-wrapper-blue .select-value-input-wrapped {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    position: relative
}

.select-blue .select-value-input-wrapped input,
.select-body-wrap-modal-wrapper-blue .select-value-input-wrapped input {
    background-color: transparent;
    border: none;
    color: #f9f9f9;
    padding-left: 28px;
    padding-right: 10px;
    width: 100%
}

.select-blue .select-value-input-wrapped .icon-search,
.select-body-wrap-modal-wrapper-blue .select-value-input-wrapped .icon-search {
    bottom: 0;
    color: #9ca9b5;
    font-size: 14px;
    height: 100%;
    height: 14px;
    margin: auto;
    max-height: 100%;
    padding-left: 10px;
    position: absolute;
    top: -2px
}

.select-blue .select-value-box,
.select-body-wrap-modal-wrapper-blue .select-value-box {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 20px;
    position: relative
}

.select-blue .select-value-box.disabled,
.select-body-wrap-modal-wrapper-blue .select-value-box.disabled {
    color: #8a8a8e
}

.select-blue .select-value-box .select-value,
.select-body-wrap-modal-wrapper-blue .select-value-box .select-value {
    display: inline-block;
    overflow: hidden;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap
}

.select-blue .select-value-box-title,
.select-body-wrap-modal-wrapper-blue .select-value-box-title {
    margin-right: 12px
}

.select-blue .select-value-box .select-arrow,
.select-blue .select-value-input-wrapped .select-arrow,
.select-body-wrap-modal-wrapper-blue .select-value-box .select-arrow,
.select-body-wrap-modal-wrapper-blue .select-value-input-wrapped .select-arrow {
    border: 2px solid #8a8a8e !important;
    border-left: none !important;
    border-top: none !important;
    bottom: 0;
    display: inline-block;
    height: 6px;
    margin: auto;
    position: absolute;
    right: 10px;
    top: -4px;
    transform: rotate(45deg);
    width: 6px
}

.select-blue .select-value-box .select-arrow-rotate,
.select-blue .select-value-input-wrapped .select-arrow-rotate,
.select-body-wrap-modal-wrapper-blue .select-value-box .select-arrow-rotate,
.select-body-wrap-modal-wrapper-blue .select-value-input-wrapped .select-arrow-rotate {
    animation: common-arrow-rotate-reset .2s ease-out forwards
}

.select-blue .select-value-box .select-arrow-rotate-reset,
.select-blue .select-value-input-wrapped .select-arrow-rotate-reset,
.select-body-wrap-modal-wrapper-blue .select-value-box .select-arrow-rotate-reset,
.select-body-wrap-modal-wrapper-blue .select-value-input-wrapped .select-arrow-rotate-reset {
    animation: common-arrow-rotate .2s ease-out forwards
}

.select-blue .select-list,
.select-body-wrap-modal-wrapper-blue .select-list {
    background-color: var(--dexc-trade-primary-container-bg);
    border-radius: 3px;
    box-shadow: 0 0 20px 0 rgba(8, 31, 64, .12);
    display: none;
    min-width: 100%;
    overflow: auto;
    position: absolute;
    top: calc(100% + 1px);
    width: auto;
    z-index: 11
}

.select-blue .select-list.select-list-with-children,
.select-body-wrap-modal-wrapper-blue .select-list.select-list-with-children {
    overflow: auto
}

.select-blue .select-list li,
.select-body-wrap-modal-wrapper-blue .select-list li {
    color: #f9f9f9;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    text-align: left;
    width: auto
}

.select-blue .select-list li .select-arrow,
.select-body-wrap-modal-wrapper-blue .select-list li .select-arrow {
    border: 2px solid #8a8a8e !important;
    border-left: none !important;
    border-top: none !important;
    display: inline-block;
    height: 6px;
    position: absolute;
    right: 10px;
    top: calc(50% - 3px);
    transform: rotate(-45deg);
    width: 6px
}

.select-blue .select-list li span:last-child,
.select-body-wrap-modal-wrapper-blue .select-list li span:last-child {
    float: right;
    margin-right: 20px
}

.select-blue .select-list li span:first-child,
.select-body-wrap-modal-wrapper-blue .select-list li span:first-child {
    float: none;
    margin-right: 0
}

.select-blue .select-list li:hover,
.select-body-wrap-modal-wrapper-blue .select-list li:hover {
    background-color: #0f121f;
    color: var(--dexc-dark-primary-color);
    transition: color .2s ease-in-out
}

.select-blue .select-list .children-select-list-wrap,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap {
    z-index: 31
}

.select-blue .select-list .children-select-list-wrap li,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap li {
    min-width: 120px;
    padding-right: 20px
}

.select-blue .select-list .children-select-list-wrap .children-select-list,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap .children-select-list {
    background-color: var(--dexc-trade-primary-container-bg);
    border-radius: 3px;
    box-shadow: 0 0 20px 0 rgba(8, 31, 64, .12);
    left: 100%;
    max-height: 194px;
    overflow: auto;
    position: absolute;
    top: 0;
    width: auto
}

.select-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap {
    position: relative
}

.select-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-mask,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-mask {
    background: transparent;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.select-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .icon-search,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .icon-search {
    bottom: 0;
    color: #9ca9b5;
    font-size: 14px;
    height: 100%;
    height: 14px;
    margin: auto;
    max-height: 100%;
    padding-left: 10px;
    position: absolute;
    top: 0
}

.select-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input {
    border: none;
    border-radius: 4px;
    line-height: 30px;
    padding: 0 10px 0 30px;
    width: 100%
}

.select-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input::-moz-placeholder,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input::-moz-placeholder {
    color: #8a8a8e
}

.select-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input::placeholder,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input::placeholder {
    color: #8a8a8e
}

.select-blue .select-list-click,
.select-body-wrap-modal-wrapper-blue .select-list-click {
    animation: common-click-show .2s ease-out forwards;
    display: block
}

.select-blue .select-hover-click,
.select-body-wrap-modal-wrapper-blue .select-hover-click {
    animation: common-hover-show .3s ease-out forwards;
    display: block
}

.select-body-wrap-modal-wrapper-blue {
    border: none
}

.chart-fullscreen-modal-wrapper .chart-fullscreen-modal {
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 901
}

.chart-fullscreen-modal-wrapper .chart-fullscreen-modal .chart-fullscreen-modal-mask {
    background: rgba(28, 36, 44, .2);
    height: 100%;
    width: 100%
}

.chart-fullscreen-modal-wrapper .chart-fullscreen-modal .chart-fullscreen-modal-chart {
    background: #fff;
    bottom: 0;
    height: 468px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 960px
}

.chart-share-modal-wrapper .chart-share-modal {
    height: 100vh;
    left: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 901
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-mask {
    background: rgba(28, 36, 44, .2);
    height: 100%;
    min-height: 1300px;
    width: 100%
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content-wrapper {
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 16vh;
    width: 490px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content {
    background: #fff;
    color: #fff;
    height: auto;
    padding: 40px 58px 30px;
    width: 490px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .icon-info-close {
    color: #8a8a8e;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-img {
    min-height: 300px;
    width: 375px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-img img {
    display: block;
    height: 100%;
    width: 100%
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-loading {
    bottom: 0;
    height: 72px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 72px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-loading img {
    display: block;
    height: 100%;
    width: 100%
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main {
    background: #246cd2;
    height: auto;
    margin: auto;
    padding: 45px 10px 20px;
    position: relative;
    width: 375px;
    z-index: -100
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-logo {
    height: 34px;
    margin: auto;
    width: 242px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-logo img {
    display: block;
    height: 100%;
    width: 100%
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-title-wrapper .chart-share-modal-content-main-title {
    font-size: 18px;
    margin-top: 40px;
    text-align: center
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-title-wrapper .chart-share-modal-content-main-desc {
    display: flex;
    justify-content: center;
    margin-top: 12px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-title-wrapper .chart-share-modal-content-main-desc>div {
    margin-right: 30px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-title-wrapper .chart-share-modal-content-main-desc>div:last-child {
    margin-right: 0
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-chart-wrapper {
    background: #fff;
    border-radius: 8px;
    margin-top: 28px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-chart-wrapper .chart-share-modal-content-main-chart-dashed {
    color: #e6ecf2;
    height: 13px;
    left: 0;
    margin: auto;
    overflow: hidden;
    position: relative;
    right: 0;
    top: -10px;
    white-space: nowrap;
    width: 335px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-chart-wrapper .chart-share-modal-content-main-chart-desc {
    margin: 0 9px;
    padding-bottom: 18px;
    padding-top: 3px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-chart-wrapper .chart-share-modal-content-main-chart-desc .chart-share-modal-content-main-chart-desc-date {
    color: #8a8a8e;
    font-size: 12px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-chart-wrapper .chart-share-modal-content-main-chart-desc .chart-share-modal-content-main-chart-desc-flex {
    color: #000;
    display: flex;
    font-size: 12px;
    margin-top: 6px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-chart-wrapper .chart-share-modal-content-main-chart-desc .chart-share-modal-content-main-chart-desc-flex>div {
    width: 160px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-chart-wrapper .chart-share-modal-content-main-chart-desc .chart-share-modal-content-main-chart-desc-block {
    color: #000;
    font-size: 12px;
    margin-top: 6px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-host {
    margin-top: 20px;
    text-align: center
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 30px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-footer>div {
    border: 1px solid #367de1;
    border-radius: 2px;
    cursor: pointer;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 100%
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-footer .chart-share-modal-content-footer-copy {
    color: #367de1
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-footer .chart-share-modal-content-footer-download {
    background: #367de1;
    color: #fff
}

.hbdm-daterange-picker {
    color: #000;
    margin-right: 20px;
    position: relative
}

.hbdm-daterange-picker .daterange-picker-mask {
    background: #fff;
    border: 1px solid #ccd2da;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    font-size: 12px;
    height: 30px;
    justify-content: space-around;
    left: 0;
    line-height: 28px;
    min-width: 230px;
    padding: 0 20px;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: 1
}

.hbdm-daterange-picker .daterange-picker-mask>div {
    white-space: nowrap
}

.hbdm-daterange-picker .range-picker-hidden-icon .react-daterange-picker__clear-button {
    display: none
}

.hbdm-daterange-picker .react-daterange-picker__wrapper {
    border: 1px solid #ccd2da;
    border-radius: 2px;
    cursor: pointer;
    min-width: 230px;
    padding: 0 10px
}

.hbdm-daterange-picker .react-daterange-picker__wrapper>.react-daterange-picker__range-divider {
    display: block;
    line-height: 28px;
    padding: 0 10px
}

.hbdm-daterange-picker .react-daterange-picker__wrapper>.react-daterange-picker__inputGroup {
    display: flex;
    font-size: 12px
}

.hbdm-daterange-picker .react-daterange-picker__wrapper>.react-daterange-picker__inputGroup>input {
    color: #000;
    cursor: pointer;
    line-height: 28px
}

.hbdm-daterange-picker .react-daterange-picker__wrapper>.react-daterange-picker__inputGroup>.react-daterange-picker__inputGroup__leadingZero {
    color: #000;
    line-height: 28px
}

.hbdm-daterange-picker .react-daterange-picker__wrapper>.react-daterange-picker__inputGroup>.react-date-picker__inputGroup__divider {
    display: block;
    height: 100%;
    line-height: 28px
}

.hbdm-daterange-picker .react-daterange-picker__wrapper .react-daterange-picker__calendar-button {
    display: none
}

.hbdm-daterange-picker .react-calendar {
    border: none;
    border-radius: 4px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1)
}

.hbdm-daterange-picker .react-calendar>.react-calendar__navigation {
    border-bottom: 1px solid #ccd2da
}

.hbdm-daterange-picker .react-calendar>.react-calendar__navigation>button {
    background-color: transparent;
    font-size: 16px
}

.hbdm-daterange-picker .react-calendar>.react-calendar__navigation>button:active,
.hbdm-daterange-picker .react-calendar>.react-calendar__navigation>button:hover {
    background-color: transparent;
    color: var(--dexc-white-primary-color)
}

.hbdm-daterange-picker .react-calendar>.react-calendar__navigation>button[disabled] {
    background-color: transparent;
    color: #8a8a8e;
    cursor: not-allowed
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer {
    padding: 0 10px 10px
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__weekdays .react-calendar__month-view__weekdays__weekday abbr {
    color: #000;
    font-weight: 400;
    line-height: 30px;
    text-decoration: none
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile {
    margin-bottom: 5px solid #fff;
    margin-top: 5px solid #fff
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile:hover {
    background: rgba(36, 131, 255, .05);
    color: #1e242d
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile:disabled,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile:disabled,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile:disabled,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile:disabled {
    background: transparent;
    color: #bbb;
    cursor: not-allowed
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__month-view__days__day--weekend,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__month-view__days__day--weekend,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__month-view__days__day--weekend,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__month-view__days__day--weekend {
    color: #1e242d
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--active,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--now,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--active,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--now,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--active,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--now,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--active,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--now {
    background: rgba(36, 131, 255, .05);
    color: var(--dexc-primary-color)
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--hasActive,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--rangeEnd,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--rangeStart,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--hasActive,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--rangeEnd,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--rangeStart,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--hasActive,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--rangeEnd,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--rangeStart,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--hasActive,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--rangeEnd,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--rangeStart {
    background: var(--dexc-primary-color);
    border-radius: 3px;
    color: #fff
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--hasActive:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--rangeEnd:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--rangeStart:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--hasActive:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--rangeEnd:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--rangeStart:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--hasActive:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--rangeEnd:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--rangeStart:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--hasActive:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--rangeEnd:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--rangeStart:hover {
    background: var(--dexc-primary-color);
    color: #fff
}

.tooltip-hover.tooltop-show-hover:hover .tooltip-inner {
    display: block
}

.tooltip-white {
    display: inline-block
}

.tooltip-white .tooltip-inner-wrap {
    position: relative;
    width: 100%
}

.tooltip-white .tooltip-inner {
    bottom: 24px;
    display: none;
    position: absolute;
    text-align: center;
    width: 340px;
    z-index: 21
}

.tooltip-white .tooltip-inner.tooltip-inner-error {
    display: block
}

.tooltip-white .tooltip-inner .tooltip-text {
    color: #000;
    display: inline-block;
    font-size: 12px;
    word-wrap: break-word;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 10px 20px 0 rgba(28, 36, 44, .1);
    font-style: normal;
    padding: 10px;
    text-align: left;
    width: auto
}

.tooltip-white .tooltip-inner .tooltip-arrow {
    background-color: transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    bottom: -5px;
    box-shadow: 0 10px 20px 0 rgba(28, 36, 44, .1);
    display: inline-block;
    position: absolute
}

.tooltip-white .tooltip-inner-left {
    left: -10px;
    text-align: left
}

.tooltip-white .tooltip-inner-left .tooltip-arrow {
    left: 20px
}

.tooltip-white .tooltip-inner-center {
    left: calc(-170px + 50%);
    text-align: center
}

.tooltip-white .tooltip-inner-center .tooltip-arrow {
    left: calc(50% - 5px)
}

.tooltip-white .tooltip-inner-right {
    right: -10px;
    text-align: right
}

.tooltip-white .tooltip-inner-right .tooltip-arrow {
    right: 20px
}

.tooltip-blue {
    display: inline-block
}

.tooltip-blue .tooltip-inner-wrap {
    position: relative;
    width: 100%
}

.tooltip-blue .tooltip-inner {
    bottom: 24px;
    display: none;
    position: absolute;
    text-align: center;
    width: 340px;
    z-index: 21
}

.tooltip-blue .tooltip-inner.tooltip-inner-error {
    display: block
}

.tooltip-blue .tooltip-inner .tooltip-text {
    color: #f9f9f9;
    display: inline-block;
    font-size: 12px;
    word-wrap: break-word;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 10px 20px 0 rgba(28, 36, 44, .1);
    font-style: normal;
    padding: 10px;
    text-align: left;
    width: auto
}

.tooltip-blue .tooltip-inner .tooltip-arrow {
    background-color: transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    bottom: -5px;
    box-shadow: 0 10px 20px 0 rgba(28, 36, 44, .1);
    display: inline-block;
    position: absolute
}

.tooltip-blue .tooltip-inner-left {
    left: -10px;
    text-align: left
}

.tooltip-blue .tooltip-inner-left .tooltip-arrow {
    left: 20px
}

.tooltip-blue .tooltip-inner-center {
    left: calc(-170px + 50%);
    text-align: center
}

.tooltip-blue .tooltip-inner-center .tooltip-arrow {
    left: calc(50% - 5px)
}

.tooltip-blue .tooltip-inner-right {
    right: -10px;
    text-align: right
}

.tooltip-blue .tooltip-inner-right .tooltip-arrow {
    right: 20px
}

.tooltip-black {
    display: inline-block
}

.tooltip-black .tooltip-inner-wrap {
    position: relative;
    width: 100%
}

.tooltip-black .tooltip-inner {
    bottom: 24px;
    display: none;
    position: absolute;
    text-align: center;
    width: 340px;
    z-index: 21
}

.tooltip-black .tooltip-inner.tooltip-inner-error {
    display: block
}

.tooltip-black .tooltip-inner .tooltip-text {
    color: #d5def2;
    display: inline-block;
    font-size: 12px;
    word-wrap: break-word;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 10px 20px 0 rgba(28, 36, 44, .1);
    font-style: normal;
    padding: 10px;
    text-align: left;
    width: auto
}

.tooltip-black .tooltip-inner .tooltip-arrow {
    background-color: transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    bottom: -5px;
    box-shadow: 0 10px 20px 0 rgba(28, 36, 44, .1);
    display: inline-block;
    position: absolute
}

.tooltip-black .tooltip-inner-left {
    left: -10px;
    text-align: left
}

.tooltip-black .tooltip-inner-left .tooltip-arrow {
    left: 20px
}

.tooltip-black .tooltip-inner-center {
    left: calc(-170px + 50%);
    text-align: center
}

.tooltip-black .tooltip-inner-center .tooltip-arrow {
    left: calc(50% - 5px)
}

.tooltip-black .tooltip-inner-right {
    right: -10px;
    text-align: right
}

.tooltip-black .tooltip-inner-right .tooltip-arrow {
    right: 20px
}

.sub-wrap-with-side-bar {
    background: #f3f3f3;
    flex: 1 1
}

.sub-wrap-with-side-bar .side-bar {
    background-color: #fff;
    margin-right: 8px;
    min-width: 224px;
    width: 224px
}

.sub-wrap-with-side-bar .side-bar .side-bar-title {
    align-items: center;
    color: var(--dexc-white-primary-font-color);
    display: flex;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    justify-content: center;
    line-height: 16px;
    padding: 31px 0 27px;
    position: relative;
    text-align: center
}

.sub-wrap-with-side-bar .side-bar .side-bar-title img {
    left: 50px;
    position: absolute;
    top: 31px
}

.sub-wrap-with-side-bar .side-bar .side-bar-content .side-bar-item {
    align-items: center;
    color: var(--dexc-white-primary-font-color);
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    justify-content: center;
    line-height: 16px;
    padding: 14px 0;
    text-align: center
}

.sub-wrap-with-side-bar .side-bar .side-bar-content .selected {
    background: #f9f9f9;
    color: var(--dexc-white-primary-color)
}

.sub-wrap-with-side-bar .main-content {
    display: flex;
    flex: 1 1
}

.sub-wrap-with-side-bar .main-content .main-wrap {
    background-color: #fff;
    border-radius: 8px;
    flex: 1 1;
    margin: 8px 8px 8px 0;
    padding-left: 16px;
    padding-right: 16px
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new {
    background: #fff;
    border-bottom: 1px solid #f3f3f3;
    border-radius: 8px 8px 0 0;
    padding-top: 32px
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content {
    color: #fff;
    margin: auto;
    position: relative;
    width: 100%
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content .sub-wrap-content-title {
    align-items: center;
    display: flex;
    padding-bottom: 30px
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content .sub-wrap-content-title .main-title-text {
    color: #575759;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content .sub-wrap-content-title .sub-title-text {
    color: var(--dexc-white-primary-font-color);
    font-size: 24px;
    font-weight: 500;
    line-height: 34px
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content .sub-wrap-content-title .title-between-line {
    margin: 0 6px
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content .sub-wrap-content-btn-wrap {
    display: flex
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content .sub-wrap-content-btn-wrap .btn-selected {
    border-bottom-color: var(--dexc-white-primary-color);
    color: var(--dexc-white-primary-font-color)
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content .sub-wrap-content-btn-wrap a {
    background: transparent;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: #909090;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    margin-right: 24px;
    padding-bottom: 16px
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content .sub-wrap-content-btn-wrap a span {
    display: inline-block;
    font-weight: 500;
    height: 14px;
    line-height: 10px
}

.pagination.pagination-root {
    font-size: 12px
}

.pagination.pagination-root .pagination-input {
    background: transparent;
    font-size: 12px;
    height: 20px;
    margin: 0 6px;
    padding-left: 5px;
    padding-right: 5px;
    width: 40px
}

.pagination.pagination-root .pagination-button {
    background-color: transparent;
    font-size: 12px;
    margin-right: 10px
}

.pagination.pagination-root .pagination-arrow {
    background-color: transparent;
    border: 1px solid;
    border-radius: 2px;
    font-size: 12px;
    height: 20px;
    margin-right: 8px;
    width: 20px
}

.pagination.pagination-root .arrow {
    border-bottom: 2px solid #9ca9b5;
    border-left: 2px solid #9ca9b5;
    display: inline-block;
    height: 8px;
    transform-origin: center center;
    width: 8px
}

.pagination.pagination-root .arrow-pre {
    margin-left: 4px;
    transform: rotate(45deg)
}

.pagination.pagination-root .arrow-next {
    margin-right: 4px;
    transform: rotate(-135deg)
}

.pagination.pagination-root .pagination-confirm {
    color: #fff;
    line-height: 20px;
    min-width: 42px;
    padding: 0 8px;
    text-align: center
}

.pagination.pagination-root .pagination-button:disabled {
    cursor: not-allowed
}

.root-white .pagination-confirm:disabled {
    background-color: #ecf1f8 !important;
    color: #8a8a8e
}

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

.table-no-data .table-no-data-text {
    color: #8a8a8e;
    margin-top: 10px
}

.multiple-select,
.multiple-select-body-wrap-modal-wrapper {
    border: 1px solid #ccd2da;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    outline: none;
    position: relative
}

.multiple-select-body-wrap-modal-wrapper-value-box,
.multiple-select-value-box {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 20px;
    position: relative
}

.multiple-select-body-wrap-modal-wrapper-value-box .multiple-select-value,
.multiple-select-value-box .multiple-select-value {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.multiple-select-body-wrap-modal-wrapper-value-box .multiple-select-arrow,
.multiple-select-value-box .multiple-select-arrow {
    border: 2px solid #8a8a8e !important;
    border-left: none !important;
    border-top: none !important;
    bottom: 0;
    display: inline-block;
    height: 6px;
    margin: auto;
    position: absolute;
    right: 10px;
    top: -4px;
    transform: rotate(45deg);
    width: 6px
}

.multiple-select-body-wrap-modal-wrapper-value-box .multiple-select-arrow-rotate,
.multiple-select-value-box .multiple-select-arrow-rotate {
    animation: common-arrow-rotate-reset .2s ease-out forwards
}

.multiple-select-body-wrap-modal-wrapper-value-box .multiple-select-arrow-rotate-reset,
.multiple-select-value-box .multiple-select-arrow-rotate-reset {
    animation: common-arrow-rotate .2s ease-out forwards
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list,
.multiple-select .multiple-select-list,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 20px 0 rgba(8, 31, 64, .12);
    max-height: 0;
    max-width: 1200px;
    overflow: auto;
    position: absolute;
    top: calc(100% + 1px);
    z-index: 11
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list-wrapped,
.multiple-select .multiple-select-list-wrapped,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list-wrapped,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list-wrapped {
    display: flex;
    flex-direction: column;
    overflow-x: auto
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list-wrapped>.top-wrapped,
.multiple-select .multiple-select-list-wrapped>.top-wrapped,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list-wrapped>.top-wrapped,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list-wrapped>.top-wrapped {
    display: flex;
    flex-basis: 1
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list-wrapped>.top-wrapped li,
.multiple-select .multiple-select-list-wrapped>.top-wrapped li,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list-wrapped>.top-wrapped li,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list-wrapped>.top-wrapped li {
    padding-right: 100px;
    width: auto
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list-wrapped>.top-wrapped li .value,
.multiple-select .multiple-select-list-wrapped>.top-wrapped li .value,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list-wrapped>.top-wrapped li .value,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list-wrapped>.top-wrapped li .value {
    flex: initial
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list-wrapped>.bottom-wrapped,
.multiple-select .multiple-select-list-wrapped>.bottom-wrapped,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list-wrapped>.bottom-wrapped,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list-wrapped>.bottom-wrapped {
    display: flex
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list-wrapped>.bottom-wrapped>.bottom-list,
.multiple-select .multiple-select-list-wrapped>.bottom-wrapped>.bottom-list,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list-wrapped>.bottom-wrapped>.bottom-list,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list-wrapped>.bottom-wrapped>.bottom-list {
    border-right: 1px solid #e6ecf2;
    border-top: 1px solid #e6ecf2
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list-wrapped>.bottom-wrapped>.bottom-list:last-child,
.multiple-select .multiple-select-list-wrapped>.bottom-wrapped>.bottom-list:last-child,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list-wrapped>.bottom-wrapped>.bottom-list:last-child,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list-wrapped>.bottom-wrapped>.bottom-list:last-child {
    border-right: none
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list li,
.multiple-select .multiple-select-list li,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list li,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list li {
    align-items: center;
    color: #000;
    display: flex;
    font-size: 14px;
    min-height: 40px;
    padding-left: 16px;
    padding-right: 16px;
    text-align: left;
    white-space: nowrap;
    width: 100%
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list li .icon-checked,
.multiple-select .multiple-select-body-wrap-modal-wrapper-list li .icon-unchecked,
.multiple-select .multiple-select-list li .icon-checked,
.multiple-select .multiple-select-list li .icon-unchecked,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list li .icon-checked,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list li .icon-unchecked,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list li .icon-checked,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list li .icon-unchecked {
    font-size: 14px;
    height: 16px;
    margin-right: 8px;
    width: 16px
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list li span.value,
.multiple-select .multiple-select-list li span.value,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list li span.value,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list li span.value {
    flex: 1 1
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list li:hover,
.multiple-select .multiple-select-list li:hover,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list li:hover,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list li:hover {
    background-color: #f8fafd;
    color: var(--dexc-white-primary-color);
    transition: color .2s ease-in-out
}

.multiple-select-body-wrap-modal-wrapper-list-click,
.multiple-select-list-click {
    animation: common-click-show .2s ease-out forwards
}

.multiple-select-body-wrap-modal-wrapper-hover-click,
.multiple-select-hover-click {
    animation: common-hover-show .3s ease-out forwards
}

.multiple-select-body-wrap-modal-wrapper {
    border: none
}

.range-root-white {
    background: #fff;
    cursor: pointer;
    height: 14px;
    line-height: 14px
}

.range-root-white .range-content {
    background: var(--dexc-white-primary-color);
    color: #000;
    height: 100%;
    text-indent: 3px
}

.range-root-blue {
    background: var(--dexc-trade-primary-container-bg);
    cursor: pointer;
    height: 14px;
    line-height: 14px
}

.range-root-blue .range-content {
    background: var(--dexc-dark-primary-color);
    color: #f9f9f9;
    height: 100%;
    text-indent: 3px
}

.range-root-black {
    background: #191a1f;
    cursor: pointer;
    height: 14px;
    line-height: 14px
}

.range-root-black .range-content {
    background: var(--dexc-dark-primary-color);
    color: #d5def2;
    height: 100%;
    text-indent: 3px
}

.rectangle-radio {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap
}

.rectangle-radio-item-base {
    background-color: #fff;
    border: 1px solid #dfe2e7;
    border-right-width: 0;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    line-height: 16px;
    padding: 5px 15px
}

.rectangle-radio-item-base-selected {
    background-color: var(--dexc-primary-color) !important;
    border-color: var(--dexc-primary-color) !important;
    border-right-width: 1px;
    color: #fff !important
}

.rectangle-radio-item-base-first {
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px
}

.rectangle-radio-item-base-last {
    border-bottom-right-radius: 2px;
    border-right-width: 1px;
    border-top-right-radius: 2px
}

.rectangle-radio-clear-border-left {
    border-left-width: 0
}

.rectangle-radio-item-only-one {
    border-radius: 2px;
    border-width: 1px
}

.table-fix-base {
    background-color: #fff;
    position: sticky !important;
    z-index: 1 !important
}

.table-fix-column-wrap {
    flex: 1 1 !important;
    overflow: auto !important;
    position: relative
}

.table-fix-column-wrap td,
.table-fix-column-wrap th {
    padding: 5px;
    white-space: nowrap
}

.table-fix-left-shaow-wrap .table-fix-left-last:after {
    bottom: 0;
    box-shadow: inset 10px 0 8px -8px #00000026;
    content: "";
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(100%);
    width: 30px
}

.table-fix-right-shaow-wrap .table-fix-right-last:before {
    bottom: 0;
    box-shadow: inset -10px 0 8px -8px #00000026;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translate(-100%);
    width: 30px
}

.table-fix-left-right-shaow-wrap .table-fix-left-last:after {
    bottom: 0;
    box-shadow: inset 10px 0 8px -8px #00000026;
    content: "";
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(100%);
    width: 30px
}

.table-fix-left-right-shaow-wrap .table-fix-right-last:before {
    bottom: 0;
    box-shadow: inset -10px 0 8px -8px #00000026;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translate(-100%);
    width: 30px
}

.container-ed1f670f {
    --table-content-height: calc(var(--container-height) - 92px);
    background-color: var(--dexc-dark-trade-bg);
    height: 100%;
    overflow: hidden
}

.container-ed1f670f .dex-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    width: 100%
}

.container-ed1f670f .dex-tabs .dex-tabs-content-holder {
    flex: 1 1;
    overflow: auto
}

.container-ed1f670f .dex-tabs .dex-tabs-content-holder .dex-tabs-content,
.container-ed1f670f .dex-tabs .dex-tabs-content-holder .dex-tabs-content .dex-tabs-tabpane {
    height: 100%
}

.container-ed1f670f .dex-table-wrapper {
    --dex-table-bg: var(--dexc-dark-trade-bg);
    --dex-table-thead-bg: var(--dexc-dark-trade-bg);
    --dex-table-expand-row-bg: var(--dexc-dark-trade-bg);
    --dex-table-tbody-cell-padding: 8px 5px;
    --dex-table-thead-cell-padding: 8px 5px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: unset
}

.container-ed1f670f .dex-table-wrapper .dex-spin {
    flex: 1 1
}

.container-ed1f670f .dex-table-wrapper .dex-spin .dex-spin-container {
    height: 100%
}

.container-ed1f670f .dex-table-wrapper .dex-table {
    height: 100%;
    min-height: unset
}

.container-ed1f670f .dex-table-wrapper .dex-table .dex-table-container {
    height: 100%
}

.container-ed1f670f .dex-table-wrapper .dex-table .dex-table-container .dex-table-content {
    height: 100%;
    min-height: var(--table-content-height)
}

.container-ed1f670f .dex-table-wrapper .dex-table .dex-table-container .dex-table-content thead>tr>th {
    position: sticky;
    top: 0;
    z-index: 3
}

.container-ed1f670f .dex-table-wrapper .dex-table .dex-table-container .dex-table-content th.dex-table-cell-fix-left,
.container-ed1f670f .dex-table-wrapper .dex-table .dex-table-container .dex-table-content th.dex-table-cell-fix-right {
    z-index: 4
}

.container-ed1f670f .dex-table-wrapper .dex-table .dex-table-container .dex-table-content .dex-empty {
    min-height: var(--table-content-height)
}

.container-ed1f670f .dex-table-wrapper .dex-table .dex-table-cell {
    font-size: 12px !important
}

.container-ed1f670f .dex-table-wrapper .dex-table .dex-button {
    font-size: 12px
}

.container-ed1f670f .dex-table-wrapper:not(.dex-table-no-data) table thead tr>th:first-of-type {
    padding-left: 16px !important
}

.container-ed1f670f .dex-table-wrapper:not(.dex-table-no-data) table thead tr>th:last-of-type {
    padding-right: 16px !important
}

.container-ed1f670f .dex-table-wrapper:not(.dex-table-no-data) table tbody tr>td:first-of-type {
    padding-left: 16px !important
}

.container-ed1f670f .dex-table-wrapper:not(.dex-table-no-data) table tbody tr>td:last-of-type {
    padding-right: 16px !important
}

.trade-page-layout-classic .container-ed1f670f {
    margin-top: 6px
}

.trade-page-layout-classic .container-ed1f670f,
.trade-page-layout-one .container-ed1f670f {
    --container-height: 380px
}

.trade-page-layout-three .container-ed1f670f,
.trade-page-layout-two .container-ed1f670f {
    --container-height: 412px
}

@media only screen and (max-width: 1320px) {

    .trade-page-layout-three .container-ed1f670f,
    .trade-page-layout-two .container-ed1f670f {
        margin-top: 6px
    }
}

.extra-d11ff821 {
    align-items: center;
    display: flex;
    gap: 24px;
    padding-left: 10px
}

.tip-b3e729f2 {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 5px
}

.convertedText-ff7032c7 {
    color: var(--dex-secondary-font-color);
    text-align: left;
    white-space: nowrap
}

.alertContainer-b5440dcd {
    position: absolute;
    top: 40px;
    width: 100%;
    z-index: 7
}

.alertContainer-b5440dcd .link-dbedb904 {
    color: var(--dex-primary-color)
}

.empty-c9bc8421 {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 228px !important;
    justify-content: center;
    margin: 0 !important;
    overflow: hidden
}

.notLogin-a7689fe3 {
    color: var(--dex-secondary-font-color);
    font-size: 16px;
    font-weight: 400;
    height: 228px
}

.btn-ccc50bef {
    font-size: 16px !important
}

.positionFormInput-b95945e1 {
    position: relative
}

.positionFormInput-b95945e1 .input-e644bf25 {
    text-align: left
}

.positionFormInput-b95945e1 .label-a2075899 {
    background-color: var(--dex-component-background-color);
    border-radius: 8px;
    cursor: text;
    font-size: 14px;
    height: calc(100% - 2px);
    left: 50%;
    line-height: 20px;
    padding: 4px 12px;
    position: absolute;
    text-align: left;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2px)
}

.overlay-b590578c {
    text-align: left
}

.refreshButton-bd052289 {
    align-items: center;
    display: flex;
    gap: 4px;
    justify-content: flex-start
}

.cnacelAll-cd143def {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr
}

.cnacelAll-cd143def .dex-radio-group-tag {
    background-color: transparent;
    display: contents
}

.cnacelAll-cd143def .dex-radio-group-tag .dex-radio-group-tag-item {
    align-items: center;
    background-color: var(--dex-component-background-color);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    height: 44px;
    justify-content: center;
    line-height: 44px;
    padding: 0 12px;
    transition: all .2s ease
}

.cnacelAll-cd143def .dex-radio-group-tag .dex-radio-group-tag-item.dex-radio-group-tag-item-active {
    background-color: rgba(1, 115, 229, .07);
    color: var(--dexc-primary-color)
}

.cancelAllItem-c7279a34 {
    align-items: center;
    background: var(--dex-common-border-color);
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--dex-primary-font-color);
    cursor: pointer;
    display: flex;
    font-size: 16px;
    justify-content: center;
    padding: 15px 0 14px
}

.cancelAllItem-c7279a34.cancelAllItemActive-a31db5fe {
    border: 1px solid var(--dex-primary-font-color)
}

.tableInModal-b4d95805 .dex-table-wrapper {
    --dex-table-tbody-cell-padding: 8px 16px;
    --dex-table-thead-cell-padding: 8px 16px;
    min-height: unset
}

.tableInModal-b4d95805 .dex-table-wrapper .dex-table {
    min-height: unset;
    overflow: unset
}

.tableInModal-b4d95805 .dex-table-wrapper .dex-table .dex-table-container .dex-table-body::-webkit-scrollbar,
.tableInModal-b4d95805 .dex-table-wrapper .dex-table .dex-table-container .dex-table-content::-webkit-scrollbar {
    border-radius: 4px;
    height: 6px;
    width: 6px
}

.tableInModal-b4d95805 .dex-table-wrapper .dex-table .dex-table-container .dex-table-body::-webkit-scrollbar-thumb,
.tableInModal-b4d95805 .dex-table-wrapper .dex-table .dex-table-container .dex-table-content::-webkit-scrollbar-thumb {
    background-color: var(--dex-quaternary-font-color);
    border-radius: 4px
}

.tableInModal-b4d95805 .dex-table-wrapper .dex-table .dex-table-container .dex-table-body::-webkit-scrollbar-corner,
.tableInModal-b4d95805 .dex-table-wrapper .dex-table .dex-table-container .dex-table-content::-webkit-scrollbar-corner {
    background: "transparent"
}

.tableInModal-b4d95805 .dex-table-wrapper .dex-table .dex-table-container .dex-table-cell {
    font-size: 12px !important
}

.tableInModal-b4d95805 .dex-table-wrapper .dex-table .dex-table-container .dex-button {
    font-size: 12px
}

.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-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;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all
}

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

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

.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.sunx.io/v4/dex-web/static/media/sunperp-watermark.ad125ab7.svg) 50% no-repeat
}

div.chart-outer-wrap .chart-inner-wrap .base-kline-white .dex_chart_container {
    background: url(https://static.sunx.io/v4/dex-web/static/media/sunperp-watermark-white.ad125ab7.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 .header-wrap {
    align-items: center;
    display: flex;
    height: 64px;
    justify-content: space-between;
    margin: 0 auto;
    position: relative;
    width: 1200px;
    z-index: 999
}

.global-common-header .header-wrap>a {
    font-size: 0
}

.global-common-header .header-wrap.full-layout {
    display: flex;
    gap: 50px;
    justify-content: space-between;

    padding: 2px 32px;
    width: 100%
}

.global-common-header .header-wrap.full-layout .nav-wraper.router-item {
    flex: 1 1
}

.global-common-header .header-wrap .nav-wraper {
    align-items: center;
    display: flex;
    gap: 32px;
    justify-content: flex-start
}

.global-common-header .header-wrap .nav-wraper a {
    color: #8a8a8e;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    position: relative
}

.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 a .route-tag {
    background: var(--Functional-Orange_P20, rgba(251, 185, 48, .2));
    border-radius: 14px 14px 14px 0;
    color: var(--Functional-Orange, #fbb930);
    font-size: 10px;
    font-weight: 400;
    height: 14px;
    left: 100%;
    padding: 1px 3px;
    position: absolute;
    text-align: center;
    transform: translateY(-50%);
    width: -moz-max-content;
    width: max-content;
    word-spacing: 0
}

.global-common-header .header-wrap .nav-wraper .header-more-menu {
    align-items: center;
    color: #8a8a8e;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    gap: 4px;
    position: relative
}

.global-common-header .header-wrap .nav-wraper .header-more-menu:hover {
    color: #fff
}

.global-common-header .header-wrap .nav-wraper .header-more-menu:hover .arrow-icon svg path {
    fill: #fff
}

.global-common-header .header-wrap .nav-wraper .header-more-menu .arrow-icon {
    transition: transform .3s ease
}

.global-common-header .header-wrap .nav-wraper .dex-dropdown-open .header-more-menu .arrow-icon {
    transform: rotate(180deg)
}

.nav-wraper.wallet {
    gap: 12px
}

.nav-wraper.wallet .deposit-button-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative
}

.nav-wraper.wallet .wallet-connect {
    background: transparent
}

.nav-wraper.wallet .wallet-connect .inner-content {
    align-items: center;
    background: #1e90ff;
    border-radius: 30px;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    gap: 10px;
    height: 38px;
    justify-content: center;
    padding: 2px 12px;
    position: relative
}


.nav-wraper.wallet .wallet-connect .inner-content:hover {
    align-items: center;
    background: #4682b4;
    border-radius: 30px;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    gap: 10px;
    height: 38px;
    justify-content: center;
    padding: 2px 12px;
    position: relative
}

.nav-wraper.wallet .wallet-connect .inner-content-modal {
    align-items: center;
    background-color: rgb(39, 48, 53);
    border-radius: 3px;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    gap: 10px;
    height: 46px;
    justify-content: center;
    padding: 2px 12px 2px 30px;
    position: relative
}

.nav-wraper.wallet .wallet-connect .inner-content-modal:hover {
    align-items: center;
    background-color: rgb(55, 65, 73);
    border-radius: 3px;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    gap: 10px;
    height: 46px;
    justify-content: center;
    padding: 2px 12px 2px 30px;
    position: relative
}

.nav-wraper.wallet .wallet-connect .inner-content-modal-blue {
    align-items: center;
    background-color: #1e90ff;
    border-radius: 3px;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    gap: 10px;
    height: 46px;
    justify-content: center;
    padding: 2px 12px 2px 30px;
    position: relative
}

.nav-wraper.wallet .wallet-connect .inner-content-modal-blue:hover {
    align-items: center;
    background-color: #4682b4;
    border-radius: 3px;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    gap: 10px;
    height: 46px;
    justify-content: center;
    padding: 2px 12px 2px 30px;
    position: relative
}

.global-common-header .header-wrap .nav-wraper.wallet .wallet-connect.wallet-connected .inner-content {
    background: #080808
}

.global-common-header .header-wrap .nav-wraper.wallet .wallet-connect.wallet-connected img {
    border-radius: 50%;
    height: 24px;
    width: 24px
}

.global-common-header .header-wrap .nav-wraper.wallet .wallet-connect.wallet-connected .dex-arrow-icon {
    color: #776ba1
}

.global-common-header .header-wrap .nav-wraper.wallet .wallet-connect.wallet-connect-button .inner-content {
    padding: 2px 24px
}

.global-common-header .header-wrap .logo {
    height: 32px;
    margin: 0 auto;
    width: auto
}

.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: #1e90ff
}

.addressDropDown .btn-two .wallet-deposit .inner-content:hover {
    background: #4682b4
}


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

.header-more-dropdown-wrapper {
    border-radius: 0;
    box-shadow: none
}

.header-more-dropdown {
    background-color: var(--dexc-secondary-container-bg);
    border: 1px solid var(--dexc-common-border-color);
    border-radius: 8px;
    box-shadow: var(--dex-primary-box-shadow);
    margin-top: 18px;
    min-width: 240px;
    padding: 4px 0
}

.header-more-dropdown .dropdown-section-title {
    color: var(--dexc-secondary-font-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    padding: 4px 16px 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.header-more-dropdown .dropdown-menu-items {
    display: flex;
    flex-direction: column
}

.header-more-dropdown a {
    align-items: center;
    border-radius: 4px;
    color: var(--dexc-primary-font-color);
    display: flex;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
    line-height: 18px;
    margin: 0 4px 4px;
    padding: 13px 16px;
    text-decoration: none;
    transition: background .2s ease
}

.header-more-dropdown a.active,
.header-more-dropdown a:hover {
    background: var(--dexc-common-border-color)
}

.header-more-dropdown a .menu-item-icon {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 16px;
    justify-content: center;
    width: 16px
}

.header-more-dropdown a .menu-item-icon img {
    display: block;
    height: 100%;
    width: 100%
}

.header-more-dropdown a .menu-item-icon svg {
    height: 100%;
    width: 100%
}

.header-more-dropdown a .menu-item-content {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    gap: 2px
}

.header-more-dropdown a .menu-item-content .menu-item-title {
    color: var(--dexc-primary-font-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px
}

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

.tronWalletSelectWraper-aaacfdb0 .dex-select {
    width: 100%
}

.tronWalletSelectWraper-aaacfdb0 .dex-select-large .dex-select-selector {
    border-radius: 12px
}

.tronWalletSelectWraper-aaacfdb0 .dex-select-selection-item,
.tronWalletSelectWraper-aaacfdb0 .dex-select-selector .dex-select-selection-search-input {
    color: #fff !important;
    display: block;
    font-size: 16px !important;
    font-weight: 500;
    height: 34px;
    padding: 7px 0 !important
}

.selectTips-f45361a3 {
    align-items: center;
    color: #8a8a8e;
    display: flex;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 24px 0;
    white-space: nowrap
}

.selectTips-f45361a3 span {
    padding: 0 4px
}

.selectTips-f45361a3 .dex-divider {
    background-color: #343434
}

.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: 36px;
    width: 36px
}

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

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

.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-divider {
    background-color: var(--dex-common-border-color);
    border: none;
    height: 1px;
    width: 100%
}

.invite-dialog-content {
    padding-bottom: 14px
}

.invite-dialog-content .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-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-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
}

.star-border-container {
    border-radius: 20px;
    display: inline-block;
    overflow: hidden;
    position: relative
}

.star-border-container-modal {
    border-radius: 15px;
    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(--dexc-white-primary-container-bg);
    border: 2px solid #fff;
    border-radius: 100%;
    box-sizing: content-box;
    overflow: hidden
}

.dex-token-symbol-loading {
    background-color: var(--dex-quaternary-font-color)
}

.dex-token-symbol[alt] {
    display: inline-block;
    text-align: center
}

.dex-token-symbol-list {
    align-items: center;
    display: inline-flex;
    justify-content: flex-start
}

.dex-token-symbol-list-item:not(.dex-token-symbol-list-item:first-child) {
    margin-left: -6px
}

.dex-token-symbol-list-placeholder {
    align-items: center;
    background-color: var(--dex-tertiary-font-color);
    border: 2px solid #fff;
    border-radius: 100%;
    box-sizing: content-box;
    color: #fff;
    cursor: default;
    display: flex;
    font-size: 12px;
    font-weight: 400;
    justify-content: center;
    line-height: 16px;
    margin-left: -6px;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

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

.fullScreenTipsBar {
    background-color: rgba(251, 185, 48, .2);
    color: #fbb930;
    cursor: pointer;
    font-size: 14px;
    font-style: normal;
    height: 32px;
    left: 0;
    line-height: 32px;
    position: absolute;
    right: 0;
    top: 64px;
    width: 100%;
    z-index: 1000
}

.fullScreenTipsBar p {
    margin: 0 auto;
    max-width: 1200px;
    text-align: left
}

.deposit-tip {
    background: #3c3c3c;
    border-radius: 90px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
    display: inline-block;
    font-size: 12px;
    line-height: 14px;
    padding: 4px 12px;
    position: absolute;
    top: 52px;
    white-space: nowrap
}

.deposit-tip .deposit-tip-content {
    align-items: center;
    display: flex
}

.deposit-tip .tip-arrow {
    border-bottom: 8px solid #3c3c3c;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    height: 0;
    left: 50%;
    position: absolute;
    top: -8px;
    transform: translateX(-50%);
    width: 0
}

.deposit-dialog-tips {
    background: rgba(96, 1, 255, .27);
    border-radius: 12px;
    cursor: pointer;
    margin: 0 0 20px;
    padding: 16px 24px
}

.deposit-dialog-tips .tips-content {
    display: flex;
    flex-direction: column
}

.deposit-dialog-tips .tips-header {
    align-items: center;
    display: flex
}

.deposit-dialog-tips .tips-header .party-emoji {
    font-size: 24px;
    line-height: 1
}

.deposit-dialog-tips .tips-header .main-text {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px
}

.deposit-dialog-tips .tips-details {
    color: v #8a8a8e;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    padding-left: 24px
}

.dex-tabs {
    overflow: hidden
}

.dex-tabs-nav {
    align-items: center;
    display: flex;
    width: 100%
}

.dex-tabs-nav-wrap {
    display: flex;
    flex: auto;
    overflow: hidden;
    position: relative;
    transform: translate(0);
    white-space: nowrap
}

.dex-tabs-nav-wrap:after,
.dex-tabs-nav-wrap:before {
    bottom: 0;
    content: "";
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: opacity .3s;
    width: 32px;
    z-index: 1
}

.dex-tabs-nav-wrap:before {
    box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, .08);
    left: 0
}

.dex-tabs-nav-wrap:after {
    box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, .08);
    right: 0
}

.dex-tabs-nav-wrap .dex-tabs-nav-list {
    align-items: center;
    display: flex;
    justify-content: flex-start
}

.dex-tabs-nav-wrap .dex-tabs-nav-list .dex-tabs-ink-bar {
    display: none
}

.dex-tabs-nav-wrap .dex-tabs-nav-list .dex-tabs-tab {
    color: var(--dex-secondary-font-color);
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap
}

.dex-tabs-nav-wrap .dex-tabs-nav-list .dex-tabs-tab:hover {
    color: var(--dex-primary-font-color)
}

.dex-tabs-nav-wrap .dex-tabs-nav-list .dex-tabs-tab:focus {
    outline: none
}

.dex-tabs-nav-wrap .dex-tabs-nav-list .dex-tabs-tab.dex-tabs-tab-active {
    color: var(--dex-primary-font-color)
}

.dex-tabs-nav-wrap .dex-tabs-nav-list .dex-tabs-tab-btn:focus {
    outline: none
}

.dex-tabs-nav-wrap .dex-tabs-nav-list .dex-tabs-tab.dex-tabs-tab-disabled {
    color: var(--dex-quaternary-font-color);
    cursor: not-allowed
}

.dex-tabs-nav .dex-tabs-nav-wrap.dex-tabs-nav-wrap-ping-left:before,
.dex-tabs-nav .dex-tabs-nav-wrap.dex-tabs-nav-wrap-ping-right:after {
    opacity: 1
}

.dex-tabs-nav .dex-tabs-extra-content {
    flex: none
}

.dex-tabs-content-holder .dex-tabs-tabpane:focus {
    outline: none
}

.dex-tabs-content-holder::-webkit-scrollbar {
    height: var(--dex-scrollbar-width);
    width: var(--dex-scrollbar-width)
}

.dex-tabs-content-holder::-webkit-scrollbar-thumb {
    background-color: var(--dex-quaternary-font-color);
    border-radius: var(--dex-scrollbar-redius)
}

.dex-tabs-content-holder::-webkit-scrollbar-track {
    background-color: var(--dex-scrollbar-track-bg)
}

.dex-tabs-content-holder::-webkit-scrollbar-corner {
    background-color: var(--dex-scrollbar-corner-bg)
}

.dex-tabs-nav-operations,
.dex-tabs-nav-operations .dex-tabs-nav-more,
.dex-tabs-nav-operations-hidden,
.dex-tabs-tabpane-hidden {
    display: none
}

.dex-tabs-card>.dex-tabs-nav {
    background-color: var(--dex-secondary-container-bg)
}

.dex-tabs-card>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab {
    border-top: 2px solid transparent;
    font-size: 16px;
    line-height: 20px;
    padding: 9px 30px;
    transition: background-color .3s
}

.dex-tabs-card>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab:hover {
    background-color: var(--dex-component-background-color);
    transition: background-color .3s
}

.dex-tabs-card>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab.dex-tabs-tab-active {
    background-color: var(--dex-primary-container-bg);
    border-top-color: var(--dex-primary-color);
    transition: background-color .3s
}

.dex-tabs-card>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab.dex-tabs-tab-disabled:hover {
    background-color: unset
}

.dex-tabs-line>.dex-tabs-nav {
    position: relative
}

.dex-tabs-line>.dex-tabs-nav:before {
    border-bottom: 1px solid var(--dex-common-border-color);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    width: 100%
}

.dex-tabs-line>.dex-tabs-nav .dex-tabs-nav-list>.dex-tabs-ink-bar {
    background-color: var(--dex-primary-color);
    border-radius: 2px;
    bottom: 0;
    display: block;
    height: 2px;
    position: absolute
}

.dex-tabs-line>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab {
    font-size: 16px;
    line-height: 16px;
    margin-right: 24px;
    padding: 12px 0;
    white-space: nowrap
}

.dex-tabs-line>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab:last-child {
    margin-right: 0
}

.dex-tabs-line>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab.dex-tabs-tab-active {
    position: relative
}

.dex-tabs-tag {
    padding: 4px 0
}

.dex-tabs-tag>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab {
    font-size: 12px;
    line-height: 16px;
    margin-right: 8px;
    padding: 4px 12px;
    transition: background-color .3s
}

.dex-tabs-tag>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab:hover {
    transition: background-color .3s
}

.dex-tabs-tag>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab:last-child {
    margin-right: 0
}

.dex-tabs-tag>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab.dex-tabs-tab-active {
    background-color: var(--dex-component-background-color);
    border-radius: 4px;
    position: relative;
    transition: background-color .3s
}

.vip {
    align-items: center;
    background: url(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-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
}

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

.footer .footer-container .footer-main .footer-brand .brand-tagline {
    color: var(--dexc-footer-font-color);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    margin: 30px 0 12px
}

.footer .footer-container .footer-main .footer-brand .brand-slogan {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    opacity: .6
}

.footer .footer-container .footer-main .footer-brand .contact-email {
    align-items: center;
    color: var(--dexc-dark-primary-font-color);
    display: flex;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    margin-top: 56px
}

.footer .footer-container .footer-main .footer-brand .contact-email img {
    height: 14px;
    margin-right: 8px;
    width: 14px
}

.footer .footer-container .footer-main .footer-nav {
    display: flex;
    gap: 60px;
    margin: 0 40px
}

.footer .footer-container .footer-main .footer-nav .nav-column {
    margin-right: 16px;
    width: 200px
}

.footer .footer-container .footer-main .footer-nav .nav-column:last-of-type {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-right: 0
}

.footer .footer-container .footer-main .footer-nav .nav-column .nav-title {
    color: var(--dexc-dark-primary-font-color);
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 8px
}

.footer .footer-container .footer-main .footer-nav .nav-column .nav-links li {
    margin-bottom: 8px
}

.footer .footer-container .footer-main .footer-nav .nav-column .nav-links li a {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.footer .footer-container .footer-main .footer-nav .nav-column .nav-links li a:hover {
    color: var(--dexc-dark-primary-font-color)
}

.footer .footer-container .footer-main .scroll-to-top {
    bottom: 166px;
    cursor: pointer;
    opacity: 1;
    position: fixed;
    right: calc(50% - 576px);
    transform: translateY(0);
    transition: all .3s ease;
    z-index: 99999
}

.footer .footer-container .footer-main .scroll-to-top .scroll-button {
    align-items: center;
    background-color: var(--dexc-footer-up-to-top-bg);
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    cursor: pointer;
    display: flex;
    height: 48px;
    justify-content: center;
    transition: all .3s ease;
    width: 48px
}

.footer .footer-container .footer-main .scroll-to-top .scroll-button:hover {
    background-color: var(--dexc-footer-up-to-top-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    transform: translateY(-2px)
}

.footer .footer-container .footer-main .scroll-to-top .scroll-button img {
    height: 24px;
    width: 24px
}

.footer .footer-container .footer-bottom {
    padding-bottom: 40px
}

.footer .footer-container .footer-bottom .footer-divider {
    background-color: var(--dexc-pure-white-color);
    height: 1px;
    margin-bottom: 56px;
    opacity: .2
}

.footer .footer-container .footer-bottom .footer-bottom-content {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.footer .footer-container .footer-bottom .footer-bottom-content .copyright {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px
}

.footer .footer-container .footer-bottom .footer-bottom-content .social-media {
    display: flex
}

.footer .footer-container .footer-bottom .footer-bottom-content .social-media a {
    align-items: center;
    background-color: var(--dexc-dark-component-bg-color);
    border-radius: 50%;
    display: flex;
    height: 40px;
    justify-content: center;
    margin-left: 16px;
    text-decoration: none;
    transition: all .3s ease;
    width: 40px
}

.footer .footer-container .footer-bottom .footer-bottom-content .social-media a img {
    height: 24px;
    width: 24px
}

.footer .footer-container .footer-bottom .footer-bottom-content .social-media a:hover {
    background-color: var(--dexc-footer-icon-hover-bg);
    transform: translateY(-2px)
}

.footer .footer-container .footer-bottom .footer-bottom-content .social-media a span {
    color: var(--dexc-dark-primary-font-color);
    font-size: 16px;
    font-weight: 500
}

.footer-m {
    min-width: 100%
}

.footer-m .footer-container {
    padding: 32px 24px 80px;
    width: 100%
}

.footer-m .footer-container .footer-main {
    display: block;
    margin-bottom: 16px
}

.footer-m .footer-container .footer-main .footer-brand {
    width: 100%
}

.footer-m .footer-container .footer-main .footer-brand .brand-logo {
    text-align: center
}

.footer-m .footer-container .footer-main .footer-brand .brand-logo img {
    height: auto;
    width: 110px
}

.footer-m .footer-container .footer-main .footer-brand .brand-slogan,
.footer-m .footer-container .footer-main .footer-brand .brand-tagline,
.footer-m .footer-container .footer-main .footer-brand .nav-links {
    display: none
}

.footer-m .footer-container .footer-main .footer-brand .contact-email {
    gap: 8px;
    justify-content: center;
    margin-top: 0
}

.footer-m .footer-container .footer-bottom .footer-divider,
.footer-m .footer-container .footer-main .footer-nav {
    display: none
}

.footer-m .footer-container .footer-bottom .footer-bottom-content {
    display: block
}

.footer-m .footer-container .footer-bottom .footer-bottom-content .copyright {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    text-align: center
}

.footer-m .footer-container .footer-bottom .footer-bottom-content .social-media {
    justify-content: center;
    padding-top: 16px
}

.sub-wrap {
    background: #1b2945;
    border-top: 1px solid #171c2c;
    height: 82px;
    padding-top: 47px
}

.sub-wrap .sub-wrap-content {
    color: #fff;
    display: flex;
    height: 34px;
    margin: auto;
    position: relative;
    width: 1320px
}

.sub-wrap .sub-wrap-content .sub-wrap-content-title {
    align-items: center;
    display: flex;
    padding-bottom: 12px
}

.sub-wrap .sub-wrap-content .sub-wrap-content-title img {
    height: 20px;
    width: 20px
}

.sub-wrap .sub-wrap-content .sub-wrap-content-title span {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin-left: 12px
}

.sub-wrap .sub-wrap-content .sub-wrap-content-btn-wrap {
    display: flex;
    margin-left: 40px
}

.sub-wrap .sub-wrap-content .sub-wrap-content-btn-wrap .btn-selected {
    border-bottom-color: var(--dexc-primary-color);
    color: #fff
}

.sub-wrap .sub-wrap-content .sub-wrap-content-btn-wrap a {
    background: transparent;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: #87a2cd;
    display: inline-block;
    font-size: 14px;
    margin-left: 40px
}

.sub-wrap .sub-wrap-content .sub-wrap-content-btn-wrap a span {
    display: inline-block;
    font-weight: 500;
    height: 14px;
    line-height: 10px
}

.tooltip-new {
    display: inline-block;
    position: relative
}

.tooltip-popup {
    display: flex;
    flex-direction: column;
    opacity: 0;
    position: absolute;
    z-index: 901
}

.tooltip-popup .tooltip-popup-blue-font {
    color: var(--dexc-white-primary-color)
}

.tooltip-popup .tooltip-popup-arrow {
    background-color: transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    box-shadow: 0 10px 20px 0 rgba(28, 36, 44, .1);
    display: inline-block;
    height: 0;
    width: 0
}

.tooltip-popup .tooltip-popup-arrow-top {
    border-top: 5px solid #fff
}

.tooltip-popup .tooltip-popup-arrow-bottom {
    border-bottom: 5px solid #fff
}

.tooltip-popup .tooltip-popup-arrow-left {
    border-bottom: 5px solid transparent;
    border-left: 5px solid #fff;
    border-top: 5px solid transparent;
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%) !important
}

.tooltip-popup .tooltip-popup-arrow-right {
    border: 5px solid transparent;
    border-left: none;
    border-right-color: #fff;
    left: -5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) !important
}

.tooltip-popup .tooltip-popup-tip {
    color: #000;
    display: inline-block;
    font-size: 12px;
    width: 208px;
    word-wrap: break-word;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 10px 20px 0 rgba(28, 36, 44, .1);
    box-sizing: border-box;
    font-style: normal;
    padding: 10px;
    text-align: left
}

.tooltip-popup .tooltip-popup-tip-auto {
    white-space: nowrap;
    width: auto
}

.tooltip-popup-open {
    opacity: 1
}

.tooltip-popup-left .tooltip-popup-arrow {
    margin-left: 10px
}

.tooltip-popup-middle {
    transform: translateX(-50%)
}

.tooltip-popup-middle .tooltip-popup-arrow {
    margin-left: 50%;
    transform: translateX(-50%)
}

.tooltip-popup-direction-left .tooltip-popup-arrow,
.tooltip-popup-direction-right .tooltip-popup-arrow {
    margin-left: unset
}

.tooltip-popup-right .tooltip-popup-arrow {
    margin-left: calc(100% - 20px)
}

.blue-font {
    color: var(--dexc-primary-hover-color)
}

.layout-bb2281db {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: inherit;
    --layout-margin: 8px;
    --2x-layout-margin: calc(var(--layout-margin)*2);
    --3x-layout-margin: calc(var(--layout-margin)*3);
    --4x-layout-margin: calc(var(--layout-margin)*4)
}

.layout-bb2281db .box-d159b4f3 {
    background-color: var(--dexc-dark-trade-bg);
    border: 1px solid var(--dexc-dark-base-border-color)
}

.layout-bb2281db .box-d159b4f3:not(.footer-d6972fcb) {
    border-radius: var(--dex-border-radius-xl);
    overflow: hidden
}

.classicLayout-ba638505 {
    --layout-contract-list-h: 560px;
    --layout-contract-list-w: 320px;
    --layout-assets-w: 320px;
    --layout-assets-h: 467px;
    --layout-chart-h: 560px;
    --layout-bidask-w: 280px;
    --layout-deal-w: 280px;
    --layout-footer-h: 24px;
    --layout-chart-w: calc(100vw - var(--layout-bidask-w) - var(--layout-deal-w) - var(--layout-contract-list-w) - var(--4x-layout-margin));
    --layout-chart-min-w: calc(var(--trade-page-min-screen-width) - var(--layout-bidask-w) - var(--layout-contract-list-w) - var(--4x-layout-margin));
    --layout-order-h: 467px;
    --layout-order-w: var(--layout-chart-w);
    --layout-order-min-w: var(--layout-chart-min-w);
    --layout-transaction-panel-min-h: 500px;
    --layout-transaction-panel-h: calc(100vh - var(--layout-chart-h) - var(--layout-order-h) - var(--dex-header-height) - var(--layout-footer-h) - var(--3x-layout-margin));
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px
}

.classicLayout-ba638505 .top-c18336c7 {
    display: flex;
    gap: var(--layout-margin);
    margin-left: var(--layout-margin);
    margin-right: var(--layout-margin);
}

.classicLayout-ba638505 .top-c18336c7 .t1-f30ce0e2 {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.classicLayout-ba638505 .top-c18336c7 .t2-c8594ea8 {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    gap: 4px
}

.classicLayout-ba638505 .contractList-b517fbb3 {
    transition: height .3s
}

.classicLayout-ba638505 .contractList-b517fbb3.expanded-f8db2c05 {
    height: calc(var(--layout-contract-list-h) + var(--layout-assets-h) - 40px)
}

.classicLayout-ba638505 .assetsInfo-fd796e29 {
    overflow: visible !important;
    transition: height .3s
}

.classicLayout-ba638505 .assetsInfo-fd796e29.collapsed-ffa5a79b {
    height: 40px
}

.classicLayout-ba638505 .transactionPanel-ea956296 {
    height: var(--layout-transaction-panel-h);
    margin-left: var(--layout-margin);
    margin-right: var(--layout-margin)
}

.classicLayout-ba638505 .bidask-e363683c,
.classicLayout-ba638505 .dealDetail-bcbcde52 {
    max-height: calc(var(--layout-chart-h) + var(--layout-order-h) + var(--layout-margin))
}

.classicLayout-ba638505 .footer-d6972fcb {
    position: sticky
}

.classicLayout-ba638505 .dex-slider-wrapper {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.classicLayout-ba638505.combined-d8492a3b {
    --layout-chart-w: calc(100vw - var(--layout-bidask-w) - var(--layout-contract-list-w) - var(--3x-layout-margin))
}

.proLayout-d8c0c56d {
    --layout-assets-w: 280px;
    --layout-chart-h: 600px;
    --layout-order-h: 600px;
    --layout-order-w: 280px;
    --layout-bidask-w: 280px;
    --layout-bidask-h: 600px;
    --layout-deal-w: 280px;
    --layout-deal-h: 600px;
    --layout-footer-h: 24px;
    --layout-chart-w: calc(100vw - var(--layout-bidask-w) - var(--layout-deal-w) - var(--layout-deal-w) - var(--4x-layout-margin));
    --layout-transaction-panel-min-h: 500px;
    --layout-assets-min-h: var(--layout-transaction-panel-min-h);
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: var(--layout-footer-h)
}

.proLayout-d8c0c56d .top-c18336c7 {
    display: flex;
    flex: 1 1;
    flex-direction: row;
    gap: var(--layout-margin);
    margin: var(--layout-margin)
}

.proLayout-d8c0c56d .top-c18336c7 .topLeft-a9d4e7de {
    display: flex;
    /* flex: 1 1; */
    flex-direction: column;
    gap: var(--layout-margin)
}

.proLayout-d8c0c56d .top-c18336c7 .topLeft-a9d4e7de .topLeftTop-bbc517ca {
    display: flex;
    gap: var(--layout-margin);
    width: calc(100vw - 32px);
}

.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 - 32px);
    width: 100%;
    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)
}

.orderBoardWrapper-b701458a {
    display: flex;
    flex-direction: column;
    height: var(--layout-order-h);
    min-width: var(--layout-order-min-w);
    width: var(--layout-order-w)
}

.orderBoardBox-dc76a4b1 {
    flex: 1 1;
    overflow-y: auto !important;
    width: 100%
}

.activityTag-f2fd17b8 {
    background: var(--Functional-Orange_P20, rgba(251, 185, 48, .2));
    border-radius: 12px;
    color: var(--Functional-Orange, #fbb930);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin-top: 8px;
    padding: 8px 12px
}

.activityTag-f2fd17b8 .activityTime-c9711d5f {
    color: var(--dexc-dark-primary-font-color);
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    margin-top: 2px
}

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

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

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

.split-text-container {
    backface-visibility: hidden;
    color: var(--dexc-dark-primary-font-color);
    font-size: 72px;
    font-weight: 500;
    line-height: 94px;
    margin: 0 auto;
    opacity: 0;
    text-align: center;
    transform: translateZ(0);
    visibility: hidden;
    width: 1240px;
    will-change: transform, opacity;
    z-index: 99
}

.split-text-container[data-height=two-lines] {
    font-size: 64px;
    line-height: 94px
}

.split-text-container[data-height=more-than-two] {
    font-size: 56px;
    line-height: 68px
}

.split-text-container[data-height=more-than-two].ru-ru {
    font-size: 48px
}

.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: 420px;
    image-rendering: auto;
    left: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: -20px;
    transform: translateX(-50%);
    visibility: visible;
    width: 420px;
    will-change: auto;
    z-index: 88
}

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

.galaxy-slot .content-text .desc {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 24px;
    font-weight: 500;
    margin: 32px 0 40px
}

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

:root {
    --hue: 27;
    --sat: 69%;
    --white: #fff;
    --purple-primary: #8400ff;
    --purple-glow: rgba(132, 0, 255, .2);
    --purple-border: rgba(132, 0, 255, .8);
    --border-color: #392e4e;
    --background-dark: #060010;
    color-scheme: light dark
}

.card-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
    width: 1200px
}

.card-grid-mobile {
    padding: 0 24px
}

.card-grid-mobile .card {
    aspect-ratio: auto;
    background: #141414;
    border: none;
    border-radius: 24px;
    display: block;
    height: auto;
    margin-bottom: 16px;
    min-height: auto;
    padding: 24px 16px
}

.card-grid-mobile .card .card__header {
    padding-bottom: 32px
}

.card-grid-mobile .card .card__header img {
    height: 36px;
    width: 36px
}

.card-grid-mobile .card .card__content .card__title {
    font-size: 18px;
    font-style: normal;
    font-weight: 500
}

.card-grid-mobile .card .card__content .card__description {
    font-size: 12px;
    font-weight: 400;
    overflow-wrap: break-word
}

.card {
    aspect-ratio: 1.33333333;
    display: flex;
    flex-direction: column;
    font-weight: 300;
    justify-content: space-between;
    min-height: 200px;
    overflow: hidden;
    position: relative;
    transition: all .3s ease;
    --glow-x: 50%;
    --glow-y: 50%;
    --glow-intensity: 0;
    --glow-radius: 200px;
    background: var(--dexc-dark-primary-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    height: 446px;
    max-width: 100%;
    padding: 32px 24px;
    width: 100%
}

.card img {
    height: 60px;
    width: 60px
}

.card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
    transform: translateY(-2px)
}

.card__content,
.card__header {
    color: var(--white);
    display: flex;
    position: relative
}

.card__header {
    gap: .75em;
    justify-content: space-between
}

.card__content {
    flex-direction: column
}

.card__content .card__title {
    color: var(--dexc-dark-primary-font-color);
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 15px
}

.card__content .card__description {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px
}

.card__label,
.card__title {
    font-size: 16px
}

.card__title {
    font-weight: 400;
    margin: 0 0 .25em
}

.card__description {
    font-size: 12px;
    line-height: 1.2;
    opacity: .9
}

.card--text-autohide .card__description,
.card--text-autohide .card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.card--text-autohide .card__title {
    -webkit-line-clamp: var(--clamp-title);
    line-clamp: var(--clamp-title)
}

.card--text-autohide .card__description {
    -webkit-line-clamp: var(--clamp-desc);
    line-clamp: var(--clamp-desc)
}

.card--border-glow:after {
    background: radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y), rgba(132, 0, 255, calc(var(--glow-intensity)*.8)) 0, rgba(132, 0, 255, calc(var(--glow-intensity)*.4)) 30%, transparent 60%);
    border-radius: inherit;
    content: "";
    inset: 0;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    padding: 6px;
    pointer-events: none;
    position: absolute;
    transition: opacity .3s ease;
    z-index: 1
}

.card--border-glow:hover:after {
    opacity: 1
}

.card--border-glow:hover {
    box-shadow: 0 4px 20px rgba(46, 24, 78, .4), 0 0 30px var(--purple-glow)
}

.particle-container {
    overflow: hidden;
    position: relative
}

.particle:before {
    background: rgba(132, 0, 255, .2);
    border-radius: 50%;
    bottom: -2px;
    content: "";
    left: -2px;
    position: absolute;
    right: -2px;
    top: -2px;
    z-index: -1
}

.particle-container:hover {
    box-shadow: 0 4px 20px rgba(46, 24, 78, .2), 0 0 30px var(--purple-glow)
}

.global-spotlight {
    mix-blend-mode: screen;
    pointer-events: none;
    will-change: transform, opacity;
    z-index: 200 !important
}

.bento-section {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.char {
    background: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, .7));
    background-clip: text;
    -webkit-background-clip: text;
    color: #fff;
    font-size: 44px;
    line-height: normal;
    margin-bottom: 60px;
    text-align: center;
    -webkit-text-fill-color: transparent
}

.char,
.homeM .char {
    font-style: normal;
    font-weight: 500
}

.homeM .char {
    font-size: 20px;
    margin-bottom: 24px
}

.market-dashboard .dashboard-title {
    color: var(--dexc-dark-primary-font-color);
    font-size: 40px;
    font-weight: 500;
    letter-spacing: .5px;
    margin: 120px 0 60px;
    text-align: center
}

.market-dashboard .market-grid {
    cursor: pointer;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    margin: 0 auto;
    max-width: 1200px
}

.market-dashboard .market-card {
    background-color: var(--dexc-dark-primary-container-bg);
    border: 1px solid var(--dexc-dark-trade-base-divider-color);
    border-radius: 24px;
    height: 216px;
    padding: 20px;
    transition: transform .2s ease, box-shadow .2s ease;
    width: 384px
}

.market-dashboard .market-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    transform: translateY(-2px)
}

.market-dashboard .market-card .card-header {
    align-items: center;
    display: flex;
    margin-bottom: 24px
}

.market-dashboard .market-card .card-header .dex-token-symbol {
    border-width: 0
}

.market-dashboard .market-card .card-header .crypto-icon {
    align-items: center;
    border-radius: 50%;
    display: flex;
    font-size: 20px;
    font-weight: 700;
    height: 48px;
    justify-content: center;
    margin-right: 16px;
    width: 48px
}

.market-dashboard .market-card .card-header .asset-info {
    flex: 1 1;
    margin-left: 16px
}

.market-dashboard .market-card .card-header .asset-info .asset-name {
    color: var(--dexc-dark-primary-font-color);
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    margin-bottom: 2px
}

.market-dashboard .market-card .card-header .asset-info .asset-type {
    color: var(--dexc-white-secondary-font-color);
    font-size: 11px;
    font-weight: 400;
    line-height: 13px
}

.market-dashboard .market-card .card-body {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px
}

.market-dashboard .market-card .card-body .price-section {
    flex: 1 1
}

.market-dashboard .market-card .card-body .price-section .current-price {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px
}

.market-dashboard .market-card .card-body .price-section .current-price.success-color {
    color: var(--dexc-success-color)
}

.market-dashboard .market-card .card-body .price-section .current-price.price-down {
    color: var(--dexc-error-color)
}

.market-dashboard .market-card .card-footer {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.market-dashboard .market-card .card-footer .metric {
    align-items: flex-end;
    color: var(--dexc-dark-secondary-font-color);
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.market-dashboard .market-card .card-footer .metric div:first-of-type {
    margin-bottom: 12px
}

.market-dashboard .market-card .card-footer .metric .metric-value.change-up {
    color: var(--dexc-success-color)
}

.market-dashboard .market-card .card-footer .metric .metric-value.change-down {
    color: var(--dexc-error-color)
}

.market-dashboard .loading-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 400px
}

.market-dashboard .loading-container .loading-spinner {
    animation: spin 1s linear infinite;
    border-top: 4px solid var(--dexc-dark-base-border-color);
    border: 4px solid var(--dexc-dark-base-border-color);
    border-radius: 50%;
    border-top-color: var(--dexc-dark-primary-font-color);
    height: 40px;
    margin-bottom: 16px;
    width: 40px
}

.market-dashboard .loading-container .loading-text {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 16px;
    font-weight: 400
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.homeM .market-dashboard {
    padding: 0 24px
}

.homeM .market-dashboard .dashboard-title {
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 24px;
    margin-top: 48px;
    padding-top: 24px
}

.homeM .market-dashboard .market-grid {
    gap: 16px
}

.homeM .market-dashboard .market-card {
    background-color: #141414;
    border: none;
    height: auto;
    padding: 24px 16px;
    width: auto
}

.homeM .market-dashboard .market-card:hover {
    transform: translateY(0)
}

.homeM .market-dashboard .market-card .card-header {
    margin-bottom: 16px
}

.homeM .market-dashboard .market-card .card-header .asset-info {
    margin-left: 12px
}

.homeM .market-dashboard .market-card .card-header .asset-info .asset-name {
    font-size: 16px;
    font-style: normal;
    font-weight: 500
}

.homeM .market-dashboard .market-card .card-footer .metric {
    align-items: flex-start;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px
}

.homeM .market-dashboard .market-card .card-footer .metric div:first-of-type {
    margin-bottom: 4px
}

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

.cooperative-partner .partner-container {
    position: relative
}

.cooperative-partner .partner-container:before {
    background-image: url(https://static.sunx.io/v4/dex-web/static/media/cooperative_partner_bg.e16ec22d.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: 500;
    line-height: 52px;
    margin-bottom: 189px;
    position: relative;
    text-align: center;
    z-index: 2
}

.cooperative-partner .partner-container .partner-swiper {
    position: relative;
    width: 100%;
    z-index: 2
}

.cooperative-partner .partner-container .partner-swiper .partner-swiper-container {
    width: 100%
}

.cooperative-partner .partner-container .partner-swiper .partner-swiper-container .partner-slide {
    align-items: center;
    display: flex;
    width: auto !important
}

.cooperative-partner .partner-container .partner-swiper .partner-swiper-container .partner-slide img {
    display: block;
    height: auto;
    width: 260px
}

.homeM .cooperative-partner {
    padding: 53px 0 0
}

.homeM .cooperative-partner .partner-container {
    width: 100%
}

.homeM .cooperative-partner .partner-container:before {
    background-size: 100% 100%;
    height: 160px;
    width: 100%
}

.homeM .cooperative-partner .partner-container .partner-title {
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 12px
}

.homeM .cooperative-partner .partner-container .partner-grid {
    align-items: center;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    padding: 100px 24px
}

.homeM .cooperative-partner .partner-container .partner-grid .partner-item {
    align-items: center;
    display: flex;
    justify-content: center
}

.homeM .cooperative-partner .partner-container .partner-grid .partner-item img {
    display: block;
    height: auto;
    width: 160px
}

.homeM .cooperative-partner .partner-container .partner-swiper {
    padding: 48px 24px
}

.homeM .cooperative-partner .partner-container .partner-swiper .partner-swiper-container .partner-slide img {
    width: 160px
}

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

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

.mobileHome .dex-notification-notice {
    width: 320px
}

.mobileHome .dex-notification-notice .dex-notification-notice .dex-notification-rightContainer .dex-notification-title {
    font-size: 14px
}

.mobileHome .dex-notification-notice .dex-close-icon {
    display: none
}

.tongzhou-img {
    cursor: pointer;
    display: block;
    height: 150px;
    margin: 80px auto 60px;
    width: 1200px
}

.homeM {
    background-color: var(--dexc-dark-primary-bg-color)
}

.homeM .mobileBanner {
    background-image: url(https://static.sunx.io/v4/dex-web/static/media/bg_m.57011032.jpg);
    background-size: 100% 100%;
    height: 360px
}

.homeM .mobileBanner .mobileHeader {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px
}

.homeM .mobileBanner .mobileHeader img {
    width: 120px
}

.homeM .mobileBanner .mobileTitle {
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 44px;
    margin-top: 100px;
    padding: 0 24px;
    text-align: center
}

.homeM .mobileBanner .mobileTitle2 {
    color: #8a8a8e;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    margin-top: 12px;
    padding: 0 24px;
    text-align: center
}

.homeM .FloatingBar {
    align-items: center;
    background: #6001ff;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIsAAAA8CAYAAABW1kkyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAG5ZJREFUeNrsm/d3E1cWx/llN73Z0pQ3RXJwQrBslZlR7zKEsoR1CgFs3G3JtizLvRe5N2EIm5C2WZLd9C1/4947T8+NnJOQgmVgzvkeGWMfRtKH7/3e+65OnLXf/e5EmV4p25aWUDe/TKjrX8aV9XtxZeMfcdvGF/D1F3F1/XNUVF77LK6ufRaTVz+NKaufRKWVj2MKSFr5CB4/isorf4vKS6DlOxGy9EFERi3fjipLt6JK4VZEKtw0pRRuhuXCdlRe2A6Rhc0Qmd+IyAubEbmwESZz62GlsBZWFlbD0uxclExrQXF2KSTNLQel2amEvfDyT92/X552+oXJkYA4NR2UJqf8ZGrSTyYmA2RyIkAmxn1kfMwvTIwGyNhVLxlWTpT7ddH+kVAu95IgRUtEXdfjVVvRhH2zIa5uLFJAUOtfxJS1v5uAMDhQ6uqnUYCDavVu3LZ614REKUGiLt+JASCosGQCAlrciSgIyWIxoiwWEZIwQAKPWwhISJ7fgD+vh6X5tbCEgMythqSF5RIcSwDMUJDMNoTIbCEkzy4EpJnW/c8jJM7YQvL0jYA0Ne0XKSQUkHEKiTA+FiSTY/A9CsmT6/4rKqxZE69uGqmqYixp23wnqW6mE7bNlaRtYyepbn0FcHy130XQQVAMkri6CloHSFYAkNWPARQAZPkudZHVDyPK8ofoIKiwvHiHusji7bBUMCEJAyQhExAqBAThoIAUKCBkYT0IkFBA5lciyvwKgyQozy0GycwiQhIUp/NBMjUflKbnQtLULAKSsA++7AdIEBB0kKCMkCAgU+PMSXz8WM4vTSf1VydeepDX7kJ17imfOGQYZDD8yAAR4gtc/au3vUnbzYsJpdgTs22OAAh3krbtb5LK1jdJ29bXCXXrX3F1858oBARLDTyWAKEuEpdZmdkrMTF17RN4BEBoqYmXykwMIGEugoAcgAQAQYWkwn0OsusihLpICADBUoOQBAAQBokJiExdBAFhkAQQElBAmpyBUjMc3OciKB8CAg7iJ2apyXnJROhC9Z2nHuT1DCvjxCDDlw1xOOMVh9JeYbDtiqPw52MGxTZ3pvpWImHfaktW7YwlbcUPk/biDwm1+H3KVvwuYdv+LqkAIDbU1jcICIUEHYS6CIBxD10E3OSe6SAycxBUCRKVZZHVu1GFKiIjHCyLHAQEswjCwbIIAoKKghASzCMmHDIIsgiWGQZIiAFCwEFkBghq2oTED4AwSALS9AzLIgyQkExLDeYQlFcYHwE36X9QSMKnxl9AF/EKw21eHgARh7u9Yr7bRwa7DD7fqdsGxbIF482T21y97WYyZd9pT9lubterN79KqcV/J9XtH5Nq8QfQ9wkQAgJgfBsHSOLKHiBJdBAF4GAuAoBQJ6FhFcXKDAISB0CYiyAcLKxC+dkGTUbl1RtQZi4AIH7IInVBuVCdklekc3KhIlgSZJ9XqCZ/Vj7bbJWPpwIHcoNbBCPybAIAaQgK0y0heSbNAEEXwTKDkOwPq8xFghhaJQi1GFrVCccDlRnbaBW6iE+iLqLx+W6dH+zyEVS+0+AHOzRhoF0n+Uj5wOHcfu7cyQ+SKfVW7oz99sdQUv6DSgAgKRvIvv1jXN3+gQGSAkGJ+RYdBMXKDHOQ/S6CYTW2DxBU9JCL0CxCg2oEFJWW34vJy68duZticFUmvUEy0cjKDAZVXwkQvzSOasbQ+iBlBn4+hC7CANnvIgZA4gVANFO5Ni/Iww9cO3JA6tXbl+ptt5ZStp3/JW07/0VAUuqOCQh1kG0QBWRfmUE4vjaziI26CHMQAOguQLGUUjdyUGI64evrEFYvJ5SNa/B1H2gO4aBhFR8pICgaVlcW66W1ynJ0WwyoAE0IAQlIE8M+aXTYJ44N+clYxy9xkaA8VOclo2+xLIJCFzHIEABCXQQh8RJwEmGgFWUIuRYPl23WuIG3Hda+54+gxHxQC3Asm4AoCEjRhISVGXQRBknKXjTLDAKCZQYF4fVT7Gji8kZ3Uimew9kItsA6KTz7S/59hCEirbaYgMi0o2FZBMtKuWc3f0XhRa8w1usVx/JecSQfIKMDkHekX+IiLIugg6AQEIMAJARdZLBtPyQGlz+rVQ6edvKjzx3Zk0UHSYGSKgBiAxdhWYS5iELLDEICf7eeULcz9fad89DlnKZA/D4XlJk8AsI6Gsgijccl7Af4Ub8XIPHxIzlDGOr3kZGGwy0vcxEGCXURWmY0dBAUAUkUEgDnutsymNC53EmH40p5dD8pmkMOlBrsZhAScBjoTjabzyqbxh9NdAJCatQcmlGB08SOCyw6GbH4yGi/nwxnwTV6URhWdW7oTc160EVYqUEXYZAwF/EAIF6hz+u19gkUkDK79joa1s0UIXgWm6NqseZh3kdQ3nkGIFmNKEtmyxtXlqLHBZawZfwFHSGRABJxqMcQ8/tyCOtmWGBlZSZnAqKJ+XNeqc/t5/J82T/RVCmsgsN8DqXm3aOsiQDJME5WowrMRKS5nuMEC5YYWmYOzUUwh6BIrsN0ED7f6BUHzvuFkZorh92j/GE5ekjYFVbnW3GqSlUoJOz3nj4usOzNRFgWQdGORueHGnE2guXltwKi6+k/6SRt0bn0SV1Jn3y45zXVa9ZyedEj0vwVnK6y8btfLdQcB1h8UrbS4DGHHGx5NX4whYD8djhGLDqfrnNzPWG3NXPRaem+7OQzbzkrM/UnHtcrJM2+R89nqGDs3nEc7hvH77tB1TrQ6iu1vG4yEPo1cHjErE2Te52a1JNyc+kGN9fb4OYzf3VaMm9pAImL77mEQnDw5x9LWMLyfCeezQR2z2fmFgPCpL38u6G8emBwJg40GyCd62/4ud/F8g9v+mseS8bQxL7zmph9WxN73kZA6gAQD997GSFxWXouaQiIJf0Xt5C56LF2X0D5q5tefFydpZdCQtcAAmR6Ac5kWsv9vj1czoVwaFz/DU1E5ZrcfH+jh89dTx/6n+/kezi3deA1N+kLIQguru8dDeTiEJC06SAoD999mbmIW0BAKCR1AIjTmgGoMuddXPc5j6WfPHagwLbZ0yGZAoKnvId3Rcr53g25P2FCwvU16SYkfdc9fPaaxvdfNfieWpeQdRhCfwKdxsP1vGuI/e9qIgVExxKDkDAX4WmpYS5SZ+0yAaGQdJqA1HIdb7pAdVz3GQdpUR87WAL2gj1MZkxAUGxPBLfNQmSmD2EqW1iE7EUTEkv2GoNEE7Lvo3Sh/4pH6HsPIfGIPSYkGkfLjE56GxAQdBEP6TWdhLkIQsJcxGE6SHvcIXR7ETwHSaue53NW9po8frCQqct0DYBCgotEbOMM5SOT18vxvjFz7ALC912lgPSagBggBIS5CAuqKCcAQrNI9yUUKzMuIZ10WtKaJnaddlW2SKegLccQ+2TPct8VJNNZdBFUUGJriQgJ7qzSxWY85S0/WPqrEBA3AmIFOKwZAATKTCmLmIBUUkCw5UVIaDjNxNzWbjf+vgPaaziFfuYJBT93sS14cQ8QttgcLK0konAVwCfCGgA3Giyne8ezHFZmUBqX2QurUGbQLZyQW7wVfYr+SvqlJy7xG6+AMNGLDsIWmykgYyYkPnHfrog4OuiHVYCQOBEri5b5BMxEuL0ywyDRSbqBhVX43rkn7/DvdIWU6VpcR2QugnurCAgKATFKgKACuAZAcA1gtN8njbT6q3NHOmPA4RmbibBuZm9w1r3bzTx5l3+nbTO/OJ72C7iOSIWAoLz8iAkI7okE5D1IDq8C6NJwEhecj+L+3VzmLJuJoHAmgpCwbsZTankfpPQk7G1Po7Bk1T7XxddyoIp2xck3V2lyZ/Up0nGqRmivcVvb3I6XO1yOyhbfYwGLT5po2VtLLLmINDpoArK7TEThMEBeMtKHgPjEkZ6Dp7ywtyoMxR/m1nsdSb/BSg1realoy+sRui/gTATnIR6lg3gsHcTxSlp18l1VtdDpoFyk01Nr6TDge4HT1tZYnbUz5rS2RVEOa0vEzbWGa7n2UB3XEkQ5K9v9AI3fIbT4HJWNoCZvraXZeORBAbdIBCCLICBsJdGLgJCxHLoIOggCwlxEhz0R1E+tAaDY3qou5K8Y3GAYcoOa+IP2VF1S9nVnabqKDrJ/soqDMwaJm+s6i6rj2s84KzvrnZVdKQAj5bJ0JGstXYk6mJ3UASQesTOGcLisHbuAUEg6gqcrmgJOvimADuICSBggdZZWvc7SqJ+23NAeaVDATQIsrB4ARBhr8ZLhqwgIWyZC7QLC03VEFIWErgFopUM8XCgyuFwLntGw8bshD1wEqGKGJX8qxI9y+NGPX3O4hyfLMA953cNlgux8Bl0EHYSN3l1cmk5WK7vPMEAQDnCElEtAQNooIAKFhDkICkpNyE1dpARIW6CmElykss3LAKkVm403ABAnAIJyWBvdqEcSEvyglUFGzvplCgmWGJpFhrMoDKwsi7CNs/sXm4dMQFDspBf3Vj0ACQME5YXxO05VddLfaMAZjUHodJUNzjCUwtT0jMeajUFQjWlir47SSVZzCT0+XAfw8Jl6j7X3AjqIxs5oMIuUXOQwJAiIB0bwTr4ECd+eQkAAKgoJOIgJidgWRVEXuRF6o4KWGQYIcxEEhLkIykluaKdeue6sqWiqQdVWNp9GPbQ3MGabrXpIbiIDIO2YQwKmk9CwClmjD7OInxt14hKRD12E31tJ3IXkkIvc//EIejajcbkmhMQgOfN8BuWyZt9ngzMdREfve+cz2NHoOBMhNKxiFmGTVRZYPaUccrjM1ILqKtvBSSgkDigxKHQSWmawxLQJGFZZYHU+38NhgK2uaHqRCcrms9XVF57ar0Ti/+1d+1MUZxbtJG5W5THD0D3T8wAHmPerZxiQuImRVGXNotEVrK4BRESIihp3NcY12fzCf+7e8319er5pyCY+ggTpqlNToFRR02fOPffc+zWLp6yjdPGREX+kmogf+VK3vf1uBiTpBl4E2+88KsGl5q6UmY54ECC62Dzn/nsTJJH9VTXl1QThAO9JOMQ7mCQ6OMN8Bslqf4inF4pAEO6KcBWAXoQqogiS1KUGBOkI6EPa7tZiJygzNZSZsc0vrONyYcorhHnwLodSPAIx5/7n/EL6+X2a1XlXdzPsaM5nn+3Kv3f5M3U58L3gvCgu5ATyesF5ViBIEpQaEmTflJclxhFycIDnCILgTMGY0bSMNQAqCEjCKe+so8tMI2JW6+JBqCIoM6ZZZUcDs+qJF0H5OD5m0/1JH/TO/HLt3SwC7dkgyXzqx3tzLgnyTKBVxGx55UY3rd95gSRUEOyLQEFIEk55qSKM32eTBjkAY1ckbHntPkFgWOFDWGaoIm0BuxmYVaiI6UVqY1sX4UegInXxIQBbXs+9Uz82ZOHTANQAb+K/2wjKXnsXRQjSlYNWMrtZNlUEXkSVGaPlBeTczOr57M+vdSxVrwCAHAB8yKMBgmCAxzJDH8I1AKarQD9d3RGSsO3dVplIdFfENKumDwE6kY6GBAFgWGlWK/Zm6diQhU8E4JOJLqRfPpBZzdKXmV8mlgp7owP/V76+6P7s4BjDZzkhh/vy6jzLjNsPznh+RiELw9rPRBayP3yGEvW6awAgCcqMWWpAkpYiCEny/wnSsCMbZ4ZZpYLArNKH0KxCQdjyIhPRBNkeUBEqCQjCjgYtr5SiTmtspwHUEnfqCsPoZu6qbqY43KuWRtYq5RG/XLY3yhW7VwKqznqxNrpRKMR6M8XY+jRQjt2eKsf8qan4+rlqfEWwfq4ZWx87NLKopxNhiMcHz7gvwwEeprxIVxG/6/nM87DlnROCkCQoM0xXWWb4XBFmIl336dU3CclIFoMkusy4oiTKrGovYs5nOhlNEnoRlBqWGZpVkyRAB20vVCQwq2YuArDlHVSRDRWctZCLCEGQrjI4MzORqt2brQlpVC6S3PCARnKz1UzdalZTt4VEa3UFl+1wr9ocFwLZviLP9OjNYs0R4iR7M4o8SSFOyp+qxFfzC4lD3MHF4yI4wFPPFQkGeIjfdbKqB3gASEKCqHYXBOFJPCGI8VwRnYskn99GINa13y6G77hPnI6jCUIvQhVhNxOaVVuTo2HvUEEGWl6ALW8/Wb07EJwhekeZQTcDeIGKIDijiiA4o4IouFsqOKsEmQiS1Vp8VQiypYIzEqQydqsJVMd6jZoLktyqFYUcDUEpIAgUBsoC1BxfSAJ1WZkuJlcCktzIV9Pr5+pj/uQFyz9zeGd10j91RU0eU0EkD5FkVc9nADN6j3Y0CM0AdDw8ZIVMRMh0RdSm/i4eZ0WyzEYWm6UVvjqHQZ69u9gefzTvZXY7QqYaNuVbie9yC5JnFBJPRrFUhAS2bG+PeJn7lzu/4UXC+Uw66Ggy219AQUCQMDhLBSQ5IH6HglBFAIRojeSaIklLVKQqKCT8mlKRtEEQQ0VIkoaQBARB6QFJUHoAEGUm8c+JQmIlhzWJw/Ut8qYuJF9cNuN3PA1AZyIvoCJUENXykiShF3F/2JQbegkE+SMOdOMN6dr30wiyEF696QJRO7nzOUlCFSFB6EXY8jYSIMhGSBAgSpBKMJsBas7qQJkBSaqj60UhSkpIkgQKw77TcX2nlFmzicrI5nhlZHm8NuonarmdBF4nxYc0gcn1sXz8RrwtmB7zY91pP4ZXhHg4AoIPgPU+LpJG1OXiwsSPq1SRaMsrSrOGpwOczz69gCwEv/BRPCkANCcfqjec3/ecnY4iiSskYTfDMjOmzWpboAiSAEFuCfpmtWzMZ5rpO12UmWJcK0gp3vOoIBXxIvAglezmuPWhXGhvO5Kq4mzKeyIFz/aexdwIpWVBSkw7vpufdXYKTTnSCQK0x+/NdxCr2/e/YrLKIR4Wn8O1Avu7LlSEJCFB6EP2z2fMMrMe+pCoWQVJABhW+BAFKTWL1tbpk62lt7z56hRe/mm8M/F9BttmMuyr4Cxvi0M8d3dR+QokqHZ/mchseWfTO/9ohMHZ1t/pQ+qGWUWyClKFCfHorXmQhC0vSg0zEShJzdgVAUFMktCLtLNbbZYZkANGFV6EBAFgVuE3Tu72b1x1y/90LvWvxpwYzm7u8ULXffSV2ihzHl9Bywv0B3iPD+xoOOUlScIhnhBEkYO5CDsa+hDDrHLK6+V2s6o0WYunQBB6EZCDKsJForrbXwWoxnp6DQBlJig1jbG+ggAoNSBJw+hmmoKWmNWCe9c5YcPvMKPIRLzggBWCs+h8Bulq9BQe8hDAXAMA2PIeRBC2vBzgMQ9haOYJ+CgRmOOmqAiDM6oISBI1rDWHXsRoeZWKMBNhy6sJAqDdbWV0yysmtTAj0IGabneZi1Tc1Tw6GnQzjcTqREs6mtK4n/UEZft6pmqvpKeGrqfqju/ODF9OzqSWlTEujVyzYYQBbYKvwot99KcnTMd9eEkfsPo+PIFnHrJiqtqyd5SKcLG5bRzVBEFUqUkwE9Flhqib22YAZzOOBlTEHOJhTQA+hCSJEgS7Il7oRXrKizATYXBWCEpM0QzNRpC23iyCHCAKCMKWFwRpCUgQ5CJseUvj32ZLiiCriiAkSSMJrKUKw0sOgI4pC4Lk/ERTCAKgQxIyDVvH4Zp1HhW4BgAViZKEAzyqCPdW9RDv7jcsNVQRmtVosmoGZyQIuxlASBCGgZ7E7NFMpBV4EU9As8oyQz8CBSFJkIuAIK0glveyvRJIAoAgyEMAhGbA9JlrkyAIFAQEaWVXcooohorkh3x3SggyM7ycBDpuoCLZ5fGcKAhVJB+0zwlrSfZflkbz+cXTx6YUtSU0M8sMjkhQRUAQgGUGQPQOkCCcz8wGmQiAGQ2eemS95oVuCiSJEqQU3/DY8up0lYa1p4KzIlUkAx+yweBMKQlDMzM4g4IA1bSoSEarCMlBggB5KTF1gakgIEg3sxaQ5JsElARtvybJ1zEQRH52BNCq4n9iHZerlXlYbhm7Ilwmav7KMhFJwo6GwVlbVAQ+hF6kO33/tafiGLiRJPQhbHdJEHM+Q7NKFUGpYaoKhPOZmPYhUypV1WUGNz2VujwkHdJQJnPtbMYSyGtOYvlBXDiTtxZP5+XYB14L1tJfTdSt+qdE1+r+BbDEpC8K8HrsjC5uuCoxUBFzPpPmfIZ7Itw2M6a8Lqe8g/E7Sg3aXba8GneD4EzPZ1BCzIUqEITdTNkIzkgStruaJDe1WTXmM1SRJghilBpG7/QiMKv4xJ+0OW9wYTbTST78OtrRAGbLC8CHmPE790Q8gblMBJAgSFfNbgYAAcyRg7TB1WguQrPKjgYEQakx1wO0gtyY4RCPKqK8iJCjLkCpQZkBJs5KeYlvxU/u+ltcXm4zy813djQdQf/8DKP3wQNWVBGSxMxFqCIgibn5DlLkjCksPAG7maiKsOWlD6GK0KySIOhm6EPY8gKFM0uhUQVgTv0TVXn7C0NAc4AHmHsi5hpAVEXUfIYEiSarxvkZkCKX6xMFwzcShKsA8CPNgCTIRDzZYvOEKCQISw0zEZJkOigzDUHUrLLlhQH1ff+TPWvv4709gflqYo/f3/9/XlmvPrIEr4hX/Bqvlvr6vWYrh/X8W/wVCyjDQSSJtrymD/FcDSarzXR/DYCGFTe8bvVLD0wjzSrLDBQEBDHLDGBmIoDpRdjyAqUz32ZRakAQdDIkCdRLBWfuElteFZoxF+HEmB0NuxmgJUa4K+YXZhetMI+ALAm6XTG0i9rQ7u1ZH1tCpvcewuGAlXUIF29iSw52R1WEBGGZATkYv2uC6GUiwOxooBy4WZZxYYxvJqsto8xAQdTGWUwTBDDNKn0ISNLIrE7kzuwPznTLi1wEBPEdAKmqSZLJgCT4XUiQz8vXRxxrEQRRXVJXwC4IBFE+SwiC2RnOC0GlYJahPEcmqUVwhr88cajGV3ZwazLg0z4E6E95y0aZ4caZl9EEoVGFasjP7PMIjaG1FMpMM+pFmItEzCpAs8pMxAzNzp3V5GAmApIgEwFBOgJmIgzNGJyBIKaKqFaaKpKDigySBG0xCAJYoiIsVarsHKWLwRmfdXLYpEGcjRsKxYgGZ+ZCEdQCn3bkFySJGbqhbHDjTBGE0XuUIFSRCEmoIPQhJAkUpIUyEySr+H2hIICK3ydBFK0iZmhGkkBF4KUAKKsl5VKXTKrI3indbmuCWEf5YnAG84k33XqPF6QXezN4owm8ofj+ryWziPSnR5bDlhdAy8shHpNVtrwwrCZBTBUhSeBF4EOgIiQIVATgbAagIiAkUwQ2QAKY2KPvOBhH/2rYD+aYrLaT9/521J95hk8fpH5GfIVSkVEZ4jl6PkOzei52bUBFpoP5DIOz6BAvP3RlQEW4+mh6EbPUoMSgjHyQKwWSrl4Ko/f09txRW5aCaYRHQWxvdjQzYUdzxxji6QkvwCEeVcQDcn42nPIGPmQmJAhVZD9BQFD6EPiMDzEC+R9/AYpyf5wRhQAAAABJRU5ErkJggg==);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto 100%;
    border-radius: 16px;
    bottom: 36px;
    display: flex;
    height: 60px;
    justify-content: space-between;
    left: 24px;
    padding: 0 12px;
    position: fixed;
    right: 24px;
    z-index: 99999
}

.homeM .FloatingBar p {
    color: #fff;
    flex: 1 1;
    font-size: 14px;
    font-style: normal;
    font-weight: 500
}

.homeM .FloatingBar .btn {
    align-items: center;
    background: #080808;
    border-radius: 16px;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px
}

.homeM .FloatingBar .btn .dex-icon {
    padding-right: 4px
}

.homeM .container-content-mobile {
    margin: 0 24px 80px;
    padding-bottom: 24px
}

.homeM .container-content-mobile p {
    color: var(--dexc-dark-primary-font-color);
    display: block;
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 2px
}

.homeM .container-content-mobile span {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px
}

.homeM .tongzhou-img-container-mobile {
    padding: 0 24px
}

.homeM .tongzhou-img-container-mobile .tongzhou-img-mobile {
    display: block;
    height: auto;
    margin: 0 auto 40px;
    width: 100%
}

.container-content {
    color: var(--dexc-dark-primary-font-color);
    font-weight: 500;
    margin: 80px auto 120px;
    padding: 79px 0;
    position: relative;
    width: 1200px;
    z-index: 99
}

.container-content span {
    display: block;
    font-size: 16px;
    margin-bottom: 16px
}

.container-content p {
    font-size: 44px;
    font-weight: 500;
    line-height: 54px
}

.container-content .text-center {
    position: relative
}

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

.container-content .text-center:last-of-type:after {
    display: none
}

.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 {
    flex: 1 1;
    margin-right: 80px
}

.details-section .disclaimer {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px
}

.details-section .filter-bar {
    display: flex;
    flex-wrap: wrap;
    position: relative
}

.details-section .filter-bar .search-container {
    align-items: center;
    border: 1px solid var(--dexc-dark-base-border-color);
    border-radius: 8px;
    display: flex;
    margin-right: 12px;
    padding: 8px 12px;
    width: 120px
}

.details-section .filter-bar .search-container .dex-icon-next {
    color: var(--dexc-dark-invite-search-icon-color)
}

.details-section .filter-bar .search-container .search-field {
    background: transparent;
    border: none;
    color: var(--dexc-dark-primary-font-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    margin-left: 6px;
    outline: none;
    width: 100%
}

.details-section .filter-bar .search-container .search-field::-moz-placeholder {
    color: var(--dexc-white-tertiary-font-color)
}

.details-section .filter-bar .search-container .search-field::placeholder {
    color: var(--dexc-white-tertiary-font-color)
}

.details-section .filter-bar .query-btn {
    background: var(--dexc-dark-primary-color);
    border: none;
    border-radius: 8px;
    color: var(--dexc-dark-primary-font-color);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 32px;
    transition: all .3s ease;
    white-space: nowrap
}

.details-section .filter-bar .query-btn:hover {
    background: var(--dexc-dark-primary-hover-color);
    transform: translateY(-1px)
}

.details-section .data-table {
    border-top: 1px solid var(--dexc-dark-base-border-color);
    margin-top: 16px
}

.details-section .data-table .dex-table-wrapper {
    --dex-table-bg: transparent;
    --dex-table-thead-bg: transparent;
    --dex-table-expand-row-bg: transparent;
    --dex-table-hover-bg: transparent;
    background-color: transparent
}

.details-section .data-table .dex-table-wrapper .dex-table {
    background-color: transparent;
    table-layout: fixed;
    width: 100%
}

.details-section .data-table .dex-table-wrapper .dex-table .dex-table-thead .dex-table-row .dex-table-cell {
    background-color: transparent;
    overflow: hidden;
    padding: 16px 19px 8px;
    text-align: left;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap
}

.details-section .data-table .dex-table-wrapper .dex-table .dex-table-thead .dex-table-row .dex-table-cell:first-of-type {
    padding-left: 0
}

.details-section .data-table .dex-table-wrapper .dex-table .dex-table-thead .dex-table-row .dex-table-cell:last-of-type {
    padding-right: 0
}

.details-section .data-table .dex-table-wrapper .dex-table .dex-table-tbody .dex-table-row .dex-table-cell {
    background-color: transparent;
    color: var(--dexc-dark-primary-font-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    overflow: hidden;
    padding: 14px 19px;
    text-align: left;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap
}

.details-section .data-table .dex-table-wrapper .dex-table .dex-table-tbody .dex-table-row .dex-table-cell:first-of-type {
    padding-left: 0
}

.details-section .data-table .dex-table-wrapper .dex-table .dex-table-tbody .dex-table-row .dex-table-cell:last-of-type {
    padding-right: 0;
    text-align: right
}

.details-section .data-table .dex-table table .dex-table-tbody>.dex-table-row>.dex-table-cell {
    color: var(--dexc-dark-primary-font-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    padding: 14px 19px
}

.details-section .data-table .dex-table table .dex-table-tbody>.dex-table-row>.dex-table-cell:first-of-type {
    padding-left: 0
}

.details-section .data-table .dex-table table .dex-table-tbody>.dex-table-row>.dex-table-cell:last-of-type {
    padding-right: 0
}

.details-section .data-table .dex-table table .dex-table-thead>tr>.dex-table-cell {
    padding: 16px 19px 8px
}

.details-section .data-table .dex-table table .dex-table-thead>tr>.dex-table-cell:first-of-type {
    padding-left: 0
}

.details-section .data-table .dex-table table .dex-table-thead>tr>.dex-table-cell:last-of-type {
    padding-right: 0
}

.dex-table-placeholder .dex-empty {
    margin: 100px 0 50px
}

.dex-message {
    align-items: flex-end;
    display: flex;
    max-height: 100vh;
    position: fixed;
    z-index: var(--dex-notification-zIndex)
}

.dex-message-top,
.dex-message-topLeft,
.dex-message-topRight {
    flex-direction: column;
    top: 50px
}

.dex-message-topRight {
    right: 24px
}

.dex-message-notice {
    align-items: center;
    background: #fff;
    border-left: 4px solid var(--border-color);
    border-radius: 3px 3px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    line-height: 1.5;
    margin: 12px 0;
    min-height: 50px;
    position: relative;
    width: 400px
}

.dex-message-notice-content {
    align-items: flex-start;
    color: var(--dex-primary-font-color);
    display: flex;
    height: 100%;
    justify-content: flex-start;
    padding: 20px 16px
}

.dex-message-notice-content .dex-message-icon {
    align-items: center;
    display: flex;
    height: 24px;
    justify-content: center;
    margin-right: 10px
}

.dex-message-notice .dex-message-content-text {
    font-size: 16px
}

.dex-message-notice-closable .dex-message-notice-content {
    padding-right: 20px;
    text-align: left
}

.dex-message-notice-close {
    color: #000;
    cursor: pointer;
    filter: alpha(opacity=20);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    opacity: .2;
    outline: none;
    position: absolute;
    right: 5px;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    top: 3px
}

.dex-message-notice-close-x:after {
    content: "×"
}

.dex-message-notice-close:hover {
    filter: alpha(opacity=100);
    opacity: 1;
    text-decoration: none
}

.dex-message-fade {
    overflow: hidden;
    transition: all .3s
}

.dex-message-fade-appear-start {
    opacity: 0;
    transform: translateX(100%)
}

.dex-message-fade-appear-active {
    opacity: 1;
    transform: translateX(0)
}

.dex-message-info {
    --border-color: var(--dex-primary-color)
}

.dex-message-success {
    --border-color: var(--dex-success-color)
}

.dex-message-warning {
    --border-color: var(--dex-warning-color)
}

.dex-message-error {
    --border-color: var(--dex-error-color)
}

.banner-content {
    position: relative;
    width: 100%;
    z-index: 999
}

.banner-content div {
    font-size: 48px;
    font-weight: 700;
    line-height: 58px;
    padding: 70px 0 30px
}

.banner-content div,
.banner-content p {
    color: var(--dexc-dark-primary-font-color)
}

.banner-content p {
    background: var(--dexc-dark-primary-bg-color);
    border: 1px solid var(--dexc-dark-invite-btn-border-color);
    border-radius: 30px;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 auto;
    padding: 16px 40px
}

.dex-banner-desc-rate span {
    color: var(--dex-warning-color);
    display: inline-block;
    margin: 0 2px
}

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

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

.loading-root .loading-logo {
    animation: loading-jump .5s ease-in infinite alternate;
    display: inline-block
}

.loading-root .loading-logo .logo-img {
    height: 60px;
    width: 60px
}

.invite-dialog-content {
    padding: 0 0 32px
}

.invite-dialog-content .invite-profile {
    border-bottom: 1px solid var(--dexc-dark-base-border-color);
    padding-bottom: 24px
}

.invite-dialog-content .invite-profile.cursor-not-allowed {
    cursor: not-allowed
}

.invite-dialog-content .invite-profile.cursor-pointer {
    cursor: pointer
}

.invite-dialog-content .invite-profile:last-of-type {
    border-bottom-width: 0
}

.invite-dialog-content .invite-profile .invite-stats .current-tag {
    background: var(--dexc-dark-trade-base-divider-color);
    border-radius: 2px;
    color: var(--dexc-dark-primary-font-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    padding: 2px 4px
}

.invite-dialog-content .invite-profile .invite-stats .stat-item {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px
}

.invite-dialog-content .invite-profile .invite-stats .stat-item.users .user-info {
    align-items: center;
    display: flex
}

.invite-dialog-content .invite-profile .invite-stats .stat-item.users .user-info .user-id {
    color: var(--dexc-dark-primary-font-color);
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    margin: 0 8px
}

.invite-dialog-content .invite-profile .invite-stats .stat-item:last-child {
    margin-bottom: 0
}

.invite-dialog-content .invite-profile .invite-stats .stat-item .stat-label {
    color: var(--dexc-white-tertiary-font-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px
}

.invite-dialog-content .invite-profile .invite-stats .stat-item .stat-value {
    color: var(--dexc-dark-primary-font-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px
}

.invite-dialog-content .dex-button {
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin-top: 24px;
    padding: 16px 24px;
    width: 100%
}

.invite-dialog-content .custom-invite-code {
    padding: 12px 0 0
}

.invite-dialog-content .custom-invite-code p {
    color: var(--dexc-white-tertiary-font-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px
}

.invite-dialog-content .custom-invite-code input {
    background: var(--dexc-dark-component-bg-color);
    border-radius: 8px;
    color: var(--dexc-dark-primary-font-color);
    font-size: 16px;
    font-weight: 700;
    height: auto;
    line-height: 20px;
    margin-top: 8px;
    padding: 16px;
    text-align: left;
    width: 100%
}

.invite-dialog-content .custom-invite-code input::-moz-placeholder {
    color: var(--dexc-white-tertiary-font-color);
    font-weight: 400
}

.invite-dialog-content .custom-invite-code input::placeholder {
    color: var(--dexc-white-tertiary-font-color);
    font-weight: 400
}

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

.invite-dialog-content .custom-invite-code .rebate-slider-container {
    margin-top: 16px 0 0;
    overflow: visible;
    --dex-slider-trail-height: 6px;
    --dex-slider-dot-size: 16px;
    --dex-slider-handle-size: 14px;
    --dexc-base-border-color: var(--dexc-dark-base-border-color);
    --dex-primary-container-bg: var(--dexc-dark-primary-hover-color)
}

.invite-dialog-content .custom-invite-code .rebate-slider-container .rebate-slider-title {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    margin: 16px 0
}

.invite-dialog-content .custom-invite-code .rebate-slider-container .rebate-slider-wrapper {
    overflow: visible;
    position: relative
}

.invite-dialog-content .custom-invite-code .rebate-slider-container .rebate-slider-wrapper .dex-slider {
    overflow: visible;
    width: 100%
}

.invite-dialog-content .custom-invite-code .rebate-slider-container .rebate-slider-wrapper .dex-slider-step .dex-slider-dot {
    border-width: 4px
}

.invite-dialog-content .custom-invite-code .rebate-slider-container .rebate-slider-wrapper .rebate-label-left,
.invite-dialog-content .custom-invite-code .rebate-slider-container .rebate-slider-wrapper .rebate-label-right {
    color: var(--dexc-white-tertiary-font-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    min-width: 80px;
    white-space: nowrap
}

.invite-dialog-content .custom-invite-code .rebate-slider-container .rebate-slider-wrapper .rebate-label-left {
    text-align: left
}

.invite-dialog-content .custom-invite-code .rebate-slider-container .rebate-slider-wrapper .rebate-label-right {
    text-align: right
}

.invite-dialog-content .custom-invite-code .rebate-slider-container .rebate-slider-wrapper .rebate-slider {
    flex: 1 1
}

.invite-dialog-content .custom-invite-code .rebate-slider-container .rebate-label-wrapper {
    align-items: center;
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    line-height: 16px;
    margin-top: 10px
}

.invite-dialog-content .custom-invite-code .rebate-slider-container .rebate-label-wrapper span span {
    color: var(--dex-primary-font-color)
}

.invite-dialog-content .pagination-container {
    margin: 0 auto;
    padding: 24px 0
}

.invite-dialog-content .pagination-container .dex-pagination-wrapper .dex-pagination {
    justify-content: center
}

.dex-button-primary.disabled,
.dex-button-primary.disabled:hover {
    background-color: var(--dex-input-disabled-bg);
    color: var(--dex-quaternary-font-color)
}

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

.inviteCodeModal-d85b0182 {
    padding-bottom: 32px;
    padding-top: 70px
}

.inviteCodeModal-d85b0182 img {
    display: block;
    height: 60px;
    margin: 0 auto;
    width: 60px
}

.inviteCodeModal-d85b0182 div,
.inviteCodeModal-d85b0182 p {
    text-align: center
}

.inviteCodeModal-d85b0182 p:first-of-type {
    color: var(--dexc-dark-primary-font-color);
    font-size: 14px;
    line-height: 18px;
    margin: 12px 0 28px
}

.inviteCodeModal-d85b0182 .inviteCode-aca5272b {
    color: var(--dexc-dark-primary-font-color);
    font-size: 24px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 28px
}

.inviteCodeModal-d85b0182 p:last-of-type {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 36px
}

.inviteCodeModal-d85b0182 button {
    border-radius: 36px;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    height: 52px;
    width: 100%
}

.invite-page {
    background-color: var(--dexc-dark-primary-bg-color);
    margin-bottom: 50px;
    min-height: 100vh;
    width: 100%
}

.invite-page .invite-container {
    margin: 0 auto;
    padding: 0 20px;
    width: 1200px
}

.invite-page .invite-container .my-rebate-section {
    margin-bottom: 60px;
    position: relative;
    z-index: 999
}

.invite-page .invite-container .my-rebate-section .section-title {
    align-items: center;
    color: var(--dexc-dark-primary-font-color);
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px
}

.invite-page .invite-container .my-rebate-section .section-title i {
    margin-left: 6px
}

.invite-page .invite-container .my-rebate-section .section-title p {
    font-size: 32px;
    font-weight: 600;
    line-height: 30px
}

.invite-page .invite-container .my-rebate-section .section-title button {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px
}

.invite-page .invite-container .my-rebate-section .rebate-cards {
    background: #080808;
    border-radius: 24px;
    box-shadow: inset 0 1.154px 0 1px hsla(0, 0%, 100%, .19), 0 8.077px 3.462px 0 rgba(0, 0, 0, .03), 0 4.615px 4.615px 0 rgba(0, 0, 0, .25), 0 0 6px 0 hsla(0, 0%, 100%, .25), inset 0 1px 1px 0 rgba(199, 211, 234, .12), inset 0 24px 48px 0 rgba(199, 211, 234, .05);
    display: flex
}

.invite-page .invite-container .my-rebate-section .rebate-cards .rebate-card {
    width: 25%;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
    padding: 40px;
    position: relative
}

.invite-page .invite-container .my-rebate-section .rebate-cards .rebate-card:not(:last-child):after {
    background: var(--dexc-dark-tertiary-font-color);
    content: "";
    height: 80px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px
}

.invite-page .invite-container .my-rebate-section .rebate-cards .rebate-card .card-title {
    color: var(--dexc-dark-primary-font-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px
}

.invite-page .invite-container .my-rebate-section .rebate-cards .rebate-card .card-desc {
    align-items: center;
    color: var(--dexc-white-tertiary-font-color);
    display: flex;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px
}

.invite-page .invite-container .my-rebate-section .rebate-cards .rebate-card .card-desc.invite p {
    align-items: center;
    color: var(--dexc-dark-primary-font-color);
    display: flex;
    margin-left: 6px
}

.invite-page .invite-container .my-rebate-section .rebate-cards .rebate-card .card-desc .custom {
    align-items: center;
    color: var(--dexc-dark-primary-font-color);
    display: inline-block;
    display: flex;
    font-size: 12px
}

.invite-page .invite-bg {
    height: 500px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 1200px
}

.invite-page .loading-root {
    z-index: 2
}

.portfolio-page {
    margin: 0 auto;
    padding-bottom: 60px;
    padding-top: 60px;
    width: 1200px
}

.portfolio-panel-title {
    color: var(--dexc-primary-font-color);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 16px;
    margin-top: 60px
}

.portfolio-panel-container {
    border: 1px solid var(--dexc-trade-divider-color);
    border-radius: 24px;
    min-width: 1200px !important;
    overflow: hidden;
    width: 100% !important
}

.investment .investment-header {
    align-items: center;
    color: var(--dexc-primary-font-color);
    display: flex;
    font-size: 24px;
    font-weight: 500;
    justify-content: space-between;
    line-height: 30px;
    margin-bottom: 16px
}

.investment .investment-header .activity-tag {
    background: var(--Functional-Orange_P20, rgba(251, 185, 48, .2));
    border-radius: 16px;
    color: var(--Functional-Orange, #fbb930);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    padding: 4px 16px
}

.investment .investment-content {
    display: flex;
    gap: 12px;
    justify-content: space-between
}

.investment .investment-content-left {
    background: var(--dexc-primary-container-bg);
    border: 1px solid var(--dexc-common-border-color);
    border-radius: 24px;
    display: flex;
    height: auto;
    padding: 24px;
    width: 300px
}

.investment .investment-content-right {
    border: 1px solid var(--dexc-common-border-color);
    border-radius: 24px;
    flex: 1 1;
    height: 100%
}

.investment-info {
    flex-direction: column;
    height: 100%;
    width: 100%
}

.investment-info,
.investment-info .first {
    display: flex;
    justify-content: space-between
}

.investment-info .first {
    align-items: center;
    margin-bottom: 24px
}

.investment-info .first .address {
    align-items: center;
    background: #1d1d1d;
    border-radius: 20px;
    color: var(--dexc-primary-font-color);
    display: flex;
    font-size: 14px;
    font-weight: 500;
    height: 26px;
    padding: 0 12px
}

.investment-info .first .address span:first-child {
    margin-right: 4px
}

.investment-info .investment-content-left-total .total-title {
    align-items: center;
    color: var(--dexc-secondary-font-color);
    display: flex;
    font-size: 14px;
    font-weight: 400;
    gap: 4px;
    line-height: 18px;
    margin-bottom: 12px
}

.investment-info .investment-content-left-total .total-title .eye-icon {
    color: var(--dexc-secondary-font-color) !important;
    cursor: pointer
}

.investment-info .total-value {
    align-items: center;
    color: var(--dexc-primary-font-color);
    display: flex;
    gap: 4px
}

.investment-info .total-value .total-value-number {
    font-size: 28px;
    font-weight: 500;
    line-height: 34px
}

.investment-info .total-value .total-value-unit {
    font-size: 14px;
    line-height: 16px;
    margin-top: 8px
}

.investment-info .total-today {
    align-items: center;
    color: var(--dexc-secondary-font-color);
    display: flex;
    font-size: 14px;
    font-weight: 400;
    gap: 4px;
    line-height: 14px;
    margin-top: 8px
}

.investment-info .total-today .total-today-text {
    border-bottom: 1px dashed var(--dexc-secondary-font-color);
    cursor: pointer
}

.investment-info .total-value-list {
    margin-top: 34px
}

.investment-info .total-value-list .total-value-list-item {
    align-items: center;
    display: flex;
    height: 18px;
    justify-content: space-between
}

.investment-info .total-value-list .total-value-list-item-title {
    color: var(--dexc-secondary-font-color);
    font-size: 14px;
    line-height: 18px
}

.investment-info .total-value-list .total-value-list-item-title.line {
    border-bottom: 1px dashed var(--dexc-secondary-font-color)
}

.investment-info .total-value-list .total-value-list-item-value {
    color: var(--dexc-primary-font-color);
    font-size: 14px;
    line-height: 18px
}

.investment-info .total-value-list .total-value-list-item:not(:last-child) {
    margin-bottom: 8px
}

.investment-info .btns {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between
}

.investment-info .btns button {
    color: var(--dexc-primary-font-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 500
}

.investment-info .btns button .inner-content {
    align-items: center;
    border-radius: 100px;
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    height: 38px;
    justify-content: center;
    padding: 12px 24px;
    width: 120px
}

.investment-info .btns .wallet-link {
    background: transparent
}

.investment-info .btns .wallet-link .inner-content {
    background: var(--dexc-primary-color);
    width: 250px
}

.investment-info .btns .wallet-deposit {
    background: transparent
}

.investment-info .btns .wallet-deposit .inner-content {
    background: var(--dexc-primary-color)
}

.investment-info .btns .wallet-withdraw {
    background: transparent
}

.investment-info .btns .wallet-withdraw .inner-content {
    background: var(--dexc-primary-container-bg);
    border: 1px solid var(--dexc-base-border-color)
}

.investment-info .fee {
    align-items: center;
    background: #1d1d1d;
    border-radius: 20px;
    display: flex;
    gap: 12px;
    height: 28px;
    justify-content: space-between;
    margin-top: 16px;
    padding: 0 16px
}

.investment-info .fee .fee-item {
    align-items: center;
    color: var(--dexc-secondary-font-color);
    display: flex;
    font-size: 12px;
    gap: 2px
}

.investment-info .fee .fee-item span {
    color: var(--dexc-primary-font-color)
}

.investment-chart {
    height: 100%;
    width: 100%
}

.investment-chart .chart-tabs {
    padding-top: 24px
}

.investment-chart .chart-tabs .dex-tabs-nav-wrap {
    padding: 0 24px
}

.investment-chart .chart-tabs .dex-tabs-content-holder {
    padding: 24px 0 0
}

.investment-chart .chart-time-select {
    padding-right: 24px
}

.investment-chart .info-account {
    align-items: center;
    color: var(--dexc-secondary-font-color);
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 0 24px
}

.investment-chart .info-account .info-account-total {
    font-size: 16px;
    gap: 8px;
    line-height: 20px
}

.investment-chart .info-account .info-account-total span {
    color: var(--dexc-primary-font-color)
}

.investment-chart .info-account .info-account-time {
    font-size: 10px;
    line-height: 14px
}

.investment-chart .dex-spin {
    width: 100%
}

.investment-chart .chart-content {
    height: 200px;
    padding-right: 12px;
    width: 100%
}

.investment-chart .chart-content .chart-content-chart {
    height: 100%;
    width: 100%
}

.investment-chart .chart-tip {
    color: var(--dexc-secondary-font-color);
    font-size: 12px;
    line-height: 16px;
    padding: 12px 24px
}

.faqSection-e74a2e75 .sectionTitle-ddedd715 {
    color: var(--dexc-dark-primary-font-color);
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px;
    margin-bottom: 16px
}

.faqSection-e74a2e75 .faqList-eff6b8c8 {
    background: var(--dexc-dark-primary-container-bg);
    border: 1px solid var(--dexc-dark-common-border-color);
    border-radius: 24px;
    padding: 0 24px
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e {
    border-bottom: 1px solid var(--dexc-dark-common-border-color);
    overflow: hidden
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e:last-child {
    border-bottom: 0
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e .faqQuestion-a07419aa {
    align-items: center;
    cursor: pointer;
    display: flex;
    padding: 24px 0;
    transition: background-color .2s ease
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e .faqQuestion-a07419aa .faqQ-e63c0e9a {
    align-items: center;
    background: var(--dexc-dark-component-bg-color);
    border-radius: 4px;
    color: var(--dexc-dark-secondary-font-color);
    display: flex;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    height: 16px;
    justify-content: center;
    line-height: 14px;
    margin-right: 8px;
    width: 16px
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e .faqQuestion-a07419aa .faqText-a6f1d52a {
    color: var(--dexc-dark-primary-font-color);
    flex: 1 1;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e .faqQuestion-a07419aa .faqArrow-d386c548 {
    color: var(--dexc-dark-secondary-font-color);
    flex-shrink: 0;
    font-size: 12px;
    transition: transform .2s ease
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e .faqQuestion-a07419aa .faqArrow-d386c548.expanded-fdad573f {
    transform: rotate(180deg)
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e .faqAnswer-c0d3649c {
    align-items: flex-start;
    display: flex;
    margin-bottom: 24px
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e .faqAnswer-c0d3649c .faqA-c29195ef {
    align-items: center;
    background: var(--dexc-dark-component-bg-color);
    border-radius: 4px;
    color: var(--dexc-dark-secondary-font-color);
    display: flex;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    height: 16px;
    justify-content: center;
    line-height: 14px;
    margin-right: 8px;
    margin-top: 3px;
    width: 16px
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e .faqAnswer-c0d3649c .faqText-a6f1d52a {
    color: var(--dexc-dark-secondary-font-color);
    flex: 1 1;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

.accountInfo-a4a986cb {
    align-items: center;
    background: var(--dexc-dark-trade-primary-container-bg);
    border-radius: 24px;
    box-shadow: inset 0 1.154px 0 1px hsla(0, 0%, 100%, .19), 0 8.077px 3.462px 0 rgba(0, 0, 0, .03), 0 4.615px 4.615px 0 rgba(0, 0, 0, .25), 0 0 6px 0 hsla(0, 0%, 100%, .25), inset 0 1px 1px 0 rgba(199, 211, 234, .12), inset 0 24px 48px 0 rgba(199, 211, 234, .05);
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 24px
}

.accountInfo-a4a986cb .balanceSection-b0817a6b {
    display: flex;
    gap: 100px
}

.accountInfo-a4a986cb .balanceItem-e4535106 {
    align-items: center;
    display: flex;
    gap: 8px
}

.accountInfo-a4a986cb .balanceItem-e4535106 .label-c8a7b0e6 {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px
}

.accountInfo-a4a986cb .balanceItem-e4535106 .value-adc3b78e {
    color: var(--dexc-dark-primary-font-color);
    font-size: 24px;
    font-weight: 500;
    line-height: 32px
}

.accountInfo-a4a986cb .recordsBtn-a1f76ecb {
    background: transparent;
    border: 1px solid #6001ff;
    border-radius: 8px;
    color: #6001ff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    transition: all .2s ease
}

.accountInfo-a4a986cb .recordsBtn-a1f76ecb:hover {
    background: #6001ff;
    color: #fff
}

.incomeProducts-cb735c06 {
    background: var(--dexc-dark-primary-container-bg);
    border: 1px solid var(--dexc-dark-common-border-color);
    border-radius: 24px;
    padding: 24px
}

.incomeProducts-cb735c06 .header-e20cf304 {
    align-items: center;
    border-bottom: 1px solid var(--dexc-dark-common-border-color);
    display: flex;
    justify-content: space-between;
    padding-bottom: 24px
}

.incomeProducts-cb735c06 .header-e20cf304 .title-ee678166 {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px
}

.incomeProducts-cb735c06 .header-e20cf304 .connectWalletBtn-d08a9f15,
.incomeProducts-cb735c06 .header-e20cf304 .earningRecordBtn-aba49a35,
.incomeProducts-cb735c06 .header-e20cf304 .receiveEarningsBtn-f1641075 {
    border: none;
    border-radius: 24px;
    color: var(--dexc-dark-primary-font-color);
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    padding: 7px 24px;
    transition: all .3s ease
}

.incomeProducts-cb735c06 .header-e20cf304 .earningRecordBtn-aba49a35 {
    background: transparent;
    border: 1px solid var(--dexc-dark-base-border-color);
    margin-right: 16px;
    padding: 7px 38px
}

.incomeProducts-cb735c06 .productsList-dcf844b6 {
    display: flex;
    flex-direction: column
}

.incomeProducts-cb735c06 .productsList-dcf844b6 .empty-f1935162 {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 260px;
    justify-content: center
}

.incomeProducts-cb735c06 .productsList-dcf844b6 .productItem-af395062 {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding: 20px 0
}

.incomeProducts-cb735c06 .productsList-dcf844b6 .productItem-af395062 .tokenSymbol-d9bcc142 {
    align-items: center;
    border: none;
    display: flex
}

.incomeProducts-cb735c06 .productsList-dcf844b6 .productItem-af395062 .symbol-c65c756f {
    color: var(--dexc-dark-primary-font-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    margin-left: 8px
}

.incomeProducts-cb735c06 .productsList-dcf844b6 .productItem-af395062 .apyInfo-e6b3c91f {
    align-items: center;
    display: flex;
    gap: 8px
}

.incomeProducts-cb735c06 .productsList-dcf844b6 .productItem-af395062 .apyInfo-e6b3c91f .apyLabel-f3f9f200 {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 28px
}

.incomeProducts-cb735c06 .productsList-dcf844b6 .productItem-af395062 .apyInfo-e6b3c91f .apy-a1ae93f0 {
    color: var(--dexc-dark-primary-font-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px
}

.incomeProducts-cb735c06 .earnProducts-bcade121 {
    border: none;
    padding: 24px 0 0
}

.exchangeSuccess-fd3e8aa9 {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 90px
}

.exchangeSuccess-fd3e8aa9 .dex-icon-success {
    color: var(--dexc-dark-primary-hover-color);
    display: inline-block;
    font-size: 54px;
    height: 54px;
    line-height: 54px;
    margin-bottom: 32px
}

.exchangeSuccess-fd3e8aa9 .exchangeSuccessText-caa2550a {
    color: var(--dexc-dark-primary-font-color);
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 8px
}

.exchangeSuccess-fd3e8aa9 .exchangeSuccessTips-ae26c2b4 {
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 32px
}

.exchangeSuccess-fd3e8aa9 .exchangeSuccessBtn-f0196639 {
    border-radius: 32px;
    margin: 24px 0 32px;
    padding: 16px;
    width: 100%
}

.tabContent-ecdce619 {
    margin: 0 -24px;
    padding: 0 24px 24px
}

.tabContent-ecdce619 .coinFilters-a9d469d5 {
    padding: 16px 0
}

.tabContent-ecdce619 .coinFilters-a9d469d5 .dex-tabs-tab-active {
    background-color: var(--dexc-dark-component-bg-color) !important;
    border-radius: 20px !important
}

.tabContent-ecdce619 .dex-token-symbol {
    background-color: transparent
}

.recordList-a6ae002d {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    height: 286px;
    justify-items: center;
    margin: 0 -24px;
    overflow-y: auto;
    padding: 0 24px
}

.recordList-a6ae002d.hasData-f1dcfcc3 {
    display: block
}

.recordItem-c9815df6 {
    border-bottom: 1px solid var(--dexc-dark-common-border-color);
    padding: 16px 0;
    width: 100%
}

.recordItem-c9815df6:first-child {
    padding-top: 0
}

.recordItem-c9815df6 .recordHeader-f651e134 {
    align-items: center;
    color: #8a8a8e;
    display: flex;
    font-size: 12px;
    font-weight: 400;
    justify-content: space-between;
    line-height: 16px;
    margin-bottom: 8px
}

.recordItem-c9815df6 .recordContent-a13624a7 {
    align-items: center;
    display: flex
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordLeft-cd196774 {
    align-items: center;
    display: flex;
    flex: 1 1;
    gap: 8px
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordLeft-cd196774 .recordInfo-fc7e72a1 .coinName-d763bb0a {
    align-items: center;
    color: var(--dexc-dark-primary-font-color);
    display: flex;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 2px
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordLeft-cd196774 .recordInfo-fc7e72a1 .tag-e2c48fd8 {
    margin-left: 8px
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordLeft-cd196774 .recordInfo-fc7e72a1 .amount-e1654b9a {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordArrow-e99a9366 {
    align-items: center;
    display: flex;
    height: 16px;
    justify-content: center;
    width: 16px
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordRight-a78bf0a4 {
    align-items: center;
    display: flex;
    flex: 1 1;
    gap: 12px;
    justify-content: flex-end
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordRight-a78bf0a4 .recordInfo-fc7e72a1 {
    text-align: right
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordRight-a78bf0a4 .recordInfo-fc7e72a1 .coinName-d763bb0a {
    color: var(--dexc-dark-primary-font-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 2px
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordRight-a78bf0a4 .recordInfo-fc7e72a1 .amount-e1654b9a {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordRight-a78bf0a4 .recordInfo-fc7e72a1 .amount-e1654b9a .amountValue-fe8a152d {
    vertical-align: middle
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordRight-a78bf0a4 .recordInfo-fc7e72a1 .dex-tag {
    border-radius: 2px;
    font-size: 10px;
    font-weight: 400;
    line-height: 11px;
    margin-left: 4px;
    padding: 3px 4px
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordRight-a78bf0a4 .typeLabel-f9514a73 {
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    padding: 4px 8px;
    white-space: nowrap
}

.recordItem-c9815df6 .recordPending-f30b45f1 {
    color: var(--dexc-success-color)
}

.icon-c0aae262 {
    border: none
}

.tag-af20d3af.dex-tag {
    border-radius: 2px;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
    padding: 3px 4px
}

.tag-af20d3af.tag-11-cc0c64f4 {
    background: var(--Functional-Orange_P20, rgba(251, 185, 48, .2)) !important;
    color: var(--Functional-Orange, #fbb930) !important
}

.dex-tag {
    background-color: var(--dexc-common-border-color);
    cursor: default;
    display: inline-block;
    font-size: 12px;
    line-height: 16px;
    text-align: center
}

.dex-tag-small {
    padding: 0 4px
}

.dex-tag-mid {
    padding: 4px 8px
}

.dex-tag-large {
    padding: 6px 8px
}

.dex-tag-primary {
    background-color: var(--dex-tag-cur-color)
}

.dex-tag-default,
.dex-tag-primary {
    border: none;
    color: var(--dexc-primary-font-color)
}

.dex-tag-default {
    background-color: rgba(var(--dex-tag-cur-color-rgb), .2)
}

.dex-tag-ghost {
    background-color: transparent;
    border: 1px solid var(--dex-tag-cur-color);
    color: var(--dexc-primary-font-color)
}

.dex-tag-link {
    background-color: var(--dex-component-background-color);
    color: var(--dex-primary-font-color);
    cursor: pointer;
    transition: color .3s
}

.dex-tag-link:hover {
    color: var(--dex-primary-color);
    transition: color .3s
}

.dex-tag-gray {
    background-color: var(--dexc-trade-divider-color);
    color: var(--dexc-secondary-font-color)
}

.dex-tag-blue {
    --dex-tag-cur-color: var(--dex-primary-color);
    --dex-tag-cur-color-rgb: var(--dex-primary-color-rgb)
}

.dex-tag-green {
    --dex-tag-cur-color: var(--dex-success-color);
    --dex-tag-cur-color-rgb: var(--dex-success-color-rgb)
}

.dex-tag-yellow {
    --dex-tag-cur-color: var(--dex-aux-color);
    --dex-tag-cur-color-rgb: var(--dex-aux-color-rgb)
}

.dex-tag-red {
    --dex-tag-cur-color: var(--dex-error-color);
    --dex-tag-cur-color-rgb: var(--dex-error-color-rgb)
}

.dex-tag-normal.dex-tag-large,
.dex-tag-normal.dex-tag-mid,
.dex-tag-normal.dex-tag-small {
    border-radius: var(--dex-border-radius-xs)
}

.dex-tag-circle {
    border-radius: 100px
}

.dex-tag-special {
    border-radius: 8px 0
}

.productsList-f816f95d {
    background: var(--dexc-dark-primary-container-bg);
    border: 1px solid var(--dexc-dark-common-border-color);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px
}

.productsList-f816f95d .empty-db3106f2 {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 260px;
    justify-content: center
}

.productsList-f816f95d .productItem-ce0baeaa {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 20px 0
}

.productsList-f816f95d .productItem-ce0baeaa .productInfo-b6683fdd {
    align-items: center;
    display: flex
}

.productsList-f816f95d .productItem-ce0baeaa .productInfo-b6683fdd .tokenSymbol-e9cf8d38 {
    border: none
}

.productsList-f816f95d .productItem-ce0baeaa .productInfo-b6683fdd .symbol-c78a4a4b {
    color: var(--dexc-dark-primary-font-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    margin-left: 8px
}

.productsList-f816f95d .productItem-ce0baeaa .productInfo-b6683fdd .tag-c4d69f19 {
    margin-left: 8px
}

.productsList-f816f95d .productItem-ce0baeaa .apyInfo-c99120d5 {
    align-items: center;
    display: flex;
    gap: 8px
}

.productsList-f816f95d .productItem-ce0baeaa .apyInfo-c99120d5 .apyLabel-fc52a0b4 {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 28px
}

.productsList-f816f95d .productItem-ce0baeaa .apyInfo-c99120d5 .apy-d5a9b8ff {
    color: var(--dexc-dark-primary-font-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px
}

.stakingPage-ddd65f26 {
    background-color: #080808;
    min-height: 100vh;
    padding-bottom: 100px;
    width: 100%
}

.stakingPage-ddd65f26 .dex-token-symbol {
    background-color: transparent
}

.stakingPage-ddd65f26 .stakingContainer-f32eaa99 {
    margin: 0 auto;
    width: 1200px
}

.stakingPage-ddd65f26 .balanceSection-f69c88c0,
.stakingPage-ddd65f26 .earnSection-f1c2b1ce {
    margin-bottom: 60px
}

.stakingPage-ddd65f26 .earnSection-f1c2b1ce .sectionTitle-b08b7321 {
    color: var(--dexc-dark-primary-font-color);
    font-size: 28px;
    font-weight: 500;
    line-height: 40px;
    margin-bottom: 16px
}

.heroSection-d7b7b2bf {
    margin-bottom: 12px;
    overflow: hidden
}

.heroSection-d7b7b2bf .heroContent-f088ed93 {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 78px 0 87px;
    position: relative
}

.heroSection-d7b7b2bf .heroLeft-fa0ff91c {
    flex: 1 1
}

.heroSection-d7b7b2bf .heroLeft-fa0ff91c .heroSubtitle-bace3597 {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 16px
}

.heroSection-d7b7b2bf .heroLeft-fa0ff91c .heroTitle-d7969307 {
    font-size: 48px;
    font-weight: 700;
    line-height: 80px;
    margin-bottom: 32px;
    margin-right: 486px
}

.heroSection-d7b7b2bf .heroLeft-fa0ff91c .heroTitle-d7969307 span:first-child {
    background: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, .7));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.heroSection-d7b7b2bf .heroLeft-fa0ff91c .heroTitle-d7969307 span:last-child {
    color: #fbb930
}

.heroSection-d7b7b2bf .heroLeft-fa0ff91c .eventRulesBtn-f2026d40 {
    background: var(--dexc-dark-primary-bg-color);
    border: 1px solid var(--dexc-dark-invite-btn-border-color);
    border-radius: 30px;
    color: var(--dexc-dark-primary-font-color);
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 auto;
    padding: 16px 40px
}

.heroSection-d7b7b2bf .heroLeft-fa0ff91c .eventRulesBtn-f2026d40 .dex-icon-right-arrow {
    color: var(--dexc-dark-primary-font-color);
    font-size: 16px;
    margin-left: 4px
}

.heroSection-d7b7b2bf .banner-dcff1f9a {
    position: absolute;
    right: -56px;
    top: 18px
}

.heroSection-d7b7b2bf .banner-dcff1f9a img {
    height: 380px;
    width: 380px
}

.hero-banner {
    margin-top: 80px;
    padding: 0 0 100px
}

.hero-banner.no-login {
    margin-bottom: -28px;
    margin-top: 26px;
    padding-bottom: 0
}

.hero-banner .hero-content {
    align-items: center;
    display: grid;
    gap: 60px;
    grid-template-columns: 2fr 1fr;
    margin: 0 auto;
    max-width: 1200px
}

.hero-banner .hero-left .hero-title {
    align-items: center;
    color: var(--dex-primary-font-color);
    display: flex;
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 8px
}

.hero-banner .hero-left .hero-subtitle {
    color: var(--dex-primary-font-color);
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 36px
}

.hero-banner .hero-left .hero-subtitle span {
    color: var(--dex-warning-color);
    font-size: 54px;
    line-height: 66px
}

.hero-banner .hero-left .activity-time {
    color: var(--dexc-white-tertiary-font-color);
    font-size: 14px;
    line-height: 18px;
    margin-top: 14px
}

.hero-banner .hero-left .phase-selector .dex-select {
    background: var(--dexc-dark-primary-container-bg);
    border: 1px solid var(--dexc-dark-common-border-color);
    border-radius: 8px
}

.hero-banner .hero-left .phase-selector .dex-select .dex-select-selector {
    border-radius: 8px;
    min-height: 48px;
    padding: 12px 20px
}

.hero-banner .hero-left .phase-selector .dex-select .dex-select-selector .dex-select-selection-item {
    color: var(--dex-primary-font-color);
    font-size: 14px;
    line-height: 24px;
    margin-right: 28px
}

.hero-banner .hero-left .phase-selector .dex-select .dex-select-arrow {
    color: var(--dex-primary-font-color);
    right: 20px
}

.hero-banner .hero-left .phase-selector .dex-select:focus,
.hero-banner .hero-left .phase-selector .dex-select:hover {
    border-color: var(--dexc-dark-common-border-color)
}

.hero-banner .hero-left .dex-select-item-option-content {
    font-size: 14px;
    line-height: 18px;
    padding-left: 0
}

.hero-banner .hero-right>img {
    height: 399px;
    width: 438px
}

.hero-banner .hero-right .claim-box {
    border-radius: 16px;
    box-shadow: 0 8.077px 3.462px 0 rgba(0, 0, 0, .03), 0 4.615px 4.615px 0 rgba(0, 0, 0, .25), 0 0 6px 0 hsla(0, 0%, 100%, .25), inset 0 1.154px 0 1px hsla(0, 0%, 100%, .19);
    padding: 32px
}

.hero-banner .hero-right .claim-box .claim-title {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 6px
}

.hero-banner .hero-right .claim-box .claim-value {
    align-items: center;
    color: var(--dex-primary-font-color);
    display: flex;
    font-size: 24px;
    font-weight: 700;
    justify-content: space-between;
    line-height: 30px;
    margin-bottom: 18px
}

.hero-banner .hero-right .claim-box .claim-value p {
    align-items: center;
    color: var(--dex-primary-font-color);
    cursor: pointer;
    display: flex;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px
}

.hero-banner .hero-right .claim-box .claim-button {
    width: 100%
}

.hero-banner .claim-button {
    --dex-border-radius-mid: 100px
}

.hero-banner .dex-select-dropdown .dex-select-item {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    padding: 12px 15px
}

.hero-banner .dex-select-dropdown .dex-select-item .dex-select-item-option-selected,
.hero-banner .dex-select-dropdown .dex-select-item:hover {
    background-color: #232323;
    color: var(--dex-primary-font-color)
}

.success-modal .success-icon {
    align-items: center;
    background-color: var(--dexc-dark-primary-color);
    border-radius: 50%;
    display: flex;
    height: 54px;
    justify-content: center;
    margin: 32px auto;
    width: 54px
}

.success-modal .success-icon img {
    height: 42px;
    width: 42px
}

.success-modal .dex-modal-body p {
    color: var(--dex-primary-font-color);
    font-size: 16px;
    line-height: 20px;
    text-align: center
}

.claim-info-modal .dex-modal-content .dex-modal-footer,
.success-modal .dex-modal-content .dex-modal-footer {
    padding: 24px 24px 32px
}

.claim-info-modal .dex-modal-content .dex-modal-footer button,
.success-modal .dex-modal-content .dex-modal-footer button {
    max-width: 100%
}

.claim-details-list {
    max-height: 340px;
    overflow-y: scroll
}

.claim-details-list::-webkit-scrollbar {
    width: 6px
}

.claim-details-list::-webkit-scrollbar-thumb {
    background: var(--dexc-dark-common-border-color);
    border-radius: 3px
}

.claim-details-list::-webkit-scrollbar-thumb:hover {
    background: var(--dex-primary-color)
}

.claim-details-list .claim-item {
    align-items: center;
    border-bottom: .5px solid var(--dexc-dark-base-border-color);
    display: flex;
    justify-content: space-between;
    padding: 10px 0
}

.claim-details-list .claim-item:last-child {
    border-bottom: none
}

.claim-details-list .claim-item .claim-item-content {
    display: flex;
    flex: 1 1;
    flex-direction: column
}

.claim-details-list .claim-item .icon-box.success {
    background-color: var(--dexc-success-color)
}

.claim-details-list .claim-item .claim-amount {
    color: var(--dex-primary-font-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px
}

.claim-details-list .claim-item .claim-date {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 12px;
    line-height: 16px;
    margin-top: 2px
}

.claim-details-list .claim-item .claim-status {
    align-items: center;
    display: flex;
    flex: 1 1;
    gap: 8px;
    justify-content: flex-end
}

.claim-details-list .claim-item .claim-status.success,
.claim-details-list .claim-item .claim-status.success i {
    color: #52c41a
}

.claim-details-list .claim-item .claim-status.pending,
.claim-details-list .claim-item .claim-status.pending i {
    color: #faad14
}

.claim-details-list .claim-item .claim-status span {
    font-size: 14px
}

.claim-details-list .claim-item .claim-status .record-icon img {
    height: auto;
    width: 16px
}

.claim-info-modal .dex-modal-body,
.success-modal .dex-modal-body {
    padding: 0
}

.claim-info-modal .dex-modal-body .claim-details-list,
.success-modal .dex-modal-body .claim-details-list {
    padding: 0 24px
}

.no-data {
    align-items: center;
    color: #8a8a8e;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: 400;
    justify-content: center;
    line-height: 20px;
    padding: 88px 0;
    text-align: center
}

.no-data img {
    height: auto;
    margin-bottom: 10px;
    width: 80px
}

.reward-expire-time {
    align-items: center;
    color: var(--dexc-dark-secondary-font-color);
    display: flex;
    font-size: 14px;
    font-weight: 500;
    justify-content: space-between;
    line-height: 18px;
    margin-bottom: 16px;
    margin-top: 24px
}

.reward-expire-time span {
    color: var(--dexc-dark-secondary-font-color);
    margin-right: 4px
}

.reward-expire-time span:first-of-type {
    margin-right: 2px
}

.reward-expire-time span:last-of-type {
    margin-right: 0
}

.reward-expire-time span.spit {
    color: var(--dexc-dark-component-bg-color)
}

.reward-expire-time span.number {
    background: var(--dexc-dark-primary-container-bg);
    border-radius: 4px;
    color: var(--dex-primary-font-color);
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding: 0 4px
}

.phase-selector .tag {
    background: var(--Functional-Orange_P20, rgba(251, 185, 48, .2));
    border-radius: 2px;
    color: var(--Functional-Orange, #fbb930);
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    margin-left: 8px;
    padding: 4px
}

.phase-selector .tag.grey {
    background: var(--Card-L2, #202020);
    color: var(--Text-L3)
}

.phase-selector .unselected-option {
    color: var(--Text-L3, #8a8a8e)
}

.activity-one {
    margin-bottom: 102px
}

.activity-one .welcome-card {
    background: var(--dex-component-background-color);
    border: 1px solid var(--dex-trade-base-divider-color);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    transition: all .3s ease
}

.activity-one .welcome-card .card-title {
    align-items: center;
    color: var(--dex-primary-font-color);
    display: flex;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px
}

.activity-one .welcome-card img {
    height: auto;
    margin-left: 6px;
    width: 24px
}

.activity-one .welcome-card:hover {
    border-color: var(--dex-trade-base-divider-color);
    transform: translateY(-2px)
}

.activity-one .welcome-card .card-content {
    display: flex;
    flex: 1 1;
    flex-direction: column
}

.activity-one .welcome-card .card-content+.button-container {
    margin-top: 16px
}

.activity-one .card-description {
    color: var(--dex-secondary-font-color);
    color: #828282;
    font-size: 14px;
    line-height: 18px;
    margin: 8px 0
}

.activity-one .card-description.last-card-description {
    margin-top: 0
}

.activity-one .tag {
    background: var(--dexc-dark-primary-color);
    border-radius: 2px;
    color: var(--dex-primary-font-color);
    display: inline-block;
    font-size: 10px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    white-space: nowrap;
    width: -moz-fit-content;
    width: fit-content
}

.activity-one .progress-container {
    align-items: center;
    display: flex;
    margin: 16px 0
}

.activity-one .progress-container .user-icon {
    align-items: center;
    color: var(--dex-primary-font-color);
    display: flex;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin-right: 8px
}

.activity-one .progress-container .user-icon span {
    color: #666
}

.activity-one .progress-container .user-icon i {
    margin-right: 4px
}

.activity-one .progress-bar {
    background: var(--dex-trade-base-divider-color);
    border-radius: 12px;
    height: 6px;
    overflow: hidden;
    width: 100%
}

.activity-one .progress-bar .progress-text {
    color: var(--dex-tertiary-font-color);
    font-size: 14px;
    text-align: center
}

.activity-one .progress-bar .progress-fill {
    background: #fbb930;
    border-radius: 12px;
    height: 100%;
    transition: width .3s ease
}

.activity-one .button-container {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.activity-one .button-container img {
    height: 16px;
    margin-right: 4px;
    width: 16px
}

.activity-one .button-container button {
    align-items: center;
    border-radius: 24px;
    color: var(--dex-primary-font-color);
    display: flex;
    font-size: 14px;
    line-height: 18px;
    padding: 9px 24px
}

.activity-one .button-container button.green {
    color: var(--dexc-success-color)
}

.activity-one .button-container .card-footer {
    text-align: right
}

.activity-one .button-container .card-footer .limit-text {
    color: var(--dexc-dark-secondary-font-color);
    display: block;
    font-size: 12px;
    line-height: 16px
}

.activity-one .button-container .card-footer .extra-info {
    color: var(--dexc-dark-primary-font-color);
    display: block;
    font-size: 12px;
    line-height: 16px;
    margin-top: 4px
}

.activity-one .button-container .card-footer .extra-info span {
    color: #fbb930
}

.dex-button:disabled:not(.dex-button-loading) {
    color: var(--dexc-dark-secondary-font-color)
}

.activity-two {
    margin-bottom: 102px
}

.activity-two .card-content {
    align-items: center;
    background: var(--dexc-dark-trade-primary-container-bg);
    border: .5px solid var(--dexc-dark-base-border-color);
    border-radius: 24px;
    display: flex;
    height: 118px;
    justify-content: space-between;
    padding: 24px
}

.activity-two .card-content .prize-info .trading-condition {
    align-items: center;
    color: var(#828282);
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    margin-top: 6px
}

.activity-two .card-content .prize-info .trading-condition .tag {
    background: var(--Primary-Primary, #6001ff);
    border-radius: 2px;
    color: var(--dex-primary-font-color);
    font-size: 10px;
    line-height: 12px;
    margin-right: 6px;
    padding: 3px 4px
}

.activity-two .card-content .prize-info .prize-label {
    color: var(--dex-primary-font-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 24px
}

.activity-two button {
    color: var(--dex-primary-font-color);
    font-size: 14px;
    line-height: 18px;
    padding: 8px 24px
}

.activity-two .section-description,
.activity-two button {
    align-items: center;
    display: flex
}

.activity-two .section-description span {
    align-items: center;
    color: #fbb930;
    cursor: pointer;
    display: flex;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin-left: 4px
}

.rule-modal .rule-content .rule-desc {
    color: var(--dexc-dark-secondary-font-color)
}

.rule-modal .rule-content .rule-desc p {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    padding-left: 16px;
    position: relative
}

.rule-modal .rule-content .rule-desc p:before {
    background-color: var(--dexc-dark-secondary-font-color);
    border-radius: 50%;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    top: 8px;
    width: 4px
}

.rule-modal .rule-table {
    background: var(--dexc-dark-trade-component-bg-color);
    border-radius: 12px;
    margin-top: 24px
}

.rule-modal .rule-table .rule-table-item {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: space-between;
    line-height: 44px;
    padding: 0 12px
}

.rule-modal .rule-table .label {
    line-height: 1;
    margin-right: 40px;
    width: 120px
}

.rule-modal .rule-table .value {
    flex: 1 1;
    line-height: 1
}

.rule-modal .rule-table:last-of-type {
    border-bottom: none
}

.rule-modal .dex-modal-footer button {
    max-width: 100%
}

.activity-three {
    margin-bottom: 102px
}

.activity-three .platform-card {
    background: var(--dexc-dark-trade-primary-container-bg);
    border: .5px solid var(--dex-trade-base-divider-color);
    border-radius: 24px;
    cursor: pointer;
    padding: 24px;
    position: relative;
    transition: all .3s ease
}

.activity-three .platform-card img {
    bottom: 0;
    height: 142px;
    position: absolute;
    right: 0;
    width: 142px
}

.activity-three .platform-card:hover {
    transform: translateY(-2px)
}

.activity-three .platform-card .platform-icon {
    font-size: 48px;
    margin-bottom: 24px;
    opacity: .8
}

.activity-three .platform-card .platform-title {
    color: var(--dexc-white-tertiary-font-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 4px
}

.activity-three .platform-card .platform-desc {
    color: var(--dex-primary-font-color);
    font-size: 16px;
    font-weight: 500;
    height: 100px;
    line-height: 20px
}

.activity-three .platform-card .platform-desc span {
    color: var(--dex-warning-color)
}

.activity-three .platform-card .participate-button {
    background: var(--dexc-pure-white-color);
    border-radius: 100px;
    color: var(--dexc-dark-tertiary-font-color);
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    min-width: 120px;
    padding: 10px 24px;
    text-align: center
}

.transaction-ranking {
    margin-bottom: 40px;
    --dex-table-thead-cell-padding: 16px 0;
    --dex-table-tbody-cell-padding: 16px 0;
    --dex-table-cell-first-last-padding: 0
}

.transaction-ranking .header-info {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px
}

.transaction-ranking .header-info .section-header {
    margin-bottom: 0
}

.transaction-ranking .header-info .update-time {
    color: var(--dex-tertiary-font-color);
    font-size: 14px
}

.transaction-ranking .header-info .date-range-picker {
    --dex-common-border-color: var(--dexc-dark-trade-base-divider-color)
}

.transaction-ranking .header-info .date-range-picker .dex-date-picker-suffix {
    align-items: center;
    cursor: pointer;
    display: flex;
    left: 16px;
    position: absolute
}

.transaction-ranking .header-info .date-range-picker .dex-date-picker-input {
    align-items: center;
    display: flex;
    position: relative
}

.transaction-ranking .header-info .date-range-picker .dex-date-picker-input>input {
    border: 1px solid var(--dexc-dark-trade-base-divider-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 18px;
    padding-left: 42px;
    padding-right: 4px
}

.transaction-ranking .header-info .date-range-picker .dex-date-picker-panel-container {
    background: var(--dexc-dark-trade-primary-container-bg);
    border: 1px solid var(--dexc-dark-trade-base-divider-color);
    border-radius: 24px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .4)
}

.transaction-ranking .my-ranking-info {
    background: var(--dexc-dark-trade-primary-container-bg);
    border: 1px solid var(--dexc-dark-base-border-color);
    border-radius: 16px;
    color: var(--dexc-dark-primary-font-color);
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 24px
}

.transaction-ranking .my-ranking-info .ranking-item {
    padding: 28px 32px
}

.transaction-ranking .my-ranking-info .ranking-item .label {
    font-size: 16px;
    font-style: 22px;
    font-weight: 400;
    margin-bottom: 8px
}

.transaction-ranking .my-ranking-info .ranking-item .value {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px
}

.transaction-ranking .my-ranking-info span {
    display: block
}

.transaction-ranking .ranking-table-card {
    background: var(--dex-component-background-color);
    border: 1px solid var(--dex-trade-base-divider-color);
    border-radius: 16px;
    padding: 0 24px
}

.transaction-ranking .ranking-table-card .ranking-table .dex-table {
    background: transparent
}

.transaction-ranking .ranking-table-card .ranking-table .dex-table .dex-table-thead>tr>th {
    background: var(--dex-component-background-color);
    border-bottom: 1px solid var(--dex-trade-base-divider-color);
    color: var(--dex-tertiary-font-color);
    font-weight: 600;
    padding: 16px 12px
}

.transaction-ranking .ranking-table-card .ranking-table .dex-table .dex-table-tbody>tr>td {
    background: var(--dex-component-background-color);
    border-bottom: 1px solid var(--dex-trade-base-divider-color);
    color: var(--dex-primary-font-color);
    padding: 16px 12px
}

.transaction-ranking .ranking-table-card .ranking-table .dex-table .dex-table-tbody>tr:hover>td,
.transaction-ranking .ranking-table-card .ranking-table .dex-table .dex-table-tbody>tr>td:hover {
    background: var(--dex-trade-base-divider-color)
}

.transaction-ranking .ranking-table-card .ranking-table .rank-number {
    color: var(--dex-primary-color);
    font-weight: 700
}

.transaction-ranking .ranking-table-card .ranking-table .address-cell {
    align-items: center;
    display: flex;
    gap: 8px
}

.transaction-ranking .ranking-table-card .ranking-table .address-cell .address-text {
    color: var(--dex-secondary-font-color);
    font-family: monospace;
    font-size: 14px
}

.transaction-ranking .ranking-table-card .ranking-table .address-cell .copy-button {
    color: var(--dex-tertiary-font-color);
    height: auto;
    min-width: auto;
    padding: 4px
}

.transaction-ranking .ranking-table-card .ranking-table .address-cell .copy-button:hover {
    color: var(--dex-primary-color)
}

.transaction-ranking .ranking-table-card .ranking-table .reward-amount,
.transaction-ranking .ranking-table-card .ranking-table .volume-amount {
    color: var(--dex-primary-font-color);
    font-weight: 600
}

.transaction-ranking .ranking-table-card .pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 24px
}

.transaction-ranking .ranking-table-card .pagination-wrapper .ranking-pagination .dex-pagination-item {
    background: var(--dex-component-background-color);
    border: 1px solid var(--dex-trade-base-divider-color);
    color: var(--dex-primary-font-color)
}

.transaction-ranking .ranking-table-card .pagination-wrapper .ranking-pagination .dex-pagination-item:hover {
    border-color: var(--dex-primary-color);
    color: var(--dex-primary-color)
}

.transaction-ranking .ranking-table-card .pagination-wrapper .ranking-pagination .dex-pagination-item.dex-pagination-item-active {
    background: var(--dex-primary-color);
    border-color: var(--dex-primary-color);
    color: var(--dex-primary-font-color)
}

.transaction-ranking .ranking-table-card .pagination-wrapper .ranking-pagination .dex-pagination-next,
.transaction-ranking .ranking-table-card .pagination-wrapper .ranking-pagination .dex-pagination-prev {
    background: var(--dex-component-background-color);
    border: 1px solid var(--dex-trade-base-divider-color);
    color: var(--dex-primary-font-color)
}

.transaction-ranking .ranking-table-card .pagination-wrapper .ranking-pagination .dex-pagination-next:hover,
.transaction-ranking .ranking-table-card .pagination-wrapper .ranking-pagination .dex-pagination-prev:hover {
    border-color: var(--dex-primary-color);
    color: var(--dex-primary-color)
}

.transaction-ranking .ranking-table-card .pagination-wrapper .ranking-pagination .dex-pagination-total-text {
    color: var(--dex-tertiary-font-color)
}

.dex-date-picker-input>input {
    background-color: var(--dex-component-background-color);
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--dex-primary-font-color);
    font-weight: 400;
    outline: none;
    overflow: hidden;
    padding: 12px;
    width: 100%
}

.dex-date-picker-input>input:disabled {
    background-color: var(--dex-input-disabled-bg);
    color: var(--dex-tertiary-font-color);
    cursor: not-allowed
}

.dex-date-picker-input>input::-moz-placeholder {
    color: var(--dex-tertiary-font-color)
}

.dex-date-picker-input>input::placeholder {
    color: var(--dex-tertiary-font-color)
}

.dex-date-picker-focused .dex-date-picker-input input {
    border: 1px solid var(--dex-primary-font-color)
}

.dex-date-picker-dropdown-hidden {
    display: none
}

.dex-date-picker-dropdown {
    position: absolute;
    z-index: var(--dex-dropdown-zIndex)
}

.dex-date-picker-dropdown .dex-date-picker-panel-container {
    background-color: var(--dex-primary-container-bg);
    box-shadow: var(--dex-primary-box-shadow)
}

.dex-date-picker-dropdown .dex-date-picker-panel-container .dex-date-picker-panel-layout .dex-date-picker-panel {
    padding: 12px 16px 16px
}

.dex-date-picker-date-panel .dex-date-picker-header,
.dex-date-picker-decade-panel .dex-date-picker-header,
.dex-date-picker-month-panel .dex-date-picker-header,
.dex-date-picker-quarter-panel .dex-date-picker-header,
.dex-date-picker-week-panel .dex-date-picker-header,
.dex-date-picker-year-panel .dex-date-picker-header {
    align-items: center;
    border-bottom: 1px solid var(--dex-common-border-color);
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    padding-bottom: 8px
}

.dex-date-picker-date-panel .dex-date-picker-header-view>button,
.dex-date-picker-date-panel .dex-date-picker-header>button,
.dex-date-picker-decade-panel .dex-date-picker-header-view>button,
.dex-date-picker-decade-panel .dex-date-picker-header>button,
.dex-date-picker-month-panel .dex-date-picker-header-view>button,
.dex-date-picker-month-panel .dex-date-picker-header>button,
.dex-date-picker-quarter-panel .dex-date-picker-header-view>button,
.dex-date-picker-quarter-panel .dex-date-picker-header>button,
.dex-date-picker-week-panel .dex-date-picker-header-view>button,
.dex-date-picker-week-panel .dex-date-picker-header>button,
.dex-date-picker-year-panel .dex-date-picker-header-view>button,
.dex-date-picker-year-panel .dex-date-picker-header>button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    outline: none;
    padding: 0
}

.dex-date-picker-date-panel .dex-date-picker-header>button,
.dex-date-picker-decade-panel .dex-date-picker-header>button,
.dex-date-picker-month-panel .dex-date-picker-header>button,
.dex-date-picker-quarter-panel .dex-date-picker-header>button,
.dex-date-picker-week-panel .dex-date-picker-header>button,
.dex-date-picker-year-panel .dex-date-picker-header>button {
    height: 16px
}

.dex-date-picker-date-panel .dex-date-picker-header-view,
.dex-date-picker-decade-panel .dex-date-picker-header-view,
.dex-date-picker-month-panel .dex-date-picker-header-view,
.dex-date-picker-quarter-panel .dex-date-picker-header-view,
.dex-date-picker-week-panel .dex-date-picker-header-view,
.dex-date-picker-year-panel .dex-date-picker-header-view {
    margin-left: 20px;
    margin-right: 20px
}

.dex-date-picker-date-panel .dex-date-picker-header-view>button,
.dex-date-picker-decade-panel .dex-date-picker-header-view>button,
.dex-date-picker-month-panel .dex-date-picker-header-view>button,
.dex-date-picker-quarter-panel .dex-date-picker-header-view>button,
.dex-date-picker-week-panel .dex-date-picker-header-view>button,
.dex-date-picker-year-panel .dex-date-picker-header-view>button {
    color: var(--dex-primary-font-color)
}

.dex-date-picker-date-panel .dex-date-picker-header-view>button:first-child,
.dex-date-picker-decade-panel .dex-date-picker-header-view>button:first-child,
.dex-date-picker-month-panel .dex-date-picker-header-view>button:first-child,
.dex-date-picker-quarter-panel .dex-date-picker-header-view>button:first-child,
.dex-date-picker-week-panel .dex-date-picker-header-view>button:first-child,
.dex-date-picker-year-panel .dex-date-picker-header-view>button:first-child {
    margin-right: 5px
}

.dex-date-picker-date-panel .dex-date-picker-body table.dex-date-picker-content,
.dex-date-picker-decade-panel .dex-date-picker-body table.dex-date-picker-content,
.dex-date-picker-month-panel .dex-date-picker-body table.dex-date-picker-content,
.dex-date-picker-quarter-panel .dex-date-picker-body table.dex-date-picker-content,
.dex-date-picker-week-panel .dex-date-picker-body table.dex-date-picker-content,
.dex-date-picker-year-panel .dex-date-picker-body table.dex-date-picker-content {
    border-spacing: 16px 12px
}

.dex-date-picker-date-panel .dex-date-picker-body table.dex-date-picker-content thead,
.dex-date-picker-decade-panel .dex-date-picker-body table.dex-date-picker-content thead,
.dex-date-picker-month-panel .dex-date-picker-body table.dex-date-picker-content thead,
.dex-date-picker-quarter-panel .dex-date-picker-body table.dex-date-picker-content thead,
.dex-date-picker-week-panel .dex-date-picker-body table.dex-date-picker-content thead,
.dex-date-picker-year-panel .dex-date-picker-body table.dex-date-picker-content thead {
    display: none
}

.dex-date-picker-date-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell,
.dex-date-picker-decade-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell,
.dex-date-picker-month-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell,
.dex-date-picker-quarter-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell,
.dex-date-picker-week-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell,
.dex-date-picker-year-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell {
    padding: 0
}

.dex-date-picker-date-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-inner,
.dex-date-picker-decade-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-inner,
.dex-date-picker-month-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-inner,
.dex-date-picker-quarter-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-inner,
.dex-date-picker-week-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-inner,
.dex-date-picker-year-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-inner {
    border: none;
    border-radius: var(--dex-border-radius-small);
    color: var(--dex-tertiary-font-color);
    cursor: pointer;
    font-size: 14px;
    height: 24px;
    line-height: 24px;
    min-width: 24px;
    text-align: center
}

.dex-date-picker-date-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-inner:hover,
.dex-date-picker-decade-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-inner:hover,
.dex-date-picker-month-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-inner:hover,
.dex-date-picker-quarter-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-inner:hover,
.dex-date-picker-week-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-inner:hover,
.dex-date-picker-year-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-inner:hover {
    background-color: var(--dex-secondary-container-bg);
    transition: background .3s
}

.dex-date-picker-date-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-in-view .dex-date-picker-cell-inner,
.dex-date-picker-decade-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-in-view .dex-date-picker-cell-inner,
.dex-date-picker-month-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-in-view .dex-date-picker-cell-inner,
.dex-date-picker-quarter-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-in-view .dex-date-picker-cell-inner,
.dex-date-picker-week-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-in-view .dex-date-picker-cell-inner,
.dex-date-picker-year-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-in-view .dex-date-picker-cell-inner {
    color: var(--dex-primary-font-color)
}

.dex-date-picker-date-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-selected .dex-date-picker-cell-inner,
.dex-date-picker-decade-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-selected .dex-date-picker-cell-inner,
.dex-date-picker-month-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-selected .dex-date-picker-cell-inner,
.dex-date-picker-quarter-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-selected .dex-date-picker-cell-inner,
.dex-date-picker-week-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-selected .dex-date-picker-cell-inner,
.dex-date-picker-year-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-selected .dex-date-picker-cell-inner {
    background-color: var(--dex-primary-color);
    color: var(--dex-white)
}

.dex-date-picker-date-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-disabled .dex-date-picker-cell-inner,
.dex-date-picker-decade-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-disabled .dex-date-picker-cell-inner,
.dex-date-picker-month-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-disabled .dex-date-picker-cell-inner,
.dex-date-picker-quarter-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-disabled .dex-date-picker-cell-inner,
.dex-date-picker-week-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-disabled .dex-date-picker-cell-inner,
.dex-date-picker-year-panel .dex-date-picker-body table.dex-date-picker-content tbody tr .dex-date-picker-cell-disabled .dex-date-picker-cell-inner {
    background-color: var(--dex-component-background-color);
    color: var(--dex-tertiary-font-color);
    cursor: not-allowed
}

.dex-date-picker-time-panel .dex-date-picker-content {
    display: flex
}

.dex-date-picker-time-panel .dex-date-picker-content>ul {
    list-style: none
}

.dex-date-picker-arrow-icon:hover {
    color: var(--dex-primary-font-color) !important
}

.activity-description {
    background: var(--dexc-dark-trade-primary-container-bg);
    border: .5px solid var(--dexc-dark-trade-base-divider-color);
    border-radius: 24px;
    margin-bottom: 80px
}

.activity-description .description-card {
    padding: 32px
}

.activity-description .description-card .section-title {
    color: var(--dex-primary-font-color);
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 16px
}

.activity-description .description-card .rule-item {
    color: var(--dex-primary-font-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 28px
}

.activity-description .description-card .rule-item:last-of-type {
    color: var(--dexc-white-tertiary-font-color);
    font-size: 12px;
    margin-top: 40px
}

.airdrop-page {
    background: var(--dexc-dark-trade-bg);
    color: var(--dex-primary-font-color);
    margin: 0 auto;
    min-height: 100vh;
    width: 1200px
}

.airdrop-page .section {
    margin-bottom: 40px
}

.airdrop-page .section-header {
    margin-bottom: 38px
}

.airdrop-page .section-header .section-title {
    align-items: center;
    color: var(--dex-primary-font-color);
    display: flex;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px
}

.airdrop-page .section-header .section-title img {
    height: 32px;
    margin-right: 8px;
    width: 32px
}

.airdrop-page .section-header .section-description {
    color: var(--dexc-dark-secondary-font-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    margin-top: 10px
}

.airdrop-page .card {
    background: var(--dex-component-background-color);
    border: 1px solid var(--dex-trade-base-divider-color);
    border-radius: 12px;
    padding: 24px
}

.airdrop-page .card-content {
    color: var(--dex-secondary-font-color);
    font-size: 14px;
    line-height: 1.5
}

.airdrop-page .container {
    margin: 0 auto;
    max-width: 1200px
}

.airdrop-page .rebate-card {
    background: var(--dex-component-background-color);
    border: 1px solid var(--dex-trade-base-divider-color);
    border-radius: 12px;
    padding: 24px;
    transition: all .3s ease
}

.airdrop-page .rebate-card:hover {
    border-color: var(--dex-trade-base-divider-color);
    transform: translateY(-2px)
}

.airdrop-page .cards-grid {
    align-items: stretch;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr)
}

.airdrop-page .value-large {
    font-size: 32px
}

.airdrop-page .value-large,
.airdrop-page .value-medium {
    color: var(--dex-primary-font-color);
    font-weight: 700;
    line-height: 1.2
}

.airdrop-page .value-medium {
    font-size: 24px
}

.airdrop-page .value-small {
    color: var(--dex-primary-font-color);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2
}

.airdrop-page .text-primary {
    color: var(--dex-primary-color)
}

.airdrop-page .text-secondary {
    color: var(--dex-tertiary-font-color)
}

.airdrop-page .text-muted {
    color: var(--dex-quaternary-font-color)
}

.airdrop-page .tag-new-user {
    background: var(--dex-component-background-color);
    border: 1px solid var(--dex-trade-base-divider-color);
    color: var(--dex-tertiary-font-color)
}

.airdrop-page .button-primary {
    background: linear-gradient(90deg, var(--dex-primary-color) 0, var(--dex-primary-hover-color) 100%);
    border: none;
    border-radius: 8px;
    color: var(--dex-primary-font-color);
    cursor: pointer;
    font-weight: 600;
    padding: 12px 24px;
    transition: all .3s ease;
    width: 100%
}

.airdrop-page .button-primary:hover {
    background: linear-gradient(90deg, var(--dex-primary-hover-color) 0, var(--dex-primary-color) 100%);
    transform: translateY(-1px)
}

.airdrop-page .button-primary:active {
    transform: translateY(0)
}

.airdrop-page .button-secondary {
    background: transparent;
    border: 1px solid var(--dex-primary-color);
    border-radius: 8px;
    color: var(--dex-primary-color);
    cursor: pointer;
    font-weight: 600;
    padding: 12px 24px;
    transition: all .3s ease
}

.airdrop-page .button-secondary:hover {
    background: var(--dex-primary-color);
    color: var(--dex-primary-font-color)
}

.airdrop-page .grid-3 {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr)
}

.airdrop-page .grid-2 {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, 1fr)
}

.airdrop-page .flex-between {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.airdrop-page .flex-center {
    align-items: center;
    display: flex;
    gap: 8px
}

.airdrop-page .text-center {
    text-align: center
}

.airdrop-page .mb-16 {
    margin-bottom: 16px
}

.airdrop-page .mb-24 {
    margin-bottom: 24px
}

.airdrop-page .mt-16 {
    margin-top: 16px
}

.airdrop-page .mt-24 {
    margin-top: 24px
}

.airdrop-page .p-24 {
    padding: 24px
}

.airdrop-page .p-32 {
    padding: 32px
}

.market-maker-modal .dex-modal-footer button {
    max-width: 100%
}

.tm-top-tip {
    background: rgba(255, 164, 53, .3);
    display: flex;
    justify-content: center;
    padding: 11px 0
}

.tm-top-tip-content {
    display: flex;
    width: 1200px
}

.tm-top-tip-content>img {
    height: 18px;
    width: 18px
}

.tm-top-tip-content>span {
    color: #fbb930;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin-left: 4px;
    text-align: left
}

.tm-banner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 45px 0
}

.tm-banner-content {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    justify-content: center;
    margin-right: 40px
}

.tm-banner-text {
    font-size: 48px;
    font-weight: 700;
    line-height: 56px
}

.tm-banner-text span {
    color: #fbb930
}

html[lang=fr-FR] .tm-banner-text,
html[lang=ru-RU] .tm-banner-text {
    width: 600px
}

html[lang=es-ES] .tm-banner-text {
    width: 700px
}

html[lang=tr-TR] .tm-banner-text {
    width: 650px
}

.tm-banner-subtext {
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    margin-top: 8px
}

.tm-banner-image {
    flex-shrink: 0;
    height: 168.75px;
    width: 300px
}

.tm-period-tabs .dex-tabs-line>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab {
    font-size: 24px;
    font-weight: 500;
    line-height: 28px
}

.tm-period-tabs .dex-tabs-line>.dex-tabs-nav .dex-tabs-nav-list>.dex-tabs-ink-bar {
    height: 3px !important;
    width: 20px !important
}

.tm-period-tabs .dex-tabs-line>.dex-tabs-nav:before {
    border: none
}

.tm-countdown-timer {
    align-items: center;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px
}

.tm-countdown-timer-box {
    align-items: center;
    background: var(--dexc-base-border-color);
    border-radius: 4px;
    display: flex;
    height: 20px;
    justify-content: center;
    min-width: 24px;
    padding: 0 4px
}

.tm-countdown-timer-label {
    margin-left: 2px;
    margin-right: 8px
}

.tm-countdown-timer-label,
.tm-countdown-timer-split {
    color: var(--dexc-secondary-font-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px
}

.tm-countdown-timer-split {
    margin: 0 4px
}

.tm-overview {
    background: var(--dexc-primary-container-bg);
    border: 1px solid var(--dexc-common-border-color);
    border-radius: 24px;
    display: flex;
    justify-content: space-between;
    margin-top: 24px
}

.tm-overview-item {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px
}

.tm-overview-item>div:first-of-type {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    white-space: nowrap;
    width: 100%
}

.tm-overview-item>div:nth-of-type(2) {
    color: var(--dexc-secondary-font-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    margin-top: 8px;
    text-align: left
}

.tm-overview-item-desc {
    color: var(--dexc-secondary-font-color) !important;
    font-size: 14px;
    font-weight: 400 !important
}

.tm-overview-item-currency-list {
    padding: 6px
}

.tm-overview-item-currency-list>div {
    margin-top: 16px
}

.tm-overview-item-currency-list>div:first-child {
    margin-top: 0
}

.tm-overview-item-currency {
    align-items: center;
    color: var(--dexc-primary-text, #fff);
    display: flex;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px
}

.tm-overview-item-currency span {
    margin-left: 8px
}

.tm-overview-item .dex-token-symbol {
    border: 2px solid var(--dexc-primary-container-bg)
}

.tm-overview-item .dex-token-symbol-list-placeholder {
    border: 2px solid var(--dexc-primary-container-bg);
    font-size: 12px
}

.tm-overview-item-currency .dex-token-symbol {
    border: none
}

.tm-overview-item-join-button {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    padding: 24px
}

.tm-award-pool-wrapper {
    border: .5px solid var(--dex-trade-base-divider-color);
    border-radius: 24px;
    margin-top: 36px
}

.tm-award-pool {
    background: var(--dexc-primary-container-bg);
    border: .5px solid var(--dexc-common-border-color);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 24px;
    text-align: left
}

.tm-award-pool-header {
    align-items: center;
    display: flex;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px
}

.tm-award-pool-header-tip .dex-token-symbol-list-placeholder {
    font-size: 20px
}

.tm-award-pool-currency-list {
    padding: 6px
}

.tm-award-pool-currency-list>div {
    margin-top: 16px
}

.tm-award-pool-currency-list>div:first-child {
    margin-top: 0
}

.tm-award-pool-currency {
    align-items: center;
    color: var(--dexc-primary-text, #fff);
    display: flex;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px
}

.tm-award-pool-currency span {
    margin-left: 8px
}

.tm-award-pool-title {
    align-items: center;
    color: var(--dexc-secondary-font-color);
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px
}

.tm-award-pool-title img {
    cursor: pointer;
    height: 12px;
    margin-left: 4px;
    width: 12px
}

.tm-award-pool-amount {
    align-items: baseline;
    display: flex;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    margin-top: 8px
}

.tm-award-pool-amount>span:last-of-type {
    color: var(--dexc-secondary-font-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-left: 8px
}

.tm-award-pool-tip {
    align-items: center;
    color: #fbb930;
    display: flex;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    margin-top: 8px
}

.tm-award-pool-tip img {
    flex-shrink: 0;
    height: 12px;
    margin-right: 8px;
    width: 12px
}

.tm-mining-progress {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 28px 24px
}

.tm-mining-progress-info {
    display: flex;
    flex: 1 1
}

.tm-mining-progress-item {
    text-align: left
}

.tm-mining-progress-item:first-of-type,
.tm-mining-progress-item:nth-of-type(2) {
    margin-right: 120px
}

.tm-mining-progress-item:last-of-type {
    margin-right: 0
}

.tm-mining-progress-item>div:first-of-type {
    align-items: center;
    color: var(--dexc-secondary-font-color);
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left
}

.tm-mining-progress-item>div:nth-of-type(2) {
    align-items: center;
    display: flex;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 8px;
    text-align: left
}

.tm-mining-progress-phase>span:first-of-type {
    color: var(--dexc-primary-text, #fff);
    font-size: 16px;
    font-weight: 500;
    margin-right: 6px
}

.tm-mining-progress-phase>span:nth-of-type(2) {
    align-items: center;
    background-color: var(--dex-primary-color);
    border-radius: 2px;
    color: var(--dex-white);
    display: flex;
    font-size: 10px;
    font-weight: 400;
    height: 17px;
    justify-content: center;
    padding: 0 4px
}

.tm-mining-progress-date {
    color: var(--dexc-secondary-font-color);
    font-size: 14px !important;
    font-weight: 400
}

.tm-mining-progress-bar {
    background-color: var(--dexc-common-border-color);
    margin-right: 8px;
    position: relative
}

.tm-mining-progress-bar,
.tm-mining-progress-bar-fill {
    border-radius: 12px;
    flex-shrink: 0;
    height: 4px;
    width: 80px
}

.tm-mining-progress-bar-fill {
    background-color: #75d12a;
    left: 0;
    position: absolute;
    top: 0
}

.tm-mining-progress-button {
    border-radius: 100px;
    height: 44px;
    min-width: 104px;
    padding: 8px 24px
}

.tm-mining-progress-circle {
    cursor: pointer;
    flex-shrink: 0;
    height: 16px;
    margin-left: 4px;
    width: 16px
}

@keyframes tm-rotate-360 {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.tm-mining-progress-circle.rotating {
    animation: tm-rotate-360 1s linear
}

.tm-ranking {
    background: var(--dexc-primary-container-bg);
    border: 1px solid var(--dexc-common-border-color);
    border-radius: 24px;
    margin-top: 36px;
    padding: 12px 24px
}

.tm-ranking-header {
    align-items: center;
    align-self: stretch;
    color: var(--dexc-secondary-font-color);
    display: flex;
    font-size: 12px;
    font-weight: 400;
    height: 33px;
    justify-content: space-between;
    line-height: 16px;
    padding: 12px 0 8px
}

.tm-ranking-header>div {
    flex: 1 1;
    overflow: hidden
}

.tm-ranking-header>div:first-of-type {
    align-items: center;
    display: flex;
    min-width: 450px;
    text-align: left
}

.tm-ranking-header>div:nth-of-type(2) {
    text-align: left
}

.tm-ranking-header>div:nth-of-type(3) {
    max-width: 300px;
    text-align: right
}

.tm-ranking-row {
    align-items: center;
    align-self: stretch;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    height: 58px;
    justify-content: space-between;
    line-height: 20px;
    padding: 12px 0
}

.tm-ranking-row>div {
    flex: 1 1;
    overflow: hidden
}

.tm-ranking-row>div:first-of-type {
    align-items: center;
    display: flex;
    min-width: 450px;
    text-align: left
}

.tm-ranking-row>div:nth-of-type(2) {
    text-align: left
}

.tm-ranking-row>div:nth-of-type(3) {
    max-width: 300px;
    text-align: right
}

.tm-ranking-user {
    align-items: center;
    display: flex
}

.tm-ranking-rank {
    flex-shrink: 0;
    height: 24px;
    min-width: 24px;
    text-align: center
}

.tm-ranking-name {
    margin-left: 8px
}

.tm-ranking-footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 8px 0 16px
}

.tm-ranking-toggle {
    color: #fbb930;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left
}

.tm-ranking-body-empty {
    align-items: center;
    display: flex;
    flex: 1 1;
    flex-direction: column;
    height: 250px;
    justify-content: center
}

.tm-ranking-body-empty img {
    height: auto;
    width: 82px
}

.tm-ranking-body-empty span {
    color: var(--dexc-secondary-font-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    margin-top: 20px
}

.tm-section-header {
    display: flex;
    flex-direction: column;
    margin-top: 100px
}

.tm-section-header-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 28px
}

.tm-section-header-desc {
    color: var(--dexc-secondary-font-color);
    display: flex;
    font-size: 12px;
    font-weight: 400;
    justify-content: space-between;
    line-height: 14px;
    margin-top: 8px
}

.tm-section-header-desc span {
    color: #fbb930
}

.tm-section-header-extra {
    align-items: center;
    display: flex;
    gap: 4px
}

.tm-section-header-extra.clickable {
    cursor: pointer;
    transition: opacity .2s
}

.tm-section-header-extra.clickable:hover {
    opacity: .8
}

.tm-section-header-arrow {
    color: inherit;
    font-size: 16px;
    font-weight: 700
}

.tm-user-rewards {
    background: var(--dexc-primary-container-bg);
    border: 1px solid var(--dexc-common-border-color);
    border-radius: 24px;
    display: flex;
    justify-content: space-between;
    margin-top: 36px;
    padding: 24px
}

.tm-user-rewards-icon {
    cursor: pointer;
    flex-shrink: 0;
    height: 12px;
    margin-left: 4px;
    width: 12px
}

.tm-user-rewards-left {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    margin-right: 48px
}

.tm-user-rewards-total {
    border-bottom: .5px solid var(--dexc-common-border-color);
    padding-bottom: 16px
}

.tm-user-rewards-amount {
    color: var(--dexc-primary-text);
    font-size: 24px;
    font-weight: 500;
    line-height: 28px
}

.tm-user-rewards-label {
    color: var(--dexc-secondary-font-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    margin-top: 8px
}

.tm-user-rewards-list {
    display: flex;
    flex-direction: column;
    padding-top: 16px
}

.tm-user-rewards-item {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 1 1;
    justify-content: space-between;
    min-height: 34px
}

.tm-user-rewards-item-label {
    align-items: center;
    color: var(--dexc-secondary-font-color);
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.tm-user-rewards-item-value {
    color: var(--dexc-primary-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px
}

.tm-user-rewards-right {
    display: flex;
    flex: 1 1;
    flex-direction: column
}

.tm-user-rewards-claim {
    align-items: center;
    border-bottom: .5px solid var(--dexc-common-border-color);
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px
}

.tm-user-rewards-claim-button {
    border-radius: 100px;
    height: 44px;
    min-width: 104px;
    padding: 8px 24px
}

.tm-repurchase {
    background: var(--dexc-primary-container-bg);
    border: 1px solid var(--dexc-common-border-color);
    border-radius: 24px;
    display: flex;
    margin-top: 36px;
    min-height: 178px;
    padding: 32px 24px
}

.tm-repurchase-content {
    flex: 1 1;
    justify-content: space-between
}

.tm-repurchase-content,
.tm-repurchase-info {
    align-items: flex-start;
    display: flex;
    flex-direction: column
}

.tm-repurchase-title {
    color: var(--dexc-secondary-font-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px
}

.tm-repurchase-amount {
    align-items: baseline;
    color: var(--dexc-primary-text);
    display: flex;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    margin-top: 6px
}

.tm-repurchase-amount>span {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    margin-left: 4px
}

.tm-repurchase-value {
    font-size: 14px;
    line-height: 16px;
    margin-top: 6px
}

.tm-repurchase-button,
.tm-repurchase-value {
    color: var(--dexc-secondary-font-color);
    font-weight: 400
}

.tm-repurchase-button {
    cursor: pointer;
    font-size: 12px;
    line-height: 20px;
    margin-top: 24px
}

.tm-repurchase-icon {
    flex-shrink: 0;
    height: 120px;
    margin-right: 56px;
    width: 120px
}

.tm-rules {
    background: var(--dexc-primary-container-bg);
    border: 1px solid var(--dexc-common-border-color);
    border-radius: 24px;
    margin-top: 116px;
    padding: 24px
}

.tm-rules-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 28px
}

.tm-rules-subtitle {
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin-top: 8px
}

.tm-rules-content {
    color: var(--dexc-secondary-font-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 28px
}

.tm-rules-circle:before {
    content: " •";
    margin-right: 8px;
    white-space: pre
}

.tm-rules-table {
    border: 1px solid var(--dexc-common-border-color);
    border-radius: 16px;
    color: var(--dexc-secondary-font-color);
    margin-bottom: 8px;
    margin-top: 8px;
    width: 600px
}

.tm-rules-table>table {
    width: 600px
}

.tm-rules-table tr {
    border-bottom: 1px solid var(--dexc-common-border-color)
}

.tm-rules-table>table tbody tr:last-child {
    border-bottom: none
}

.tm-rules-table>table th {
    font-size: 12px;
    font-weight: 400
}

.tm-rules-table>table td,
.tm-rules-table>table th {
    padding: 16px 24px;
    text-align: right
}

.tm-rules-table>table td {
    color: var(--dexc-primary-text, #fff)
}

.tm-rules-table>table td:first-child,
.tm-rules-table>table th:first-child {
    padding-right: 16px;
    text-align: left
}

.tm-rules-table>table td:nth-of-type(2),
.tm-rules-table>table th:nth-of-type(2) {
    padding-left: 0;
    padding-right: 0
}

.tm-rules-table>table td:last-child,
.tm-rules-table>table th:last-child {
    padding-left: 16px
}

.tm-rules-mt16 {
    margin-top: 16px
}

.tm-rules-content-list {
    counter-reset: notice-counter
}

.tm-rules-content-list>div {
    counter-increment: notice-counter;
    padding-left: 20px;
    position: relative
}

.tm-rules-content-list>div:before {
    content: counter(notice-counter) ". ";
    left: 0;
    position: absolute;
    top: 0
}

.trade-mining-page {
    background: var(--dexc-dark-trade-bg);
    color: var(--dex-primary-font-color);
    min-height: 100vh;
    padding-bottom: 120px
}

.trade-mining-page-tip {
    background: rgba(255, 164, 53, .3);
    display: flex;
    justify-content: center;
    padding: 11px 0
}

.trade-mining-page-tip-content {
    display: flex;
    width: 1200px
}

.trade-mining-page-tip-content>img {
    height: 18px;
    width: 18px
}

.trade-mining-page-tip-content>span {
    color: var(--Functional-Orange, #fbb930);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    margin-left: 4px;
    text-align: left
}

.trade-mining-page-content {
    margin: 0 auto;
    width: 1200px
}

.dex-one-button {
    border-radius: 100px;
    height: 44px;
    min-width: 160px;
    padding: 8px 24px
}

.tm-mining-details {
    padding: 20px
}

.tm-mining-details-title {
    font-size: 28px;
    font-weight: 500;
    line-height: normal;
    margin-top: 34px;
    text-align: left
}

.tm-mining-details-content {
    border: 1px solid var(--dexc-common-border-color);
    border-radius: 24px;
    margin-top: 32px
}

.tm-mining-details-tabs {
    padding: 16px 0 8px
}

.tm-mining-details-tabs .dex-tabs-tab:first-of-type {
    margin-left: 24px
}

.tm-mining-details-table-header {
    align-items: center;
    align-self: stretch;
    color: var(--dexc-secondary-font-color);
    display: flex;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    padding: 16px 24px 8px
}

.tm-mining-details-table-body {
    display: flex;
    flex-direction: column;
    min-height: 716px
}

.tm-mining-details-table-body-empty {
    align-items: center;
    display: flex;
    flex: 1 1;
    flex-direction: column;
    justify-content: center
}

.tm-mining-details-table-body-empty img {
    height: auto;
    width: 82px
}

.tm-mining-details-table-body-empty span {
    color: var(--dexc-secondary-font-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    margin-top: 20px
}

.tm-mining-details-table-row {
    font-size: 14px;
    font-weight: 500;
    justify-content: space-between;
    line-height: 20px;
    padding: 12px 24px
}

.tm-mining-details-table-row,
.tm-mining-details-table-row>div:first-of-type {
    align-items: center;
    display: flex
}

.tm-mining-details-table-row>div:first-of-type>div {
    display: flex;
    flex-direction: column;
    margin-left: 8px
}

.tm-mining-details-table-row>div:first-of-type>div>div:first-of-type {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px
}

.tm-mining-details-table-row>div:first-of-type>div>div:last-of-type {
    color: var(--dexc-secondary-font-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    margin-top: 4px
}

.tm-mining-details-table-header>div,
.tm-mining-details-table-row>div {
    flex: 1 0;
    text-align: left
}

.tm-mining-details-table-header>div:first-of-type,
.tm-mining-details-table-row>div:first-of-type {
    max-width: 200px
}

.tm-mining-details-table-header>div:nth-of-type(2),
.tm-mining-details-table-header>div:nth-of-type(3),
.tm-mining-details-table-header>div:nth-of-type(4),
.tm-mining-details-table-row>div:nth-of-type(2),
.tm-mining-details-table-row>div:nth-of-type(3),
.tm-mining-details-table-row>div:nth-of-type(4) {
    text-align: right
}

.tm-mining-details-pagination {
    align-items: center;
    align-self: stretch;
    display: flex;
    justify-content: flex-end;
    padding: 8px 24px 24px 0
}

.trade-mining-details-page {
    align-items: center;
    background: var(--dexc-dark-trade-bg);
    color: var(--dex-primary-font-color);
    display: flex;
    flex-direction: column;
    padding-bottom: 120px
}

.trade-mining-details-page>div {
    width: 1200px
}

.airdrop-acquisition-search-input {
    align-items: center;
    border: 1px solid var(--dexc-dark-common-border-color);
    border-radius: 70px;
    display: flex;
    justify-content: space-between;
    margin-top: 40px
}

.airdrop-acquisition-search-input-select {
    height: 100%;
    margin-left: 20px
}

.airdrop-acquisition-search-input-select .dex-select-selector {
    align-items: center;
    display: flex;
    min-height: 72px
}

.airdrop-acquisition-search-input-select .dex-select-selector .dex-select-selection-search {
    align-items: center;
    display: inline-block;
    display: flex;
    height: 100%
}

.airdrop-acquisition-search-input-select .dex-select-selector .dex-select-selection-item,
.airdrop-acquisition-search-input-select .dex-select-selector .dex-select-selection-search .dex-select-selection-search-input {
    color: var(--dexc-primary-text, #fff);
    font-size: 16px
}

.airdrop-acquisition-search-input-select .dex-select-arrow {
    color: var(--dexc-primary-text, #fff)
}

.airdrop-acquisition-search-input-divider {
    background-color: var(--dexc-pure-white-color);
    height: 32px;
    opacity: .2;
    width: 1px
}

.airdrop-acquisition-search-input-field {
    background-color: transparent;
    border: none !important;
    font-size: 16px;
    text-align: left;
    width: 828px
}

.airdrop-acquisition-search-input-field:focus {
    border: none !important
}

.airdrop-acquisition-search-input-field::-moz-placeholder {
    color: var(--dexc-white-tertiary-font-color)
}

.airdrop-acquisition-search-input-field::placeholder {
    color: var(--dexc-white-tertiary-font-color)
}

.airdrop-acquisition-search-input-button {
    height: 48px;
    margin-right: 12px;
    min-width: 120px;
    padding: 8px 24px
}

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

.airdrop-acquisition-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 360px
}

.airdrop-acquisition-header-icon {
    flex-shrink: 0;
    height: 250px;
    width: 364px
}

.airdrop-acquisition-header-title {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    margin-right: 32px;
    padding: 40px 0
}

.airdrop-acquisition-header-title-tag {
    align-items: center;
    background: #6001ff;
    border-radius: 40px;
    display: flex;
    font-size: 20px;
    font-weight: 500;
    justify-content: center;
    line-height: 28px;
    padding: 8px 16px
}

.airdrop-acquisition-header-title-tag em,
.airdrop-acquisition-header-title-tag span {
    font-size: 24px;
    font-weight: 700;
    margin-left: 4px
}

.airdrop-acquisition-header-title-desc {
    color: var(--dex-primary-font-color);
    font-size: 52px;
    font-weight: 900;
    line-height: 61px;
    margin-top: 14px
}

.airdrop-acquisition-header-title-desc em,
.airdrop-acquisition-header-title-desc span {
    color: #fbb930
}

.airdrop-acquisition-header-subtitle {
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    margin-top: 14px
}

.airdrop-acquisition-header-date {
    color: var(--dexc-secondary-font-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    margin-top: 40px;
    text-align: left
}

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

.airdrop-acquisition-adv-item {
    background: var(--dexc-primary-container-bg);
    border: .5px solid var(--dexc-common-border-color);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    height: 200px;
    justify-content: flex-start;
    padding: 24px;
    position: relative;
    transition: all .3s ease
}

.airdrop-acquisition-adv-item:hover {
    transform: translateY(-2px)
}

.airdrop-acquisition-adv-item__icon {
    bottom: 24px;
    height: 72px;
    position: absolute;
    right: 24px;
    width: 72px
}

.airdrop-acquisition-adv-item__icon img {
    height: 100%;
    width: 100%
}

.airdrop-acquisition-adv-item__content {
    display: block
}

.airdrop-acquisition-adv-item__title {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px
}

.airdrop-acquisition-adv-item__subtitle {
    color: #fbb930;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 4px
}

.airdrop-acquisition-adv-item__button {
    background-color: var(--dexc-pure-white-color);
    bottom: 24px;
    color: var(--dexc-pure-black-color);
    height: 40px;
    left: 24px;
    min-width: 120px;
    padding: 8px 24px;
    position: absolute
}

.airdrop-acquisition-adv-item__button:hover {
    background-color: var(--dexc-pure-white-color) !important
}

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

.airdrop-acquisition-adv-list {
    display: flex;
    margin-top: 120px
}

.airdrop-acquisition-adv-list>div {
    flex: 1 1;
    margin-right: 24px
}

.airdrop-acquisition-adv-list>div:last-child {
    margin-right: 0
}

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

.airdrop-acquisition-rule {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    margin-top: 60px
}

.airdrop-acquisition-rule-title {
    color: var(--dex-primary-font-color);
    font-size: 24px;
    font-weight: 500;
    text-align: left
}

.airdrop-acquisition-rule-content {
    color: var(--dex-secondary-font-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    margin-top: 24px;
    text-align: left
}

.airdrop-acquisition-rule-content p {
    counter-increment: paragraph-counter
}

.airdrop-acquisition-rule-content p:before {
    content: counter(paragraph-counter) ". ";
    font-weight: 500
}

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

.airdrop-acquisition-countdown-timer {
    color: var(--dexc-aux-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-left: 80px
}

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

.airdrop-acquisition-my-award {
    margin-top: 60px
}

.airdrop-acquisition-my-award-title {
    color: var(--dex-primary-font-color);
    font-size: 24px;
    font-weight: 500;
    text-align: left
}

.airdrop-acquisition-my-award-content {
    align-items: center;
    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: flex;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    margin-top: 18px
}

.airdrop-acquisition-my-award-content-recieved {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 24px 40px 32px
}

.airdrop-acquisition-my-award-content-recieved>div:first-child {
    font-size: 28px;
    font-weight: 700;
    line-height: 34px
}

.airdrop-acquisition-my-award-content-recieved>div:last-child {
    align-items: center;
    color: var(--dexc-secondary-font-color);
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    margin-top: 16px;
    min-width: 320px
}

.airdrop-acquisition-my-award-content-recieved>div:last-child img {
    flex-shrink: 0;
    height: 16px;
    margin-right: 6px;
    width: 16px
}

.airdrop-acquisition-my-award-content-divider {
    background-color: var(--dexc-pure-white-color);
    height: 80px;
    opacity: .2;
    width: 1px
}

.airdrop-acquisition-my-award-content-pending {
    align-items: flex-start;
    display: flex;
    flex: 1 1;
    flex-direction: column;
    padding: 40px 24px
}

.airdrop-acquisition-my-award-content-pending>div:first-child {
    align-items: baseline;
    display: flex;
    font-size: 28px;
    font-weight: 700;
    line-height: 34px
}

.airdrop-acquisition-my-award-content-pending>div:last-child {
    align-items: center;
    color: var(--dexc-secondary-font-color);
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    margin-top: 16px
}

.airdrop-acquisition-my-award-content-pending>div:last-child img {
    flex-shrink: 0;
    height: 16px;
    margin-right: 6px;
    width: 16px
}

.airdrop-acquisition-my-award-content-button {
    flex-shrink: 0;
    height: 38px;
    margin-left: 40px;
    margin-right: 40px;
    min-width: 104px;
    padding: 8px 24px
}

.airdrop-acquisition-task-item {
    border: 1px solid var(--dexc-trade-divider-color);
    border-radius: 16px;
    padding: 16px 0
}

.airdrop-acquisition-task-item-content {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.airdrop-acquisition-task-item-content-amount {
    align-items: flex-start;
    color: #75d12a;
    display: flex;
    flex-direction: column;
    font-size: 20px;
    font-weight: 700;
    justify-content: center;
    line-height: 24px;
    min-width: 192px;
    padding: 24px 24px 24px 32px
}

.airdrop-acquisition-task-item-content-divider {
    background-color: var(--dexc-pure-white-color);
    height: 40px;
    opacity: .2;
    width: 1px
}

.airdrop-acquisition-task-item-content-desc {
    align-items: flex-start;
    display: flex;
    flex: 1 1;
    flex-direction: column;
    font-size: 18px;
    font-weight: 500;
    justify-content: center;
    line-height: 24px;
    padding: 24px;
    text-align: left
}

.airdrop-acquisition-task-item-content-desc span {
    color: #fbb930
}

.airdrop-acquisition-task-item-content-button {
    flex-shrink: 0;
    height: 38px;
    margin-left: 40px;
    margin-right: 40px;
    min-width: 104px;
    padding: 8px 24px
}

.airdrop-acquisition-task-item-progress {
    display: flex;
    flex-direction: column;
    padding: 16px 40px 24px
}

.airdrop-acquisition-task-item-progress-bg {
    background: var(--dexc-base-border-color);
    border-radius: 12px;
    flex-shrink: 0;
    height: 8px;
    margin-top: 8px;
    width: 100%
}

.airdrop-acquisition-task-item-progress-bar {
    background: #fbb930;
    border-radius: 12px;
    height: 8px
}

.airdrop-acquisition-task-item-progress-text {
    color: var(--dexc-secondary-font-color);
    display: flex;
    font-size: 12px;
    font-weight: 400;
    justify-content: space-between;
    line-height: 16px
}

.airdrop-acquisition-task-item-progress-text span {
    color: var(--dex-primary-font-color)
}

.airdrop-acquisition-task-list {
    display: flex;
    flex-direction: column;
    padding-top: 40px
}

.airdrop-acquisition-task-list-title {
    color: var(--dex-primary-font-color);
    font-size: 24px;
    font-weight: 500;
    text-align: left
}

.airdrop-acquisition-task-list-items {
    display: flex;
    flex-direction: column
}

.airdrop-acquisition-task-list-items>div {
    margin-top: 24px
}

.airdrop-acquisition-task-list-loading {
    height: 400px;
    position: relative
}

.airdrop-acquisition-page {
    background: var(--dexc-dark-trade-bg);
    color: var(--dex-primary-font-color);
    padding-bottom: 118px
}

.airdrop-acquisition-page-container {
    margin: 0 auto;
    width: 1200px
}

.dex-modal.dex-modal-content-one-button .dex-modal-content .dex-modal-footer>button {
    max-width: 100%
}

.airdrop-acquisition-modal-content span {
    color: #fbb930
}

.mt_8 {
    margin-top: 8px
}

.red {
    color: var(--dexc-aux-color)
}

.mt_24 {
    margin-top: 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)
}

.proPage {
    margin: 0 auto;
    padding-bottom: 80px;
    width: 1200px
}

.proPage .bannerWraper {
    color: #828282;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    padding: 40px 0
}

.proPage .bannerWraper h3 {
    color: #fff;
    font-size: 56px;
    font-style: normal;
    font-weight: 700;
    line-height: 62px
}

.proPage .title {
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px
}

.proPage .sub_title {
    font-size: 12px;
    line-height: normal
}

.proPage .sub_title,
.proPage .totalWraper {
    color: #8a8a8e;
    font-style: normal;
    font-weight: 400
}

.proPage .totalWraper {
    display: flex;
    font-size: 14px;
    gap: 20px
}

.proPage .totalWraper .dex-tip-text {
    color: #8a8a8e;
    font-size: 14px
}

.proPage .totalWraper h3 {
    color: #fff;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 38px;
    margin-bottom: 16px
}

.proPage .totalWraper li:first-child {
    width: 450px
}

.proPage .totalWraper li:last-child {
    flex: 1 1
}

.proPage .totalWraper li:last-child .imgWraper {
    padding-left: 10px;
    position: relative
}

.proPage .totalWraper li:last-child .imgWraper .dex-token-symbol {
    border-color: #080808
}

.proPage .totalWraper li:last-child .imgWraper img {
    margin-left: -10px
}

.proPage .boxBg {
    background: #141414;
    box-shadow: inset 0 1px 1px 0 rgba(199, 211, 234, .12);
    padding: 40px
}

.proPage .boxBg,
.proPage .boxBg2 {
    border: 1px solid #202020;
    border-radius: 24px
}

.proPage .boxBg2 {
    background: #080808;
    box-shadow: inset 0 1px 1px 0 rgba(199, 211, 234, .12), inset 0 24px 48px 0 rgba(199, 211, 234, .05)
}

.proPage .boxBg2 h3 {
    align-items: center;
    border-bottom: 1px solid #202020;
    color: #fff;
    display: flex;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    height: 64px;
    padding: 0 24px
}

.proPage .canvasWrpaer {
    display: flex;
    gap: 20px
}

.proPage .stableChartRow {
    align-items: center;
    display: flex;
    gap: 20px;
    height: calc(100% - 64px);
    padding: 0 30px
}

.proPage .stableChart {
    height: 180px;
    margin-left: -6px;
    width: 180px
}

.proPage .chartLegend {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0
}

.proPage .chartLegend li {
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    flex: 1 1;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    padding: 12px
}

.proPage .chartLegend li.active {
    background: #202020
}

.proPage .chartLegend .dot {
    height: 10px;
    width: 10px
}

.proPage .proofTable table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%
}

.proPage .proofTable thead th {
    border-bottom: 1px solid #202020;
    border-right: 1px solid #202020;
    color: #8a8a8e;
    font-size: 12px;
    font-weight: 400;
    padding: 20px 30px;
    text-align: left
}

.proPage .proofTable thead th+th+th {
    border-right: none;
    text-align: right
}

.proPage .proofTable tbody td {
    color: #fff;
    font-size: 12px;
    padding: 16px 30px;
    text-align: right
}

.proPage .proofTable tbody tr:hover td {
    background: #141414
}

.proPage .proofTable .hasBorder td {
    border-top: 1px solid #202020
}

.proPage .proofTable .platformCell {
    padding-left: 60px
}

.proPage .proofTable .tokenCell {
    border-right: 1px solid #202020;
    font-size: 16px;
    width: 220px
}

.proPage .proofTable .tokenInfo {
    align-items: center;
    display: flex;
    gap: 8px
}

.proPage .proofTable .tokenInfo .dex-token-symbol {
    border-width: 0
}

.proPage .proofTable .tokenIcon {
    background: #1f1f1f;
    border-radius: 50%;
    display: inline-block;
    height: 20px;
    width: 20px
}

.proPage .proofTable .chainCell {
    border-right: 1px solid #202020;
    color: #fff;
    font-size: 16px;
    text-align: left;
    width: 170px
}

.proPage .proofTable tr.chainBorder .chainCell,
.proPage .proofTable tr.chainBorder .tokenCell {
    border-top: 1px solid #202020
}

.proPage .proofTable .addrCell {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    white-space: nowrap
}

.proPage .proofTable .addrText {
    color: #fff;
    display: inline-block;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis
}

.proPage .proofTable .addrText:hover {
    color: #a670ff;
    text-decoration: underline
}

.proPage .proofTable .copyBtn {
    background: transparent;
    border: 0;
    color: #8a8a8e;
    cursor: pointer
}

.proPage .thirdParth {
    margin-top: 20px
}

.proPage .rateChartWraper {
    height: 280px;
    padding: 20px 20px 10px 10px
}

: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.sunx.io/v4/dex-web/static/media/iconfont.e4bb62ac.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,
.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 {
    align-items: center;
    display: flex;
    gap: 2px;
    justify-content: flex-start;
    padding: 8px 0 0
}

@font-face {
    font-family: dm-icon;
    font-style: normal;
    font-weight: 400;
    src: url(https://static.sunx.io/v4/dex-web/static/media/dm-icon.6887a016.eot);
    src: url(https://static.sunx.io/v4/dex-web/static/media/dm-icon.6887a016.eot?61f1c21c#iefix) format("embedded-opentype"), url(https://static.sunx.io/v4/dex-web/static/media/dm-icon.cdd2b7ef.woff2?61f1c21c) format("woff2"), url(https://static.sunx.io/v4/dex-web/static/media/dm-icon.6a66a527.woff?61f1c21c) format("woff"), url(https://static.sunx.io/v4/dex-web/static/media/dm-icon.19ceced3.ttf?61f1c21c) format("truetype"), url(https://static.sunx.io/v4/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
}

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

.z-\[1\] {
    z-index: 1
}

.z-\[99\] {
    z-index: 99
}

.m-0 {
    margin: 0
}

.mx-6 {
    margin-left: 6px;
    margin-right: 6px
}

.my-12 {
    margin-bottom: 12px;
    margin-top: 12px
}

.my-16 {
    margin-bottom: 16px;
    margin-top: 16px
}

.my-18 {
    margin-bottom: 18px;
    margin-top: 18px
}

.my-8 {
    margin-bottom: 8px;
    margin-top: 8px
}

.mb-10 {
    margin-bottom: 10px
}

.mb-100 {
    margin-bottom: 100px
}

.mb-12 {
    margin-bottom: 12px
}

.mb-2 {
    margin-bottom: 2px
}

.mb-20 {
    margin-bottom: 20px
}

.mb-24 {
    margin-bottom: 24px
}

.mb-32 {
    margin-bottom: 32px
}

.mb-4 {
    margin-bottom: 4px
}

.mb-6 {
    margin-bottom: 6px
}

.mb-8 {
    margin-bottom: 8px
}

.mb-80 {
    margin-bottom: 80px
}

.ml-2 {
    margin-left: 2px
}

.ml-4 {
    margin-left: 4px
}

.ml-8 {
    margin-left: 8px
}

.ml-\[2px\] {
    margin-left: 2px
}

.ml-\[6px\] {
    margin-left: 6px
}

.ml-auto {
    margin-left: auto
}

.mr-24 {
    margin-right: 24px
}

.mr-28 {
    margin-right: 28px
}

.mr-4 {
    margin-right: 4px
}

.mr-\[6px\] {
    margin-right: 6px
}

.mt-0 {
    margin-top: 0
}

.mt-100 {
    margin-top: 100px
}

.mt-12 {
    margin-top: 12px
}

.mt-16 {
    margin-top: 16px
}

.mt-2 {
    margin-top: 2px
}

.mt-20 {
    margin-top: 20px
}

.mt-24 {
    margin-top: 24px
}

.mt-32 {
    margin-top: 32px
}

.mt-4 {
    margin-top: 4px
}

.mt-40 {
    margin-top: 40px
}

.mt-42 {
    margin-top: 42px
}

.mt-50 {
    margin-top: 50px
}

.mt-6 {
    margin-top: 6px
}

.mt-60 {
    margin-top: 60px
}

.mt-8 {
    margin-top: 8px
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.inline {
    display: inline
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.table {
    display: table
}

.grid {
    display: grid
}

.\!hidden {
    display: none !important
}

.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\/3 {
    width: 33.333333%
}

.w-120 {
    width: 120px
}

.w-50 {
    width: 50px
}

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

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

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

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

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

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

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

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

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

.w-full {
    width: 100%
}

.w-screen {
    width: 100vw
}

.min-w-120 {
    min-width: 120px
}

.min-w-68 {
    min-width: 68px
}

.flex-1 {
    flex: 1 1 0%
}

.rotate-0 {
    --tw-rotate: 0deg
}

.rotate-0,
.rotate-180 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.rotate-180 {
    --tw-rotate: 180deg
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.cursor-move {
    cursor: move
}

.cursor-not-allowed {
    cursor: not-allowed
}

.cursor-pointer {
    cursor: pointer
}

.resize {
    resize: both
}

.flex-row {
    flex-direction: row
}

.flex-col {
    flex-direction: column
}

.flex-col-reverse {
    flex-direction: column-reverse
}

.flex-wrap {
    flex-wrap: wrap
}

.items-start {
    align-items: flex-start
}

.items-center {
    align-items: center
}

.justify-start {
    justify-content: flex-start
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap-15 {
    gap: 15px
}

.gap-16 {
    gap: 16px
}

.gap-2 {
    gap: 2px
}

.gap-4 {
    gap: 4px
}

.gap-6 {
    gap: 6px
}

.gap-8 {
    gap: 8px
}

.gap-\[16px\] {
    gap: 16px
}

.divide-x>:not([hidden])~:not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-left-width: calc(1px*(1 - var(--tw-divide-x-reverse)));
    border-right-width: calc(1px*var(--tw-divide-x-reverse))
}

.divide-white\/20>:not([hidden])~:not([hidden]) {
    border-color: hsla(0, 0%, 100%, .2)
}

.overflow-hidden,
.truncate {
    overflow: hidden
}

.truncate {
    text-overflow: ellipsis
}

.truncate,
.whitespace-nowrap {
    white-space: nowrap
}

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

.px-10 {
    padding-left: 10px;
    padding-right: 10px
}

.px-11 {
    padding-left: 11px;
    padding-right: 11px
}

.px-16 {
    padding-left: 16px;
    padding-right: 16px
}

.px-5 {
    padding-left: 5px;
    padding-right: 5px
}

.px-6 {
    padding-left: 6px;
    padding-right: 6px
}

.px-8 {
    padding-left: 8px;
    padding-right: 8px
}

.py-0 {
    padding-bottom: 0;
    padding-top: 0
}

.py-12 {
    padding-bottom: 12px;
    padding-top: 12px
}

.py-16 {
    padding-bottom: 16px;
    padding-top: 16px
}

.py-2 {
    padding-bottom: 2px;
    padding-top: 2px
}

.py-4 {
    padding-bottom: 4px;
    padding-top: 4px
}

.py-6 {
    padding-bottom: 6px;
    padding-top: 6px
}

.pb-12 {
    padding-bottom: 12px
}

.pb-16 {
    padding-bottom: 16px
}

.pb-24 {
    padding-bottom: 24px
}

.pb-44 {
    padding-bottom: 44px
}

.pb-6 {
    padding-bottom: 6px
}

.pb-\[35px\] {
    padding-bottom: 35px
}

.pl-16 {
    padding-left: 16px
}

.pl-4 {
    padding-left: 4px
}

.pl-8 {
    padding-left: 8px
}

.pr-16 {
    padding-right: 16px
}

.pr-8 {
    padding-right: 8px
}

.pt-12 {
    padding-top: 12px
}

.pt-14 {
    padding-top: 14px
}

.pt-16 {
    padding-top: 16px
}

.pt-8 {
    padding-top: 8px
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.align-sub {
    vertical-align: sub
}

.text-12 {
    font-size: 12px
}

.text-14 {
    font-size: 14px
}

.text-16 {
    font-size: 16px
}

.text-18 {
    font-size: 18px
}

.text-24 {
    font-size: 24px
}

.text-26 {
    font-size: 26px
}

.text-30 {
    font-size: 30px
}

.text-\[12px\] {
    font-size: 12px
}

.text-base {
    font-size: 14px;
    line-height: 20px
}

.text-lg {
    font-size: 16px;
    line-height: 22px
}

.text-sm {
    font-size: 12px;
    line-height: 16px
}

.text-xl {
    font-size: 20px;
    line-height: 28px
}

.font-bold {
    font-weight: 700
}

.font-light {
    font-weight: 300
}

.font-medium {
    font-weight: 500
}

.font-normal {
    font-weight: 400
}

.font-semibold {
    font-weight: 600
}

.lowercase {
    text-transform: lowercase
}

.capitalize {
    text-transform: capitalize
}

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

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

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

.dex-subnum-tooltip {
    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-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.sunx.io/v4/dex-web/static/media/sunperp-watermark.ad125ab7.svg) 50% no-repeat
}

html[data-dex-theme=dark][lang^=zh] .dex-kline-container .dex-mc-kline-chart,
html[data-dex-theme=dark][lang^=zh] .dex-kline-container .dex_chart_container {
    background: url(https://static.sunx.io/v4/dex-web/static/media/sunperp-watermark-cn.a0930381.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.sunx.io/v4/dex-web/static/media/sunperp-watermark-white.ad125ab7.svg) 50% no-repeat
}

html[data-dex-theme=light] .dex-kline-container[lang^=zh] .dex-mc-kline-chart,
html[data-dex-theme=light] .dex-kline-container[lang^=zh] .dex_chart_container,
html[data-dex-theme=white] .dex-kline-container[lang^=zh] .dex-mc-kline-chart,
html[data-dex-theme=white] .dex-kline-container[lang^=zh] .dex_chart_container {
    background: url(https://static.sunx.io/v4/dex-web/static/media/sunperp-watermark-white-cn.a0930381.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
}

.hidden {
    display: none
}

.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: calc(100% - 58px);
    position: relative;
    width: 100%
}

.kLine-d725a409 .depthContainer-e52d3cd6 {
    height: calc(100% - 36px)
}

.kLine-d725a409 .depthContainer-e52d3cd6 #depthChartRoot {
    background-color: transparent;
    height: 100%
}

html[data-dex-theme=dark] .depth-chart-blue {
    background: url(https://static.sunx.io/v4/dex-web/static/media/sunperp-watermark.ad125ab7.svg) 50% no-repeat
}

html[data-dex-theme=dark] .depth-chart-white {
    background: url(https://static.sunx.io/v4/dex-web/static/media/sunperp-watermark-white.ad125ab7.svg) 50% no-repeat
}

html[data-dex-theme=dark][lang^=zh] .depth-chart-blue {
    background: url(https://static.sunx.io/v4/dex-web/static/media/sunperp-watermark-cn.a0930381.svg) 50% no-repeat
}

html[data-dex-theme=dark][lang^=zh] .depth-chart-white {
    background: url(https://static.sunx.io/v4/dex-web/static/media/sunperp-watermark-white-cn.a0930381.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
}

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

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

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

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

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

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

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

.financial-record {
    overflow: hidden;
    padding-top: 0 !important;
    width: 100% !important
}

.financial-record .pagination-wrapper {
    height: unset !important;
    min-height: 48px !important;
    padding: 16px 20px 16px 30px !important
}

.financial-record>.center-page-title {
    background: #1b2945;
    border-top: 1px solid #171c2c;
    height: 82px;
    padding-top: 46px
}

.financial-record>.center-page-title>p.title {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 16px;
    line-height: 20px;
    margin: auto;
    width: 1320px
}

.financial-record>.center-page-title>p.title .assets-info-icon {
    margin-right: 12px
}

.financial-record-content-box {
    border-radius: 2px;
    font-size: 12px;
    width: 1320px
}

.financial-record-content-box .financial-record-trade-type-drop-list-root {
    display: inline-block;
    vertical-align: top;
    width: 50%
}

.financial-record-content-box .financial-record-trade-type-drop-list-root .financial-record-trade-type-drop-list-item {
    height: 32px;
    line-height: 32px;
    text-align: center;
    width: 100%
}

.financial-record-content-box .content-box-title .header-right {
    align-items: center;
    display: flex
}

.financial-record-content-box .content-box-title .header-right .query-button {
    margin-right: 17px
}

.financial-record-content-box .content-box-title .header-right .financial-export-tooltip .tooltip-arrow {
    left: 4px
}

.financial-record-content-box .query-button {
    margin-left: 16px;
    margin-top: unset !important
}

.financial-record-content-box .list-item {
    display: inline-block;
    width: 200px
}

.financial-record-content-box .list-item-time {
    display: inline-block;
    width: 310px
}

.financial-record-content-box .list-sheet-item {
    display: inline-block;
    width: 130px
}

.financial-record-content-box .list-trade-type-item {
    display: inline-block;
    width: 300px
}

.adjust-coe-wrap .center-page-select-title {
    display: inline-block;
    height: 28px;
    line-height: 28px
}

.adjust-coe-wrap .data-center-title {
    align-items: center;
    display: flex
}

.adjust-coe-wrap .data-center-title .right-style {
    margin-right: 10px
}

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

.adjust-coe-wrap .data-center-title .tooltip-new {
    margin-top: -2px
}

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

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

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

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

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

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

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .fix-first-column {
    background-color: #fbfcfe;
    left: 0;
    min-height: 32px;
    position: sticky
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .fix-first-column-center {
    align-items: center;
    background-color: #fbfcfe;
    display: flex;
    left: 0;
    min-height: 32px;
    position: sticky
}

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

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-table-plan {
    min-width: 1200px;
    position: relative
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-table-limit {
    width: 910px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan {
    display: flex;
    font-size: 12px;
    line-height: 16px;
    margin: 0;
    padding: 8px 0
}

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

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

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

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit .item {
    display: inline-block;
    font-size: 12px;
    width: 20.66667%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit .item:first-child {
    padding-left: 10px;
    width: 28%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit .item:nth-child(5) {
    width: 28%
}

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

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit .item.right {
    text-align: right
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit .text-center {
    text-align: center
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit .tip-text {
    white-space: nowrap
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan .item {
    display: inline-block;
    font-size: 12px;
    width: 8.33333%
}

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

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

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan .close-profit {
    width: 30%
}

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

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-limit .item,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-plan .item {
    padding: 0 3px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-limit {
    align-items: center;
    display: flex
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-limit:hover {
    background: #f2f6fa
}

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

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-limit .item {
    width: 20.66667%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-limit .item:first-child {
    padding-left: 10px;
    width: 28%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-limit .item:nth-child(5) {
    width: 28%
}

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

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-limit .text-center {
    text-align: center
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-plan {
    align-items: center;
    display: flex;
    min-height: 40px
}

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

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-plan .item {
    width: 8.33333%
}

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

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

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-plan .close-profit {
    width: 30%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst {
    overflow: scroll;
    padding: 20px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-alert-list-box {
    max-height: 200000px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap {
    font-size: 14px;
    text-align: justify;
    width: 480px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-list-table-limit,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-list-table-plan {
    border: 1px solid #cad7e0;
    overflow: scroll;
    width: auto
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-alert-list-box,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-list-title-limit {
    width: 600px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-alert-list-box.ru-RU,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-list-title-limit.ru-RU {
    width: 700px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-alert-list-box.ru-RU .close-profit,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-list-title-limit.ru-RU .close-profit {
    width: 25%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .force-detail {
    margin-bottom: 16px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .force-order {
    margin: 15px 0
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-link-wrap {
    padding-top: 10px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-link-wrap a {
    display: inline-block;
    margin-top: 10px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-list-title-limit,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-list-title-plan {
    line-height: 14px;
    padding: 4px 0
}

.order-trade-detail-alert-inner-warn {
    align-items: center;
    background: rgba(224, 147, 0, .05);
    border: 1px solid rgba(224, 147, 0, .3);
    display: flex;
    margin-top: 16px;
    min-height: 40px;
    padding: 10px 16px
}

.order-trade-detail-alert-inner-warn>i {
    color: var(--dexc-warning-color)
}

.order-trade-detail-alert-inner-warn>p {
    color: #000;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 20px;
    margin-left: 10px
}

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

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

.contract-list-box {
    background: var(--dex-contract-list-background);
    border-radius: var(--dex-border-radius-mid);
    display: flex;
    flex-direction: column;
    height: 100%
}

.contract-list-box .contract-blue div.contract-title {
    background: var(--dex-contract-list-background);
    border-bottom: 1px solid var(--dex-component-background-color);
    box-shadow: none
}

.contract-list-box .dex-contract-box {
    display: flex;
    flex: 1 1;
    flex-direction: column
}

.contract-list-box .dex-contract-box .dex-contract-box-contract-list {
    flex: 1 1;
    overflow: auto
}

.contract-list-box.contract-list-box-max-height {
    height: calc(100vh - var(--dex-header-height) - 64px)
}

.container-c37158b6 {
    display: flex;
    gap: 6px;
    height: 100%
}

.container-c37158b6.merged-f8bdd554 {
    background-color: var(--dexc-dark-trade-bg);
    border-radius: var(--dex-border-radius-small);
    display: flex;
    flex-direction: column;
    gap: 0
}

.header-fbb5b184 {
    align-items: center;
    border-bottom: 1px solid var(--dex-common-border-color);
    display: flex;
    gap: 24px;
    height: 40px;
    justify-content: center;
    padding: 0 16px
}

.header-fbb5b184 .headerItemActive-e0479ae3 {
    color: var(--dex-primary-font-color);
    position: relative
}

.header-fbb5b184 .headerItemActive-e0479ae3:before {
    background-color: var(--dex-primary-color);
    border-radius: 2px;
    bottom: 0;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    visibility: visible;
    width: 16px
}

@media (max-width: 1024px) {
    .container-c37158b6,
    .container-c37158b6.merged-f8bdd554 {
        flex-direction: column !important;
        width: 100% !important;
        height: auto;
    }
    .container-c37158b6 .dex-mc-orderbook,
    .container-c37158b6 .trade-panel {
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 auto;
    }
    .chart-c89a8f63,
    #chart {
        width: 100% !important;
        height: 60vh !important;
    }
}

.headerItem-a1d2d813 {
    color: var(--dex-secondary-font-color);
    cursor: pointer;
    font-size: 14px;
    line-height: 22px;
    padding-bottom: 8px;
    padding-top: 8px
}

html[lang=es-ES] .headerItem-a1d2d813 {
    font-size: 12px
}

.realtimeTransactionBody-e288ec12 {
    height: calc(100% - 72px)
}

.bidaskContainer-d6c4c5a5,
.rtContainer-c9d1dd89 {
    min-width: 280px;
    width: 280px
}

.unitSelect-ff492b54 .dex-select-selector {
    text-align: right
}

.converted-bb74a92e {
    color: var(--dex-tertiary-font-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    margin-top: 6px;
    text-align: left
}

.container-dfaad1e4 {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%
}

.container-dfaad1e4>span {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px
}

.container-dfaad1e4 .label-b1ba39ab {
    color: var(--dexc-secondary-font-color)
}

.container-dfaad1e4 .value-f250d118 {
    color: var(--dex-primary-font-color);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.container-a09325c6 {
    color: var(--dex-tertiary-font-color);
    font-size: 12px;
    font-weight: 400
}

.triggerPriceClass-e353efc6 {
    font-weight: 400
}

.normal-d78d15bd,
.triggerPriceClass-e353efc6 {
    color: var(--dex-primary-font-color)
}

.up-e6dc6199 {
    color: var(--up-color)
}

.down-e4f1470b {
    color: var(--down-color)
}

.formItemLeft-d6ba421f {
    flex: 1 1
}

.formItemRight-b88a0f32 {
    width: 144px
}

.select-a38b366a {
    width: 100%
}

.input-f3294b6b .dex-input-suffix {
    padding-right: 28px
}

.container-d777b88d {
    display: flex;
    flex-direction: column;
    min-height: 572px
}

.container-d777b88d .submitBtn-ce84de6e {
    margin-bottom: 24px;
    margin-top: auto
}

.container-fcc50ef9 {
    display: flex;
    flex-direction: column;
    min-height: 572px
}

.amountInput-ee1e434c,
.slider-c8a38c37 {
    margin-bottom: 12px
}

.slider-c8a38c37 {
    margin-top: 12px
}

.submitBtn-e00b04ca {
    margin-bottom: 24px;
    margin-top: auto
}

.input-ff6bc008 .dex-input-suffix {
    padding-right: 28px
}

.container-b575bfae {
    display: flex;
    flex-direction: column;
    min-height: 696px
}

.container-b575bfae .dex-form-item {
    margin-bottom: 12px
}

.modalTitle-bb2a569d {
    font-size: 20px;
    font-weight: 500;
    padding: 24px 0
}

.info-b4fdc8af {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px
}

.info-b4fdc8af .infoItem-bffa2966 {
    align-items: flex-start;
    display: flex;
    flex-direction: column
}

.info-b4fdc8af .infoItem-bffa2966>span {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px
}

.info-b4fdc8af .infoItem-bffa2966 .label-bf6aaba5 {
    color: var(--dexc-secondary-font-color)
}

.info-b4fdc8af .infoItem-bffa2966 .value-ad32883d {
    color: var(--dex-primary-font-color);
    margin-top: 6px
}

.tabs-c9211744 {
    flex: 1 1
}

.content-ca22c59c .title-dd90590c {
    color: var(--dex-modal-title-font-color);
    font-size: 20px;
    line-height: 28px;
    padding: 22px 0;
    text-align: left
}

.content-ca22c59c .title-dd90590c>span:last-child {
    margin-left: 8px
}

.content-ca22c59c .title-dd90590c span.buy-fef2859d {
    color: var(--up-color)
}

.content-ca22c59c .title-dd90590c span.sell-a13c5a6c {
    color: var(--down-color)
}

.content-ca22c59c .desc-cc11e87d {
    margin-bottom: 20px
}

.content-ca22c59c .desc-cc11e87d span {
    color: var(--dexc-primary-font-color);
    font-size: 14px;
    line-height: 20px
}

.content-ca22c59c .desc-cc11e87d span:nth-child(2n) {
    color: var(--dexc-warning-color)
}

.content-ca22c59c .alert-bd50c68b {
    margin-bottom: 20px
}

.content-ca22c59c .table-f2c1e73f {
    border-bottom: 1px solid var(--dexc-common-border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
    padding-top: 16px
}

.content-ca22c59c .table-f2c1e73f .tableItem-f4173973 {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.content-ca22c59c .table-f2c1e73f .tableItem-f4173973 .label-eb5d2e81 {
    color: var(--dexc-secondary-font-color);
    font-size: 14px;
    line-height: 20px;
    text-align: left
}

.content-ca22c59c .table-f2c1e73f .tableItem-f4173973 .value-f85a2f5d {
    color: var(--dexc-primary-font-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: right
}

.content-ca22c59c .table-f2c1e73f .tableItem-f4173973 .convertedValue-fefe1a8c {
    color: var(--dexc-secondary-font-color);
    font-size: 12px;
    line-height: 20px;
    text-align: right
}

.content-ca22c59c .table-f2c1e73f .tableItem-f4173973 .valueContainer-e8e091f5 {
    display: flex;
    flex-direction: column;
    text-align: right
}

.content-ca22c59c .table-f2c1e73f .tableItem-f4173973:last-child {
    margin-bottom: 0
}

.content-ca22c59c .priceProtection-a731dbec {
    border-bottom: 1px solid var(--dexc-common-border-color);
    color: var(--dexc-secondary-font-color);
    padding-bottom: 16px;
    padding-top: 16px
}

.content-ca22c59c .priceProtection-a731dbec .priceProtectStatus-dde8663d {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px
}

.content-ca22c59c .priceProtection-a731dbec .priceProtectStatus-dde8663d .tooltipLabel-a4c5a3a4 {
    border-bottom: 1px dashed var(--dex-secondary-font-color);
    cursor: pointer
}

.content-ca22c59c .warning-af46980d {
    color: var(--dexc-warning-color);
    font-size: 12px;
    margin-top: 20px;
    text-align: left
}

.content-ca22c59c .extra-d16cedf2 {
    margin-top: 12px
}

.global-common-header {
    background: #080808;
    max-width: 100vw;
    width: calc(100vw - 20px)
}

@media (max-width: 1024px) {
    .topLeftTop-bbc517ca {
        display: flex;
        flex-direction: column;
    }
    .box-d159b4f3 {
        width: 100%;
    }
}