.in-trade-page {
  --hb-input-disabled-bg: var(--hbc-trade-input-disabled-bg);
  --hb-component-background-color: var(--hbc-trade-component-bg-color);
  --hb-primary-container-bg: var(--hbc-trade-primary-container-bg);
  --hb-secondary-container-bg: var(--hbc-trade-secondary-container-bg);
}
/** 滚动条样式 **/
.hb-tooltip {
  position: absolute;
  z-index: var(--hb-dropdown-zIndex);
  display: block;
  font-size: var(--hb-secondary-font-size);
  visibility: visible;
}
.hb-tooltip-hidden {
  display: none;
}
.hb-tooltip-placement-top,
.hb-tooltip-placement-topLeft,
.hb-tooltip-placement-topRight {
  padding: var(--hb-tooltip-arrow-width) 0 var(--hb-tooltip-arrow-distance) 0;
}
.hb-tooltip-placement-right,
.hb-tooltip-placement-rightTop,
.hb-tooltip-placement-rightBottom {
  padding: 0 var(--hb-tooltip-arrow-width) 0 var(--hb-tooltip-arrow-distance);
}
.hb-tooltip-placement-bottom,
.hb-tooltip-placement-bottomLeft,
.hb-tooltip-placement-bottomRight {
  padding: var(--hb-tooltip-arrow-distance) 0 var(--hb-tooltip-arrow-width) 0;
}
.hb-tooltip-placement-left,
.hb-tooltip-placement-leftTop,
.hb-tooltip-placement-leftBottom {
  padding: 0 var(--hb-tooltip-arrow-distance) 0 var(--hb-tooltip-arrow-width);
}
.hb-tooltip-inner {
  max-width: var(--hb-tooltip-max-width);
  min-width: var(--hb-tooltip-min-width);
  min-height: 34px;
  padding: var(--hb-toolitp-padding, 10px);
  color: var(--hb-tooltip-color, var(--hb-secondary-font-color));
  text-align: left;
  text-decoration: none;
  background-color: var(--hb-tooltip-bg, var(--hb-primary-container-bg));
  border-radius: var(--hb-border-radius-mid);
  box-shadow: var(--hb-primary-box-shadow);
}
.hb-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.hb-tooltip-placement-top .hb-tooltip-arrow,
.hb-tooltip-placement-topLeft .hb-tooltip-arrow,
.hb-tooltip-placement-topRight .hb-tooltip-arrow {
  bottom: calc(var(--hb-tooltip-arrow-distance) - var(--hb-tooltip-arrow-width));
  margin-left: calc(var(--hb-tooltip-arrow-width) * -1);
  border-width: var(--hb-tooltip-arrow-width) var(--hb-tooltip-arrow-width) 0;
  border-top-color: var(--hb-tooltip-bg, var(--hb-primary-container-bg));
}
.hb-tooltip-placement-top .hb-tooltip-arrow {
  left: 50%;
}
.hb-tooltip-placement-topLeft .hb-tooltip-arrow {
  left: 15%;
}
.hb-tooltip-placement-topRight .hb-tooltip-arrow {
  right: 15%;
}
.hb-tooltip-placement-right .hb-tooltip-arrow,
.hb-tooltip-placement-rightTop .hb-tooltip-arrow,
.hb-tooltip-placement-rightBottom .hb-tooltip-arrow {
  left: calc(var(--hb-tooltip-arrow-distance) - var(--hb-tooltip-arrow-width));
  margin-top: calc(var(--hb-tooltip-arrow-width) * -1);
  border-width: var(--hb-tooltip-arrow-width) var(--hb-tooltip-arrow-width) var(--hb-tooltip-arrow-width) 0;
  border-right-color: var(--hb-tooltip-bg, var(--hb-primary-container-bg));
}
.hb-tooltip-placement-right .hb-tooltip-arrow {
  top: 50%;
}
.hb-tooltip-placement-rightTop .hb-tooltip-arrow {
  top: 15%;
  margin-top: 0;
}
.hb-tooltip-placement-rightBottom .hb-tooltip-arrow {
  bottom: 15%;
}
.hb-tooltip-placement-left .hb-tooltip-arrow,
.hb-tooltip-placement-leftTop .hb-tooltip-arrow,
.hb-tooltip-placement-leftBottom .hb-tooltip-arrow {
  right: calc(var(--hb-tooltip-arrow-distance) - var(--hb-tooltip-arrow-width));
  margin-top: calc(var(--hb-tooltip-arrow-width) * -1);
  border-width: var(--hb-tooltip-arrow-width) 0 var(--hb-tooltip-arrow-width) var(--hb-tooltip-arrow-width);
  border-left-color: var(--hb-tooltip-bg, var(--hb-primary-container-bg));
}
.hb-tooltip-placement-left .hb-tooltip-arrow {
  top: 50%;
}
.hb-tooltip-placement-leftTop .hb-tooltip-arrow {
  top: 15%;
  margin-top: 0;
}
.hb-tooltip-placement-leftBottom .hb-tooltip-arrow {
  bottom: 15%;
}
.hb-tooltip-placement-bottom .hb-tooltip-arrow,
.hb-tooltip-placement-bottomLeft .hb-tooltip-arrow,
.hb-tooltip-placement-bottomRight .hb-tooltip-arrow {
  top: calc(var(--hb-tooltip-arrow-distance) - var(--hb-tooltip-arrow-width));
  margin-left: calc(var(--hb-tooltip-arrow-width) * -1);
  border-width: 0 var(--hb-tooltip-arrow-width) var(--hb-tooltip-arrow-width);
  border-bottom-color: var(--hb-tooltip-bg, var(--hb-primary-container-bg));
}
.hb-tooltip-placement-bottom .hb-tooltip-arrow {
  left: 50%;
}
.hb-tooltip-placement-bottomLeft .hb-tooltip-arrow {
  left: 15%;
}
.hb-tooltip-placement-bottomRight .hb-tooltip-arrow {
  right: 15%;
}

.in-trade-page {
  --hb-input-disabled-bg: var(--hbc-trade-input-disabled-bg);
  --hb-component-background-color: var(--hbc-trade-component-bg-color);
  --hb-primary-container-bg: var(--hbc-trade-primary-container-bg);
  --hb-secondary-container-bg: var(--hbc-trade-secondary-container-bg);
}
/** 滚动条样式 **/

.in-trade-page {
  --hb-input-disabled-bg: var(--hbc-trade-input-disabled-bg);
  --hb-component-background-color: var(--hbc-trade-component-bg-color);
  --hb-primary-container-bg: var(--hbc-trade-primary-container-bg);
  --hb-secondary-container-bg: var(--hbc-trade-secondary-container-bg);
}
/** 滚动条样式 **/
.hb-select {
  --hb-select-min-width: 80px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  min-width: var(--hb-select-min-width);
  font-size: var(--hb-main-font-size);
  cursor: pointer;
}
.hb-select-selector {
  min-width: inherit;
  padding: var(--hb-select-selector-padding);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: var(--hb-component-background-color);
  border-radius: var(--hb-border-radius-mid);
  cursor: pointer;
}
.hb-select-selector .hb-select-selection-search {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.hb-select-selector .hb-select-selection-search-input {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 16px;
  padding: var(--hb-select-selector-padding, 12px);
  color: var(--hb-primary-font-color);
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}
.hb-select-selector .hb-select-selection-search-input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
          appearance: none;
}
.hb-select-selector .hb-select-selection-placeholder {
  color: var(--hb-tertiary-font-color);
  font-size: 12px;
  line-height: 16px;
}
.hb-select-selector .hb-select-selection-item {
  color: var(--hb-primary-font-color);
  font-size: 12px;
  line-height: 16px;
}
.hb-select-arrow {
  position: absolute;
  top: 50%;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transform-origin: center;
  transition: transform 0.3s ease-in-out;
  pointer-events: none;
}
.hb-select-arrow path {
  fill: var(--hb-tertiary-font-color);
}
.hb-select-open {
  border-color: var(--hb-primary-color);
}
.hb-select-open .hb-select-arrow {
  transform: translateY(-50%) rotate(180deg);
  transform-origin: center;
  transition: all 0.3s;
}
.hb-select-dropdown {
  position: relative;
  z-index: var(--hb-dropdown-zIndex);
  display: inline-block;
  padding: 4px;
  background-color: var(--hb-primary-container-bg);
  border-radius: var(--hb-border-radius-mid);
  box-shadow: var(--hb-primary-box-shadow);
}
.hb-select-dropdown .hb-select-item {
  overflow: hidden;
  color: var(--hb-primary-font-color);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  border-radius: var(--hb-border-radius-mid);
  cursor: pointer;
}
.hb-select-dropdown .hb-select-item:hover {
  color: var(--hb-primary-font-color);
  background-color: var(--hb-secondary-container-bg);
  transition: all 0.3s;
}
.hb-select-dropdown .hb-select-item-option-active {
  background-color: var(--hb-secondary-container-bg);
}
.hb-select-dropdown .hb-select-item-option-selected {
  color: var(--hb-primary-color);
}
.hb-select-dropdown .hb-select-item-option-selected:hover {
  color: var(--hb-primary-color);
}
.hb-select-dropdown .hb-select-item-option-content {
  padding: 4px 8px;
  white-space: nowrap;
  text-align: left;
  border-radius: var(--hb-border-radius-mid);
}
.hb-select-dropdown .hb-select-item-option-disabled {
  color: var(--hb-quaternary-font-color);
  cursor: not-allowed;
}
.hb-select-dropdown .hb-select-item-option-disabled:hover {
  color: inherit;
  color: var(--hb-quaternary-font-color);
  background-color: transparent;
  background-color: initial;
}
.hb-select-dropdown .hb-select-item-empty {
  padding: 20px 0px;
  color: var(--hb-quaternary-font-color);
  font-size: 12px;
  text-align: center;
  background-color: var(--hb-primary-container-bg);
}
.hb-select-dropdown .rc-virtual-list-holder::-webkit-scrollbar {
  width: var(--hb-scrollbar-width);
  height: var(--hb-scrollbar-width);
}
.hb-select-dropdown .rc-virtual-list-holder::-webkit-scrollbar-thumb {
  background-color: var(--hb-quaternary-font-color);
  border-radius: var(--hb-scrollbar-redius);
}
.hb-select-dropdown .rc-virtual-list-holder::-webkit-scrollbar-track {
  background-color: var(--hb-scrollbar-track-bg);
}
.hb-select-dropdown .rc-virtual-list-holder::-webkit-scrollbar-corner {
  background-color: var(--hb-scrollbar-corner-bg);
}
.hb-select-dropdown-hidden {
  display: none;
}
.hb-select-borderless {
  border-width: 0px;
}
.hb-select-small .hb-select-selector {
  min-height: 28px;
  padding: var(--hb-select-selector-padding, 4px 12px);
  padding-right: 28px;
}
.hb-select-small .hb-select-selector .hb-select-selection-search-input {
  padding: var(--hb-select-selector-padding, 4px 12px);
  font-size: 12px;
}
.hb-select-small .hb-select-selector .hb-select-selection-placeholder {
  font-size: 12px;
  line-height: 16px;
}
.hb-select-small .hb-select-selector .hb-select-selection-item {
  font-size: 12px;
  line-height: 16px;
}
.hb-select-dropwdown-small .hb-select-item-option-content {
  padding: 6px 12px;
  font-size: 12px;
  line-height: 16px;
}
.hb-select-mid .hb-select-selector {
  min-height: 36px;
  padding: var(--hb-select-selector-padding, 8px 12px);
  padding-right: 28px;
  font-size: 14px;
  line-height: 20px;
}
.hb-select-mid .hb-select-selector .hb-select-selection-search-input {
  padding: var(--hb-select-selector-padding, 8px 12px);
  font-size: 14px;
}
.hb-select-mid .hb-select-selector .hb-select-selection-placeholder {
  font-size: 14px;
  line-height: 20px;
}
.hb-select-mid .hb-select-selector .hb-select-selection-item {
  font-size: 14px;
  line-height: 20px;
}
.hb-select-dropwdown-mid .hb-select-item-option-content {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
}
.hb-select-large .hb-select-selector {
  min-height: 44px;
  padding: var(--hb-select-selector-padding, 12px);
  padding-right: 28px;
  font-size: 14px;
  line-height: 20px;
}
.hb-select-large .hb-select-selector .hb-select-selection-search-input {
  padding: var(--hb-select-selector-padding, 12px);
  font-size: 14px;
}
.hb-select-large .hb-select-selector .hb-select-selection-placeholder {
  font-size: 14px;
  line-height: 20px;
}
.hb-select-large .hb-select-selector .hb-select-selection-item {
  font-size: 14px;
  line-height: 20px;
}
.hb-select-dropwdown-large .hb-select-item-option-content {
  padding: 10px 12px;
  font-size: 14px;
  line-height: 20px;
}
.hb-select-show-search .hb-select-selection-search-input {
  cursor: text;
}
.hb-select-open.hb-select-show-search .hb-select-selection-item {
  color: var(--hb-quaternary-font-color);
}

.in-trade-page {
  --hb-input-disabled-bg: var(--hbc-trade-input-disabled-bg);
  --hb-component-background-color: var(--hbc-trade-component-bg-color);
  --hb-primary-container-bg: var(--hbc-trade-primary-container-bg);
  --hb-secondary-container-bg: var(--hbc-trade-secondary-container-bg);
}
/** 滚动条样式 **/
.hb-button {
  display: inline-block;
  white-space: nowrap;
  border: none;
  border-radius: var(--hb-border-radius-mid);
  cursor: pointer;
  transition: all 0.3s;
}
.hb-button:disabled:not(.hb-button-loading) {
  cursor: not-allowed;
}
.hb-button-block {
  display: block;
  width: 100%;
}
.hb-button-small {
  min-width: 40px;
  padding: 6px 8px;
  font-size: var(--hb-secondary-font-size);
  line-height: 16px;
}
.hb-button-mid {
  min-width: 52px;
  padding: 8px 12px;
  font-size: var(--hb-main-font-size);
  line-height: 20px;
}
.hb-button-large {
  min-width: 68px;
  padding: 12px 16px;
  font-size: var(--hb-main-font-size);
  line-height: 20px;
}
.hb-button-primary {
  color: var(--hb-white);
  background-color: var(--hb-primary-color);
}
.hb-button-primary:not(:disabled):hover {
  background-color: var(--hb-primary-hover-color);
  transition: all 0.3s;
}
.hb-button-primary:not(:disabled):active {
  background-color: var(--hb-primary-active-color);
  transition: all 0.3s;
}
.hb-button-primary:disabled {
  color: var(--hb-quaternary-font-color);
  background-color: var(--hb-input-disabled-bg);
}
.hb-button-text,
.hb-button-link {
  min-width: 0;
  min-width: initial;
  padding: 0;
  text-decoration: none;
  background: none;
  border: none;
}
.hb-button-text:not(:disabled) {
  color: var(--hb-primary-font-color);
}
.hb-button-text:not(:disabled):disabled {
  color: var(--hb-quaternary-font-color);
}
.hb-button-text:not(:disabled):hover {
  color: var(--hb-secondary-font-color);
}
.hb-button-text:not(:disabled):active {
  color: var(--hb-tertiary-font-color);
}
.hb-button-link:not(:disabled) {
  color: var(--hb-primary-color);
}
.hb-button-link:not(:disabled):disabled {
  color: var(--hb-quaternary-font-color);
}
.hb-button-link:not(:disabled):hover {
  color: var(--hb-primary-hover-color);
}
.hb-button-link:not(:disabled):active {
  color: var(--hb-primary-active-color);
}
.hb-button-default {
  color: var(--hb-primary-font-color);
  background-color: transparent;
  transition: color 0.3s, background-color 0.3s;
}
.hb-button-default:not(:disabled):hover {
  background-color: var(--hb-component-background-color);
  transition: color 0.3s, background-color 0.3s;
}
.hb-button-default:not(:disabled):active {
  background-color: var(--hb-input-disabled-bg);
  transition: color 0.3s, background-color 0.3s;
}
.hb-button-default:disabled {
  color: var(--hb-quaternary-font-color);
  background-color: transparent;
}
.hb-button-default .hb-button-loading-icon path {
  fill: var(--hb-primary-color);
}
.hb-button-secondary {
  color: var(--hb-primary-font-color);
  background-color: var(--hb-secondary-container-bg);
  transition: color 0.3s, background-color 0.3s;
}
.hb-button-secondary:not(:disabled):hover {
  background-color: var(--hb-input-disabled-bg);
  transition: color 0.3s, background-color 0.3s;
}
.hb-button-secondary:not(:disabled):active {
  background-color: var(--hb-component-background-color);
  transition: color 0.3s, background-color 0.3s;
}
.hb-button-secondary:disabled {
  color: var(--hb-quaternary-font-color);
  background-color: var(--hb-input-disabled-bg);
}
.hb-button-secondary .hb-button-loading-icon path {
  fill: var(--hb-primary-color);
}
.hb-button-buy,
.hb-button-sell {
  padding: 8px auto;
  color: #fff;
}
.hb-button-buy {
  background-color: var(--hb-buy-color);
}
.hb-button-buy:hover {
  background-color: var(--hb-button-buy-hover-bg);
}
.hb-button-buy:active {
  background-color: var(--hb-button-buy-active-bg);
}
.hb-button-sell {
  background-color: var(--hb-sell-color);
}
.hb-button-sell:hover {
  background-color: var(--hb-button-sell-hover-bg);
}
.hb-button-sell:active {
  background-color: var(--hb-button-sell-active-bg);
}
.hb-button-loading-icon {
  animation-name: rotate;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.in-trade-page {
  --hb-input-disabled-bg: var(--hbc-trade-input-disabled-bg);
  --hb-component-background-color: var(--hbc-trade-component-bg-color);
  --hb-primary-container-bg: var(--hbc-trade-primary-container-bg);
  --hb-secondary-container-bg: var(--hbc-trade-secondary-container-bg);
}
/** 滚动条样式 **/
.hb-form-item {
  margin-bottom: 6px;
}
.hb-form-item-offset {
  margin-bottom: -20px;
}
.hb-form-item-error .hb-input,
.hb-form-item-error .hb-input-affix-wrapper,
.hb-form-item-error .hb-input-with-options,
.hb-form-item-error .hb-input-with-options .hb-input-wrapper {
  box-sizing: border-box;
  border-color: var(--hb-error-color);
  transition: border-color 0.2s ease-in-out;
}
.hb-form-item-error .hb-input .hb-input,
.hb-form-item-error .hb-input-affix-wrapper .hb-input,
.hb-form-item-error .hb-input-with-options .hb-input,
.hb-form-item-error .hb-input-with-options .hb-input-wrapper .hb-input {
  border-color: transparent;
}
.hb-form-item-error .hb-form-item-explain {
  margin-top: 4px;
  color: var(--hb-error-color);
  font-size: var(--hb-secondary-font-size);
  line-height: 16px;
}
.hb-form-item-hidden {
  display: none;
}

.in-trade-page {
  --hb-input-disabled-bg: var(--hbc-trade-input-disabled-bg);
  --hb-component-background-color: var(--hbc-trade-component-bg-color);
  --hb-primary-container-bg: var(--hbc-trade-primary-container-bg);
  --hb-secondary-container-bg: var(--hbc-trade-secondary-container-bg);
}
/** 滚动条样式 **/
.hb-white-loading-icon {
  background-image: var(--hb-icon-white-loading-bg-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


.in-trade-page {
  --hb-input-disabled-bg: var(--hbc-trade-input-disabled-bg);
  --hb-component-background-color: var(--hbc-trade-component-bg-color);
  --hb-primary-container-bg: var(--hbc-trade-primary-container-bg);
  --hb-secondary-container-bg: var(--hbc-trade-secondary-container-bg);
}
/** 滚动条样式 **/
.input-disabled-mixin {
  color: var(--hb-tertiary-font-color);
  background-color: var(--hb-input-disabled-bg);
  border-color: var(--hb-input-disabled-bg);
  cursor: not-allowed;
}
.input-readonly-mixin {
  color: var(--hb-tertiary-font-color);
  background-color: var(--hb-input-disabled-bg);
  border-color: var(--hb-input-disabled-bg);
  cursor: not-allowed;
  cursor: default;
}
.input-borderless {
  border-color: transparent;
}
.hb-input {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  color: var(--hb-primary-font-color);
  font-weight: 400;
  text-align: right;
  background-color: var(--hb-component-background-color);
  border-color: transparent;
  border-style: solid;
  border-width: 1px;
  border-radius: var(--hb-border-radius-mid);
  outline: none;
  transition: border-color 0.2s ease-in-out;
  font-size: inherit;
  line-height: inherit;
}
.hb-input::placeholder {
  color: var(--hb-tertiary-font-color);
}
.hb-input:focus {
  border-color: var(--hb-primary-color);
}
.hb-input:disabled,
.hb-input-disabled {
  color: var(--hb-tertiary-font-color);
  background-color: var(--hb-input-disabled-bg);
  border-color: var(--hb-input-disabled-bg);
  cursor: not-allowed;
}
.hb-input-left .hb-input {
  text-align: left;
}
.hb-input-readonly {
  color: var(--hb-tertiary-font-color);
  background-color: var(--hb-input-disabled-bg);
  border-color: var(--hb-input-disabled-bg);
  cursor: not-allowed;
  cursor: default;
}
.hb-input-readonly:focus {
  border-color: transparent;
}
.hb-input-affix-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  line-height: 18px;
  background-color: var(--hb-component-background-color);
  border: 1px solid transparent;
  border-radius: var(--hb-border-radius-mid);
  outline: none;
}
.hb-input-affix-wrapper .hb-input {
  flex: 1 1;
  margin: 0;
  padding: 0 12px;
  border-color: transparent;
  border-radius: 0;
  border-radius: initial;
  outline: none;
  transition: none 0s ease 0s;
  transition: initial;
  line-height: inherit;
  font-weight: inherit;
}
.hb-input-affix-wrapper .hb-input:focus {
  border-color: transparent;
}
.hb-input-affix-wrapper .hb-input-prefix,
.hb-input-affix-wrapper .hb-input-suffix {
  padding: 10px 12px;
  font-weight: 400;
}
.hb-input-affix-wrapper .hb-input-prefix {
  margin-right: 4px;
  white-space: nowrap;
  padding-right: 0;
  color: var(--hb-tertiary-font-color);
}
.hb-input-affix-wrapper .hb-input-suffix {
  padding-left: 0;
  color: var(--hb-primary-font-color);
}
.hb-input-affix-wrapper-focused {
  border-color: var(--hb-primary-color);
  transition: border-color 0.2s ease-in-out;
}
.hb-input-affix-wrapper-disabled {
  color: var(--hb-tertiary-font-color);
  background-color: var(--hb-input-disabled-bg);
  border-color: var(--hb-input-disabled-bg);
  cursor: not-allowed;
}
.hb-input-affix-wrapper-disabled .hb-input-prefix,
.hb-input-affix-wrapper-disabled .hb-input-suffix {
  color: var(--hb-tertiary-font-color);
}
.hb-input-affix-wrapper-readonly {
  color: var(--hb-tertiary-font-color);
  background-color: var(--hb-input-disabled-bg);
  border-color: var(--hb-input-disabled-bg);
  cursor: not-allowed;
  cursor: default;
}
.hb-input-affix-wrapper-readonly .hb-input {
  color: var(--hb-tertiary-font-color);
  background-color: var(--hb-input-disabled-bg);
  border-color: var(--hb-input-disabled-bg);
  cursor: not-allowed;
  cursor: default;
}
.hb-input-affix-wrapper-readonly .hb-input-prefix,
.hb-input-affix-wrapper-readonly .hb-input-suffix {
  color: var(--hb-tertiary-font-color);
  cursor: default;
}
.hb-input-affix-wrapper-readonly:focus {
  border-color: transparent;
}
.hb-input-group {
  display: flex;
  align-items: center;
}
.hb-input-group .hb-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.hb-input-group .hb-input-group-addon {
  background-color: var(--hb-component-background-color);
}
.hb-input-group .hb-input-group-addon:first-child {
  border-radius: 4px 0 0 4px;
}
.hb-input-group .hb-input-group-addon:last-child {
  border-radius: 0 4px 4px 0;
}
.hb-input-inner-tooltip {
  -webkit-text-decoration: underline dashed;
          text-decoration: underline dashed;
  cursor: pointer;
  text-decoration-color: var(--hb-tertiary-font-color);
  text-underline-offset: 4px;
}
.hb-input-small {
  padding: 6px 12px;
  height: 28px;
  font-size: 12px;
  line-height: 16px;
}
.hb-input-small .hb-input,
.hb-input-small .hb-input-affix-wrapper {
  height: 28px;
}
.hb-input-small.hb-input-group-wrapper .hb-input-wrapper {
  height: calc(28px - 2px);
}
.hb-input-mid {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  height: 36px;
}
.hb-input-mid .hb-input,
.hb-input-mid .hb-input-affix-wrapper {
  height: 36px;
}
.hb-input-mid.hb-input-group-wrapper .hb-input-wrapper {
  height: calc(36px - 2px);
}
.hb-input-large {
  padding: 12px 12px;
  font-size: 14px;
  line-height: 20px;
  height: 44px;
}
.hb-input-large .hb-input,
.hb-input-large .hb-input-affix-wrapper {
  height: 44px;
}
.hb-input-large.hb-input-group-wrapper .hb-input-wrapper {
  height: calc(44px - 2px);
}
.hb-input-affix-wrapper.hb-input-small,
.hb-input-affix-wrapper.hb-input-mid,
.hb-input-affix-wrapper.hb-input-large,
.hb-input-group-wrapper.hb-input-small,
.hb-input-group-wrapper.hb-input-mid,
.hb-input-group-wrapper.hb-input-large {
  padding: 0;
}
.hb-input-group-wrapper {
  display: inline-block;
  border: 1px solid transparent;
  width: 100%;
}
.hb-input-group-wrapper .hb-input-affix-wrapper {
  border-radius: 0;
  border: none;
}
.hb-input-group-wrapper .hb-input-wrapper {
  border: none;
  border-radius: var(--hb-border-radius-mid);
  overflow: hidden;
}
.hb-input-group-wrapper .hb-input-wrapper .hb-input {
  box-sizing: content-box;
  border: none;
  border-radius: 0;
  padding: 0 12px 0 12px;
}
.hb-input-group-wrapper .hb-input-wrapper .hb-input-group-addon {
  align-self: center;
  display: flex;
  align-items: center;
}
.hb-input-group-wrapper.hb-input-group-wrapper-focused {
  border-color: var(--hb-primary-color);
}
.hb-input-group-wrapper.hb-input-group-wrapper-focused .hb-input-affix-wrapper {
  border: none;
}
.hb-input-group-wrapper.hb-input-group-wrapper-focused .hb-input-wrapper {
  border-color: var(--hb-primary-color);
  transition: border-color 0.2s ease-in-out;
}

.in-trade-page {
  --hb-input-disabled-bg: var(--hbc-trade-input-disabled-bg);
  --hb-component-background-color: var(--hbc-trade-component-bg-color);
  --hb-primary-container-bg: var(--hbc-trade-primary-container-bg);
  --hb-secondary-container-bg: var(--hbc-trade-secondary-container-bg);
}
/** 滚动条样式 **/
.hb-textarea {
  padding: 12px;
  font-size: 14px;
  line-height: normal;
  border: 1px solid var(--hb-common-border-color);
  border-radius: var(--hb-border-radius-mid);
  transition: border-color 0.3s;
  background-color: transparent;
  color: var(--hb-primary-font-color);
  resize: none;
}
.hb-textarea:focus {
  outline: none;
  color: var(--hb-primary-font-color);
  border-color: var(--hb-primary-color);
  transition: border-color 0.3s;
}
.hb-textarea::placeholder {
  color: var(--hb-tertiary-font-color);
}
.hb-textarea-wrapper {
  position: relative;
  display: inline-block;
  border: 1px solid var(--hb-common-border-color);
  background-color: transparent;
  color: var(--hb-primary-font-color);
  border-radius: var(--hb-border-radius-mid);
  transition: border-color 0.3s;
  padding: 12px;
}
.hb-textarea-wrapper .hb-textarea {
  border: none;
  padding: 0;
}
.hb-textarea-wrapper .hb-textarea-count {
  line-height: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.hb-textarea-wrapper .hb-textarea-count > span {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  text-align: right;
  color: var(--hb-quaternary-font-color);
}
.hb-textarea-wrapper .hb-textarea-count-value {
  color: var(--hb-tertiary-font-color);
}
.hb-textarea-wrapper .hb-textarea-count-max {
  color: var(--hb-quaternary-font-color);
}
.hb-textarea-focused.hb-textarea-wrapper {
  border-color: var(--hb-primary-color);
  transition: border-color 0.3s;
}
.hb-textarea-count-overflow.hb-textarea-wrapper {
  border-color: var(--hb-error-color);
}
.hb-textarea-count-overflow.hb-textarea-wrapper .hb-textarea-count-value {
  color: var(--hb-error-color);
}

.in-trade-page {
  --hb-input-disabled-bg: var(--hbc-trade-input-disabled-bg);
  --hb-component-background-color: var(--hbc-trade-component-bg-color);
  --hb-primary-container-bg: var(--hbc-trade-primary-container-bg);
  --hb-secondary-container-bg: var(--hbc-trade-secondary-container-bg);
}
/** 滚动条样式 **/
.hb-loading-icon {
  background-image: var(--hb-icon-loading-bg-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}