.dex-label {
  display: flex;
  width: 100%
}

.dex-label.top-right {
  justify-content: flex-end
}

.dex-label.top-between {
  justify-content: space-between
}

.dex-label-text {
  color: var(--dex-okd-input-label-color);
  font-weight: 500
}

.dex-label-action {
  color: var(--dex-okd-input-action-color);
  cursor: pointer;
  font-weight: 500
}

.dex-label.label-xl .dex-label-text {
  font-size: var(--dex-okd-input-xl-label-font-size);
  line-height: var(--dex-okd-input-xl-label-line-height);
  margin-bottom: 6px;
  margin-bottom: var(--dex-okd-input-xl-label-margin, 6px)
}

.dex-label.label-xl .dex-label-action {
  font-size: var(--dex-okd-input-xl-action-font-size);
  line-height: var(--dex-okd-input-xl-action-line-height);
  margin-bottom: 6px;
  margin-bottom: var(--dex-okd-input-xl-label-margin, 6px)
}

.dex-label.label-xl .dex-label-place {
  min-height: var(--dex-okd-input-xl-label-line-height)
}

.dex-label.label-lg .dex-label-text {
  font-size: var(--dex-okd-input-lg-label-font-size);
  line-height: var(--dex-okd-input-lg-label-line-height);
  margin-bottom: 6px;
  margin-bottom: var(--dex-okd-input-lg-label-margin, 6px)
}

.dex-label.label-lg .dex-label-action {
  font-size: var(--dex-okd-input-lg-action-font-size);
  line-height: var(--dex-okd-input-lg-action-line-height);
  margin-bottom: 6px;
  margin-bottom: var(--dex-okd-input-lg-label-margin, 6px)
}

.dex-label.label-lg .dex-label-place {
  min-height: var(--dex-okd-input-lg-label-line-height)
}

.dex-label.label-xs .dex-label-text {
  font-size: var(--dex-okd-input-xs-label-font-size);
  line-height: var(--dex-okd-input-xs-label-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-xs-label-margin, 4px)
}

.dex-label.label-xs .dex-label-action {
  font-size: var(--dex-okd-input-xs-action-font-size);
  line-height: var(--dex-okd-input-xs-action-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-xs-label-margin, 4px)
}

.dex-label.label-xs .dex-label-place {
  min-height: var(--dex-okd-input-xs-label-line-height)
}

.dex-label.label-sm .dex-label-text {
  font-size: var(--dex-okd-input-sm-label-font-size);
  line-height: var(--dex-okd-input-sm-label-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-sm-label-margin, 4px)
}

.dex-label.label-sm .dex-label-action {
  font-size: var(--dex-okd-input-sm-action-font-size);
  line-height: var(--dex-okd-input-sm-action-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-sm-label-margin, 4px)
}

.dex-label.label-sm .dex-label-place {
  min-height: var(--dex-okd-input-sm-label-line-height)
}

.dex-label.label-md .dex-label-text {
  font-size: var(--dex-okd-input-md-label-font-size);
  line-height: var(--dex-okd-input-md-label-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-md-label-margin, 4px)
}

.dex-label.label-md .dex-label-action {
  font-size: var(--dex-okd-input-md-action-font-size);
  line-height: var(--dex-okd-input-md-action-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-md-label-margin, 4px)
}

.dex-label.label-md .dex-label-place {
  min-height: var(--dex-okd-input-md-label-line-height)
}

.dex-input-caret-color {
  caret-color: var(--dex-okd-input-focus-caret-color)
}

.dex-input-caret-color input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none
}

.dex-input-caret-color input[type=search]::-moz-search-cancel-button {
  -moz-appearance: none;
  appearance: none
}

.dex-input-caret-color input::-ms-clear,
.dex-input-caret-color input::-ms-reveal {
  display: none
}

.dex-input-caret-color input::-o-clear {
  display: none
}

.dex-input {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  position: relative
}

.dex-input input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none
}

.dex-input input[type=search]::-moz-search-cancel-button {
  -moz-appearance: none;
  appearance: none
}

.dex-input input::-ms-clear,
.dex-input input::-ms-reveal {
  display: none
}

.dex-input input::-o-clear {
  display: none
}

.dex-input * {
  box-sizing: border-box
}

.dex-input-prefix,
.dex-input-suffix {
  align-items: center;
  display: flex;
  flex-shrink: 1;
  white-space: nowrap
}

.dex-input-input {
  background: transparent;
  border: none;
  color: var(--dex-okd-input-default-text-color);
  flex-grow: 1;
  font-family: inherit;
  height: 100%;
  outline: none;
  width: 100%
}

.dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-default-placeholder-color)
}

.dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-default-placeholder-color);
  opacity: 1
}

.dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-default-placeholder-color)
}

.dex-input-input:-webkit-autofill {
  -webkit-text-fill-color: var(--dex-okd-input-default-text-color) !important;
  border: none;
  -webkit-box-shadow: 0 0 0 30px var(--dex-okd-input-default-background) inset
}

.dex-input-input.input-textarea {
  box-shadow: none;
  outline: none;
  resize: none
}

.dex-input-custom-placeholder {
  position: relative;
  width: 100%
}

.dex-input-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.dex-input-placeholder {
  bottom: 0;
  color: var(--dex-okd-input-default-placeholder-color);
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%)
}

.dex-input-tips-box {
  display: flex;
  width: 100%
}

.dex-input-error {
  color: var(--dex-okd-input-error-tips-color)
}

.dex-input-tips {
  display: inline-block
}

.dex-input-help-text,
.dex-input-tips {
  color: var(--dex-okd-input-tips-text-color)
}

.dex-input-help-text {
  flex-grow: 1;
  flex-shrink: 0;
  text-align: right
}

.dex-input.hover,
.dex-input:hover {
  cursor: text
}

.dex-input.hover .dex-input-box,
.dex-input:hover .dex-input-box {
  background: var(--dex-okd-input-hover-background);
  border: thin solid var(--dex-okd-input-hover-border-color);
  box-shadow: var(--dex-okd-input-hover-shadow)
}

.dex-input.hover .dex-input-box .dex-input-input,
.dex-input:hover .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-hover-text-color);
  caret-color: var(--dex-okd-input-hover-caret-color);
  color: var(--dex-okd-input-hover-text-color)
}

.dex-input.hover .dex-input-box .dex-input-input::-webkit-input-placeholder,
.dex-input:hover .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-hover-placeholder-color);
  color: var(--dex-okd-input-hover-placeholder-color)
}

.dex-input.hover .dex-input-box .dex-input-input:-moz-placeholder,
.dex-input:hover .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-hover-placeholder-color);
  color: var(--dex-okd-input-hover-placeholder-color);
  opacity: 1
}

.dex-input.hover .dex-input-box .dex-input-input::-ms-input-placeholder,
.dex-input:hover .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-hover-placeholder-color);
  color: var(--dex-okd-input-hover-placeholder-color)
}

.dex-input.focus .dex-input-box {
  background: var(--dex-okd-input-focus-background);
  border: thin solid var(--dex-okd-input-focus-border-color);
  box-shadow: var(--dex-okd-input-focus-shadow)
}

.dex-input.focus .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-focus-text-color);
  caret-color: var(--dex-okd-input-focus-caret-color);
  color: var(--dex-okd-input-focus-text-color)
}

.dex-input.focus .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-focus-placeholder-color);
  color: var(--dex-okd-input-focus-placeholder-color)
}

.dex-input.focus .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-focus-placeholder-color);
  color: var(--dex-okd-input-focus-placeholder-color);
  opacity: 1
}

.dex-input.focus .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-focus-placeholder-color);
  color: var(--dex-okd-input-focus-placeholder-color)
}

.dex-input.readonly .dex-input-box {
  background: var(--dex-okd-input-default-background);
  background: var(--dex-okd-input-readonly-background, var(--dex-okd-input-default-background));
  border: thin solid var(--dex-okd-input-readonly-border-color, var(--dex-okd-input-default-border-color));
  box-shadow: var(--dex-okd-input-default-shadow);
  box-shadow: var(--dex-okd-input-readonly-shadow, var(--dex-okd-input-default-shadow))
}

.dex-input.readonly .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-default-text-color);
  -webkit-text-fill-color: var(--dex-okd-input-readonly-text-color, var(--dex-okd-input-default-text-color));
  caret-color: var(--dex-okd-input-default-caret-color);
  caret-color: var(--dex-okd-input-readonly-caret-color, var(--dex-okd-input-default-caret-color));
  color: var(--dex-okd-input-default-text-color);
  color: var(--dex-okd-input-readonly-text-color, var(--dex-okd-input-default-text-color))
}

.dex-input.readonly .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  -webkit-text-fill-color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color));
  color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color))
}

.dex-input.readonly .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  -webkit-text-fill-color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color));
  color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color));
  opacity: 1
}

.dex-input.readonly .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  -webkit-text-fill-color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color));
  color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color))
}

.dex-input.readonly.focus .dex-input-box {
  border-color: var(--dex-okd-input-focus-border-color)
}

.dex-input.disabled {
  cursor: not-allowed
}

.dex-input.disabled .dex-input-box {
  background: var(--dex-okd-input-disabled-background);
  border: thin solid var(--dex-okd-input-disabled-border-color);
  box-shadow: var(--dex-okd-input-disabled-shadow)
}

.dex-input.disabled .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-text-color);
  caret-color: var(--dex-okd-input-disabled-caret-color);
  color: var(--dex-okd-input-disabled-text-color)
}

.dex-input.disabled .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-placeholder-color);
  color: var(--dex-okd-input-disabled-placeholder-color)
}

.dex-input.disabled .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-placeholder-color);
  color: var(--dex-okd-input-disabled-placeholder-color);
  opacity: 1
}

.dex-input.disabled .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-placeholder-color);
  color: var(--dex-okd-input-disabled-placeholder-color)
}

.dex-input.disabled .dex-input-input {
  cursor: not-allowed;
  opacity: 1
}

.dex-input.disabled .dex-input-input:-webkit-autofill {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-text-color) !important;
  -webkit-box-shadow: 0 0 0 30px var(--dex-okd-input-disabled-background) inset
}

.dex-input.error .dex-input-box {
  background: var(--dex-okd-input-error-background);
  border: thin solid var(--dex-okd-input-error-border-color);
  box-shadow: var(--dex-okd-input-error-shadow)
}

.dex-input.error .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-error-text-color);
  caret-color: var(--dex-okd-input-error-caret-color);
  color: var(--dex-okd-input-error-text-color)
}

.dex-input.error .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-error-placeholder-color);
  color: var(--dex-okd-input-error-placeholder-color)
}

.dex-input.error .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-error-placeholder-color);
  color: var(--dex-okd-input-error-placeholder-color);
  opacity: 1
}

.dex-input.error .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-error-placeholder-color);
  color: var(--dex-okd-input-error-placeholder-color)
}

.dex-input.error .dex-input-error {
  display: inline-block
}

.dex-input.no-border .dex-input-box {
  background: transparent;
  border: thin solid transparent;
  box-shadow: none
}

.dex-input-textarea-resize-virtual-dom::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0
}

.dex-input-box {
  align-items: center;
  background: var(--dex-okd-input-default-background);
  border: thin solid var(--dex-okd-input-default-border-color);
  box-shadow: var(--dex-okd-input-default-shadow);
  display: flex;
  transition: border-color .3s, box-shadow .3s;
  width: 100%
}

.dex-input-xl>.dex-input-box {
  border-radius: var(--dex-okd-input-xl-border-radius);
  height: var(--dex-okd-input-xl-height);
  padding: 0 8px;
  padding: 0 var(--dex-okd-input-xl-padding-horizontal, 8px)
}

.dex-input-xl>.dex-input-box.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-xl-height)
}

.dex-input-xl>.dex-input-box.no-padding-left {
  padding-left: 0
}

.dex-input-xl>.dex-input-box.no-padding-right {
  padding-right: 0
}

.dex-input-xl>.dex-input-box.ta {
  height: 100%;
  padding: 8px
}

.dex-input-xl>.dex-input-box.auto-resize-auto-height {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-xl-height)
}

.dex-input-xl>.dex-input-box.input-circle {
  border-radius: 100px
}

.dex-input-xl .dex-input-input {
  font-size: var(--dex-okd-input-xl-text-font-size);
  padding: calc(var(--dex-okd-input-xl-height)/2 - var(--dex-okd-input-xl-text-font-size)/2 - 2px) 0
}

.dex-input-xl .dex-input-input::-webkit-input-placeholder {
  font-size: var(--dex-okd-input-xl-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xl .dex-input-input:-moz-placeholder {
  font-size: var(--dex-okd-input-xl-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xl .dex-input-input::-ms-input-placeholder {
  font-size: var(--dex-okd-input-xl-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xl .dex-input-input.ta {
  padding: 0
}

.dex-input-xl .dex-input-input.textarea-auto-resize {
  line-height: var(--dex-okd-input-xl-text-font-size)
}

.dex-input-xl .dex-input-placeholder {
  font-size: var(--dex-okd-input-xl-text-font-size);
  height: calc(var(--dex-okd-input-xl-text-font-size) + 2px);
  line-height: calc(var(--dex-okd-input-xl-text-font-size) + 2px)
}

.dex-input-xl .dex-input.dex-input-place-mode .dex-input-tips-box {
  min-height: calc(var(--dex-okd-input-xl-tip-line-height) + 6px);
  min-height: calc(var(--dex-okd-input-xl-tip-line-height) + var(--dex-okd-input-xl-tip-margin, 6px))
}

.dex-input-xl .dex-input-error {
  font-size: var(--dex-okd-input-xl-error-font-size);
  line-height: var(--dex-okd-input-xl-error-line-height);
  margin-top: 6px;
  margin-top: var(--dex-okd-input-xl-tip-margin, 6px)
}

.dex-input-xl .dex-input-help-text,
.dex-input-xl .dex-input-tips {
  font-size: var(--dex-okd-input-xl-tip-font-size);
  line-height: var(--dex-okd-input-xl-tip-line-height);
  margin-top: 6px;
  margin-top: var(--dex-okd-input-xl-tip-margin, 6px)
}

.dex-input-lg>.dex-input-box {
  border-radius: var(--dex-okd-input-lg-border-radius);
  height: var(--dex-okd-input-lg-height);
  padding: 0 8px;
  padding: 0 var(--dex-okd-input-lg-padding-horizontal, 8px)
}

.dex-input-lg>.dex-input-box.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-lg-height)
}

.dex-input-lg>.dex-input-box.no-padding-left {
  padding-left: 0
}

.dex-input-lg>.dex-input-box.no-padding-right {
  padding-right: 0
}

.dex-input-lg>.dex-input-box.ta {
  height: 100%;
  padding: 8px
}

.dex-input-lg>.dex-input-box.auto-resize-auto-height {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-lg-height)
}

.dex-input-lg>.dex-input-box.input-circle {
  border-radius: 100px
}

.dex-input-lg .dex-input-input {
  font-size: var(--dex-okd-input-lg-text-font-size);
  padding: calc(var(--dex-okd-input-lg-height)/2 - var(--dex-okd-input-lg-text-font-size)/2 - 2px) 0
}

.dex-input-lg .dex-input-input::-webkit-input-placeholder {
  font-size: var(--dex-okd-input-lg-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-lg .dex-input-input:-moz-placeholder {
  font-size: var(--dex-okd-input-lg-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-lg .dex-input-input::-ms-input-placeholder {
  font-size: var(--dex-okd-input-lg-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-lg .dex-input-input.ta {
  padding: 0
}

.dex-input-lg .dex-input-input.textarea-auto-resize {
  line-height: var(--dex-okd-input-lg-text-font-size)
}

.dex-input-lg .dex-input-placeholder {
  font-size: var(--dex-okd-input-lg-text-font-size);
  height: calc(var(--dex-okd-input-lg-text-font-size) + 2px);
  line-height: calc(var(--dex-okd-input-lg-text-font-size) + 2px)
}

.dex-input-lg .dex-input.dex-input-place-mode .dex-input-tips-box {
  min-height: calc(var(--dex-okd-input-lg-tip-line-height) + 6px);
  min-height: calc(var(--dex-okd-input-lg-tip-line-height) + var(--dex-okd-input-lg-tip-margin, 6px))
}

.dex-input-lg .dex-input-error {
  font-size: var(--dex-okd-input-lg-error-font-size);
  line-height: var(--dex-okd-input-lg-error-line-height);
  margin-top: 6px;
  margin-top: var(--dex-okd-input-lg-tip-margin, 6px)
}

.dex-input-lg .dex-input-help-text,
.dex-input-lg .dex-input-tips {
  font-size: var(--dex-okd-input-lg-tip-font-size);
  line-height: var(--dex-okd-input-lg-tip-line-height);
  margin-top: 6px;
  margin-top: var(--dex-okd-input-lg-tip-margin, 6px)
}

.dex-input-xs>.dex-input-box {
  border-radius: var(--dex-okd-input-xs-border-radius);
  height: var(--dex-okd-input-xs-height);
  padding: 0 8px;
  padding: 0 var(--dex-okd-input-xs-padding-horizontal, 8px)
}

.dex-input-xs>.dex-input-box.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-xs-height)
}

.dex-input-xs>.dex-input-box.no-padding-left {
  padding-left: 0
}

.dex-input-xs>.dex-input-box.no-padding-right {
  padding-right: 0
}

.dex-input-xs>.dex-input-box.ta {
  height: 100%;
  padding: 8px
}

.dex-input-xs>.dex-input-box.auto-resize-auto-height {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-xs-height)
}

.dex-input-xs>.dex-input-box.input-circle {
  border-radius: 100px
}

.dex-input-xs .dex-input-input {
  font-size: var(--dex-okd-input-xs-text-font-size);
  padding: calc(var(--dex-okd-input-xs-height)/2 - var(--dex-okd-input-xs-text-font-size)/2 - 2px) 0
}

.dex-input-xs .dex-input-input::-webkit-input-placeholder {
  font-size: var(--dex-okd-input-xs-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xs .dex-input-input:-moz-placeholder {
  font-size: var(--dex-okd-input-xs-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xs .dex-input-input::-ms-input-placeholder {
  font-size: var(--dex-okd-input-xs-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xs .dex-input-input.ta {
  padding: 0
}

.dex-input-xs .dex-input-input.textarea-auto-resize {
  line-height: var(--dex-okd-input-xs-text-font-size)
}

.dex-input-xs .dex-input-placeholder {
  font-size: var(--dex-okd-input-xs-text-font-size);
  height: calc(var(--dex-okd-input-xs-text-font-size) + 2px);
  line-height: calc(var(--dex-okd-input-xs-text-font-size) + 2px)
}

.dex-input-xs .dex-input.dex-input-place-mode .dex-input-tips-box {
  min-height: calc(var(--dex-okd-input-xs-tip-line-height) + 4px);
  min-height: calc(var(--dex-okd-input-xs-tip-line-height) + var(--dex-okd-input-xs-tip-margin, 4px))
}

.dex-input-xs .dex-input-error {
  font-size: var(--dex-okd-input-xs-error-font-size);
  line-height: var(--dex-okd-input-xs-error-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-xs-tip-margin, 4px)
}

.dex-input-xs .dex-input-help-text,
.dex-input-xs .dex-input-tips {
  font-size: var(--dex-okd-input-xs-tip-font-size);
  line-height: var(--dex-okd-input-xs-tip-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-xs-tip-margin, 4px)
}

.dex-input-sm>.dex-input-box {
  border-radius: var(--dex-okd-input-sm-border-radius);
  height: var(--dex-okd-input-sm-height);
  padding: 0 8px;
  padding: 0 var(--dex-okd-input-sm-padding-horizontal, 8px)
}

.dex-input-sm>.dex-input-box.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-sm-height)
}

.dex-input-sm>.dex-input-box.no-padding-left {
  padding-left: 0
}

.dex-input-sm>.dex-input-box.no-padding-right {
  padding-right: 0
}

.dex-input-sm>.dex-input-box.ta {
  height: 100%;
  padding: 8px
}

.dex-input-sm>.dex-input-box.auto-resize-auto-height {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-sm-height)
}

.dex-input-sm>.dex-input-box.input-circle {
  border-radius: 100px
}

.dex-input-sm .dex-input-input {
  font-size: var(--dex-okd-input-sm-text-font-size);
  padding: calc(var(--dex-okd-input-sm-height)/2 - var(--dex-okd-input-sm-text-font-size)/2 - 2px) 0
}

.dex-input-sm .dex-input-input::-webkit-input-placeholder {
  font-size: var(--dex-okd-input-sm-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-sm .dex-input-input:-moz-placeholder {
  font-size: var(--dex-okd-input-sm-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-sm .dex-input-input::-ms-input-placeholder {
  font-size: var(--dex-okd-input-sm-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-sm .dex-input-input.ta {
  padding: 0
}

.dex-input-sm .dex-input-input.textarea-auto-resize {
  line-height: var(--dex-okd-input-sm-text-font-size)
}

.dex-input-sm .dex-input-placeholder {
  font-size: var(--dex-okd-input-sm-text-font-size);
  height: calc(var(--dex-okd-input-sm-text-font-size) + 2px);
  line-height: calc(var(--dex-okd-input-sm-text-font-size) + 2px)
}

.dex-input-sm .dex-input.dex-input-place-mode .dex-input-tips-box {
  min-height: calc(var(--dex-okd-input-sm-tip-line-height) + 4px);
  min-height: calc(var(--dex-okd-input-sm-tip-line-height) + var(--dex-okd-input-sm-tip-margin, 4px))
}

.dex-input-sm .dex-input-error {
  font-size: var(--dex-okd-input-sm-error-font-size);
  line-height: var(--dex-okd-input-sm-error-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-sm-tip-margin, 4px)
}

.dex-input-sm .dex-input-help-text,
.dex-input-sm .dex-input-tips {
  font-size: var(--dex-okd-input-sm-tip-font-size);
  line-height: var(--dex-okd-input-sm-tip-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-sm-tip-margin, 4px)
}

.dex-input-md>.dex-input-box {
  border-radius: var(--dex-okd-input-md-border-radius);
  height: var(--dex-okd-input-md-height);
  padding: 0 8px;
  padding: 0 var(--dex-okd-input-md-padding-horizontal, 8px)
}

.dex-input-md>.dex-input-box.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-md-height)
}

.dex-input-md>.dex-input-box.no-padding-left {
  padding-left: 0
}

.dex-input-md>.dex-input-box.no-padding-right {
  padding-right: 0
}

.dex-input-md>.dex-input-box.ta {
  height: 100%;
  padding: 8px
}

.dex-input-md>.dex-input-box.auto-resize-auto-height {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-md-height)
}

.dex-input-md>.dex-input-box.input-circle {
  border-radius: 100px
}

.dex-input-md .dex-input-input {
  font-size: var(--dex-okd-input-md-text-font-size);
  padding: calc(var(--dex-okd-input-md-height)/2 - var(--dex-okd-input-md-text-font-size)/2 - 2px) 0
}

.dex-input-md .dex-input-input::-webkit-input-placeholder {
  font-size: var(--dex-okd-input-md-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-md .dex-input-input:-moz-placeholder {
  font-size: var(--dex-okd-input-md-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-md .dex-input-input::-ms-input-placeholder {
  font-size: var(--dex-okd-input-md-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-md .dex-input-input.ta {
  padding: 0
}

.dex-input-md .dex-input-input.textarea-auto-resize {
  line-height: var(--dex-okd-input-md-text-font-size)
}

.dex-input-md .dex-input-placeholder {
  font-size: var(--dex-okd-input-md-text-font-size);
  height: calc(var(--dex-okd-input-md-text-font-size) + 2px);
  line-height: calc(var(--dex-okd-input-md-text-font-size) + 2px)
}

.dex-input-md .dex-input.dex-input-place-mode .dex-input-tips-box {
  min-height: calc(var(--dex-okd-input-md-tip-line-height) + 4px);
  min-height: calc(var(--dex-okd-input-md-tip-line-height) + var(--dex-okd-input-md-tip-margin, 4px))
}

.dex-input-md .dex-input-error {
  font-size: var(--dex-okd-input-md-error-font-size);
  line-height: var(--dex-okd-input-md-error-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-md-tip-margin, 4px)
}

.dex-input-md .dex-input-help-text,
.dex-input-md .dex-input-tips {
  font-size: var(--dex-okd-input-md-tip-font-size);
  line-height: var(--dex-okd-input-md-tip-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-md-tip-margin, 4px)
}

.dex-input-prefix {
  height: 100%
}

.dex-input-prefix .prefix-icon {
  color: var(--dex-okd-input-icon-color)
}

.dex-input-prefix .select {
  padding-right: 8px
}

.dex-input-suffix {
  height: 100%
}

.dex-input-suffix .suffix-icon {
  color: var(--dex-okd-input-icon-color)
}

.dex-input-suffix .clean-icon:hover {
  color: #000;
  color: var(--dex-okd-input-search-suffix-icon-hover-color, #000)
}

.dex-input-suffix .error-icon {
  color: var(--dex-okd-input-error-tips-color)
}

.dex-input-xl .dex-input-prefix .prefix-icon {
  font-size: var(--dex-okd-input-xl-icon-size);
  margin-left: 0;
  margin-right: var(--dex-okd-input-xl-icon-margin)
}

.dex-input-xl .dex-input-suffix .suffix-icon {
  font-size: var(--dex-okd-input-xl-icon-size);
  margin-left: var(--dex-okd-input-xl-icon-margin);
  margin-right: 0
}

.dex-input-lg .dex-input-prefix .prefix-icon {
  font-size: var(--dex-okd-input-lg-icon-size);
  margin-left: 0;
  margin-right: var(--dex-okd-input-lg-icon-margin)
}

.dex-input-lg .dex-input-suffix .suffix-icon {
  font-size: var(--dex-okd-input-lg-icon-size);
  margin-left: var(--dex-okd-input-lg-icon-margin);
  margin-right: 0
}

.dex-input-xs .dex-input-prefix .prefix-icon {
  font-size: var(--dex-okd-input-xs-icon-size);
  margin-left: 0;
  margin-right: var(--dex-okd-input-xs-icon-margin)
}

.dex-input-xs .dex-input-suffix .suffix-icon {
  font-size: var(--dex-okd-input-xs-icon-size);
  margin-left: var(--dex-okd-input-xs-icon-margin);
  margin-right: 0
}

.dex-input-sm .dex-input-prefix .prefix-icon {
  font-size: var(--dex-okd-input-sm-icon-size);
  margin-left: 0;
  margin-right: var(--dex-okd-input-sm-icon-margin)
}

.dex-input-sm .dex-input-suffix .suffix-icon {
  font-size: var(--dex-okd-input-sm-icon-size);
  margin-left: var(--dex-okd-input-sm-icon-margin);
  margin-right: 0
}

.dex-input-md .dex-input-prefix .prefix-icon {
  font-size: var(--dex-okd-input-md-icon-size);
  margin-left: 0;
  margin-right: var(--dex-okd-input-md-icon-margin)
}

.dex-input-md .dex-input-suffix .suffix-icon {
  font-size: var(--dex-okd-input-md-icon-size);
  margin-left: var(--dex-okd-input-md-icon-margin);
  margin-right: 0
}

.dex-input:hover .dex-input-number-suffix:not(.operation-always) {
  opacity: 1
}

.dex-input-number-inner {
  overflow: hidden
}

.dex-input-number-suffix {
  align-items: center;
  border-left: 1px solid var(--dex-okd-input-number-suffix-border-color, var(--dex-okd-input-default-border-color));
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  line-height: 0;
  margin-left: 6px;
  overflow: hidden;
  text-align: center;
  transition: opacity .5s;
  width: 24px
}

.dex-input-number-suffix:not(.operation-always) {
  opacity: 0
}

.dex-input-number-suffix-part {
  align-items: center;
  background: var(--dex-okd-input-number-default-add-icon-background);
  box-sizing: border-box;
  display: flex;
  flex: 1 1;
  justify-content: center;
  width: 100%
}

.dex-input-number-suffix-part .icon {
  color: var(--dex-okd-input-number-default-add-icon-color);
  font-size: 13px
}

.dex-input-number-suffix-part .hover,
.dex-input-number-suffix-part:not(.dex-input-number-suffix-part-disabled):hover {
  background: var(--dex-okd-input-number-hover-add-icon-background)
}

.dex-input-number-suffix-part .hover .icon,
.dex-input-number-suffix-part:not(.dex-input-number-suffix-part-disabled):hover .icon {
  color: var(--dex-okd-input-number-hover-add-icon-color)
}

.dex-input-number-suffix-part .active,
.dex-input-number-suffix-part:not(.dex-input-number-suffix-part-disabled):active {
  background: var(--dex-okd-input-number-active-add-icon-background)
}

.dex-input-number-suffix-part .active .icon,
.dex-input-number-suffix-part:not(.dex-input-number-suffix-part-disabled):active .icon {
  color: var(--dex-okd-input-number-active-add-icon-color)
}

.dex-input-number-suffix-part-disabled {
  cursor: not-allowed
}

.dex-input-number-suffix-line {
  background: var(--dex-okd-input-default-border-color);
  background: var(--dex-okd-input-number-suffix-border-color, var(--dex-okd-input-default-border-color));
  height: 1px;
  width: 100%
}

.dex-input-number-suffix .up {
  transform: rotate(180deg)
}

.dex-input-number-localization {
  text-align: right
}

.dex-input-number-localization-percent {
  color: var(--dex-okd-input-default-text-color);
  display: inline-block
}

.dex-input-xl .dex-input-number-suffix.xl {
  border-bottom-right-radius: calc(var(--dex-okd-input-xl-border-radius) - 1px);
  border-top-right-radius: calc(var(--dex-okd-input-xl-border-radius) - 1px)
}

.dex-input-lg .dex-input-number-suffix.lg {
  border-bottom-right-radius: calc(var(--dex-okd-input-lg-border-radius) - 1px);
  border-top-right-radius: calc(var(--dex-okd-input-lg-border-radius) - 1px)
}

.dex-input-xs .dex-input-number-suffix.xs {
  border-bottom-right-radius: calc(var(--dex-okd-input-xs-border-radius) - 1px);
  border-top-right-radius: calc(var(--dex-okd-input-xs-border-radius) - 1px)
}

.dex-input-sm .dex-input-number-suffix.sm {
  border-bottom-right-radius: calc(var(--dex-okd-input-sm-border-radius) - 1px);
  border-top-right-radius: calc(var(--dex-okd-input-sm-border-radius) - 1px)
}

.dex-input-md .dex-input-number-suffix.md {
  border-bottom-right-radius: calc(var(--dex-okd-input-md-border-radius) - 1px);
  border-top-right-radius: calc(var(--dex-okd-input-md-border-radius) - 1px)
}

.dex-input-suffix .suffix-icon+.dex-input-code-btn,
.dex-input-suffix .suffix-icon+.dex-input-count-down {
  margin-left: var(--dex-okd-input-md-icon-margin)
}

.dex-input-count-down {
  color: var(--dex-okd-input-code-common-count-color)
}

.dex-input input::-webkit-inner-spin-button,
.dex-input input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0
}

.dex-input input[type=number] {
  -moz-appearance: textfield
}

.dex-input-xl .dex-input-count-down {
  font-size: var(--dex-okd-input-code-xl-count-font-size);
  line-height: var(--dex-okd-input-code-xl-count-line-height)
}

.dex-input-lg .dex-input-count-down {
  font-size: var(--dex-okd-input-code-lg-count-font-size);
  line-height: var(--dex-okd-input-code-lg-count-line-height)
}

.dex-input-xs .dex-input-count-down {
  font-size: var(--dex-okd-input-code-xs-count-font-size);
  line-height: var(--dex-okd-input-code-xs-count-line-height)
}

.dex-input-sm .dex-input-count-down {
  font-size: var(--dex-okd-input-code-sm-count-font-size);
  line-height: var(--dex-okd-input-code-sm-count-line-height)
}

.dex-input-md .dex-input-count-down {
  font-size: var(--dex-okd-input-code-md-count-font-size);
  line-height: var(--dex-okd-input-code-md-count-line-height)
}

.dex-input-switch-icon.icon {
  cursor: pointer
}

.dex-input-prefix .dex-input-search-prefix-icon {
  color: var(--dex-okd-input-search-prefix-icon-color);
  cursor: pointer;
  font-size: var(--dex-okd-input-search-prefix-icon-size);
  margin-right: 8px
}

.dex-input-suffix .clean-icon {
  color: var(--dex-okd-input-search-suffix-icon-color);
  cursor: pointer;
  font-size: var(--dex-okd-input-search-suffix-icon-size)
}

.dex-input-search .dex-input-error {
  color: var(--dex-okd-input-search-error-tips-color)
}

.dex-input-search .dex-input-box {
  background-color: var(--dex-okd-input-search-default-background);
  border-color: var(--dex-okd-input-search-default-border-color);
  box-shadow: var(--dex-okd-input-search-default-shadow)
}

.dex-input-search .dex-input-input {
  color: var(--dex-okd-input-search-default-text-color)
}

.dex-input-search .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-default-placeholder-color);
  color: var(--dex-okd-input-search-default-placeholder-color)
}

.dex-input-search .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-default-placeholder-color);
  color: var(--dex-okd-input-search-default-placeholder-color);
  opacity: 1
}

.dex-input-search .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-default-placeholder-color);
  color: var(--dex-okd-input-search-default-placeholder-color)
}

.dex-input-search.hover .dex-input-box,
.dex-input-search:hover .dex-input-box {
  background: var(--dex-okd-input-search-hover-background);
  border: thin solid var(--dex-okd-input-search-hover-border-color);
  box-shadow: var(--dex-okd-input-search-hover-shadow)
}

.dex-input-search.hover .dex-input-box .dex-input-input,
.dex-input-search:hover .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-search-hover-text-color);
  caret-color: var(--dex-okd-input-search-hover-caret-color);
  color: var(--dex-okd-input-search-hover-text-color)
}

.dex-input-search.hover .dex-input-box .dex-input-input::-webkit-input-placeholder,
.dex-input-search:hover .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-hover-placeholder-color);
  color: var(--dex-okd-input-search-hover-placeholder-color)
}

.dex-input-search.hover .dex-input-box .dex-input-input:-moz-placeholder,
.dex-input-search:hover .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-hover-placeholder-color);
  color: var(--dex-okd-input-search-hover-placeholder-color);
  opacity: 1
}

.dex-input-search.hover .dex-input-box .dex-input-input::-ms-input-placeholder,
.dex-input-search:hover .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-hover-placeholder-color);
  color: var(--dex-okd-input-search-hover-placeholder-color)
}

.dex-input-search.focus .dex-input-box {
  background: var(--dex-okd-input-search-focus-background);
  border: thin solid var(--dex-okd-input-search-focus-border-color);
  box-shadow: var(--dex-okd-input-search-focus-shadow)
}

.dex-input-search.focus .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-search-focus-text-color);
  caret-color: var(--dex-okd-input-search-focus-caret-color);
  color: var(--dex-okd-input-search-focus-text-color)
}

.dex-input-search.focus .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-focus-placeholder-color);
  color: var(--dex-okd-input-search-focus-placeholder-color)
}

.dex-input-search.focus .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-focus-placeholder-color);
  color: var(--dex-okd-input-search-focus-placeholder-color);
  opacity: 1
}

.dex-input-search.focus .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-focus-placeholder-color);
  color: var(--dex-okd-input-search-focus-placeholder-color)
}

.dex-input-search.disabled .dex-input-box {
  background: var(--dex-okd-input-search-disabled-background);
  border: thin solid var(--dex-okd-input-search-disabled-border-color);
  box-shadow: var(--dex-okd-input-search-disabled-shadow)
}

.dex-input-search.disabled .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-search-disabled-text-color);
  caret-color: var(--dex-okd-input-search-disabled-caret-color);
  color: var(--dex-okd-input-search-disabled-text-color)
}

.dex-input-search.disabled .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-disabled-placeholder-color);
  color: var(--dex-okd-input-search-disabled-placeholder-color)
}

.dex-input-search.disabled .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-disabled-placeholder-color);
  color: var(--dex-okd-input-search-disabled-placeholder-color);
  opacity: 1
}

.dex-input-search.disabled .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-disabled-placeholder-color);
  color: var(--dex-okd-input-search-disabled-placeholder-color)
}

.dex-input-search.error .dex-input-box {
  background: var(--dex-okd-input-search-error-background);
  border: thin solid var(--dex-okd-input-search-error-border-color);
  box-shadow: var(--dex-okd-input-search-error-shadow)
}

.dex-input-search.error .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-search-error-text-color);
  caret-color: var(--dex-okd-input-search-error-caret-color);
  color: var(--dex-okd-input-search-error-text-color)
}

.dex-input-search.error .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-error-placeholder-color);
  color: var(--dex-okd-input-search-error-placeholder-color)
}

.dex-input-search.error .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-error-placeholder-color);
  color: var(--dex-okd-input-search-error-placeholder-color);
  opacity: 1
}

.dex-input-search.error .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-error-placeholder-color);
  color: var(--dex-okd-input-search-error-placeholder-color)
}

.dex-input-verify {
  display: flex;
  flex-direction: row;
  position: relative
}

.dex-input-verify * {
  box-sizing: border-box
}

.dex-input-verify .dex-input-verify-input:focus {
  border: 1px solid var(--dex-okd-input-focus-border-color);
  box-shadow: var(--dex-okd-input-focus-shadow)
}

.dex-input-verify .dex-input-verify-input {
  align-items: center;
  background: transparent;
  background: var(--dex-okd-input-default-background);
  border: thin solid var(--dex-okd-input-default-border-color);
  box-shadow: var(--dex-okd-input-default-shadow);
  caret-color: var(--dex-okd-input-focus-caret-color);
  color: var(--dex-okd-input-default-text-color);
  display: flex;
  font-family: inherit;
  outline: none;
  text-align: center;
  transition: border-color .3s, box-shadow .3s
}

.dex-input-verify .dex-input-verify-input:-webkit-autofill {
  -webkit-text-fill-color: var(--dex-okd-input-default-text-color) !important;
  border: none;
  -webkit-box-shadow: 0 0 0 30px var(--dex-okd-input-default-background) inset
}

.dex-input-verify .dex-input-verify-input.input-xl {
  border-radius: 6px;
  font-size: 26px;
  height: 44px;
  margin-right: 8px;
  width: 40px
}

.dex-input-verify .dex-input-verify-input.input-xl.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 44px
}

.dex-input-verify .dex-input-verify-input.input-xl:last-child {
  margin-right: unset
}

.dex-input-verify .dex-input-verify-input.input-lg {
  border-radius: 6px;
  font-size: 26px;
  height: 44px;
  margin-right: 8px;
  width: 40px
}

.dex-input-verify .dex-input-verify-input.input-lg.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 44px
}

.dex-input-verify .dex-input-verify-input.input-lg:last-child {
  margin-right: unset
}

.dex-input-verify .dex-input-verify-input.input-xs {
  border-radius: 6px;
  font-size: 26px;
  height: 44px;
  margin-right: 8px;
  width: 40px
}

.dex-input-verify .dex-input-verify-input.input-xs.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 44px
}

.dex-input-verify .dex-input-verify-input.input-xs:last-child {
  margin-right: unset
}

.dex-input-verify .dex-input-verify-input.input-sm {
  border-radius: 6px;
  font-size: 20px;
  height: 40px;
  margin-right: 10px;
  width: 40px
}

.dex-input-verify .dex-input-verify-input.input-sm.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 40px
}

.dex-input-verify .dex-input-verify-input.input-sm:last-child {
  margin-right: unset
}

.dex-input-verify .dex-input-verify-input.input-md {
  border-radius: 6px;
  font-size: 26px;
  height: 44px;
  margin-right: 8px;
  width: 40px
}

.dex-input-verify .dex-input-verify-input.input-md.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 44px
}

.dex-input-verify .dex-input-verify-input.input-md:last-child {
  margin-right: unset
}

.dex-input-verify .dex-input-verify-input.error {
  border-color: var(--dex-okd-input-verify-error-border-color, var(--dex-okd-input-error-border-color))
}

.dex-input-verify .dex-input-verify-input.disabled {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-text-color);
  background: var(--dex-okd-input-disabled-background);
  border: thin solid var(--dex-okd-input-disabled-border-color);
  box-shadow: var(--dex-okd-input-disabled-shadow);
  caret-color: var(--dex-okd-input-disabled-caret-color);
  color: var(--dex-okd-input-disabled-text-color);
  cursor: not-allowed
}

.dex-tooltip .dex-popup-layer-content {
  word-wrap: break-word;
  border-radius: 2px;
  color: var(--dex-okd-tooltip-default-font-color);
  font-size: 12px;
  line-height: 16px;
  max-width: 160px;
  padding: 8px
}

.dex-tooltip .dex-popup-layer-arrow-inner,
.dex-tooltip .dex-popup-layer-content {
  background-color: var(--dex-okd-tooltip-neutral-background)
}

.dex-tooltip-negative .dex-popup-layer-arrow-inner,
.dex-tooltip-negative .dex-popup-layer-content {
  background-color: var(--dex-okd-tooltip-negative-background)
}

.dex-tooltip-positive .dex-popup-layer-arrow-inner,
.dex-tooltip-positive .dex-popup-layer-content {
  background-color: var(--dex-okd-tooltip-positive-background)
}

.dex-tooltip-informative .dex-popup-layer-arrow-inner,
.dex-tooltip-informative .dex-popup-layer-content {
  background-color: var(--dex-okd-tooltip-informative-background)
}

.dex-tag {
  align-items: center;
  border-style: solid;
  box-sizing: border-box;
  display: inline-flex
}

.dex-tag-ellipsis {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.dex-tag-icon {
  padding-right: 2px
}

.dex-tag-sm {
  --dex-okd-tag-inner-height: var(--dex-okd-tag-sm-height, 16px);
  border-radius: 4px;
  border-radius: var(--dex-okd-tag-sm-border-radius, 4px);
  border-width: 1px;
  border-width: var(--dex-okd-tag-sm-border-width, 1px);
  font-size: 12px;
  font-size: var(--dex-okd-tag-sm-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-tag-sm-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-tag-sm-line-height, 16px);
  padding: 2px 4px;
  padding: var(--dex-okd-tag-sm-padding-vertical, 2px) var(--dex-okd-tag-sm-padding-horizontal, 4px)
}

.dex-tag-sm .dex-tag-icon {
  font-size: 12px;
  font-size: var(--dex-okd-tag-sm-icon-size, 12px)
}

.dex-tag-md {
  --dex-okd-tag-inner-height: var(--dex-okd-tag-md-height, 20px);
  border-radius: 4px;
  border-radius: var(--dex-okd-tag-md-border-radius, 4px);
  border-width: 1px;
  border-width: var(--dex-okd-tag-md-border-width, 1px);
  font-size: 12px;
  font-size: var(--dex-okd-tag-md-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-tag-md-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-tag-md-line-height, 16px);
  padding: 2px 4px;
  padding: var(--dex-okd-tag-md-padding-vertical, 2px) var(--dex-okd-tag-md-padding-horizontal, 4px)
}

.dex-tag-md .dex-tag-icon {
  font-size: 16px;
  font-size: var(--dex-okd-tag-md-icon-size, 16px)
}

.dex-tag-lg {
  --dex-okd-tag-inner-height: var(--dex-okd-tag-lg-height, 24px);
  border-radius: 4px;
  border-radius: var(--dex-okd-tag-lg-border-radius, 4px);
  border-width: 1px;
  border-width: var(--dex-okd-tag-lg-border-width, 1px);
  font-size: 12px;
  font-size: var(--dex-okd-tag-lg-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-tag-lg-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-tag-lg-line-height, 16px);
  padding: 2px 4px;
  padding: var(--dex-okd-tag-lg-padding-vertical, 2px) var(--dex-okd-tag-lg-padding-horizontal, 4px)
}

.dex-tag-lg .dex-tag-icon {
  font-size: 16px;
  font-size: var(--dex-okd-tag-lg-icon-size, 16px)
}

.dex-tag-fixed-height {
  height: var(--dex-okd-tag-inner-height);
  padding-bottom: 0;
  padding-top: 0
}

.dex-tag-fill-grey {
  background-color: var(--dex-okd-tag-fill-grey-background-color);
  border-color: var(--dex-okd-tag-fill-grey-border-color);
  color: var(--dex-okd-tag-fill-grey-font-color)
}

.dex-tag-fill-lightgrey {
  background-color: hsla(0, 0%, 100%, 0);
  background-color: var(--dex-okd-tag-fill-lightgrey-background-color, hsla(0, 0%, 100%, 0));
  border-color: hsla(0, 0%, 100%, 0);
  border-color: var(--dex-okd-tag-fill-lightgrey-border-color, hsla(0, 0%, 100%, 0));
  color: hsla(0, 0%, 100%, 0);
  color: var(--dex-okd-tag-fill-lightgrey-font-color, hsla(0, 0%, 100%, 0))
}

.dex-tag-fill-green {
  background-color: var(--dex-okd-tag-fill-green-background-color);
  border-color: var(--dex-okd-tag-fill-green-border-color);
  color: var(--dex-okd-tag-fill-green-font-color)
}

.dex-tag-fill-red {
  background-color: var(--dex-okd-tag-fill-red-background-color);
  border-color: var(--dex-okd-tag-fill-red-border-color);
  color: var(--dex-okd-tag-fill-red-font-color)
}

.dex-tag-fill-tangerine {
  background-color: hsla(0, 0%, 100%, 0);
  background-color: var(--dex-okd-tag-fill-tangerine-background-color, hsla(0, 0%, 100%, 0));
  border-color: hsla(0, 0%, 100%, 0);
  border-color: var(--dex-okd-tag-fill-tangerine-border-color, hsla(0, 0%, 100%, 0));
  color: hsla(0, 0%, 100%, 0);
  color: var(--dex-okd-tag-fill-tangerine-font-color, hsla(0, 0%, 100%, 0))
}

.dex-tag-fill-lime {
  background-color: var(--dex-okd-tag-fill-lime-background-color);
  border-color: var(--dex-okd-tag-fill-lime-border-color);
  color: var(--dex-okd-tag-fill-lime-font-color)
}

.dex-tag-outline-grey {
  background-color: var(--dex-okd-tag-outline-grey-background-color);
  border-color: var(--dex-okd-tag-outline-grey-border-color);
  color: var(--dex-okd-tag-outline-grey-font-color)
}

.dex-tag-outline-lightgrey {
  background-color: var(--dex-okd-tag-outline-lightgrey-background-color);
  border-color: var(--dex-okd-tag-outline-lightgrey-border-color);
  color: var(--dex-okd-tag-outline-lightgrey-font-color)
}

.dex-tag-outline-green {
  background-color: var(--dex-okd-tag-outline-green-background-color);
  border-color: var(--dex-okd-tag-outline-green-border-color);
  color: var(--dex-okd-tag-outline-green-font-color)
}

.dex-tag-outline-red {
  background-color: var(--dex-okd-tag-outline-red-background-color);
  border-color: var(--dex-okd-tag-outline-red-border-color);
  color: var(--dex-okd-tag-outline-red-font-color)
}

.dex-tag-outline-tangerine {
  background-color: var(--dex-okd-tag-outline-tangerine-background-color);
  border-color: var(--dex-okd-tag-outline-tangerine-border-color);
  color: var(--dex-okd-tag-outline-tangerine-font-color)
}

.dex-tag-outline-lime {
  background-color: hsla(0, 0%, 100%, 0);
  background-color: var(--dex-okd-tag-outline-lime-background-color, hsla(0, 0%, 100%, 0));
  border-color: hsla(0, 0%, 100%, 0);
  border-color: var(--dex-okd-tag-outline-lime-border-color, hsla(0, 0%, 100%, 0));
  color: hsla(0, 0%, 100%, 0);
  color: var(--dex-okd-tag-outline-lime-font-color, hsla(0, 0%, 100%, 0))
}

.dex-tag.dex-tag-fill-lime {
  font-weight: 700
}

.dex-powerLink {
  color: inherit;
  text-decoration: none
}

.dex-powerLink-a11y:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-transition-fade {
  transition: opacity .3s linear
}

.dex-transition-fade-active {
  will-change: opacity
}

.dex-transition-fade-ease-out {
  transition-timing-function: cubic-bezier(.5, 0, .52, 1)
}

.dex-transition-fade-entered,
.dex-transition-fade-entering {
  opacity: 1
}

.dex-transition-fade-exited,
.dex-transition-fade-exiting {
  opacity: 0
}

.dex-transition-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  position: fixed;
  transform: translateY(100%);
  transform-style: preserve-3d;
  transition: transform .3s linear, opacity .3s linear
}

.dex-transition-slide-active {
  will-change: transform, opacity
}

.dex-transition-slide-cubic {
  transition-timing-function: ease
}

.dex-transition-slide-top {
  left: 0;
  top: 0;
  width: 100%
}

.dex-transition-slide-bottom {
  bottom: 0;
  left: 0;
  width: 100%
}

.dex-transition-slide-left {
  height: 100%;
  left: 0;
  top: 0
}

.dex-transition-slide-right {
  height: 100%;
  right: 0;
  top: 0
}

.dex-transition-slide-entered,
.dex-transition-slide-entering {
  opacity: 1;
  transform: none
}

.dex-transition-slide-exited,
.dex-transition-slide-exiting {
  opacity: 0
}

.dex-transition-slide-exited.dex-transition-slide-top,
.dex-transition-slide-exiting.dex-transition-slide-top {
  transform: translateY(-100%)
}

.dex-transition-slide-exited.dex-transition-slide-bottom,
.dex-transition-slide-exiting.dex-transition-slide-bottom {
  transform: translateY(100%)
}

.dex-transition-slide-exited.dex-transition-slide-left,
.dex-transition-slide-exiting.dex-transition-slide-left {
  transform: translateX(-100%)
}

.dex-transition-slide-exited.dex-transition-slide-right,
.dex-transition-slide-exiting.dex-transition-slide-right {
  transform: translateX(100%)
}

@media (hover:none) and (pointer:coarse) {
  .dex-transition-slide {
    transition-duration: .2s
  }
}

.dex-radio-inner {
  background-color: var(--dex-okd-radio-default-background);
  border: 1px solid var(--dex-okd-radio-default-border-color);
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  direction: ltr;
  display: block;
  left: 0;
  margin-top: 1px;
  position: relative;
  top: 0
}

.dex-radio-input {
  cursor: pointer;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 1
}

.dex-radio-input:focus-visible {
  border-radius: 50%;
  opacity: 1;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-radio-children {
  cursor: pointer;
  display: inline-block;
  font-size: var(--dex-okd-radio-common-label-font-size);
  margin-left: 4px;
  vertical-align: top;
  white-space: normal;
  word-break: break-word
}

.dex-radio-wrapper {
  cursor: pointer;
  display: inline-block;
  font-size: 0;
  margin-right: 8px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap
}

.dex-radio-wrapper .dex-radio {
  cursor: pointer;
  display: inline-block;
  position: relative;
  vertical-align: middle
}

.dex-radio-wrapper .dex-radio-children {
  color: var(--dex-okd-radio-default-text-color)
}

.dex-radio-wrapper.hover-status .dex-radio-inner {
  border-color: var(--dex-okd-radio-default-hover-border-color);
  box-shadow: var(--dex-okd-radio-default-hover-shadow)
}

.dex-radio-wrapper-checked .dex-radio-children {
  color: var(--dex-okd-radio-selected-text-color)
}

.dex-radio-wrapper-checked .dex-radio-inner {
  background-color: var(--dex-okd-radio-selected-background);
  border-color: var(--dex-okd-radio-selected-border-color)
}

.dex-radio-wrapper-checked .dex-radio-inner:after {
  background-color: var(--dex-okd-radio-selected-inner-color);
  border: 2px solid var(--dex-okd-radio-selected-inner-color);
  border-left: 0;
  border-radius: 50%;
  border-top: 0;
  box-sizing: border-box;
  content: " ";
  height: 6px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: all .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
  width: 6px
}

.dex-radio-wrapper-error .dex-radio-children {
  color: var(--dex-okd-radio-error-text-color)
}

.dex-radio-wrapper-error .dex-radio-inner {
  border-color: var(--dex-okd-radio-error-border-color)
}

.dex-radio-wrapper-error.hover-status .dex-radio-inner {
  border-color: var(--dex-okd-radio-error-hover-border-color);
  box-shadow: var(--dex-okd-radio-error-hover-shadow)
}

.dex-radio-wrapper-error.dex-radio-wrapper-checked .dex-radio-inner {
  background-color: var(--dex-okd-radio-error-background);
  border-color: var(--dex-okd-radio-error-border-color)
}

.dex-radio-wrapper-error.dex-radio-wrapper-checked .dex-radio-inner:after {
  background: var(--dex-okd-radio-error-inner-color);
  border-color: var(--dex-okd-radio-error-inner-color)
}

.dex-radio-wrapper-disabled {
  cursor: not-allowed
}

.dex-radio-wrapper-disabled .dex-radio-children {
  color: var(--dex-okd-radio-disabled-text-color);
  cursor: not-allowed
}

.dex-radio-wrapper-disabled .dex-radio,
.dex-radio-wrapper-disabled .dex-radio .dex-radio-input {
  cursor: default
}

.dex-radio-wrapper-disabled .dex-radio .dex-radio-inner {
  background-color: var(--dex-okd-radio-disabled-background);
  border-color: var(--dex-okd-radio-disabled-border-color);
  cursor: default
}

.dex-radio-wrapper-disabled.hover-status .dex-radio-inner {
  border-color: var(--dex-okd-radio-disabled-hover-border-color);
  box-shadow: unset
}

.dex-radio-wrapper-disabled.dex-radio-wrapper-checked .dex-radio-inner {
  border-color: var(--dex-okd-radio-disabled-checked-border-color)
}

.dex-radio-wrapper-disabled.dex-radio-wrapper-checked .dex-radio-inner:after {
  background-color: var(--dex-okd-radio-disabled-checked-inner-color);
  border-color: var(--dex-okd-radio-disabled-inner-color)
}

.dex-radio-sm .dex-radio-inner {
  height: var(--dex-okd-radio-sm-height);
  width: var(--dex-okd-radio-sm-width)
}

.dex-radio-sm .dex-radio-children {
  font-size: var(--dex-okd-radio-sm-font-size);
  margin-left: var(--dex-okd-radio-sm-margin)
}

.dex-radio-sm.dex-radio-wrapper {
  line-height: var(--dex-okd-radio-sm-line-height);
  padding-bottom: var(--dex-okd-radio-sm-padding);
  padding-top: var(--dex-okd-radio-sm-padding)
}

.dex-radio-md .dex-radio-inner {
  height: var(--dex-okd-radio-md-height);
  width: var(--dex-okd-radio-md-width)
}

.dex-radio-md .dex-radio-children {
  font-size: var(--dex-okd-radio-md-font-size);
  margin-left: var(--dex-okd-radio-md-margin)
}

.dex-radio-md.dex-radio-wrapper {
  line-height: var(--dex-okd-radio-md-line-height);
  padding-bottom: var(--dex-okd-radio-md-padding);
  padding-top: var(--dex-okd-radio-md-padding)
}

@media (min-width:768px) {

  .dex-radio-wrapper-disabled.dex-radio-wrapper-checked:hover .dex-radio-inner,
  .dex-radio-wrapper-disabled:hover .dex-radio-inner {
    border-color: var(--dex-okd-radio-disabled-hover-border-color);
    box-shadow: unset
  }

  .dex-radio-wrapper:not(.dex-radio-wrapper-disabled):hover .dex-radio-inner {
    border-color: var(--dex-okd-radio-default-hover-border-color);
    box-shadow: var(--dex-okd-radio-default-hover-shadow)
  }

  .dex-radio-wrapper-checked:not(.dex-radio-wrapper-disabled):hover .dex-radio-inner {
    border-color: var(--dex-okd-radio-selected-hover-border-color);
    box-shadow: var(--dex-okd-radio-selected-hover-shadow)
  }

  .dex-radio-wrapper-error:not(.dex-radio-wrapper-disabled):hover .dex-radio-inner {
    border-color: var(--dex-okd-radio-error-hover-border-color);
    box-shadow: var(--dex-okd-radio-error-hover-shadow)
  }
}

.dex-radio-reversed .dex-radio-inner {
  background-color: var(--dex-okd-radio-reversed-default-background);
  border: 1px solid var(--dex-okd-radio-reversed-default-border-color)
}

.dex-radio-reversed.dex-radio-wrapper .dex-radio-children {
  color: var(--dex-okd-radio-reversed-default-text-color)
}

.dex-radio-reversed.dex-radio-wrapper.hover-status .dex-radio-inner,
.dex-radio-reversed.dex-radio-wrapper:hover .dex-radio-inner {
  border-color: var(--dex-okd-radio-reversed-default-hover-border-color);
  box-shadow: var(--dex-okd-radio-reversed-default-hover-shadow)
}

.dex-radio-reversed.dex-radio-wrapper-checked .dex-radio-children {
  color: var(--dex-okd-radio-reversed-selected-text-color)
}

.dex-radio-reversed.dex-radio-wrapper-checked .dex-radio-inner {
  background-color: var(--dex-okd-radio-reversed-selected-background);
  border-color: var(--dex-okd-radio-reversed-selected-border-color)
}

.dex-radio-reversed.dex-radio-wrapper-checked .dex-radio-inner:after {
  background-color: var(--dex-okd-radio-reversed-selected-inner-color);
  border: 2px solid var(--dex-okd-radio-reversed-selected-inner-color)
}

.dex-radio-reversed.dex-radio-wrapper-checked:hover .dex-radio-inner {
  border-color: var(--dex-okd-radio-reversed-selected-hover-border-color);
  box-shadow: var(--dex-okd-radio-reversed-selected-hover-shadow)
}

.dex-radio-reversed.dex-radio-wrapper-error .dex-radio-children {
  color: var(--dex-okd-radio-reversed-error-text-color)
}

.dex-radio-reversed.dex-radio-wrapper-error .dex-radio-inner {
  border-color: var(--dex-okd-radio-reversed-error-border-color)
}

.dex-radio-reversed.dex-radio-wrapper-error.hover-status .dex-radio-inner,
.dex-radio-reversed.dex-radio-wrapper-error:hover .dex-radio-inner {
  border-color: var(--dex-okd-radio-reversed-error-hover-border-color);
  box-shadow: var(--dex-okd-radio-reversed-error-hover-shadow)
}

.dex-radio-reversed.dex-radio-wrapper-error.dex-radio-wrapper-checked .dex-radio-inner {
  background-color: var(--dex-okd-radio-reversed-error-background);
  border-color: var(--dex-okd-radio-reversed-error-border-color)
}

.dex-radio-reversed.dex-radio-wrapper-error.dex-radio-wrapper-checked .dex-radio-inner:after {
  background: var(--dex-okd-radio-reversed-error-inner-color);
  border-color: var(--dex-okd-radio-reversed-error-inner-color)
}

.dex-radio-reversed.dex-radio-wrapper-disabled .dex-radio-children {
  color: var(--dex-okd-radio-reversed-disabled-text-color)
}

.dex-radio-reversed.dex-radio-wrapper-disabled .dex-radio .dex-radio-inner {
  background-color: var(--dex-okd-radio-reversed-disabled-background);
  border-color: var(--dex-okd-radio-reversed-disabled-border-color)
}

.dex-radio-reversed.dex-radio-wrapper-disabled.hover-status .dex-radio-inner,
.dex-radio-reversed.dex-radio-wrapper-disabled:hover .dex-radio-inner {
  border-color: var(--dex-okd-radio-reversed-disabled-hover-border-color)
}

.dex-radio-reversed.dex-radio-wrapper-disabled.dex-radio-wrapper-checked .dex-radio-inner {
  border-color: var(--dex-okd-radio-reversed-disabled-checked-border-color)
}

.dex-radio-reversed.dex-radio-wrapper-disabled.dex-radio-wrapper-checked .dex-radio-inner:after {
  background-color: var(--dex-okd-radio-reversed-disabled-checked-inner-color);
  border-color: var(--dex-okd-radio-reversed-disabled-inner-color)
}

.dex-positivebutton-xxs {
  font-size: 12px;
  font-size: var(--dex-okd-positivebutton-xxs-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-xxs-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-positivebutton-xxs-line-height, 16px);
  min-width: 63px;
  min-width: var(--dex-okd-positivebutton-xxs-min-width, 63px);
  padding: 4px 12px;
  padding: var(--dex-okd-positivebutton-xxs-padding-vertical, 4px) var(--dex-okd-positivebutton-xxs-padding-horizontal, 12px)
}

.dex-positivebutton-xxs .dex-positivebutton-loader-circle {
  height: 14px;
  height: var(--dex-okd-positivebutton-xxs-loader-width, 14px);
  width: 14px;
  width: var(--dex-okd-positivebutton-xxs-loader-width, 14px)
}

.dex-positivebutton-xxs .dex-positivebutton-icon {
  font-size: 14px;
  font-size: var(--dex-okd-positivebutton-xxs-icon-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-xxs-font-weight, 400)
}

.dex-positivebutton-xxs .dex-positivebutton-icon-leading {
  margin-right: 6px;
  margin-right: var(--dex-okd-positivebutton-xxs-icon-margin-right, 6px)
}

.dex-positivebutton-xxs .dex-positivebutton-icon-tailing {
  margin-left: 6px;
  margin-left: var(--dex-okd-positivebutton-xxs-icon-margin-right, 6px)
}

.dex-positivebutton-loading-text .dex-positivebutton-loader {
  margin-right: var(--dex-okd-positivebutton-xxs-loader-margin-right, 6px)
}

.dex-positivebutton-xs {
  font-size: 12px;
  font-size: var(--dex-okd-positivebutton-xs-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-xs-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-positivebutton-xs-line-height, 16px);
  min-width: 63px;
  min-width: var(--dex-okd-positivebutton-xs-min-width, 63px);
  padding: 6px 12px;
  padding: var(--dex-okd-positivebutton-xs-padding-vertical, 6px) var(--dex-okd-positivebutton-xs-padding-horizontal, 12px)
}

.dex-positivebutton-xs .dex-positivebutton-loader-circle {
  height: 14px;
  height: var(--dex-okd-positivebutton-xs-loader-width, 14px);
  width: 14px;
  width: var(--dex-okd-positivebutton-xs-loader-width, 14px)
}

.dex-positivebutton-xs .dex-positivebutton-icon {
  font-size: 14px;
  font-size: var(--dex-okd-positivebutton-xs-icon-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-xs-font-weight, 400)
}

.dex-positivebutton-xs .dex-positivebutton-icon-leading {
  margin-right: 6px;
  margin-right: var(--dex-okd-positivebutton-xs-icon-margin-right, 6px)
}

.dex-positivebutton-xs .dex-positivebutton-icon-tailing {
  margin-left: 6px;
  margin-left: var(--dex-okd-positivebutton-xs-icon-margin-right, 6px)
}

.dex-positivebutton-loading-text .dex-positivebutton-loader {
  margin-right: var(--dex-okd-positivebutton-xs-loader-margin-right, 6px)
}

.dex-positivebutton-s {
  font-size: 14px;
  font-size: var(--dex-okd-positivebutton-s-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-s-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-positivebutton-s-line-height, 16px);
  min-width: 72px;
  min-width: var(--dex-okd-positivebutton-s-min-width, 72px);
  padding: 8px 12px;
  padding: var(--dex-okd-positivebutton-s-padding-vertical, 8px) var(--dex-okd-positivebutton-s-padding-horizontal, 12px)
}

.dex-positivebutton-s .dex-positivebutton-loader-circle {
  height: 14px;
  height: var(--dex-okd-positivebutton-s-loader-width, 14px);
  width: 14px;
  width: var(--dex-okd-positivebutton-s-loader-width, 14px)
}

.dex-positivebutton-s .dex-positivebutton-icon {
  font-size: 14px;
  font-size: var(--dex-okd-positivebutton-s-icon-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-s-font-weight, 400)
}

.dex-positivebutton-s .dex-positivebutton-icon-leading {
  margin-right: 6px;
  margin-right: var(--dex-okd-positivebutton-s-icon-margin-right, 6px)
}

.dex-positivebutton-s .dex-positivebutton-icon-tailing {
  margin-left: 6px;
  margin-left: var(--dex-okd-positivebutton-s-icon-margin-right, 6px)
}

.dex-positivebutton-loading-text .dex-positivebutton-loader {
  margin-right: var(--dex-okd-positivebutton-s-loader-margin-right, 6px)
}

.dex-positivebutton-sm {
  font-size: 14px;
  font-size: var(--dex-okd-positivebutton-sm-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-sm-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-positivebutton-sm-line-height, 16px);
  min-width: 81px;
  min-width: var(--dex-okd-positivebutton-sm-min-width, 81px);
  padding: 10px 16px;
  padding: var(--dex-okd-positivebutton-sm-padding-vertical, 10px) var(--dex-okd-positivebutton-sm-padding-horizontal, 16px)
}

.dex-positivebutton-sm .dex-positivebutton-loader-circle {
  height: 16px;
  height: var(--dex-okd-positivebutton-sm-loader-width, 16px);
  width: 16px;
  width: var(--dex-okd-positivebutton-sm-loader-width, 16px)
}

.dex-positivebutton-sm .dex-positivebutton-icon {
  font-size: 16px;
  font-size: var(--dex-okd-positivebutton-sm-icon-size, 16px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-sm-font-weight, 400)
}

.dex-positivebutton-sm .dex-positivebutton-icon-leading {
  margin-right: 6px;
  margin-right: var(--dex-okd-positivebutton-sm-icon-margin-right, 6px)
}

.dex-positivebutton-sm .dex-positivebutton-icon-tailing {
  margin-left: 6px;
  margin-left: var(--dex-okd-positivebutton-sm-icon-margin-right, 6px)
}

.dex-positivebutton-loading-text .dex-positivebutton-loader {
  margin-right: var(--dex-okd-positivebutton-sm-loader-margin-right, 6px)
}

.dex-positivebutton-md {
  font-size: 14px;
  font-size: var(--dex-okd-positivebutton-md-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-md-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-positivebutton-md-line-height, 16px);
  min-width: 90px;
  min-width: var(--dex-okd-positivebutton-md-min-width, 90px);
  padding: 12px 16px;
  padding: var(--dex-okd-positivebutton-md-padding-vertical, 12px) var(--dex-okd-positivebutton-md-padding-horizontal, 16px)
}

.dex-positivebutton-md .dex-positivebutton-loader-circle {
  height: 16px;
  height: var(--dex-okd-positivebutton-md-loader-width, 16px);
  width: 16px;
  width: var(--dex-okd-positivebutton-md-loader-width, 16px)
}

.dex-positivebutton-md .dex-positivebutton-icon {
  font-size: 16px;
  font-size: var(--dex-okd-positivebutton-md-icon-size, 16px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-md-font-weight, 400)
}

.dex-positivebutton-md .dex-positivebutton-icon-leading {
  margin-right: 6px;
  margin-right: var(--dex-okd-positivebutton-md-icon-margin-right, 6px)
}

.dex-positivebutton-md .dex-positivebutton-icon-tailing {
  margin-left: 6px;
  margin-left: var(--dex-okd-positivebutton-md-icon-margin-right, 6px)
}

.dex-positivebutton-loading-text .dex-positivebutton-loader {
  margin-right: 6px;
  margin-right: var(--dex-okd-positivebutton-md-loader-margin-right, 6px)
}

.dex-positivebutton-lg {
  font-size: 16px;
  font-size: var(--dex-okd-positivebutton-lg-font-size, 16px);
  font-weight: 500;
  font-weight: var(--dex-okd-positivebutton-lg-font-weight, 500);
  line-height: 20px;
  line-height: var(--dex-okd-positivebutton-lg-line-height, 20px);
  min-width: 108px;
  min-width: var(--dex-okd-positivebutton-lg-min-width, 108px);
  padding: 14px 24px;
  padding: var(--dex-okd-positivebutton-lg-padding-vertical, 14px) var(--dex-okd-positivebutton-lg-padding-horizontal, 24px)
}

.dex-positivebutton-lg .dex-positivebutton-loader-circle {
  height: 20px;
  height: var(--dex-okd-positivebutton-lg-loader-width, 20px);
  width: 20px;
  width: var(--dex-okd-positivebutton-lg-loader-width, 20px)
}

.dex-positivebutton-lg .dex-positivebutton-icon {
  font-size: 20px;
  font-size: var(--dex-okd-positivebutton-lg-icon-size, 20px);
  font-weight: 500;
  font-weight: var(--dex-okd-positivebutton-lg-font-weight, 500)
}

.dex-positivebutton-lg .dex-positivebutton-icon-leading {
  margin-right: 8px;
  margin-right: var(--dex-okd-positivebutton-lg-icon-margin-right, 8px)
}

.dex-positivebutton-lg .dex-positivebutton-icon-tailing {
  margin-left: 8px;
  margin-left: var(--dex-okd-positivebutton-lg-icon-margin-right, 8px)
}

.dex-positivebutton-loading-text .dex-positivebutton-loader {
  margin-right: var(--dex-okd-positivebutton-lg-loader-margin-right, 8px)
}

.dex-positivebutton-xl {
  font-size: 18px;
  font-size: var(--dex-okd-positivebutton-xl-font-size, 18px);
  font-weight: 500;
  font-weight: var(--dex-okd-positivebutton-xl-font-weight, 500);
  line-height: 24px;
  line-height: var(--dex-okd-positivebutton-xl-line-height, 24px);
  min-width: 126px;
  min-width: var(--dex-okd-positivebutton-xl-min-width, 126px);
  padding: 16px 44px;
  padding: var(--dex-okd-positivebutton-xl-padding-vertical, 16px) var(--dex-okd-positivebutton-xl-padding-horizontal, 44px)
}

.dex-positivebutton-xl .dex-positivebutton-loader-circle {
  height: 20px;
  height: var(--dex-okd-positivebutton-xl-loader-width, 20px);
  width: 20px;
  width: var(--dex-okd-positivebutton-xl-loader-width, 20px)
}

.dex-positivebutton-xl .dex-positivebutton-icon {
  font-size: 20px;
  font-size: var(--dex-okd-positivebutton-xl-icon-size, 20px);
  font-weight: 500;
  font-weight: var(--dex-okd-positivebutton-xl-font-weight, 500)
}

.dex-positivebutton-xl .dex-positivebutton-icon-leading {
  margin-right: 8px;
  margin-right: var(--dex-okd-positivebutton-xl-icon-margin-right, 8px)
}

.dex-positivebutton-xl .dex-positivebutton-icon-tailing {
  margin-left: 8px;
  margin-left: var(--dex-okd-positivebutton-xl-icon-margin-right, 8px)
}

.dex-positivebutton-loading-text .dex-positivebutton-loader {
  margin-right: 8px;
  margin-right: var(--dex-okd-positivebutton-xl-loader-margin-right, 8px)
}

.dex-positivebutton {
  align-items: center;
  background-color: var(--dex-okd-color-surface-pnl-profit-default);
  background-color: var(--dex-okd-positivebutton-default-background, var(--dex-okd-color-surface-pnl-profit-default));
  border-radius: 50px;
  border-radius: var(--dex-okd-positivebutton-border-radius, 50px);
  box-sizing: border-box;
  color: var(--dex-okd-color-content-pnl-profit-oncolor);
  color: var(--dex-okd-positivebutton-default-color, var(--dex-okd-color-content-pnl-profit-oncolor));
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  outline: none;
  position: relative;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.dex-positivebutton:focus-visible {
  border-radius: 50px;
  border-radius: var(--dex-okd-positivebutton-border-radius, 50px);
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-positivebutton.hover,
.dex-positivebutton:not(.dex-positivebutton-disabled):not(.dex-positivebutton-loading):hover {
  background-color: var(--dex-okd-color-surface-pnl-profit-hovered);
  background-color: var(--dex-okd-positivebutton-hover-background, var(--dex-okd-color-surface-pnl-profit-hovered))
}

.dex-positivebutton.active,
.dex-positivebutton:not(.dex-positivebutton-disabled):not(.dex-positivebutton-loading):active {
  background-color: var(--dex-okd-color-surface-pnl-profit-pressed);
  background-color: var(--dex-okd-positivebutton-active-background, var(--dex-okd-color-surface-pnl-profit-pressed))
}

.dex-positivebutton-disabled,
.dex-positivebutton.disabled {
  background-color: var(--dex-okd-color-surface-interactive-disabled);
  background-color: var(--dex-okd-positivebutton-disabled-background, var(--dex-okd-color-surface-interactive-disabled));
  color: var(--dex-okd-color-content-interactive-disabled);
  color: var(--dex-okd-positivebutton-disabled-color, var(--dex-okd-color-content-interactive-disabled));
  cursor: not-allowed
}

.dex-positivebutton-loading,
.dex-positivebutton.loading {
  background-color: var(--dex-okd-color-surface-pnl-profit-pressed);
  background-color: var(--dex-okd-positivebutton-loading-background, var(--dex-okd-color-surface-pnl-profit-pressed));
  color: transparent
}

.dex-positivebutton-loading .dex-positivebutton-loader,
.dex-positivebutton.loading .dex-positivebutton-loader {
  display: flex;
  position: absolute
}

.dex-positivebutton-loading-text {
  background-color: var(--dex-okd-color-surface-pnl-profit-pressed);
  background-color: var(--dex-okd-positivebutton-loading-background, var(--dex-okd-color-surface-pnl-profit-pressed));
  display: flex
}

.dex-positivebutton-block,
.dex-positivebutton.block {
  display: flex;
  width: 100%
}

.dex-positivebutton-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-positivebutton-loader-circle {
  border-color: var(--dex-okd-positivebutton-loader-track-color, var(--dex-okd-color-content-pnl-profit-oncolor));
  border-top-color: var(--dex-okd-positivebutton-loader-mark-color, var(--dex-okd-color-border-pnl-profit-default));
  border-width: 2px;
  border-width: var(--dex-okd-positivebutton-loader-border-width, 2px)
}

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

  to {
    transform: rotate(1turn)
  }
}

.dex-switch {
  background: var(--dex-okd-switch-off-default-track-color);
  border: 0;
  border-radius: calc(var(--dex-okd-switch-md-height)/2);
  box-sizing: border-box;
  cursor: pointer;
  height: var(--dex-okd-switch-md-height);
  outline: none;
  position: relative;
  transition: left .36s;
  vertical-align: middle;
  width: var(--dex-okd-switch-md-width)
}

.dex-switch:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-switch-handler {
  align-items: center;
  background: var(--dex-okd-switch-off-default-handler-color);
  border-radius: 100%;
  box-shadow: var(--dex-okd-switch-off-default-handler-shadow);
  display: flex;
  height: var(--dex-okd-switch-md-handler-size);
  justify-content: center;
  left: calc((var(--dex-okd-switch-md-height) - var(--dex-okd-switch-md-handler-size))/2);
  position: absolute;
  top: calc((var(--dex-okd-switch-md-height) - var(--dex-okd-switch-md-handler-size))/2);
  transition: left .36s;
  width: var(--dex-okd-switch-md-handler-size)
}

.dex-switch .switch-handler-loader {
  height: calc(var(--dex-okd-switch-md-handler-size) - 6px);
  width: calc(var(--dex-okd-switch-md-handler-size) - 6px)
}

.dex-switch .switch-on-loader {
  border-color: var(--dex-okd-switch-on-loading-handler-color);
  border-top-color: var(--dex-okd-switch-on-loading-mark-color)
}

.dex-switch .switch-off-loader {
  border-color: var(--dex-okd-switch-off-loading-handler-color);
  border-top-color: var(--dex-okd-switch-off-loading-mark-color)
}

.dex-switch-label {
  color: var(--dex-okd-switch-label-font-color);
  font-family: inherit;
  font-size: var(--dex-okd-switch-md-label-size);
  font-weight: 500;
  margin-left: 18px;
  vertical-align: middle
}

.dex-switch-small {
  height: var(--dex-okd-switch-sm-height);
  width: var(--dex-okd-switch-sm-width)
}

.dex-switch.dex-switch-small .dex-switch-handler {
  height: var(--dex-okd-switch-sm-handler-size);
  width: var(--dex-okd-switch-sm-handler-size)
}

.dex-switch.dex-switch-small .switch-handler-loader {
  height: calc(var(--dex-okd-switch-sm-handler-size) - 2px);
  width: calc(var(--dex-okd-switch-sm-handler-size) - 2px)
}

.dex-switch-small+.dex-switch-label {
  font-size: var(--dex-okd-switch-sm-label-size)
}

.dex-switch.dex-switch-loading {
  background-color: var(--dex-okd-switch-off-loading-track-color);
  cursor: not-allowed
}

.dex-switch.dex-switch-select {
  background-color: var(--dex-okd-switch-on-default-track-color)
}

.dex-switch.dex-switch-select .dex-switch-handler {
  background: var(--dex-okd-switch-on-default-handler-color);
  box-shadow: var(--dex-okd-switch-on-default-handler-shadow);
  left: calc((var(--dex-okd-switch-md-height) - var(--dex-okd-switch-md-handler-size))/2 + var(--dex-okd-switch-md-width) - (var(--dex-okd-switch-md-height) - var(--dex-okd-switch-md-handler-size))/2*2 - var(--dex-okd-switch-md-handler-size))
}

.dex-switch.dex-switch-select.dex-switch-small .dex-switch-handler {
  left: calc((var(--dex-okd-switch-md-height) - var(--dex-okd-switch-md-handler-size))/2 + var(--dex-okd-switch-sm-width) - (var(--dex-okd-switch-sm-height) - var(--dex-okd-switch-sm-handler-size))/2*2 - var(--dex-okd-switch-sm-handler-size))
}

.dex-switch.dex-switch-select.dex-switch-loading {
  background-color: var(--dex-okd-switch-on-loading-track-color)
}

.dex-switch.dex-switch-disabled {
  background-color: var(--dex-okd-switch-off-disabled-track-color);
  cursor: not-allowed
}

.dex-switch.dex-switch-disabled .dex-switch-handler {
  background: var(--dex-okd-switch-off-disabled-handler-color);
  box-shadow: var(--dex-okd-switch-off-disabled-handler-shadow)
}

.dex-switch.dex-switch-select.dex-switch-disabled {
  background-color: var(--dex-okd-switch-on-disabled-track-color)
}

.dex-switch.dex-switch-select.dex-switch-disabled .dex-switch-handler {
  background: var(--dex-okd-switch-on-disabled-handler-color);
  box-shadow: var(--dex-okd-switch-on-disabled-handler-shadow)
}

.dex-switch-theme-icon.add-weight {
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-switch-theme-icon-color, var(--dex-okd-color-content-primary));
  font-size: 12px
}

.dex-virtual-list-empty {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center
}

.dex-tabs-pane.dex-tabs-pane-outline-highlight {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-highlight-default-background-color, transparent);
  border-color: #dbdbdb;
  border-color: var(--dex-okd-tabs-pane-outline-highlight-default-border-color, #dbdbdb);
  border-style: solid;
  color: #929292;
  color: var(--dex-okd-tabs-pane-outline-highlight-default-text-color, #929292)
}

.dex-tabs-pane.dex-tabs-pane-outline-highlight.dex-tabs-active {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-highlight-active-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-outline-highlight-active-border-color, #000);
  color: #000;
  color: var(--dex-okd-tabs-pane-outline-highlight-active-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-outline-highlight.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #000;
  outline-color: var(--dex-okd-tabs-pane-outline-highlight-active-text-color, #000);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-outline-highlight:hover:not(.dex-tabs-active) {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-highlight-hover-background-color, transparent);
  border-color: #dbdbdb;
  border-color: var(--dex-okd-tabs-pane-outline-highlight-hover-border-color, #dbdbdb);
  color: #000;
  color: var(--dex-okd-tabs-pane-outline-highlight-hover-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-outline-primary {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-primary-default-background-color, transparent);
  border-color: transparent;
  border-color: var(--dex-okd-tabs-pane-outline-primary-default-border-color, transparent);
  border-style: solid;
  color: #929292;
  color: var(--dex-okd-tabs-pane-outline-primary-default-text-color, #929292)
}

.dex-tabs-pane.dex-tabs-pane-outline-primary.dex-tabs-active {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-primary-active-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-outline-primary-active-border-color, #000);
  color: #000;
  color: var(--dex-okd-tabs-pane-outline-primary-active-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-outline-primary.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #000;
  outline-color: var(--dex-okd-tabs-pane-outline-primary-active-text-color, #000);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-outline-primary:hover:not(.dex-tabs-active) {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-primary-hover-background-color, transparent);
  border-color: transparent;
  border-color: var(--dex-okd-tabs-pane-outline-primary-hover-border-color, transparent);
  color: #000;
  color: var(--dex-okd-tabs-pane-outline-primary-hover-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-outline-secondary {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-secondary-default-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-outline-secondary-default-border-color, #000);
  border-style: solid;
  color: #fff;
  color: var(--dex-okd-tabs-pane-outline-secondary-default-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-outline-secondary.dex-tabs-active {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-secondary-active-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-outline-secondary-active-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-outline-secondary-active-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-outline-secondary.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-outline-secondary-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-outline-secondary:hover:not(.dex-tabs-active) {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-secondary-hover-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-outline-secondary-hover-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-outline-secondary-hover-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-outline-reversed {
  background-color: #f7f7f7;
  background-color: var(--dex-okd-tabs-pane-outline-reversed-default-background-color, #f7f7f7);
  border-color: #f7f7f7;
  border-color: var(--dex-okd-tabs-pane-outline-reversed-default-border-color, #f7f7f7);
  border-style: solid;
  color: #3d3d3d;
  color: var(--dex-okd-tabs-pane-outline-reversed-default-text-color, #3d3d3d)
}

.dex-tabs-pane.dex-tabs-pane-outline-reversed:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-outline-reversed-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-outline-reversed.dex-tabs-active {
  background-color: #000;
  background-color: var(--dex-okd-tabs-pane-outline-reversed-active-background-color, #000);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-outline-reversed-active-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-outline-reversed-active-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-outline-reversed.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-outline-reversed-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-outline-reversed:hover:not(.dex-tabs-active) {
  background-color: #ebebeb;
  background-color: var(--dex-okd-tabs-pane-outline-reversed-hover-background-color, #ebebeb);
  border-color: #ebebeb;
  border-color: var(--dex-okd-tabs-pane-outline-reversed-hover-border-color, #ebebeb);
  color: #3d3d3d;
  color: var(--dex-okd-tabs-pane-outline-reversed-hover-text-color, #3d3d3d)
}

.dex-tabs-pane.dex-tabs-pane-fill-highlight {
  background-color: #f7f7f7;
  background-color: var(--dex-okd-tabs-pane-fill-highlight-default-background-color, #f7f7f7);
  border-color: #f7f7f7;
  border-color: var(--dex-okd-tabs-pane-fill-highlight-default-border-color, #f7f7f7);
  border-style: solid;
  color: #3d3d3d;
  color: var(--dex-okd-tabs-pane-fill-highlight-default-text-color, #3d3d3d)
}

.dex-tabs-pane.dex-tabs-pane-fill-highlight.dex-tabs-active {
  background-color: #000;
  background-color: var(--dex-okd-tabs-pane-fill-highlight-active-background-color, #000);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-fill-highlight-active-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-fill-highlight-active-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-fill-highlight.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-fill-highlight-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-fill-highlight:hover:not(.dex-tabs-active) {
  background-color: #ebebeb;
  background-color: var(--dex-okd-tabs-pane-fill-highlight-hover-background-color, #ebebeb);
  border-color: #ebebeb;
  border-color: var(--dex-okd-tabs-pane-fill-highlight-hover-border-color, #ebebeb);
  color: #3d3d3d;
  color: var(--dex-okd-tabs-pane-fill-highlight-hover-text-color, #3d3d3d)
}

.dex-tabs-pane.dex-tabs-pane-fill-primary {
  background-color: #f7f7f7;
  background-color: var(--dex-okd-tabs-pane-fill-primary-default-background-color, #f7f7f7);
  border-color: #f7f7f7;
  border-color: var(--dex-okd-tabs-pane-fill-primary-default-border-color, #f7f7f7);
  border-style: solid;
  color: #929292;
  color: var(--dex-okd-tabs-pane-fill-primary-default-text-color, #929292)
}

.dex-tabs-pane.dex-tabs-pane-fill-primary.dex-tabs-active {
  background-color: #f7f7f7;
  background-color: var(--dex-okd-tabs-pane-fill-primary-active-background-color, #f7f7f7);
  border-color: #f7f7f7;
  border-color: var(--dex-okd-tabs-pane-fill-primary-active-border-color, #f7f7f7);
  color: #000;
  color: var(--dex-okd-tabs-pane-fill-primary-active-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-fill-primary.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #000;
  outline-color: var(--dex-okd-tabs-pane-fill-primary-active-text-color, #000);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-fill-primary:hover:not(.dex-tabs-active) {
  background-color: #ebebeb;
  background-color: var(--dex-okd-tabs-pane-fill-primary-hover-background-color, #ebebeb);
  border-color: #ebebeb;
  border-color: var(--dex-okd-tabs-pane-fill-primary-hover-border-color, #ebebeb);
  color: #000;
  color: var(--dex-okd-tabs-pane-fill-primary-hover-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-fill-secondary {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-fill-secondary-default-background-color, transparent);
  border-color: transparent;
  border-color: var(--dex-okd-tabs-pane-fill-secondary-default-border-color, transparent);
  border-style: solid;
  color: #929292;
  color: var(--dex-okd-tabs-pane-fill-secondary-default-text-color, #929292)
}

.dex-tabs-pane.dex-tabs-pane-fill-secondary.dex-tabs-active {
  background-color: #f7f7f7;
  background-color: var(--dex-okd-tabs-pane-fill-secondary-active-background-color, #f7f7f7);
  border-color: #f7f7f7;
  border-color: var(--dex-okd-tabs-pane-fill-secondary-active-border-color, #f7f7f7);
  color: #000;
  color: var(--dex-okd-tabs-pane-fill-secondary-active-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-fill-secondary.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #000;
  outline-color: var(--dex-okd-tabs-pane-fill-secondary-active-text-color, #000);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-fill-secondary:hover:not(.dex-tabs-active) {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-fill-secondary-hover-background-color, transparent);
  border-color: transparent;
  border-color: var(--dex-okd-tabs-pane-fill-secondary-hover-border-color, transparent);
  color: #000;
  color: var(--dex-okd-tabs-pane-fill-secondary-hover-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-fill-reversed {
  background-color: #f7f7f7;
  background-color: var(--dex-okd-tabs-pane-fill-reversed-default-background-color, #f7f7f7);
  border-color: #f7f7f7;
  border-color: var(--dex-okd-tabs-pane-fill-reversed-default-border-color, #f7f7f7);
  border-style: solid;
  color: #3d3d3d;
  color: var(--dex-okd-tabs-pane-fill-reversed-default-text-color, #3d3d3d)
}

.dex-tabs-pane.dex-tabs-pane-fill-reversed:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-fill-reversed-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-fill-reversed.dex-tabs-active {
  background-color: #000;
  background-color: var(--dex-okd-tabs-pane-fill-reversed-active-background-color, #000);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-fill-reversed-active-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-fill-reversed-active-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-fill-reversed.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-fill-reversed-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-fill-reversed:hover:not(.dex-tabs-active) {
  background-color: #ebebeb;
  background-color: var(--dex-okd-tabs-pane-fill-reversed-hover-background-color, #ebebeb);
  border-color: #ebebeb;
  border-color: var(--dex-okd-tabs-pane-fill-reversed-hover-border-color, #ebebeb);
  color: #3d3d3d;
  color: var(--dex-okd-tabs-pane-fill-reversed-hover-text-color, #3d3d3d)
}

.dex-tabs-pane.dex-tabs-pane-text-highlight {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-highlight-default-background-color, transparent);
  border-color: transparent;
  border-color: var(--dex-okd-tabs-pane-text-highlight-default-border-color, transparent);
  border-style: solid;
  color: #929292;
  color: var(--dex-okd-tabs-pane-text-highlight-default-text-color, #929292)
}

.dex-tabs-pane.dex-tabs-pane-text-highlight.dex-tabs-active {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-highlight-active-background-color, transparent);
  border-color: transparent;
  border-color: var(--dex-okd-tabs-pane-text-highlight-active-border-color, transparent);
  color: #000;
  color: var(--dex-okd-tabs-pane-text-highlight-active-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-text-highlight.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #000;
  outline-color: var(--dex-okd-tabs-pane-text-highlight-active-text-color, #000);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-text-highlight:hover:not(.dex-tabs-active) {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-highlight-hover-background-color, transparent);
  border-color: transparent;
  border-color: var(--dex-okd-tabs-pane-text-highlight-hover-border-color, transparent);
  color: #000;
  color: var(--dex-okd-tabs-pane-text-highlight-hover-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-text-primary {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-primary-default-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-text-primary-default-border-color, #000);
  border-style: solid;
  color: #fff;
  color: var(--dex-okd-tabs-pane-text-primary-default-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-text-primary.dex-tabs-active {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-primary-active-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-text-primary-active-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-text-primary-active-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-text-primary.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-text-primary-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-text-primary:hover:not(.dex-tabs-active) {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-primary-hover-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-text-primary-hover-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-text-primary-hover-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-text-secondary {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-secondary-default-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-text-secondary-default-border-color, #000);
  border-style: solid;
  color: #fff;
  color: var(--dex-okd-tabs-pane-text-secondary-default-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-text-secondary.dex-tabs-active {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-secondary-active-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-text-secondary-active-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-text-secondary-active-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-text-secondary.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-text-secondary-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-text-secondary:hover:not(.dex-tabs-active) {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-secondary-hover-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-text-secondary-hover-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-text-secondary-hover-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-text-reversed {
  background-color: #f7f7f7;
  background-color: var(--dex-okd-tabs-pane-text-reversed-default-background-color, #f7f7f7);
  border-color: #f7f7f7;
  border-color: var(--dex-okd-tabs-pane-text-reversed-default-border-color, #f7f7f7);
  border-style: solid;
  color: #3d3d3d;
  color: var(--dex-okd-tabs-pane-text-reversed-default-text-color, #3d3d3d)
}

.dex-tabs-pane.dex-tabs-pane-text-reversed:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-text-reversed-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-text-reversed.dex-tabs-active {
  background-color: #000;
  background-color: var(--dex-okd-tabs-pane-text-reversed-active-background-color, #000);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-text-reversed-active-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-text-reversed-active-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-text-reversed.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-text-reversed-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-text-reversed:hover:not(.dex-tabs-active) {
  background-color: #ebebeb;
  background-color: var(--dex-okd-tabs-pane-text-reversed-hover-background-color, #ebebeb);
  border-color: #ebebeb;
  border-color: var(--dex-okd-tabs-pane-text-reversed-hover-border-color, #ebebeb);
  color: #3d3d3d;
  color: var(--dex-okd-tabs-pane-text-reversed-hover-text-color, #3d3d3d)
}

.dex-tabs-pane-xxs.category-size {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-pane-xxs-border-radius, 4px);
  border-width: 1px;
  border-width: var(--dex-okd-tabs-pane-xxs-border-width, 1px);
  font-size: 12px;
  font-size: var(--dex-okd-tabs-pane-xxs-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-pane-xxs-font-weight, 400);
  height: 24px;
  height: var(--dex-okd-tabs-pane-xxs-height, 24px);
  margin-right: 8px;
  margin-right: var(--dex-okd-tabs-pane-xxs-margin-right, 8px);
  padding: 0 8px;
  padding: 0 var(--dex-okd-tabs-pane-xxs-padding-vertical, 8px)
}

.dex-tabs-pane-xxs.category-size:last-child {
  margin-right: 0
}

.dex-tabs-pane-xxs.category-size.dex-tabs-active {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xxs-active-font-weight, 500)
}

.dex-tabs-pane-xxs.category-size:hover:not(.dex-tabs-active) {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xxs-hover-font-weight, 500)
}

.dex-tabs-pane-xxs.category-size.dex-tabs-pane-circle {
  border-radius: 12px;
  border-radius: calc(var(--dex-okd-tabs-pane-xxs-height, 24px)/2)
}

.dex-tabs-pane-xs.category-size {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-pane-xs-border-radius, 4px);
  border-width: 1px;
  border-width: var(--dex-okd-tabs-pane-xs-border-width, 1px);
  font-size: 12px;
  font-size: var(--dex-okd-tabs-pane-xs-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-pane-xs-font-weight, 400);
  height: 24px;
  height: var(--dex-okd-tabs-pane-xs-height, 24px);
  margin-right: 8px;
  margin-right: var(--dex-okd-tabs-pane-xs-margin-right, 8px);
  padding: 0 8px;
  padding: 0 var(--dex-okd-tabs-pane-xs-padding-vertical, 8px)
}

.dex-tabs-pane-xs.category-size:last-child {
  margin-right: 0
}

.dex-tabs-pane-xs.category-size.dex-tabs-active {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xs-active-font-weight, 500)
}

.dex-tabs-pane-xs.category-size:hover:not(.dex-tabs-active) {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xs-hover-font-weight, 500)
}

.dex-tabs-pane-xs.category-size.dex-tabs-pane-circle {
  border-radius: 12px;
  border-radius: calc(var(--dex-okd-tabs-pane-xs-height, 24px)/2)
}

.dex-tabs-pane-sm.category-size {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-pane-sm-border-radius, 4px);
  border-width: 1px;
  border-width: var(--dex-okd-tabs-pane-sm-border-width, 1px);
  font-size: 12px;
  font-size: var(--dex-okd-tabs-pane-sm-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-pane-sm-font-weight, 400);
  height: 28px;
  height: var(--dex-okd-tabs-pane-sm-height, 28px);
  margin-right: 8px;
  margin-right: var(--dex-okd-tabs-pane-sm-margin-right, 8px);
  padding: 0 8px;
  padding: 0 var(--dex-okd-tabs-pane-sm-padding-vertical, 8px)
}

.dex-tabs-pane-sm.category-size:last-child {
  margin-right: 0
}

.dex-tabs-pane-sm.category-size.dex-tabs-active {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-sm-active-font-weight, 500)
}

.dex-tabs-pane-sm.category-size:hover:not(.dex-tabs-active) {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-sm-hover-font-weight, 500)
}

.dex-tabs-pane-sm.category-size.dex-tabs-pane-circle {
  border-radius: 14px;
  border-radius: calc(var(--dex-okd-tabs-pane-sm-height, 28px)/2)
}

.dex-tabs-pane-md.category-size {
  border-radius: 6px;
  border-radius: var(--dex-okd-tabs-pane-md-border-radius, 6px);
  border-width: 1px;
  border-width: var(--dex-okd-tabs-pane-md-border-width, 1px);
  font-size: 14px;
  font-size: var(--dex-okd-tabs-pane-md-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-pane-md-font-weight, 400);
  height: 32px;
  height: var(--dex-okd-tabs-pane-md-height, 32px);
  margin-right: 8px;
  margin-right: var(--dex-okd-tabs-pane-md-margin-right, 8px);
  padding: 0 8px;
  padding: 0 var(--dex-okd-tabs-pane-md-padding-vertical, 8px)
}

.dex-tabs-pane-md.category-size:last-child {
  margin-right: 0
}

.dex-tabs-pane-md.category-size.dex-tabs-active {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-md-active-font-weight, 500)
}

.dex-tabs-pane-md.category-size:hover:not(.dex-tabs-active) {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-md-hover-font-weight, 500)
}

.dex-tabs-pane-md.category-size.dex-tabs-pane-circle {
  border-radius: 16px;
  border-radius: calc(var(--dex-okd-tabs-pane-md-height, 32px)/2)
}

.dex-tabs-pane-lg.category-size {
  border-radius: 6px;
  border-radius: var(--dex-okd-tabs-pane-lg-border-radius, 6px);
  border-width: 1px;
  border-width: var(--dex-okd-tabs-pane-lg-border-width, 1px);
  font-size: 14px;
  font-size: var(--dex-okd-tabs-pane-lg-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-pane-lg-font-weight, 400);
  height: 36px;
  height: var(--dex-okd-tabs-pane-lg-height, 36px);
  margin-right: 8px;
  margin-right: var(--dex-okd-tabs-pane-lg-margin-right, 8px);
  padding: 0 12px;
  padding: 0 var(--dex-okd-tabs-pane-lg-padding-vertical, 12px)
}

.dex-tabs-pane-lg.category-size:last-child {
  margin-right: 0
}

.dex-tabs-pane-lg.category-size.dex-tabs-active {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-lg-active-font-weight, 500)
}

.dex-tabs-pane-lg.category-size:hover:not(.dex-tabs-active) {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-lg-hover-font-weight, 500)
}

.dex-tabs-pane-lg.category-size.dex-tabs-pane-circle {
  border-radius: 18px;
  border-radius: calc(var(--dex-okd-tabs-pane-lg-height, 36px)/2)
}

.dex-tabs-pane-xl.category-size {
  border-radius: 8px;
  border-radius: var(--dex-okd-tabs-pane-xl-border-radius, 8px);
  border-width: 1px;
  border-width: var(--dex-okd-tabs-pane-xl-border-width, 1px);
  font-size: 14px;
  font-size: var(--dex-okd-tabs-pane-xl-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-pane-xl-font-weight, 400);
  height: 40px;
  height: var(--dex-okd-tabs-pane-xl-height, 40px);
  margin-right: 8px;
  margin-right: var(--dex-okd-tabs-pane-xl-margin-right, 8px);
  padding: 0 16px;
  padding: 0 var(--dex-okd-tabs-pane-xl-padding-vertical, 16px)
}

.dex-tabs-pane-xl.category-size:last-child {
  margin-right: 0
}

.dex-tabs-pane-xl.category-size.dex-tabs-active {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xl-active-font-weight, 500)
}

.dex-tabs-pane-xl.category-size:hover:not(.dex-tabs-active) {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xl-hover-font-weight, 500)
}

.dex-tabs-pane-xl.category-size.dex-tabs-pane-circle {
  border-radius: 20px;
  border-radius: calc(var(--dex-okd-tabs-pane-xl-height, 40px)/2)
}

.dex-tabs-pane-xxl.category-size {
  border-radius: 8px;
  border-radius: var(--dex-okd-tabs-pane-xxl-border-radius, 8px);
  border-width: 1px;
  border-width: var(--dex-okd-tabs-pane-xxl-border-width, 1px);
  font-size: 16px;
  font-size: var(--dex-okd-tabs-pane-xxl-font-size, 16px);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-pane-xxl-font-weight, 400);
  height: 44px;
  height: var(--dex-okd-tabs-pane-xxl-height, 44px);
  margin-right: 8px;
  margin-right: var(--dex-okd-tabs-pane-xxl-margin-right, 8px);
  padding: 0 16px;
  padding: 0 var(--dex-okd-tabs-pane-xxl-padding-vertical, 16px)
}

.dex-tabs-pane-xxl.category-size:last-child {
  margin-right: 0
}

.dex-tabs-pane-xxl.category-size.dex-tabs-active {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xxl-active-font-weight, 500)
}

.dex-tabs-pane-xxl.category-size:hover:not(.dex-tabs-active) {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xxl-hover-font-weight, 500)
}

.dex-tabs-pane-xxl.category-size.dex-tabs-pane-circle {
  border-radius: 22px;
  border-radius: calc(var(--dex-okd-tabs-pane-xxl-height, 44px)/2)
}

.dex-tabs-pane-xxxl.category-size {
  border-radius: 10px;
  border-radius: var(--dex-okd-tabs-pane-xxxl-border-radius, 10px);
  border-width: 1px;
  border-width: var(--dex-okd-tabs-pane-xxxl-border-width, 1px);
  font-size: 18px;
  font-size: var(--dex-okd-tabs-pane-xxxl-font-size, 18px);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-pane-xxxl-font-weight, 400);
  height: 50px;
  height: var(--dex-okd-tabs-pane-xxxl-height, 50px);
  margin-right: 8px;
  margin-right: var(--dex-okd-tabs-pane-xxxl-margin-right, 8px);
  padding: 0 16px;
  padding: 0 var(--dex-okd-tabs-pane-xxxl-padding-vertical, 16px)
}

.dex-tabs-pane-xxxl.category-size:last-child {
  margin-right: 0
}

.dex-tabs-pane-xxxl.category-size.dex-tabs-active {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xxxl-active-font-weight, 500)
}

.dex-tabs-pane-xxxl.category-size:hover:not(.dex-tabs-active) {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xxxl-hover-font-weight, 500)
}

.dex-tabs-pane-xxxl.category-size.dex-tabs-pane-circle {
  border-radius: 25px;
  border-radius: calc(var(--dex-okd-tabs-pane-xxxl-height, 50px)/2)
}

.dex-tabs-pane-xxs:last-child {
  margin-right: 0 !important
}

.dex-tabs-pane-xxs.dex-tabs-pane-underline {
  font-size: var(--dex-okd-tabs-xxs-underline-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxs-underline-font-weight, 400);
  margin-right: var(--dex-okd-tabs-xxs-underline-spacing);
  padding: 0 var(--dex-okd-tabs-xxs-underline-label-padding)
}

.dex-tabs-pane-xxs.dex-tabs-pane-underline.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxs-underline-height)/2)
}

.dex-tabs-pane-xxs.dex-tabs-pane-underline-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxs-underline-active-font-weight, 400)
}

.dex-tabs-pane-xxs.dex-tabs-pane-button {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxs-button-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxs-button-font-size);
  font-weight: var(--dex-okd-tabs-xxs-button-font-weight);
  margin-right: var(--dex-okd-tabs-xxs-button-spacing);
  padding: 0 var(--dex-okd-tabs-xxs-button-label-padding)
}

.dex-tabs-pane-xxs.dex-tabs-pane-button.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxs-button-height)/2)
}

.dex-tabs-pane-xxs.dex-tabs-pane-button-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxs-button-active-font-weight, 400)
}

.dex-tabs-pane-xxs.dex-tabs-pane-muted {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxs-muted-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxs-muted-font-size);
  font-weight: var(--dex-okd-tabs-xxs-muted-font-weight);
  margin-right: var(--dex-okd-tabs-xxs-muted-spacing);
  padding: 0 var(--dex-okd-tabs-xxs-muted-label-padding)
}

.dex-tabs-pane-xxs.dex-tabs-pane-muted.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxs-muted-height)/2)
}

.dex-tabs-pane-xxs.dex-tabs-pane-muted-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxs-muted-active-font-weight, 400)
}

.dex-tabs-pane-xxs.dex-tabs-pane-segmented {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxs-segmented-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxs-segmented-font-size);
  font-weight: var(--dex-okd-tabs-xxs-segmented-font-weight);
  margin-right: var(--dex-okd-tabs-xxs-segmented-spacing);
  padding: 0 var(--dex-okd-tabs-xxs-segmented-label-padding)
}

.dex-tabs-pane-xxs.dex-tabs-pane-segmented-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxs-segmented-active-font-weight, 400)
}

.dex-tabs-pane-xxs.dex-tabs-pane-segmented.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxs-segmented-height)/2)
}

.dex-tabs-pane-list-xxs .dex-tabs-pane-list-nav-icon .icon {
  font-size: var(--dex-okd-tabs-xxs-common-icon-size)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-underline {
  font-size: var(--dex-okd-tabs-xxs-underline-font-size);
  height: var(--dex-okd-tabs-xxs-underline-height)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-underline .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxs-underline-height)/2)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-button {
  font-size: var(--dex-okd-tabs-xxs-button-font-size);
  height: var(--dex-okd-tabs-xxs-button-height);
  line-height: var(--dex-okd-tabs-xxs-button-height)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-button .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxs-button-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-button .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxs-button-height)/2)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-muted {
  font-size: var(--dex-okd-tabs-xxs-muted-font-size);
  height: var(--dex-okd-tabs-xxs-muted-height);
  line-height: var(--dex-okd-tabs-xxs-muted-height)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-muted .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxs-muted-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-muted .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxs-muted-height)/2)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-segmented {
  font-size: var(--dex-okd-tabs-xxs-segmented-font-size);
  height: var(--dex-okd-tabs-xxs-segmented-height);
  line-height: var(--dex-okd-tabs-xxs-segmented-height)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxs-segmented-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-segmented .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxs-segmented-height)/2)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-segmented .dex-tabs-pane-list-flex {
  padding: var(--dex-okd-tabs-xxs-segmented-container-padding)
}

.dex-tabs-pane-xs:last-child {
  margin-right: 0 !important
}

.dex-tabs-pane-xs.dex-tabs-pane-underline {
  font-size: var(--dex-okd-tabs-xs-underline-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xs-underline-font-weight, 400);
  margin-right: var(--dex-okd-tabs-xs-underline-spacing);
  padding: 0 var(--dex-okd-tabs-xs-underline-label-padding)
}

.dex-tabs-pane-xs.dex-tabs-pane-underline.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xs-underline-height)/2)
}

.dex-tabs-pane-xs.dex-tabs-pane-underline-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xs-underline-active-font-weight, 400)
}

.dex-tabs-pane-xs.dex-tabs-pane-button {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xs-button-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xs-button-font-size);
  font-weight: var(--dex-okd-tabs-xs-button-font-weight);
  margin-right: var(--dex-okd-tabs-xs-button-spacing);
  padding: 0 var(--dex-okd-tabs-xs-button-label-padding)
}

.dex-tabs-pane-xs.dex-tabs-pane-button.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xs-button-height)/2)
}

.dex-tabs-pane-xs.dex-tabs-pane-button-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xs-button-active-font-weight, 400)
}

.dex-tabs-pane-xs.dex-tabs-pane-muted {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xs-muted-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xs-muted-font-size);
  font-weight: var(--dex-okd-tabs-xs-muted-font-weight);
  margin-right: var(--dex-okd-tabs-xs-muted-spacing);
  padding: 0 var(--dex-okd-tabs-xs-muted-label-padding)
}

.dex-tabs-pane-xs.dex-tabs-pane-muted.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xs-muted-height)/2)
}

.dex-tabs-pane-xs.dex-tabs-pane-muted-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xs-muted-active-font-weight, 400)
}

.dex-tabs-pane-xs.dex-tabs-pane-segmented {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xs-segmented-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xs-segmented-font-size);
  font-weight: var(--dex-okd-tabs-xs-segmented-font-weight);
  margin-right: var(--dex-okd-tabs-xs-segmented-spacing);
  padding: 0 var(--dex-okd-tabs-xs-segmented-label-padding)
}

.dex-tabs-pane-xs.dex-tabs-pane-segmented-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xs-segmented-active-font-weight, 400)
}

.dex-tabs-pane-xs.dex-tabs-pane-segmented.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xs-segmented-height)/2)
}

.dex-tabs-pane-list-xs .dex-tabs-pane-list-nav-icon .icon {
  font-size: var(--dex-okd-tabs-xs-common-icon-size)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-underline {
  font-size: var(--dex-okd-tabs-xs-underline-font-size);
  height: var(--dex-okd-tabs-xs-underline-height)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-underline .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xs-underline-height)/2)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-button {
  font-size: var(--dex-okd-tabs-xs-button-font-size);
  height: var(--dex-okd-tabs-xs-button-height);
  line-height: var(--dex-okd-tabs-xs-button-height)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-button .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xs-button-container-border-radius, 4px)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-button .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xs-button-height)/2)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-muted {
  font-size: var(--dex-okd-tabs-xs-muted-font-size);
  height: var(--dex-okd-tabs-xs-muted-height);
  line-height: var(--dex-okd-tabs-xs-muted-height)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-muted .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xs-muted-container-border-radius, 4px)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-muted .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xs-muted-height)/2)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-segmented {
  font-size: var(--dex-okd-tabs-xs-segmented-font-size);
  height: var(--dex-okd-tabs-xs-segmented-height);
  line-height: var(--dex-okd-tabs-xs-segmented-height)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xs-segmented-container-border-radius, 4px)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-segmented .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xs-segmented-height)/2)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-segmented .dex-tabs-pane-list-flex {
  padding: var(--dex-okd-tabs-xs-segmented-container-padding)
}

.dex-tabs-pane-sm:last-child {
  margin-right: 0 !important
}

.dex-tabs-pane-sm.dex-tabs-pane-underline {
  font-size: var(--dex-okd-tabs-sm-underline-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-sm-underline-font-weight, 400);
  margin-right: var(--dex-okd-tabs-sm-underline-spacing);
  padding: 0 var(--dex-okd-tabs-sm-underline-label-padding)
}

.dex-tabs-pane-sm.dex-tabs-pane-underline.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-sm-underline-height)/2)
}

.dex-tabs-pane-sm.dex-tabs-pane-underline-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-sm-underline-active-font-weight, 400)
}

.dex-tabs-pane-sm.dex-tabs-pane-button {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-sm-button-border-radius, 4px);
  font-size: var(--dex-okd-tabs-sm-button-font-size);
  font-weight: var(--dex-okd-tabs-sm-button-font-weight);
  margin-right: var(--dex-okd-tabs-sm-button-spacing);
  padding: 0 var(--dex-okd-tabs-sm-button-label-padding)
}

.dex-tabs-pane-sm.dex-tabs-pane-button.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-sm-button-height)/2)
}

.dex-tabs-pane-sm.dex-tabs-pane-button-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-sm-button-active-font-weight, 400)
}

.dex-tabs-pane-sm.dex-tabs-pane-muted {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-sm-muted-border-radius, 4px);
  font-size: var(--dex-okd-tabs-sm-muted-font-size);
  font-weight: var(--dex-okd-tabs-sm-muted-font-weight);
  margin-right: var(--dex-okd-tabs-sm-muted-spacing);
  padding: 0 var(--dex-okd-tabs-sm-muted-label-padding)
}

.dex-tabs-pane-sm.dex-tabs-pane-muted.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-sm-muted-height)/2)
}

.dex-tabs-pane-sm.dex-tabs-pane-muted-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-sm-muted-active-font-weight, 400)
}

.dex-tabs-pane-sm.dex-tabs-pane-segmented {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-sm-segmented-border-radius, 4px);
  font-size: var(--dex-okd-tabs-sm-segmented-font-size);
  font-weight: var(--dex-okd-tabs-sm-segmented-font-weight);
  margin-right: var(--dex-okd-tabs-sm-segmented-spacing);
  padding: 0 var(--dex-okd-tabs-sm-segmented-label-padding)
}

.dex-tabs-pane-sm.dex-tabs-pane-segmented-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-sm-segmented-active-font-weight, 400)
}

.dex-tabs-pane-sm.dex-tabs-pane-segmented.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-sm-segmented-height)/2)
}

.dex-tabs-pane-list-sm .dex-tabs-pane-list-nav-icon .icon {
  font-size: var(--dex-okd-tabs-sm-common-icon-size)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-underline {
  font-size: var(--dex-okd-tabs-sm-underline-font-size);
  height: var(--dex-okd-tabs-sm-underline-height)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-underline .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-sm-underline-height)/2)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-button {
  font-size: var(--dex-okd-tabs-sm-button-font-size);
  height: var(--dex-okd-tabs-sm-button-height);
  line-height: var(--dex-okd-tabs-sm-button-height)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-button .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-sm-button-container-border-radius, 4px)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-button .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-sm-button-height)/2)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-muted {
  font-size: var(--dex-okd-tabs-sm-muted-font-size);
  height: var(--dex-okd-tabs-sm-muted-height);
  line-height: var(--dex-okd-tabs-sm-muted-height)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-muted .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-sm-muted-container-border-radius, 4px)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-muted .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-sm-muted-height)/2)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-segmented {
  font-size: var(--dex-okd-tabs-sm-segmented-font-size);
  height: var(--dex-okd-tabs-sm-segmented-height);
  line-height: var(--dex-okd-tabs-sm-segmented-height)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-sm-segmented-container-border-radius, 4px)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-segmented .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-sm-segmented-height)/2)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-segmented .dex-tabs-pane-list-flex {
  padding: var(--dex-okd-tabs-sm-segmented-container-padding)
}

.dex-tabs-pane-md:last-child {
  margin-right: 0 !important
}

.dex-tabs-pane-md.dex-tabs-pane-underline {
  font-size: var(--dex-okd-tabs-md-underline-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-md-underline-font-weight, 400);
  margin-right: var(--dex-okd-tabs-md-underline-spacing);
  padding: 0 var(--dex-okd-tabs-md-underline-label-padding)
}

.dex-tabs-pane-md.dex-tabs-pane-underline.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-md-underline-height)/2)
}

.dex-tabs-pane-md.dex-tabs-pane-underline-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-md-underline-active-font-weight, 400)
}

.dex-tabs-pane-md.dex-tabs-pane-button {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-md-button-border-radius, 4px);
  font-size: var(--dex-okd-tabs-md-button-font-size);
  font-weight: var(--dex-okd-tabs-md-button-font-weight);
  margin-right: var(--dex-okd-tabs-md-button-spacing);
  padding: 0 var(--dex-okd-tabs-md-button-label-padding)
}

.dex-tabs-pane-md.dex-tabs-pane-button.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-md-button-height)/2)
}

.dex-tabs-pane-md.dex-tabs-pane-button-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-md-button-active-font-weight, 400)
}

.dex-tabs-pane-md.dex-tabs-pane-muted {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-md-muted-border-radius, 4px);
  font-size: var(--dex-okd-tabs-md-muted-font-size);
  font-weight: var(--dex-okd-tabs-md-muted-font-weight);
  margin-right: var(--dex-okd-tabs-md-muted-spacing);
  padding: 0 var(--dex-okd-tabs-md-muted-label-padding)
}

.dex-tabs-pane-md.dex-tabs-pane-muted.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-md-muted-height)/2)
}

.dex-tabs-pane-md.dex-tabs-pane-muted-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-md-muted-active-font-weight, 400)
}

.dex-tabs-pane-md.dex-tabs-pane-segmented {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-md-segmented-border-radius, 4px);
  font-size: var(--dex-okd-tabs-md-segmented-font-size);
  font-weight: var(--dex-okd-tabs-md-segmented-font-weight);
  margin-right: var(--dex-okd-tabs-md-segmented-spacing);
  padding: 0 var(--dex-okd-tabs-md-segmented-label-padding)
}

.dex-tabs-pane-md.dex-tabs-pane-segmented-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-md-segmented-active-font-weight, 400)
}

.dex-tabs-pane-md.dex-tabs-pane-segmented.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-md-segmented-height)/2)
}

.dex-tabs-pane-list-md .dex-tabs-pane-list-nav-icon .icon {
  font-size: var(--dex-okd-tabs-md-common-icon-size)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-underline {
  font-size: var(--dex-okd-tabs-md-underline-font-size);
  height: var(--dex-okd-tabs-md-underline-height)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-underline .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-md-underline-height)/2)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-button {
  font-size: var(--dex-okd-tabs-md-button-font-size);
  height: var(--dex-okd-tabs-md-button-height);
  line-height: var(--dex-okd-tabs-md-button-height)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-button .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-md-button-container-border-radius, 4px)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-button .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-md-button-height)/2)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-muted {
  font-size: var(--dex-okd-tabs-md-muted-font-size);
  height: var(--dex-okd-tabs-md-muted-height);
  line-height: var(--dex-okd-tabs-md-muted-height)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-muted .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-md-muted-container-border-radius, 4px)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-muted .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-md-muted-height)/2)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-segmented {
  font-size: var(--dex-okd-tabs-md-segmented-font-size);
  height: var(--dex-okd-tabs-md-segmented-height);
  line-height: var(--dex-okd-tabs-md-segmented-height)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-md-segmented-container-border-radius, 4px)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-segmented .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-md-segmented-height)/2)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-segmented .dex-tabs-pane-list-flex {
  padding: var(--dex-okd-tabs-md-segmented-container-padding)
}

.dex-tabs-pane-lg:last-child {
  margin-right: 0 !important
}

.dex-tabs-pane-lg.dex-tabs-pane-underline {
  font-size: var(--dex-okd-tabs-lg-underline-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-lg-underline-font-weight, 400);
  margin-right: var(--dex-okd-tabs-lg-underline-spacing);
  padding: 0 var(--dex-okd-tabs-lg-underline-label-padding)
}

.dex-tabs-pane-lg.dex-tabs-pane-underline.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-lg-underline-height)/2)
}

.dex-tabs-pane-lg.dex-tabs-pane-underline-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-lg-underline-active-font-weight, 400)
}

.dex-tabs-pane-lg.dex-tabs-pane-button {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-lg-button-border-radius, 4px);
  font-size: var(--dex-okd-tabs-lg-button-font-size);
  font-weight: var(--dex-okd-tabs-lg-button-font-weight);
  margin-right: var(--dex-okd-tabs-lg-button-spacing);
  padding: 0 var(--dex-okd-tabs-lg-button-label-padding)
}

.dex-tabs-pane-lg.dex-tabs-pane-button.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-lg-button-height)/2)
}

.dex-tabs-pane-lg.dex-tabs-pane-button-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-lg-button-active-font-weight, 400)
}

.dex-tabs-pane-lg.dex-tabs-pane-muted {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-lg-muted-border-radius, 4px);
  font-size: var(--dex-okd-tabs-lg-muted-font-size);
  font-weight: var(--dex-okd-tabs-lg-muted-font-weight);
  margin-right: var(--dex-okd-tabs-lg-muted-spacing);
  padding: 0 var(--dex-okd-tabs-lg-muted-label-padding)
}

.dex-tabs-pane-lg.dex-tabs-pane-muted.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-lg-muted-height)/2)
}

.dex-tabs-pane-lg.dex-tabs-pane-muted-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-lg-muted-active-font-weight, 400)
}

.dex-tabs-pane-lg.dex-tabs-pane-segmented {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-lg-segmented-border-radius, 4px);
  font-size: var(--dex-okd-tabs-lg-segmented-font-size);
  font-weight: var(--dex-okd-tabs-lg-segmented-font-weight);
  margin-right: var(--dex-okd-tabs-lg-segmented-spacing);
  padding: 0 var(--dex-okd-tabs-lg-segmented-label-padding)
}

.dex-tabs-pane-lg.dex-tabs-pane-segmented-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-lg-segmented-active-font-weight, 400)
}

.dex-tabs-pane-lg.dex-tabs-pane-segmented.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-lg-segmented-height)/2)
}

.dex-tabs-pane-list-lg .dex-tabs-pane-list-nav-icon .icon {
  font-size: var(--dex-okd-tabs-lg-common-icon-size)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-underline {
  font-size: var(--dex-okd-tabs-lg-underline-font-size);
  height: var(--dex-okd-tabs-lg-underline-height)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-underline .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-lg-underline-height)/2)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-button {
  font-size: var(--dex-okd-tabs-lg-button-font-size);
  height: var(--dex-okd-tabs-lg-button-height);
  line-height: var(--dex-okd-tabs-lg-button-height)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-button .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-lg-button-container-border-radius, 4px)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-button .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-lg-button-height)/2)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-muted {
  font-size: var(--dex-okd-tabs-lg-muted-font-size);
  height: var(--dex-okd-tabs-lg-muted-height);
  line-height: var(--dex-okd-tabs-lg-muted-height)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-muted .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-lg-muted-container-border-radius, 4px)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-muted .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-lg-muted-height)/2)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-segmented {
  font-size: var(--dex-okd-tabs-lg-segmented-font-size);
  height: var(--dex-okd-tabs-lg-segmented-height);
  line-height: var(--dex-okd-tabs-lg-segmented-height)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-lg-segmented-container-border-radius, 4px)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-segmented .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-lg-segmented-height)/2)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-segmented .dex-tabs-pane-list-flex {
  padding: var(--dex-okd-tabs-lg-segmented-container-padding)
}

.dex-tabs-pane-xl:last-child {
  margin-right: 0 !important
}

.dex-tabs-pane-xl.dex-tabs-pane-underline {
  font-size: var(--dex-okd-tabs-xl-underline-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xl-underline-font-weight, 400);
  margin-right: var(--dex-okd-tabs-xl-underline-spacing);
  padding: 0 var(--dex-okd-tabs-xl-underline-label-padding)
}

.dex-tabs-pane-xl.dex-tabs-pane-underline.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xl-underline-height)/2)
}

.dex-tabs-pane-xl.dex-tabs-pane-underline-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xl-underline-active-font-weight, 400)
}

.dex-tabs-pane-xl.dex-tabs-pane-button {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xl-button-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xl-button-font-size);
  font-weight: var(--dex-okd-tabs-xl-button-font-weight);
  margin-right: var(--dex-okd-tabs-xl-button-spacing);
  padding: 0 var(--dex-okd-tabs-xl-button-label-padding)
}

.dex-tabs-pane-xl.dex-tabs-pane-button.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xl-button-height)/2)
}

.dex-tabs-pane-xl.dex-tabs-pane-button-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xl-button-active-font-weight, 400)
}

.dex-tabs-pane-xl.dex-tabs-pane-muted {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xl-muted-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xl-muted-font-size);
  font-weight: var(--dex-okd-tabs-xl-muted-font-weight);
  margin-right: var(--dex-okd-tabs-xl-muted-spacing);
  padding: 0 var(--dex-okd-tabs-xl-muted-label-padding)
}

.dex-tabs-pane-xl.dex-tabs-pane-muted.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xl-muted-height)/2)
}

.dex-tabs-pane-xl.dex-tabs-pane-muted-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xl-muted-active-font-weight, 400)
}

.dex-tabs-pane-xl.dex-tabs-pane-segmented {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xl-segmented-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xl-segmented-font-size);
  font-weight: var(--dex-okd-tabs-xl-segmented-font-weight);
  margin-right: var(--dex-okd-tabs-xl-segmented-spacing);
  padding: 0 var(--dex-okd-tabs-xl-segmented-label-padding)
}

.dex-tabs-pane-xl.dex-tabs-pane-segmented-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xl-segmented-active-font-weight, 400)
}

.dex-tabs-pane-xl.dex-tabs-pane-segmented.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xl-segmented-height)/2)
}

.dex-tabs-pane-list-xl .dex-tabs-pane-list-nav-icon .icon {
  font-size: var(--dex-okd-tabs-xl-common-icon-size)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-underline {
  font-size: var(--dex-okd-tabs-xl-underline-font-size);
  height: var(--dex-okd-tabs-xl-underline-height)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-underline .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xl-underline-height)/2)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-button {
  font-size: var(--dex-okd-tabs-xl-button-font-size);
  height: var(--dex-okd-tabs-xl-button-height);
  line-height: var(--dex-okd-tabs-xl-button-height)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-button .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xl-button-container-border-radius, 4px)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-button .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xl-button-height)/2)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-muted {
  font-size: var(--dex-okd-tabs-xl-muted-font-size);
  height: var(--dex-okd-tabs-xl-muted-height);
  line-height: var(--dex-okd-tabs-xl-muted-height)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-muted .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xl-muted-container-border-radius, 4px)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-muted .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xl-muted-height)/2)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-segmented {
  font-size: var(--dex-okd-tabs-xl-segmented-font-size);
  height: var(--dex-okd-tabs-xl-segmented-height);
  line-height: var(--dex-okd-tabs-xl-segmented-height)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xl-segmented-container-border-radius, 4px)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xl-segmented-height)/2)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-flex {
  padding: var(--dex-okd-tabs-xl-segmented-container-padding)
}

.dex-tabs-pane-xxl:last-child {
  margin-right: 0 !important
}

.dex-tabs-pane-xxl.dex-tabs-pane-underline {
  font-size: var(--dex-okd-tabs-xxl-underline-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxl-underline-font-weight, 400);
  margin-right: var(--dex-okd-tabs-xxl-underline-spacing);
  padding: 0 var(--dex-okd-tabs-xxl-underline-label-padding)
}

.dex-tabs-pane-xxl.dex-tabs-pane-underline.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxl-underline-height)/2)
}

.dex-tabs-pane-xxl.dex-tabs-pane-underline-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxl-underline-active-font-weight, 400)
}

.dex-tabs-pane-xxl.dex-tabs-pane-button {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxl-button-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxl-button-font-size);
  font-weight: var(--dex-okd-tabs-xxl-button-font-weight);
  margin-right: var(--dex-okd-tabs-xxl-button-spacing);
  padding: 0 var(--dex-okd-tabs-xxl-button-label-padding)
}

.dex-tabs-pane-xxl.dex-tabs-pane-button.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxl-button-height)/2)
}

.dex-tabs-pane-xxl.dex-tabs-pane-button-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxl-button-active-font-weight, 400)
}

.dex-tabs-pane-xxl.dex-tabs-pane-muted {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxl-muted-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxl-muted-font-size);
  font-weight: var(--dex-okd-tabs-xxl-muted-font-weight);
  margin-right: var(--dex-okd-tabs-xxl-muted-spacing);
  padding: 0 var(--dex-okd-tabs-xxl-muted-label-padding)
}

.dex-tabs-pane-xxl.dex-tabs-pane-muted.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxl-muted-height)/2)
}

.dex-tabs-pane-xxl.dex-tabs-pane-muted-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxl-muted-active-font-weight, 400)
}

.dex-tabs-pane-xxl.dex-tabs-pane-segmented {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxl-segmented-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxl-segmented-font-size);
  font-weight: var(--dex-okd-tabs-xxl-segmented-font-weight);
  margin-right: var(--dex-okd-tabs-xxl-segmented-spacing);
  padding: 0 var(--dex-okd-tabs-xxl-segmented-label-padding)
}

.dex-tabs-pane-xxl.dex-tabs-pane-segmented-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxl-segmented-active-font-weight, 400)
}

.dex-tabs-pane-xxl.dex-tabs-pane-segmented.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxl-segmented-height)/2)
}

.dex-tabs-pane-list-xxl .dex-tabs-pane-list-nav-icon .icon {
  font-size: var(--dex-okd-tabs-xxl-common-icon-size)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-underline {
  font-size: var(--dex-okd-tabs-xxl-underline-font-size);
  height: var(--dex-okd-tabs-xxl-underline-height)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-underline .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxl-underline-height)/2)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-button {
  font-size: var(--dex-okd-tabs-xxl-button-font-size);
  height: var(--dex-okd-tabs-xxl-button-height);
  line-height: var(--dex-okd-tabs-xxl-button-height)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-button .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxl-button-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-button .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxl-button-height)/2)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-muted {
  font-size: var(--dex-okd-tabs-xxl-muted-font-size);
  height: var(--dex-okd-tabs-xxl-muted-height);
  line-height: var(--dex-okd-tabs-xxl-muted-height)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-muted .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxl-muted-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-muted .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxl-muted-height)/2)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-segmented {
  font-size: var(--dex-okd-tabs-xxl-segmented-font-size);
  height: var(--dex-okd-tabs-xxl-segmented-height);
  line-height: var(--dex-okd-tabs-xxl-segmented-height)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxl-segmented-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxl-segmented-height)/2)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-flex {
  padding: var(--dex-okd-tabs-xxl-segmented-container-padding)
}

.dex-tabs-pane-xxxl:last-child {
  margin-right: 0 !important
}

.dex-tabs-pane-xxxl.dex-tabs-pane-underline {
  font-size: var(--dex-okd-tabs-xxxl-underline-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxxl-underline-font-weight, 400);
  margin-right: var(--dex-okd-tabs-xxxl-underline-spacing);
  padding: 0 var(--dex-okd-tabs-xxxl-underline-label-padding)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-underline.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxxl-underline-height)/2)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-underline-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxxl-underline-active-font-weight, 400)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-button {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxxl-button-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxxl-button-font-size);
  font-weight: var(--dex-okd-tabs-xxxl-button-font-weight);
  margin-right: var(--dex-okd-tabs-xxxl-button-spacing);
  padding: 0 var(--dex-okd-tabs-xxxl-button-label-padding)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-button.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxxl-button-height)/2)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-button-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxxl-button-active-font-weight, 400)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-muted {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxxl-muted-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxxl-muted-font-size);
  font-weight: var(--dex-okd-tabs-xxxl-muted-font-weight);
  margin-right: var(--dex-okd-tabs-xxxl-muted-spacing);
  padding: 0 var(--dex-okd-tabs-xxxl-muted-label-padding)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-muted.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxxl-muted-height)/2)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-muted-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxxl-muted-active-font-weight, 400)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-segmented {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxxl-segmented-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxxl-segmented-font-size);
  font-weight: var(--dex-okd-tabs-xxxl-segmented-font-weight);
  margin-right: var(--dex-okd-tabs-xxxl-segmented-spacing);
  padding: 0 var(--dex-okd-tabs-xxxl-segmented-label-padding)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-segmented-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxxl-segmented-active-font-weight, 400)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-segmented.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxxl-segmented-height)/2)
}

.dex-tabs-pane-list-xxxl .dex-tabs-pane-list-nav-icon .icon {
  font-size: var(--dex-okd-tabs-xxxl-common-icon-size)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-underline {
  font-size: var(--dex-okd-tabs-xxxl-underline-font-size);
  height: var(--dex-okd-tabs-xxxl-underline-height)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-underline .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxxl-underline-height)/2)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-button {
  font-size: var(--dex-okd-tabs-xxxl-button-font-size);
  height: var(--dex-okd-tabs-xxxl-button-height);
  line-height: var(--dex-okd-tabs-xxxl-button-height)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-button .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxxl-button-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-button .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxxl-button-height)/2)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-muted {
  font-size: var(--dex-okd-tabs-xxxl-muted-font-size);
  height: var(--dex-okd-tabs-xxxl-muted-height);
  line-height: var(--dex-okd-tabs-xxxl-muted-height)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-muted .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxxl-muted-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-muted .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxxl-muted-height)/2)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-segmented {
  font-size: var(--dex-okd-tabs-xxxl-segmented-font-size);
  height: var(--dex-okd-tabs-xxxl-segmented-height);
  line-height: var(--dex-okd-tabs-xxxl-segmented-height)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxxl-segmented-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxxl-segmented-height)/2)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-flex {
  padding: var(--dex-okd-tabs-xxxl-segmented-container-padding)
}

.dex-tabs-pane.dex-tabs-pane-blue-no-border.dex-tabs-pane-underline-active {
  border-bottom-color: transparent
}

.dex-tabs-pane-blue.dex-tabs-pane-underline {
  color: var(--dex-okd-tabs-underline-pane-common-label-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-underline:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: -2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-blue.dex-tabs-pane-underline-active {
  border-bottom-color: var(--dex-okd-tabs-underline-pane-blue-border-active-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-underline-active,
.dex-tabs-pane-blue.dex-tabs-pane-underline:hover:not(.is-mobile) {
  color: var(--dex-okd-tabs-underline-pane-blue-label-active-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-button {
  color: var(--dex-okd-tabs-button-pane-common-label-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-button-active {
  background-color: var(--dex-okd-tabs-button-pane-blue-bg-active-color);
  border-color: transparent;
  color: var(--dex-okd-tabs-button-pane-blue-label-active-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-button:hover:not(.is-mobile) {
  border-color: var(--dex-okd-tabs-button-pane-blue-bg-active-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-muted {
  color: var(--dex-okd-tabs-muted-pane-common-label-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-muted-active {
  border-color: var(--dex-okd-tabs-muted-pane-blue-border-active-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-muted-active,
.dex-tabs-pane-blue.dex-tabs-pane-muted:hover:not(.is-mobile) {
  color: var(--dex-okd-tabs-muted-pane-blue-label-active-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-segmented {
  color: var(--dex-okd-tabs-segmented-pane-common-label-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-segmented-active {
  background-color: var(--dex-okd-tabs-segmented-pane-blue-bg-active-color);
  color: var(--dex-okd-tabs-segmented-pane-blue-label-active-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-segmented-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-tabs-segmented-pane-blue-label-active-color);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-list-blue .dex-tabs-transitions-underline {
  background-color: var(--dex-okd-tabs-underline-pane-blue-border-active-color)
}

.dex-tabs-pane.dex-tabs-pane-grey-no-border.dex-tabs-pane-underline-active {
  border-bottom-color: transparent
}

.dex-tabs-pane-grey.dex-tabs-pane-underline {
  color: var(--dex-okd-tabs-underline-pane-common-label-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-underline:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: -2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-grey.dex-tabs-pane-underline-active {
  border-bottom-color: var(--dex-okd-tabs-underline-pane-grey-border-active-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-underline-active,
.dex-tabs-pane-grey.dex-tabs-pane-underline:hover:not(.is-mobile) {
  color: var(--dex-okd-tabs-underline-pane-grey-label-active-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-button {
  color: var(--dex-okd-tabs-button-pane-common-label-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-button-active {
  background-color: var(--dex-okd-tabs-button-pane-grey-bg-active-color);
  border-color: transparent;
  color: var(--dex-okd-tabs-button-pane-grey-label-active-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-button:hover:not(.is-mobile) {
  border-color: var(--dex-okd-tabs-button-pane-grey-bg-active-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-muted {
  color: var(--dex-okd-tabs-muted-pane-common-label-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-muted-active {
  border-color: var(--dex-okd-tabs-muted-pane-grey-border-active-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-muted-active,
.dex-tabs-pane-grey.dex-tabs-pane-muted:hover:not(.is-mobile) {
  color: var(--dex-okd-tabs-muted-pane-grey-label-active-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-segmented {
  color: var(--dex-okd-tabs-segmented-pane-common-label-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-segmented-active {
  background-color: var(--dex-okd-tabs-segmented-pane-grey-bg-active-color);
  color: var(--dex-okd-tabs-segmented-pane-grey-label-active-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-segmented-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-tabs-segmented-pane-grey-label-active-color);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-list-grey .dex-tabs-transitions-underline {
  background-color: var(--dex-okd-tabs-underline-pane-grey-border-active-color)
}

.dex-tabs-pane.dex-tabs-pane-green-no-border.dex-tabs-pane-underline-active {
  border-bottom-color: transparent
}

.dex-tabs-pane-green.dex-tabs-pane-underline {
  color: var(--dex-okd-tabs-underline-pane-common-label-color)
}

.dex-tabs-pane-green.dex-tabs-pane-underline:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: -2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-green.dex-tabs-pane-underline-active {
  border-bottom-color: var(--dex-okd-tabs-underline-pane-green-border-active-color)
}

.dex-tabs-pane-green.dex-tabs-pane-underline-active,
.dex-tabs-pane-green.dex-tabs-pane-underline:hover:not(.is-mobile) {
  color: var(--dex-okd-tabs-underline-pane-green-label-active-color)
}

.dex-tabs-pane-green.dex-tabs-pane-button {
  color: var(--dex-okd-tabs-button-pane-common-label-color)
}

.dex-tabs-pane-green.dex-tabs-pane-button-active {
  background-color: var(--dex-okd-tabs-button-pane-green-bg-active-color);
  border-color: transparent;
  color: var(--dex-okd-tabs-button-pane-green-label-active-color)
}

.dex-tabs-pane-green.dex-tabs-pane-button:hover:not(.is-mobile) {
  border-color: var(--dex-okd-tabs-button-pane-green-bg-active-color)
}

.dex-tabs-pane-green.dex-tabs-pane-muted {
  color: var(--dex-okd-tabs-muted-pane-common-label-color)
}

.dex-tabs-pane-green.dex-tabs-pane-muted-active {
  border-color: var(--dex-okd-tabs-muted-pane-green-border-active-color)
}

.dex-tabs-pane-green.dex-tabs-pane-muted-active,
.dex-tabs-pane-green.dex-tabs-pane-muted:hover:not(.is-mobile) {
  color: var(--dex-okd-tabs-muted-pane-green-label-active-color)
}

.dex-tabs-pane-green.dex-tabs-pane-segmented {
  color: var(--dex-okd-tabs-segmented-pane-common-label-color)
}

.dex-tabs-pane-green.dex-tabs-pane-segmented-active {
  background-color: var(--dex-okd-tabs-segmented-pane-green-bg-active-color);
  color: var(--dex-okd-tabs-segmented-pane-green-label-active-color)
}

.dex-tabs-pane-green.dex-tabs-pane-segmented-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-tabs-segmented-pane-green-label-active-color);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-list-green .dex-tabs-transitions-underline {
  background-color: var(--dex-okd-tabs-underline-pane-green-border-active-color)
}

.dex-tabs-pane.dex-tabs-pane-red-no-border.dex-tabs-pane-underline-active {
  border-bottom-color: transparent
}

.dex-tabs-pane-red.dex-tabs-pane-underline {
  color: var(--dex-okd-tabs-underline-pane-common-label-color)
}

.dex-tabs-pane-red.dex-tabs-pane-underline:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: -2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-red.dex-tabs-pane-underline-active {
  border-bottom-color: var(--dex-okd-tabs-underline-pane-red-border-active-color)
}

.dex-tabs-pane-red.dex-tabs-pane-underline-active,
.dex-tabs-pane-red.dex-tabs-pane-underline:hover:not(.is-mobile) {
  color: var(--dex-okd-tabs-underline-pane-red-label-active-color)
}

.dex-tabs-pane-red.dex-tabs-pane-button {
  color: var(--dex-okd-tabs-button-pane-common-label-color)
}

.dex-tabs-pane-red.dex-tabs-pane-button-active {
  background-color: var(--dex-okd-tabs-button-pane-red-bg-active-color);
  border-color: transparent;
  color: var(--dex-okd-tabs-button-pane-red-label-active-color)
}

.dex-tabs-pane-red.dex-tabs-pane-button:hover:not(.is-mobile) {
  border-color: var(--dex-okd-tabs-button-pane-red-bg-active-color)
}

.dex-tabs-pane-red.dex-tabs-pane-muted {
  color: var(--dex-okd-tabs-muted-pane-common-label-color)
}

.dex-tabs-pane-red.dex-tabs-pane-muted-active {
  border-color: var(--dex-okd-tabs-muted-pane-red-border-active-color)
}

.dex-tabs-pane-red.dex-tabs-pane-muted-active,
.dex-tabs-pane-red.dex-tabs-pane-muted:hover:not(.is-mobile) {
  color: var(--dex-okd-tabs-muted-pane-red-label-active-color)
}

.dex-tabs-pane-red.dex-tabs-pane-segmented {
  color: var(--dex-okd-tabs-segmented-pane-common-label-color)
}

.dex-tabs-pane-red.dex-tabs-pane-segmented-active {
  background-color: var(--dex-okd-tabs-segmented-pane-red-bg-active-color);
  color: var(--dex-okd-tabs-segmented-pane-red-label-active-color)
}

.dex-tabs-pane-red.dex-tabs-pane-segmented-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-tabs-segmented-pane-red-label-active-color);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-list-red .dex-tabs-transitions-underline {
  background-color: var(--dex-okd-tabs-underline-pane-red-border-active-color)
}

.dex-tabs-pane {
  align-items: center;
  box-sizing: border-box;
  color: var(--dex-okd-tabs-common-pane-label-color);
  cursor: pointer;
  display: flex;
  font-weight: 500;
  height: 100%;
  justify-content: center;
  text-align: center;
  white-space: nowrap
}

.dex-tabs-pane:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-underline {
  border-bottom: 2px solid transparent;
  padding-top: 2px
}

.dex-tabs-pane.no-active-border {
  border-bottom: none;
  padding-top: 0
}

.dex-tabs-pane-button {
  border: 1px solid var(--dex-okd-tabs-button-pane-common-border-color);
  border-radius: var(--dex-okd-tabs-button-pane-common-border-radius)
}

.dex-tabs-pane-button.dex-tabs-pane-button-no-border {
  border: none
}

.dex-tabs-pane-muted {
  border: 1px solid var(--dex-okd-tabs-muted-pane-common-border-color);
  border-radius: var(--dex-okd-tabs-muted-pane-common-border-radius)
}

.dex-tabs-pane-segmented {
  border-radius: var(--dex-okd-tabs-segmented-pane-common-border-radius);
  line-height: 1
}

.dex-tabs-pane-segmented-active {
  box-shadow: var(--dex-okd-tabs-segmented-pane-common-shadow)
}

.dex-tabs-pane-no-padding {
  padding: 0 !important
}

.dex-tabs .dex-tabs-pane.dex-tabs-pane-spacing {
  margin-right: var(--dex-okd-inner-tabs-spacing)
}

a.dex-tabs-pane {
  text-decoration: none
}

.dex-tabs-panel {
  display: none;
  width: 100%
}

.dex-tabs-panel:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: -2px;
  outline-style: solid;
  outline-width: 1px
}

.dex-tabs-panel-show {
  display: block
}

.dex-tabs-pane-list {
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  position: relative;
  width: 100%
}

.dex-tabs-pane-list-wrapper {
  display: flex;
  flex: 1 1;
  overflow: hidden;
  position: relative
}

.dex-tabs-pane-list-center {
  justify-content: center
}

.dex-tabs-pane-list-slot {
  height: 100%
}

.dex-tabs-pane-list-container {
  box-sizing: border-box;
  display: flex;
  overflow: scroll;
  position: relative;
  scroll-behavior: smooth;
  scrollbar-width: none
}

.dex-tabs-pane-list-container::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0
}

.dex-tabs-pane-list-nav {
  --dex-okd-inner-tabs-nav-button-bg-color: var(--dex-okd-tabs-common-pane-nav-icon-bg-color-1);
  cursor: pointer
}

.dex-tabs-pane-list-nav-icon {
  align-items: center;
  background-image: linear-gradient(270deg, var(--dex-okd-inner-tabs-nav-button-bg-color) 72.22%, var(--dex-okd-tabs-common-pane-nav-icon-bg-color-2) 100%);
  color: var(--dex-okd-tabs-common-pane-icon-color);
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 36px;
  z-index: 9
}

.dex-tabs-pane-list-nav-icon:hover {
  color: var(--dex-okd-tabs-common-pane-icon-active-color)
}

.dex-tabs-pane-list-nav .icon-left {
  background-image: linear-gradient(-270deg, var(--dex-okd-inner-tabs-nav-button-bg-color) 72.22%, var(--dex-okd-tabs-common-pane-nav-icon-bg-color-2) 100%);
  left: 0
}

.dex-tabs-pane-list-nav .icon-left-inner {
  transform: rotate(180deg)
}

.dex-tabs-pane-list-nav .icon-right {
  right: 0
}

.dex-tabs-pane-list-flex-shrink {
  display: flex;
  flex-shrink: 0;
  position: relative;
  transition: transform .2s
}

.dex-tabs-pane-list-flex {
  flex: 1 1
}

.dex-tabs-pane-list-overflow {
  overflow: unset
}

.dex-tabs-pane-list-average,
.dex-tabs-pane-list-average .dex-tabs-pane {
  flex: 1 1
}

.dex-tabs-pane-list-right-alpha {
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, var(--dex-okd-tabs-common-pane-icon-bg-color) 100%);
  height: 100%;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  z-index: 9
}

.dex-tabs-pane-list-underline {
  border-bottom: 1px solid var(--dex-okd-tabs-underline-pane-common-border-color)
}

.dex-tabs-pane-list-underline-no-line {
  border-bottom: none
}

.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  background-color: var(--dex-okd-tabs-segmented-pane-common-list-bg-color);
  border-radius: 4px
}

.dex-tabs-panel-list {
  display: flex;
  flex: auto;
  width: 100%
}

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

.dex-tabs-transitions-underline {
  bottom: 0;
  height: 2px;
  left: 0;
  position: absolute;
  transition: all .3s
}

.dex-selection-chips {
  align-items: center;
  background: var(--dex-okd-color-background-surface-primary);
  background: var(--dex-okd-selectionchips-default-background, var(--dex-okd-color-background-surface-primary));
  border: 1px solid transparent;
  box-sizing: border-box;
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-selectionchips-default-font-color, var(--dex-okd-color-content-primary));
  cursor: pointer;
  display: flex;
  justify-content: center;
  text-align: center
}

.dex-selection-chips.hover,
.dex-selection-chips:not(.dex-selection-chips-disabled):not(.dex-selection-chips-focus):hover {
  background: var(--dex-okd-color-background-surface-primary);
  background: var(--dex-okd-selectionchips-hover-background, var(--dex-okd-color-background-surface-primary));
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-selectionchips-hover-font-color, var(--dex-okd-color-content-primary))
}

.dex-selection-chips.active,
.dex-selection-chips:not(.dex-selection-chips-disabled):active {
  background: var(--dex-okd-color-background-surface-pressed);
  background: var(--dex-okd-selectionchips-active-background, var(--dex-okd-color-background-surface-pressed));
  border-color: var(--dex-okd-selectionchips-active-border-color, var(--dex-okd-selectionchips-focus-border-color));
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-selectionchips-active-font-color, var(--dex-okd-color-content-primary))
}

.dex-selection-chips.focus,
.dex-selection-chips:not(.dex-selection-chips-disabled).dex-selection-chips-focus {
  border-color: var(--dex-okd-selectionchips-focus-border-color, var(--dex-okd-color-border-selected))
}

.dex-selection-chips.dex-selection-chips-disabled,
.dex-selection-chips.disabled {
  background: var(--dex-okd-color-background-surface-disable);
  background: var(--dex-okd-selectionchips-disabled-background, var(--dex-okd-color-background-surface-disable));
  color: var(--dex-okd-color-content-disabled);
  color: var(--dex-okd-selectionchips-disabled-font-color, var(--dex-okd-color-content-disabled));
  cursor: not-allowed
}

.dex-selection-chips.dex-selection-chips-md {
  border-radius: 8px;
  border-radius: var(--dex-okd-selectionchips-md-border-radius, 8px);
  font-size: 14px;
  font-size: var(--dex-okd-selectionchips-md-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-selectionchips-md-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-selectionchips-md-line-height, 16px);
  min-height: 36px;
  min-height: var(--dex-okd-selectionchips-md-min-height, 36px);
  min-width: 32px;
  min-width: var(--dex-okd-selectionchips-md-min-width, 32px);
  padding: 8px;
  padding: var(--dex-okd-selectionchips-md-padding-vertical, 8px) var(--dex-okd-selectionchips-md-padding-horizontal, 8px)
}

.dex-selection-chips.dex-selection-chips-lg {
  border-radius: 8px;
  border-radius: var(--dex-okd-selectionchips-lg-border-radius, 8px);
  font-size: 14px;
  font-size: var(--dex-okd-selectionchips-lg-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-selectionchips-lg-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-selectionchips-lg-line-height, 16px);
  min-height: 40px;
  min-height: var(--dex-okd-selectionchips-lg-min-height, 40px);
  min-width: 32px;
  min-width: var(--dex-okd-selectionchips-lg-min-width, 32px);
  padding: 8px;
  padding: var(--dex-okd-selectionchips-lg-padding-vertical, 8px) var(--dex-okd-selectionchips-lg-padding-horizontal, 8px)
}

.dex-selection-chips-truncate {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden
}

.dex-selection-chips-group {
  display: flex;
  gap: 8px;
  gap: var(--dex-okd-selectionchips-group-margin-right, 8px)
}

.dex-selection-chips-group .dex-selection-chips .dex-selection-chips-truncate {
  -webkit-line-clamp: 3
}

.dex-select-empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: calc(100% - 48px);
  justify-content: center;
  min-height: 160px
}

.dex-select-empty .empty-text {
  color: var(--dex-okd-select-empty-default-text-color)
}

.dex-select-empty .empty-text-sm {
  font-size: var(--dex-okd-select-sm-empty-font-size)
}

.dex-select-empty .empty-text-md {
  font-size: var(--dex-okd-select-md-empty-font-size)
}

.dex-select-empty .empty-text-xs {
  font-size: var(--dex-okd-select-xs-empty-font-size)
}

.dex-select-empty .empty-text-lg {
  font-size: var(--dex-okd-select-md-empty-font-size);
  font-size: var(--dex-okd-select-lg-empty-font-size, var(--dex-okd-select-md-empty-font-size))
}

.dex-select-empty .empty-text-xl {
  font-size: var(--dex-okd-select-md-empty-font-size);
  font-size: var(--dex-okd-select-xl-empty-font-size, var(--dex-okd-select-md-empty-font-size))
}

.dex-select-empty .empty-text-mobile {
  font-size: 14px;
  font-size: var(--dex-okd-select-mobile-empty-font-size, 14px)
}

.dex-select-item {
  align-items: center;
  color: var(--dex-okd-select-option-default-text-color);
  cursor: pointer;
  display: flex;
  font-weight: 400;
  min-width: 90px
}

.dex-select-item.dex-select-item-active {
  background: var(--dex-okd-select-option-active-bg);
  color: var(--dex-okd-select-option-active-text-color)
}

.dex-select-item.hover,
.dex-select-item:hover {
  background: var(--dex-okd-select-option-hover-bg);
  color: var(--dex-okd-select-option-hover-text-color)
}

.dex-select-item.disabled {
  background: var(--dex-okd-select-option-disabled-bg);
  color: var(--dex-okd-select-option-disabled-text-color);
  cursor: not-allowed
}

.dex-select-item.disabled .dex-select-item-check {
  opacity: .2
}

.dex-select-item.align-center {
  justify-content: center
}

.dex-select-item.align-left {
  justify-content: flex-start
}

.dex-select-item.align-right {
  justify-content: flex-end
}

.dex-select-item-check {
  color: var(--dex-okd-select-check-default-icon-color);
  margin-left: auto
}

.dex-select-item-title {
  color: var(--dex-okd-select-common-title-color)
}

.dex-select-item-title-inner {
  display: inline-block
}

.dex-select-item-line {
  border-top: var(--dex-okd-select-option-common-line-height) solid var(--dex-okd-select-option-common-line-color);
  height: 0;
  margin: var(--dex-okd-select-option-common-line-margin-vertical) 0;
  width: 100%
}

.dex-select-item-show-check .dex-select-item-active {
  background: var(--dex-okd-select-option-active-bg)
}

.option-sm .dex-select-item-title {
  font-size: var(--dex-okd-select-sm-title-font-size);
  line-height: var(--dex-okd-select-sm-title-line-height);
  padding: var(--dex-okd-select-sm-title-padding-top) var(--dex-okd-select-sm-title-padding-horizontal) var(--dex-okd-select-sm-title-padding-bottom)
}

.option-sm .dex-select-item {
  font-size: var(--dex-okd-select-sm-option-font-size);
  line-height: var(--dex-okd-select-sm-option-line-height);
  padding: var(--dex-okd-select-sm-option-padding-vertical) var(--dex-okd-select-sm-option-padding-horizontal)
}

.option-sm .dex-select-item-check {
  font-size: 18px;
  font-size: var(--dex-okd-select-sm-option-icon-font-size, 18px);
  padding-left: 8px
}

.option-sm .dex-select-item.custom {
  padding: 0
}

.option-md .dex-select-item-title {
  font-size: var(--dex-okd-select-md-title-font-size);
  line-height: var(--dex-okd-select-md-title-line-height);
  padding: var(--dex-okd-select-md-title-padding-top) var(--dex-okd-select-md-title-padding-horizontal) var(--dex-okd-select-md-title-padding-bottom)
}

.option-md .dex-select-item {
  font-size: var(--dex-okd-select-md-option-font-size);
  line-height: var(--dex-okd-select-md-option-line-height);
  padding: var(--dex-okd-select-md-option-padding-vertical) var(--dex-okd-select-md-option-padding-horizontal)
}

.option-md .dex-select-item-check {
  font-size: 18px;
  font-size: var(--dex-okd-select-md-option-icon-font-size, 18px);
  padding-left: 8px
}

.option-md .dex-select-item.custom {
  padding: 0
}

.option-xs .dex-select-item-title {
  font-size: var(--dex-okd-select-xs-title-font-size);
  line-height: var(--dex-okd-select-xs-title-line-height);
  padding: var(--dex-okd-select-xs-title-padding-top) var(--dex-okd-select-xs-title-padding-horizontal) var(--dex-okd-select-xs-title-padding-bottom)
}

.option-xs .dex-select-item {
  font-size: var(--dex-okd-select-xs-option-font-size);
  line-height: var(--dex-okd-select-xs-option-line-height);
  padding: var(--dex-okd-select-xs-option-padding-vertical) var(--dex-okd-select-xs-option-padding-horizontal)
}

.option-xs .dex-select-item-check {
  font-size: 18px;
  font-size: var(--dex-okd-select-xs-option-icon-font-size, 18px);
  padding-left: 8px
}

.option-xs .dex-select-item.custom {
  padding: 0
}

.option-lg .dex-select-item-title {
  font-size: var(--dex-okd-select-md-title-font-size);
  font-size: var(--dex-okd-select-lg-title-font-size, var(--dex-okd-select-md-title-font-size));
  line-height: var(--dex-okd-select-md-title-line-height);
  line-height: var(--dex-okd-select-lg-title-line-height, var(--dex-okd-select-md-title-line-height));
  padding: var(--dex-okd-select-lg-title-padding-top, var(--dex-okd-select-md-title-padding-top)) var(--dex-okd-select-lg-title-padding-horizontal, var(--dex-okd-select-md-title-padding-horizontal)) var(--dex-okd-select-lg-title-padding-bottom, var(--dex-okd-select-md-title-padding-bottom))
}

.option-lg .dex-select-item {
  font-size: var(--dex-okd-select-md-option-font-size);
  font-size: var(--dex-okd-select-lg-option-font-size, var(--dex-okd-select-md-option-font-size));
  line-height: var(--dex-okd-select-md-option-line-height);
  line-height: var(--dex-okd-select-lg-option-line-height, var(--dex-okd-select-md-option-line-height));
  padding: var(--dex-okd-select-lg-option-padding-vertical, var(--dex-okd-select-md-option-padding-vertical)) var(--dex-okd-select-lg-option-padding-horizontal, var(--dex-okd-select-md-option-padding-horizontal))
}

.option-lg .dex-select-item-check {
  font-size: 18px;
  font-size: var(--dex-okd-select-lg-option-icon-font-size, 18px);
  padding-left: 8px
}

.option-lg .dex-select-item.custom {
  padding: 0
}

.option-xl .dex-select-item-title {
  font-size: var(--dex-okd-select-md-title-font-size);
  font-size: var(--dex-okd-select-xl-title-font-size, var(--dex-okd-select-md-title-font-size));
  line-height: var(--dex-okd-select-md-title-line-height);
  line-height: var(--dex-okd-select-xl-title-line-height, var(--dex-okd-select-md-title-line-height));
  padding: var(--dex-okd-select-xl-title-padding-top, var(--dex-okd-select-md-title-padding-top)) var(--dex-okd-select-xl-title-padding-horizontal, var(--dex-okd-select-md-title-padding-horizontal)) var(--dex-okd-select-xl-title-padding-bottom, var(--dex-okd-select-md-title-padding-bottom))
}

.option-xl .dex-select-item {
  font-size: var(--dex-okd-select-md-option-font-size);
  font-size: var(--dex-okd-select-xl-option-font-size, var(--dex-okd-select-md-option-font-size));
  line-height: var(--dex-okd-select-md-option-line-height);
  line-height: var(--dex-okd-select-xl-option-line-height, var(--dex-okd-select-md-option-line-height));
  padding: var(--dex-okd-select-xl-option-padding-vertical, var(--dex-okd-select-md-option-padding-vertical)) var(--dex-okd-select-xl-option-padding-horizontal, var(--dex-okd-select-md-option-padding-horizontal))
}

.option-xl .dex-select-item-check {
  font-size: 18px;
  font-size: var(--dex-okd-select-xl-option-icon-font-size, 18px);
  padding-left: 8px
}

.option-xl .dex-select-item.custom {
  padding: 0
}

@media (max-width:767px) {
  .dex-select-option:not(.drop-mode) .dex-select-item-container .dex-select-item-title {
    font-size: var(--dex-okd-select-md-title-font-size);
    font-size: var(--dex-okd-select-mobile-option-title-font-size, var(--dex-okd-select-md-title-font-size));
    line-height: var(--dex-okd-select-md-title-line-height);
    line-height: var(--dex-okd-select-mobile-option-title-line-height, var(--dex-okd-select-md-title-line-height));
    padding: var(--dex-okd-select-mobile-option-title-padding-top, var(--dex-okd-select-md-title-padding-top)) var(--dex-okd-select-mobile-option-title-padding-horizontal, var(--dex-okd-select-md-title-padding-horizontal)) var(--dex-okd-select-mobile-option-title-padding-bottom, var(--dex-okd-select-md-title-padding-bottom))
  }

  .dex-select-option:not(.drop-mode) .dex-select-item-container .dex-select-item {
    font-size: 16px;
    font-size: var(--dex-okd-select-mobile-option-font-size, 16px);
    line-height: 20px;
    line-height: var(--dex-okd-select-mobile-option-line-height, 20px);
    padding: 18px 16px;
    padding: var(--dex-okd-select-mobile-option-padding-vertical, 18px) var(--dex-okd-select-mobile-option-padding-horizontal, 16px)
  }

  .dex-select-option:not(.drop-mode) .dex-select-item-container .dex-select-item-check {
    font-size: 24px;
    font-size: var(--dex-okd-select-mobile-option-icon-font-size, 24px)
  }

  .dex-select-option:not(.drop-mode) .dex-select-item-container .dex-select-item.custom {
    padding: 0
  }
}

.dex-select-search.focus .dex-input-box.dex-select-search-box,
.dex-select-search.hover .dex-input-box.dex-select-search-box,
.dex-select-search:focus .dex-input-box.dex-select-search-box,
.dex-select-search:hover .dex-input-box.dex-select-search-box {
  background-color: var(--dex-okd-input-search-default-background);
  border-color: var(--dex-okd-input-search-default-border-color);
  box-shadow: var(--dex-okd-input-search-default-shadow)
}

.dex-select-search .dex-select-search-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.dex-select-search .dex-select-search-default-width {
  min-width: 70px;
  width: unset
}

.option-sm .dex-select-empty,
.option-sm .dex-select-search {
  margin: var(--dex-okd-select-sm-search-margin-vertical) var(--dex-okd-select-sm-search-margin-horizontal)
}

.option-md .dex-select-empty,
.option-md .dex-select-search {
  margin: var(--dex-okd-select-md-search-margin-vertical) var(--dex-okd-select-md-search-margin-horizontal)
}

.option-xs .dex-select-empty,
.option-xs .dex-select-search {
  margin: var(--dex-okd-select-xs-search-margin-vertical) var(--dex-okd-select-xs-search-margin-horizontal)
}

.option-lg .dex-select-empty,
.option-lg .dex-select-search {
  margin: var(--dex-okd-select-lg-search-margin-vertical, var(--dex-okd-select-md-search-margin-vertical)) var(--dex-okd-select-lg-search-margin-horizontal, var(--dex-okd-select-md-search-margin-horizontal))
}

.option-xl .dex-select-empty,
.option-xl .dex-select-search {
  margin: var(--dex-okd-select-xl-search-margin-vertical, var(--dex-okd-select-md-search-margin-vertical)) var(--dex-okd-select-xl-search-margin-horizontal, var(--dex-okd-select-md-search-margin-horizontal))
}

.dex-select-tag {
  align-items: center;
  background-color: #f2f2f2;
  background-color: var(--dex-okd-select-tag-default-background, #f2f2f2);
  border-radius: 4px;
  border-radius: var(--dex-okd-select-tag-border-radius, 4px);
  color: #000;
  color: var(--dex-okd-select-tag-text-default-color, #000);
  cursor: unset;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-select-tag-margin-bottom, 4px);
  margin-right: 4px;
  margin-right: var(--dex-okd-select-tag-margin-right, 4px);
  max-width: 100%;
  padding-left: 8px;
  padding-left: var(--dex-okd-select-tag-padding-horizontal, 8px);
  padding-right: 8px;
  padding-right: var(--dex-okd-select-tag-padding-horizontal, 8px)
}

.dex-select-tag-icon {
  color: #929292;
  color: var(--dex-okd-select-tag-icon-default-color, #929292);
  cursor: pointer;
  padding-left: 4px;
  padding-left: var(--dex-okd-select-tag-icon-padding-left, 4px)
}

.dex-select-tag-icon:hover {
  color: #000;
  color: var(--dex-okd-select-tag-icon-hover-color, #000)
}

.dex-select-tag-inner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.dex-select-tag.disabled {
  background-color: #f2f2f2;
  background-color: var(--dex-okd-select-tag-disabled-background, #f2f2f2);
  color: #929292;
  color: var(--dex-okd-select-tag-text-disabled-color, #929292);
  pointer-events: none
}

.dex-select-tag-sm {
  font-size: 12px;
  font-size: var(--dex-okd-select-sm-tag-text-font-size, 12px);
  height: 24px;
  height: var(--dex-okd-select-sm-tag-height, 24px);
  line-height: 24px;
  line-height: var(--dex-okd-select-sm-tag-height, 24px)
}

.dex-select-tag-sm .dex-select-tag-icon {
  font-size: 14px;
  font-size: var(--dex-okd-select-sm-tag-icon-font-size, 14px)
}

.dex-select-tag-md {
  font-size: 14px;
  font-size: var(--dex-okd-select-md-tag-text-font-size, 14px);
  height: 32px;
  height: var(--dex-okd-select-md-tag-height, 32px);
  line-height: 32px;
  line-height: var(--dex-okd-select-md-tag-height, 32px)
}

.dex-select-tag-md .dex-select-tag-icon {
  font-size: 16px;
  font-size: var(--dex-okd-select-md-tag-icon-font-size, 16px)
}

.dex-select-tag-xs {
  font-size: 12px;
  font-size: var(--dex-okd-select-xs-tag-text-font-size, 12px);
  height: 20px;
  height: var(--dex-okd-select-xs-tag-height, 20px);
  line-height: 20px;
  line-height: var(--dex-okd-select-xs-tag-height, 20px)
}

.dex-select-tag-xs .dex-select-tag-icon {
  font-size: 10px;
  font-size: var(--dex-okd-select-xs-tag-icon-font-size, 10px)
}

.dex-select-tag-lg {
  font-size: 14px;
  font-size: var(--dex-okd-select-lg-tag-text-font-size, 14px);
  height: 36px;
  height: var(--dex-okd-select-lg-tag-height, 36px);
  line-height: 36px;
  line-height: var(--dex-okd-select-lg-tag-height, 36px)
}

.dex-select-tag-lg .dex-select-tag-icon {
  font-size: 16px;
  font-size: var(--dex-okd-select-lg-tag-icon-font-size, 16px)
}

.dex-select-tag-xl {
  font-size: 14px;
  font-size: var(--dex-okd-select-xl-tag-text-font-size, 14px);
  height: 40px;
  height: var(--dex-okd-select-xl-tag-height, 40px);
  line-height: 40px;
  line-height: var(--dex-okd-select-xl-tag-height, 40px)
}

.dex-select-tag-xl .dex-select-tag-icon {
  font-size: 16px;
  font-size: var(--dex-okd-select-xl-tag-icon-font-size, 16px)
}

.dex-select-footer-dialog>.dex-select-footer {
  align-items: center;
  display: flex
}

.dex-select-footer-dialog>.dex-select-footer>.dex-select-footer-cancel {
  max-width: 30%
}

.dex-select-footer-dialog>.dex-select-footer>.dex-select-footer-confirm {
  margin-left: 12px
}

.dex-select-option-dialog-container {
  background: var(--dex-okd-select-drop-box-bg) !important;
  padding: var(--dex-okd-select-mobile-option-container-padding-vertical) 0
}

.dex-select-option.fixed-height {
  height: calc(100% - 32px);
  max-height: unset
}

.dex-select-option.fixed-height .dex-dialog-scroll-box {
  display: flex;
  flex-direction: column;
  overflow-y: hidden
}

.dex-select-option.fixed-height .dex-dialog-container {
  display: flex;
  flex-direction: column
}

.dex-select-option.fixed-height .dex-select-item-container {
  flex: 1 1
}

.dex-select-option.fixed-height .dex-select-item-container.dex-select-item-container-real {
  -webkit-overflow-scrolling: touch;
  overflow: auto
}

.dex-select-option.fixed-height.dex-select-option-fit-to-height {
  height: unset;
  max-height: calc(100% - 32px)
}

.dex-select-option.fixed-height.dex-select-option-fit-to-height .dex-dialog-container {
  max-height: 100%;
  overflow: auto
}

.dex-select-option-pc {
  cursor: auto;
  display: flex;
  flex-direction: column;
  max-height: 248px;
  padding-top: var(--dex-okd-select-drop-box-margin-top)
}

.dex-select-option-pc .dex-select-option-box {
  background: var(--dex-okd-select-drop-box-bg);
  border: 1px solid var(--dex-okd-select-drop-box-border-color);
  border-radius: var(--dex-okd-select-drop-box-border-radius);
  box-shadow: var(--dex-okd-select-drop-box-shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  padding: 4px 0
}

.dex-select-option-pc .pc-option-scroll {
  -webkit-overflow-scrolling: touch;
  flex: 1 1;
  overflow: auto
}

.dex-select-option-pc .pc-option-footer {
  border-top: thin solid var(--dex-okd-select-common-border-color);
  padding: 12px 16px
}

.dex-select-option-pc.align-left {
  right: unset
}

.dex-select-option-pc.align-right {
  left: unset
}

.dex-select-option-pc.fixed-height {
  height: unset
}

.dex-select-option-pc.fixed-height .pc-option-scroll {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  height: 276px;
  overflow: hidden
}

.dex-select-option .pc-option-scroll.dex-select-option-pc-fit-to-height {
  height: auto;
  max-height: 292px
}

.dex-select-option-mask {
  z-index: 9800
}

.dex-select .select-popup-reference {
  cursor: pointer;
  position: absolute
}

.dex-select-option-dialog-container>.dex-select-footer-dialog {
  padding: 16px
}

.dex-select-value {
  box-sizing: border-box;
  cursor: pointer;
  font-size: var(--dex-okd-select-md-text-font-size)
}

.dex-select-value-box {
  outline: none
}

.dex-select-value .value {
  align-items: center;
  color: var(--dex-okd-select-common-text-color);
  display: flex;
  margin-right: 8px;
  width: 100%
}

.dex-select-value .placeholder {
  color: var(--dex-okd-input-default-placeholder-color)
}

.dex-select-value .disabled {
  cursor: not-allowed
}

.dex-select-value .disabled .value {
  color: var(--dex-okd-input-disabled-text-color)
}

.dex-select-value .disabled .icon-sign {
  color: var(--dex-okd-select-input-select-default-icon-color);
  color: var(--dex-okd-select-input-select-disabled-icon-color, var(--dex-okd-select-input-select-default-icon-color))
}

.dex-select-value .icon-sign {
  color: var(--dex-okd-select-input-select-default-icon-color);
  font-size: var(--dex-okd-select-input-select-default-icon-size);
  margin-left: auto;
  margin-right: 4px;
  transition: transform .2s linear
}

.dex-select-inner-box {
  cursor: pointer;
  position: relative
}

.dex-select-inner-box input[readonly] {
  cursor: pointer
}

.dex-select-inner-box>.reference-suffix {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%)
}

.dex-select-tag-container {
  display: flex;
  flex-wrap: wrap;
  margin-right: 4px;
  margin-top: 4px;
  max-width: 100%;
  padding-right: 24px
}

.dex-select-tag-container-responsive {
  display: flex;
  margin-right: 24px;
  margin-top: 4px;
  width: 100%
}

.dex-input-sm .dex-select-inner-box>.reference-suffix {
  right: var(--dex-okd-input-sm-padding-horizontal)
}

.dex-input-sm.dex-select-value {
  font-size: var(--dex-okd-select-sm-text-font-size)
}

.dex-input-md .dex-select-inner-box>.reference-suffix {
  right: var(--dex-okd-input-md-padding-horizontal)
}

.dex-input-md.dex-select-value {
  font-size: var(--dex-okd-select-md-text-font-size)
}

.dex-input-xs .dex-select-inner-box>.reference-suffix {
  right: var(--dex-okd-input-xs-padding-horizontal)
}

.dex-input-xs.dex-select-value {
  font-size: var(--dex-okd-select-xs-text-font-size)
}

.dex-input-lg .dex-select-inner-box>.reference-suffix {
  right: var(--dex-okd-input-lg-padding-horizontal)
}

.dex-input-lg.dex-select-value {
  font-size: var(--dex-okd-select-lg-text-font-size);
  font-size: var(--dex-okd-select-lg-text-font-size, var(--dex-okd-select-lg-text-font-size))
}

.dex-input-xl .dex-select-inner-box>.reference-suffix {
  right: var(--dex-okd-input-xl-padding-horizontal)
}

.dex-input-xl.dex-select-value {
  font-size: var(--dex-okd-select-md-text-font-size);
  font-size: var(--dex-okd-select-xl-text-font-size, var(--dex-okd-select-md-text-font-size))
}

.dex-select-value {
  width: 100%
}

.dex-select-text-value {
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  font-size: var(--dex-okd-select-md-text-font-size);
  justify-content: flex-start
}

.dex-select-text-value.align-right {
  justify-content: flex-end
}

.dex-select-text-value .value {
  align-items: center;
  color: var(--dex-okd-select-text-select-default-font-color);
  display: flex
}

.dex-select-text-value .icon-sign {
  align-items: center;
  color: var(--dex-okd-select-text-select-default-icon-color);
  display: flex;
  font-size: var(--dex-okd-select-text-select-default-icon-size);
  margin-left: 6px;
  margin-right: 0
}

.dex-select-text-value:hover .value {
  color: var(--dex-okd-select-text-select-hover-font-color)
}

.dex-select-text-value:hover .icon-sign {
  color: var(--dex-okd-select-text-select-hover-icon-color)
}

.dex-select-text-value.focus .value {
  color: var(--dex-okd-select-text-select-select-font-color)
}

.dex-select-text-value.focus .icon-sign {
  color: var(--dex-okd-select-text-select-select-icon-color)
}

.dex-select-text-value.disabled {
  cursor: not-allowed
}

.dex-select-text-value.disabled .value {
  color: var(--dex-okd-select-text-select-disabled-font-color)
}

.dex-select-text-value.disabled .icon-sign {
  color: var(--dex-okd-select-text-select-disabled-icon-color)
}

.input-sm.dex-select-text-value {
  font-size: var(--dex-okd-select-sm-text-font-size)
}

.input-md.dex-select-text-value {
  font-size: var(--dex-okd-select-md-text-font-size)
}

.input-xs.dex-select-text-value {
  font-size: var(--dex-okd-select-xs-text-font-size)
}

.input-lg.dex-select-text-value {
  font-size: var(--dex-okd-select-lg-text-font-size);
  font-size: var(--dex-okd-select-lg-text-font-size, var(--dex-okd-select-lg-text-font-size))
}

.input-xl.dex-select-text-value {
  font-size: var(--dex-okd-select-md-text-font-size);
  font-size: var(--dex-okd-select-xl-text-font-size, var(--dex-okd-select-md-text-font-size))
}

.dex-select-value-box:focus-visible .dex-select-a11y-ring {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-select-value-box:focus-visible .dex-select-a11y-ring-text {
  border-radius: 4px;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-select-value-box.display-area:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-select .select-up {
  transition: transform .2s linear
}

.dex-select .select-up-active {
  transform: rotate(180deg)
}

.dex-select-reference-icon-clear {
  color: #929292;
  color: var(--dex-okd-select-reference-icon-default-color, #929292);
  display: inline-block;
  margin-right: 4px;
  transition: transform .2s linear
}

.dex-select-reference-icon-clear:hover {
  color: #000;
  color: var(--dex-okd-select-reference-icon-hover-color, #000)
}

.dex-select-reference-icon-clear.disabled {
  pointer-events: none
}

.dex-select-reference-icon {
  display: inline-block
}

.dex-select-reference-icon.dex-select-arrow-icon-sm {
  font-size: 14px;
  font-size: var(--dex-okd-select-sm-arrow-icon-font-size, 14px)
}

.dex-select-reference-icon.dex-select-reference-icon-sm {
  font-size: 14px;
  font-size: var(--dex-okd-select-sm-reference-icon-font-size, 14px)
}

.dex-select-reference-icon.dex-select-arrow-icon-md {
  font-size: 16px;
  font-size: var(--dex-okd-select-md-arrow-icon-font-size, 16px)
}

.dex-select-reference-icon.dex-select-reference-icon-md {
  font-size: 16px;
  font-size: var(--dex-okd-select-md-reference-icon-font-size, 16px)
}

.dex-select-reference-icon.dex-select-arrow-icon-xs {
  font-size: 14px;
  font-size: var(--dex-okd-select-xs-arrow-icon-font-size, 14px)
}

.dex-select-reference-icon.dex-select-reference-icon-xs {
  font-size: 14px;
  font-size: var(--dex-okd-select-xs-reference-icon-font-size, 14px)
}

.dex-select-reference-icon.dex-select-arrow-icon-lg {
  font-size: 16px;
  font-size: var(--dex-okd-select-lg-arrow-icon-font-size, 16px)
}

.dex-select-reference-icon.dex-select-reference-icon-lg {
  font-size: 16px;
  font-size: var(--dex-okd-select-lg-reference-icon-font-size, 16px)
}

.dex-select-reference-icon.dex-select-arrow-icon-xl {
  font-size: 16px;
  font-size: var(--dex-okd-select-xl-arrow-icon-font-size, 16px)
}

.dex-select-reference-icon.dex-select-reference-icon-xl {
  font-size: 16px;
  font-size: var(--dex-okd-select-xl-reference-icon-font-size, 16px)
}

.dex-select {
  box-sizing: border-box;
  position: relative
}

.dex-select.select-text {
  display: inline-block
}

.dex-slider {
  display: flex
}

.dex-slider div {
  box-sizing: border-box
}

.dex-slider-content {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  padding: 5px 8px
}

.dex-slider-total {
  align-items: center;
  display: flex;
  margin-left: 16px;
  width: 48px
}

.dex-slider-label {
  color: var(--dex-okd-slider-label-color);
  font-size: var(--dex-okd-slider-label-font-size);
  line-height: var(--dex-okd-slider-label-line-height)
}

.dex-slider-desc {
  color: var(--dex-okd-slider-desc-color);
  font-size: var(--dex-okd-slider-desc-font-size);
  line-height: var(--dex-okd-slider-desc-line-height);
  margin-top: 6px;
  margin-top: var(--dex-okd-slider-desc-margin-top, 6px)
}

.dex-slider-clickable {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 10px;
  margin: 10px 0
}

.dex-slider-clickable-margin {
  margin-bottom: 20px
}

.dex-slider-track {
  background: var(--dex-okd-slider-common-track-color);
  border-radius: 3px;
  height: var(--dex-okd-slider-md-track-height);
  position: relative;
  width: 100%
}

.dex-slider-mark {
  background-color: var(--dex-okd-slider-common-active-color);
  border-radius: 3px;
  height: 100%;
  position: absolute
}

.dex-slider-mark-node {
  align-items: center;
  background: var(--dex-okd-slider-node-bg-color);
  border: 1px solid var(--dex-okd-slider-node-border-color);
  border-radius: 100%;
  cursor: pointer;
  display: flex;
  height: var(--dex-okd-slider-md-node-size);
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--dex-okd-slider-md-node-size)
}

.dex-slider-mark-node-text {
  color: var(--dex-okd-slider-common-text-color);
  font-size: 12px;
  left: 50%;
  line-height: 20px;
  position: absolute;
  top: 14px;
  top: var(--dex-okd-slider-common-top, 14px);
  transform: translateX(-50%);
  word-break: keep-all
}

.dex-slider-mark-node:last-child .dex-slider-mark-node-text {
  left: auto;
  right: 0;
  transform: none
}

.dex-slider-mark-node:first-child .dex-slider-mark-node-text {
  left: 0;
  transform: none
}

.dex-slider-mark-node-active {
  border-color: var(--dex-okd-slider-common-active-color)
}

.dex-slider-mark-node-active .dex-slider-mark-node-text {
  color: var(--dex-okd-slider-common-text-color);
  color: var(--dex-okd-slider-common-text-active-color, var(--dex-okd-slider-common-text-color))
}

.dex-slider-mark-node-no-circle {
  background: none;
  border: none
}

.dex-slider-handler {
  align-items: center;
  border-radius: 100%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%)
}

.dex-slider-handler:focus-visible {
  border-radius: 20px;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-slider-handler-inner {
  background-color: #fff;
  background-color: var(--dex-okd-slider-handler-bg-color, #fff);
  border: 2px solid var(--dex-okd-slider-handler-border-color);
  border-radius: 100%;
  height: var(--dex-okd-slider-md-handler-size);
  width: var(--dex-okd-slider-md-handler-size)
}

.dex-slider-handler-inner.dex-slider-active,
.dex-slider-handler-inner:hover {
  height: var(--dex-okd-slider-md-handler-hover-size);
  width: var(--dex-okd-slider-md-handler-hover-size)
}

.dex-slider-handler-inner.dex-slider-active {
  border: 4px solid var(--dex-okd-slider-handler-shadow-color)
}

.dex-slider-disabled {
  cursor: not-allowed
}

.dex-slider-disabled .dex-slider-handler-inner {
  border-color: var(--dex-okd-slider-handler-border-disabled-color, var(--dex-okd-slider-handler-border-color))
}

.dex-slider-disabled .dex-slider-handler-inner:hover {
  height: var(--dex-okd-slider-md-handler-size);
  width: var(--dex-okd-slider-md-handler-size)
}

.dex-slider-disabled .dex-slider-mark {
  background-color: var(--dex-okd-slider-common-active-color);
  background-color: var(--dex-okd-slider-common-disabled-active-color, var(--dex-okd-slider-common-active-color))
}

.dex-slider-disabled .dex-slider-mark-node-active {
  border-color: var(--dex-okd-slider-common-disabled-active-color, var(--dex-okd-slider-common-active-color))
}

.dex-slider-disabled .dex-slider-mark-node-active .dex-slider-mark-node-text {
  color: var(--dex-okd-slider-common-text-color);
  color: var(--dex-okd-slider-common-text-disabled-active-color, var(--dex-okd-slider-common-text-color))
}

.dex-slider-sm .dex-slider-track {
  height: var(--dex-okd-slider-sm-track-height)
}

.dex-slider-sm .dex-slider-mark-node {
  background: var(--dex-okd-slider-node-bg-color);
  border: 1px solid var(--dex-okd-slider-node-border-color);
  height: var(--dex-okd-slider-sm-node-size);
  width: var(--dex-okd-slider-sm-node-size)
}

.dex-slider-sm .dex-slider-mark-node-active {
  border: 1px solid var(--dex-okd-slider-common-active-color)
}

.dex-slider-sm .dex-slider-mark-node-text {
  top: 14px;
  top: var(--dex-okd-slider-sm-node-text-top, 14px)
}

.dex-slider-sm .dex-slider-handler-inner {
  border: 2px solid var(--dex-okd-slider-handler-border-color);
  height: var(--dex-okd-slider-sm-handler-size);
  width: var(--dex-okd-slider-sm-handler-size)
}

.dex-slider-sm .dex-slider-handler-inner:hover {
  height: var(--dex-okd-slider-sm-handler-hover-size);
  width: var(--dex-okd-slider-sm-handler-hover-size)
}

.dex-slider-sm .dex-slider-handler-inner.dex-slider-active {
  border-width: 2px
}

.dex-slider-sm .dex-slider-active {
  height: var(--dex-okd-slider-sm-handler-hover-size);
  width: var(--dex-okd-slider-sm-handler-hover-size)
}

.dex-slider-sm .dex-slider-disabled {
  cursor: not-allowed
}

.dex-slider-sm .dex-slider-disabled .dex-slider-handler-inner {
  border-color: var(--dex-okd-slider-handler-border-disabled-color, var(--dex-okd-slider-handler-border-color))
}

.dex-slider-sm .dex-slider-disabled .dex-slider-handler-inner:hover {
  height: var(--dex-okd-slider-sm-handler-size);
  width: var(--dex-okd-slider-sm-handler-size)
}

.dex-slider-sm .dex-slider-disabled .dex-slider-mark {
  background-color: var(--dex-okd-slider-common-active-color);
  background-color: var(--dex-okd-slider-common-disabled-active-color, var(--dex-okd-slider-common-active-color))
}

.dex-slider-sm .dex-slider-disabled .dex-slider-mark-node-active {
  border-color: var(--dex-okd-slider-common-disabled-active-color, var(--dex-okd-slider-common-active-color))
}

.dex-slider-sm .dex-slider-disabled .dex-slider-mark-node-active .dex-slider-mark-node-text {
  color: var(--dex-okd-slider-common-text-color);
  color: var(--dex-okd-slider-common-text-disabled-active-color, var(--dex-okd-slider-common-text-color))
}

.dex-okds-link {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-link:before {
  content: "\e053";
  font-family: dex-ok-b983c4766d
}

.dex-okds-mail {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-mail:before {
  content: "\e058";
  font-family: dex-ok-b983c4766d
}

.dex-okds-computer-outline {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-computer-outline:before {
  content: "\e0a9";
  font-family: dex-ok-b983c4766d
}

.dex-okds-fire-flame_filled {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-fire-flame_filled:before {
  content: "\e0a8";
  font-family: dex-ok-b983c4766d
}

.dex-okds-trash {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-trash:before {
  content: "\e089";
  font-family: dex-ok-b983c4766d
}

.dex-okds-locked {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-locked:before {
  content: "\e056";
  font-family: dex-ok-b983c4766d
}

.dex-okds-unlocked {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-unlocked:before {
  content: "\e08a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-verified-filled {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-verified-filled:before {
  content: "\e0a7";
  font-family: dex-ok-b983c4766d
}

.dex-okds-trending-up {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-trending-up:before {
  content: "\e0a6";
  font-family: dex-ok-b983c4766d
}

.dex-okds-toggle-units {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-toggle-units:before {
  content: "\e0a5";
  font-family: dex-ok-b983c4766d
}

.dex-okds-chevron-right-text-button {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-chevron-right-text-button:before {
  content: "\e0a4";
  font-family: dex-ok-b983c4766d
}

.dex-okds-calendar {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-calendar:before {
  content: "\e01e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-p2p {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-p2p:before {
  content: "\e0a3";
  font-family: dex-ok-b983c4766d
}

.dex-okds-express-buy {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-express-buy:before {
  content: "\e0a2";
  font-family: dex-ok-b983c4766d
}

.dex-okds-cash-fiat {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-cash-fiat:before {
  content: "\e0a1";
  font-family: dex-ok-b983c4766d
}

.dex-okds-chevron-down {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-chevron-down:before {
  content: "\e0a0";
  font-family: dex-ok-b983c4766d
}

.dex-okds-chevron-up {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-chevron-up:before {
  content: "\e09f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-xbtc {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-xbtc:before {
  content: "\e09e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-selected {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-selected:before {
  content: "\e09c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-unselected {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-unselected:before {
  content: "\e09d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-checkmark {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-checkmark:before {
  content: "\e022";
  font-family: dex-ok-b983c4766d
}

.dex-okds-refresh {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-refresh:before {
  content: "\e09b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-draw {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-draw:before {
  content: "\e09a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-sun {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-sun:before {
  content: "\e099";
  font-family: dex-ok-b983c4766d
}

.dex-okds-moon {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-moon:before {
  content: "\e098";
  font-family: dex-ok-b983c4766d
}

.dex-okds-clear {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-clear:before {
  content: "\e097";
  font-family: dex-ok-b983c4766d
}

.dex-okds-thumb_up {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-thumb_up:before {
  content: "\e096";
  font-family: dex-ok-b983c4766d
}

.dex-okds-thumb_down {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-thumb_down:before {
  content: "\e095";
  font-family: dex-ok-b983c4766d
}

.dex-okds-zoom-out {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-zoom-out:before {
  content: "\e094";
  font-family: dex-ok-b983c4766d
}

.dex-okds-zoom-in {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-zoom-in:before {
  content: "\e093";
  font-family: dex-ok-b983c4766d
}

.dex-okds-information-circle {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-information-circle:before {
  content: "\e055";
  font-family: dex-ok-b983c4766d
}

.dex-okds-warning-circle-fill {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-warning-circle-fill:before {
  content: "\e07d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-success-circle-fill {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-success-circle-fill:before {
  content: "\e084";
  font-family: dex-ok-b983c4766d
}

.dex-okds-information-circle-fill {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-information-circle-fill:before {
  content: "\e052";
  font-family: dex-ok-b983c4766d
}

.dex-okds-fail-circle-fill {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-fail-circle-fill:before {
  content: "\e02f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-right-centered-xs {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-right-centered-xs:before {
  content: "\e092";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-right-centered-sm {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-right-centered-sm:before {
  content: "\e015";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-right-centered-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-right-centered-md:before {
  content: "\e014";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-right-xs {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-right-xs:before {
  content: "\e091";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-right-sm {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-right-sm:before {
  content: "\e00e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-right-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-right-md:before {
  content: "\e00d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-user {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-user:before {
  content: "\e07b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-plus-circle-filled {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-plus-circle-filled:before {
  content: "\e065";
  font-family: dex-ok-b983c4766d
}

.dex-okds-intermediate {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-intermediate:before {
  content: "\e090";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-left-centered-sm {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-left-centered-sm:before {
  content: "\e013";
  font-family: dex-ok-b983c4766d
}

.dex-okds-eye-hide {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-eye-hide:before {
  content: "\e03d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-eye-show {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-eye-show:before {
  content: "\e03f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-copy {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-copy:before {
  content: "\e033";
  font-family: dex-ok-b983c4766d
}

.dex-okds-history {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-history:before {
  content: "\e04f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-back-to-top {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-back-to-top:before {
  content: "\e08f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-clock {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-clock:before {
  content: "\e028";
  font-family: dex-ok-b983c4766d
}

.dex-okds-hamburger-setting {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-hamburger-setting:before {
  content: "\e04c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-fees {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-fees:before {
  content: "\e040";
  font-family: dex-ok-b983c4766d
}

.dex-okds-open-link {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-open-link:before {
  content: "\e05d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-setting {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-setting:before {
  content: "\e074";
  font-family: dex-ok-b983c4766d
}

.dex-okds-crown {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-crown:before {
  content: "\e08e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-share {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-share:before {
  content: "\e078";
  font-family: dex-ok-b983c4766d
}

.dex-okds-support {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-support:before {
  content: "\e086";
  font-family: dex-ok-b983c4766d
}

.dex-okds-analysis {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-analysis:before {
  content: "\e003";
  font-family: dex-ok-b983c4766d
}

.dex-okds-academy {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-academy:before {
  content: "\e000";
  font-family: dex-ok-b983c4766d
}

.dex-okds-action-reverse {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-action-reverse:before {
  content: "\e001";
  font-family: dex-ok-b983c4766d
}

.dex-okds-aed {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-aed:before {
  content: "\e002";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-cheveron-alignleft-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-cheveron-alignleft-md:before {
  content: "\e004";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-cheveron-first-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-cheveron-first-md:before {
  content: "\e005";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-cheveron-last-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-cheveron-last-md:before {
  content: "\e006";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-down-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-down-md:before {
  content: "\e007";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-down-sm {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-down-sm:before {
  content: "\e008";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-down-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-down-md:before {
  content: "\e009";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-down-sm {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-down-sm:before {
  content: "\e00a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-left-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-left-md:before {
  content: "\e00b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-left-sm {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-left-sm:before {
  content: "\e00c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-up-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-up-md:before {
  content: "\e00f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-up-sm {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-up-sm:before {
  content: "\e010";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-up-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-up-md:before {
  content: "\e011";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-left-centered-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-left-centered-md:before {
  content: "\e012";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-up-sm {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-up-sm:before {
  content: "\e016";
  font-family: dex-ok-b983c4766d
}

.dex-okds-bell {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-bell:before {
  content: "\e017";
  font-family: dex-ok-b983c4766d
}

.dex-okds-authenticator {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-authenticator:before {
  content: "\e018";
  font-family: dex-ok-b983c4766d
}

.dex-okds-borrow {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-borrow:before {
  content: "\e019";
  font-family: dex-ok-b983c4766d
}

.dex-okds-brl {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-brl:before {
  content: "\e01a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-brush {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-brush:before {
  content: "\e01b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-cancel-order {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-cancel-order:before {
  content: "\e01c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-candlestick {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-candlestick:before {
  content: "\e01d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-carets-filled-down {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-carets-filled-down:before {
  content: "\e01f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-chat-bubble {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-chat-bubble:before {
  content: "\e020";
  font-family: dex-ok-b983c4766d
}

.dex-okds-carets-filled-up {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-carets-filled-up:before {
  content: "\e021";
  font-family: dex-ok-b983c4766d
}

.dex-okds-clear-fill {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-clear-fill:before {
  content: "\e023";
  font-family: dex-ok-b983c4766d
}

.dex-okds-assets {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-assets:before {
  content: "\e024";
  font-family: dex-ok-b983c4766d
}

.dex-okds-bank {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-bank:before {
  content: "\e025";
  font-family: dex-ok-b983c4766d
}

.dex-okds-clock-filled {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-clock-filled:before {
  content: "\e026";
  font-family: dex-ok-b983c4766d
}

.dex-okds-clock-outline {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-clock-outline:before {
  content: "\e027";
  font-family: dex-ok-b983c4766d
}

.dex-okds-close {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-close:before {
  content: "\e029";
  font-family: dex-ok-b983c4766d
}

.dex-okds-communication-call {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-communication-call:before {
  content: "\e02a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-communication-idcard {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-communication-idcard:before {
  content: "\e02b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-communication-img-failed {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-communication-img-failed:before {
  content: "\e02c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-communications-faceid {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-communications-faceid:before {
  content: "\e02d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-eye-show-filled {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-eye-show-filled:before {
  content: "\e02e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-communication-img {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-communication-img:before {
  content: "\e030";
  font-family: dex-ok-b983c4766d
}

.dex-okds-convertokb {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-convertokb:before {
  content: "\e031";
  font-family: dex-ok-b983c4766d
}

.dex-okds-cursor-drag {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-cursor-drag:before {
  content: "\e032";
  font-family: dex-ok-b983c4766d
}

.dex-okds-data-line-chart {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-data-line-chart:before {
  content: "\e034";
  font-family: dex-ok-b983c4766d
}

.dex-okds-deposit {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-deposit:before {
  content: "\e035";
  font-family: dex-ok-b983c4766d
}

.dex-okds-cursor-zoom {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-cursor-zoom:before {
  content: "\e036";
  font-family: dex-ok-b983c4766d
}

.dex-okds-download {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-download:before {
  content: "\e037";
  font-family: dex-ok-b983c4766d
}

.dex-okds-exchange {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-exchange:before {
  content: "\e038";
  font-family: dex-ok-b983c4766d
}

.dex-okds-developers {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-developers:before {
  content: "\e039";
  font-family: dex-ok-b983c4766d
}

.dex-okds-eur {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-eur:before {
  content: "\e03a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-edit {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-edit:before {
  content: "\e03b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-expand {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-expand:before {
  content: "\e03c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-eye-hide-filled {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-eye-hide-filled:before {
  content: "\e03e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-fail-circle {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-fail-circle:before {
  content: "\e041";
  font-family: dex-ok-b983c4766d
}

.dex-okds-filter {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-filter:before {
  content: "\e042";
  font-family: dex-ok-b983c4766d
}

.dex-okds-finance-bank {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-finance-bank:before {
  content: "\e043";
  font-family: dex-ok-b983c4766d
}

.dex-okds-finance-seagull {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-finance-seagull:before {
  content: "\e044";
  font-family: dex-ok-b983c4766d
}

.dex-okds-finance-earn {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-finance-earn:before {
  content: "\e045";
  font-family: dex-ok-b983c4766d
}

.dex-okds-futures {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-futures:before {
  content: "\e046";
  font-family: dex-ok-b983c4766d
}

.dex-okds-funding-rates {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-funding-rates:before {
  content: "\e047";
  font-family: dex-ok-b983c4766d
}

.dex-okds-gbp {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-gbp:before {
  content: "\e048";
  font-family: dex-ok-b983c4766d
}

.dex-okds-guide {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-guide:before {
  content: "\e049";
  font-family: dex-ok-b983c4766d
}

.dex-okds-hamburger-edit {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-hamburger-edit:before {
  content: "\e04a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-hamburger-search {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-hamburger-search:before {
  content: "\e04b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-hamburger {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-hamburger:before {
  content: "\e04d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-hierachy {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-hierachy:before {
  content: "\e04e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-id-card {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-id-card:before {
  content: "\e050";
  font-family: dex-ok-b983c4766d
}

.dex-okds-img {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-img:before {
  content: "\e051";
  font-family: dex-ok-b983c4766d
}

.dex-okds-insurance-fund {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-insurance-fund:before {
  content: "\e054";
  font-family: dex-ok-b983c4766d
}

.dex-okds-language {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-language:before {
  content: "\e057";
  font-family: dex-ok-b983c4766d
}

.dex-okds-margin {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-margin:before {
  content: "\e059";
  font-family: dex-ok-b983c4766d
}

.dex-okds-logout {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-logout:before {
  content: "\e05a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-minus {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-minus:before {
  content: "\e05b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-more {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-more:before {
  content: "\e05c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-network-fee-standard {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-network-fee-standard:before {
  content: "\e05e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-option {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-option:before {
  content: "\e05f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-orders {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-orders:before {
  content: "\e060";
  font-family: dex-ok-b983c4766d
}

.dex-okds-pending-circle {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-pending-circle:before {
  content: "\e061";
  font-family: dex-ok-b983c4766d
}

.dex-okds-pie-chart {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-pie-chart:before {
  content: "\e062";
  font-family: dex-ok-b983c4766d
}

.dex-okds-place-order {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-place-order:before {
  content: "\e063";
  font-family: dex-ok-b983c4766d
}

.dex-okds-play {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-play:before {
  content: "\e064";
  font-family: dex-ok-b983c4766d
}

.dex-okds-plus-circle {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-plus-circle:before {
  content: "\e066";
  font-family: dex-ok-b983c4766d
}

.dex-okds-plus {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-plus:before {
  content: "\e067";
  font-family: dex-ok-b983c4766d
}

.dex-okds-profile {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-profile:before {
  content: "\e068";
  font-family: dex-ok-b983c4766d
}

.dex-okds-qrcode {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-qrcode:before {
  content: "\e069";
  font-family: dex-ok-b983c4766d
}

.dex-okds-question-mark-circle-fill {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-question-mark-circle-fill:before {
  content: "\e06a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-question-mark-circle {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-question-mark-circle:before {
  content: "\e06b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-sort-up-center-aligned {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-sort-up-center-aligned:before {
  content: "\e06c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-records {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-records:before {
  content: "\e06d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-red-packe {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-red-packe:before {
  content: "\e06e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-scan {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-scan:before {
  content: "\e06f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-report-centre {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-report-centre:before {
  content: "\e070";
  font-family: dex-ok-b983c4766d
}

.dex-okds-security-fill {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-security-fill:before {
  content: "\e071";
  font-family: dex-ok-b983c4766d
}

.dex-okds-search {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-search:before {
  content: "\e072";
  font-family: dex-ok-b983c4766d
}

.dex-okds-security {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-security:before {
  content: "\e073";
  font-family: dex-ok-b983c4766d
}

.dex-okds-transfer {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-transfer:before {
  content: "\e075";
  font-family: dex-ok-b983c4766d
}

.dex-okds-settlement-history {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-settlement-history:before {
  content: "\e076";
  font-family: dex-ok-b983c4766d
}

.dex-okds-trends {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-trends:before {
  content: "\e077";
  font-family: dex-ok-b983c4766d
}

.dex-okds-sort-default-center-aligned {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-sort-default-center-aligned:before {
  content: "\e079";
  font-family: dex-ok-b983c4766d
}

.dex-okds-sort-default {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-sort-default:before {
  content: "\e07a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-sort-down-center-aligned-svg {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-sort-down-center-aligned-svg:before {
  content: "\e07c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-withdraw {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-withdraw:before {
  content: "\e07e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-sort-down {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-sort-down:before {
  content: "\e07f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-sort-up {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-sort-up:before {
  content: "\e080";
  font-family: dex-ok-b983c4766d
}

.dex-okds-star-filled {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-star-filled:before {
  content: "\e081";
  font-family: dex-ok-b983c4766d
}

.dex-okds-star {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-star:before {
  content: "\e082";
  font-family: dex-ok-b983c4766d
}

.dex-okds-strong-alert {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-strong-alert:before {
  content: "\e083";
  font-family: dex-ok-b983c4766d
}

.dex-okds-success-circle {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-success-circle:before {
  content: "\e085";
  font-family: dex-ok-b983c4766d
}

.dex-okds-trade-1 {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-trade-1:before {
  content: "\e087";
  font-family: dex-ok-b983c4766d
}

.dex-okds-transfer-circle {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-transfer-circle:before {
  content: "\e088";
  font-family: dex-ok-b983c4766d
}

.dex-okds-unlink {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-unlink:before {
  content: "\e08b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-usd {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-usd:before {
  content: "\e08c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-warning-circle {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-warning-circle:before {
  content: "\e08d";
  font-family: dex-ok-b983c4766d
}

.iconfont {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  font-style: normal
}

.iconfont:before {
  display: inline-block
}

@font-face {
  font-display: block;
  font-family: dex-ok-b983c4766d;
  font-style: normal;
  src: url(../7037698b1d9e17ea03b4.woff2) format("woff2")
}

[dir=rtl] .dex-okds-arrow-cheveron-alignleft-md:before,
[dir=rtl] .dex-okds-arrow-cheveron-first-md:before,
[dir=rtl] .dex-okds-arrow-cheveron-last-md:before,
[dir=rtl] .dex-okds-arrow-chevron-left-centered-md:before,
[dir=rtl] .dex-okds-arrow-chevron-left-centered-sm:before,
[dir=rtl] .dex-okds-arrow-chevron-right-centered-md:before,
[dir=rtl] .dex-okds-arrow-chevron-right-centered-sm:before,
[dir=rtl] .dex-okds-arrow-chevron-right-centered-xs:before,
[dir=rtl] .dex-okds-arrow-pointer-left-md:before,
[dir=rtl] .dex-okds-arrow-pointer-left-sm:before,
[dir=rtl] .dex-okds-arrow-pointer-right-md:before,
[dir=rtl] .dex-okds-arrow-pointer-right-sm:before,
[dir=rtl] .dex-okds-arrow-pointer-right-xs:before,
[dir=rtl] .dex-okds-communication-idcard:before,
[dir=rtl] .dex-okds-copy:before,
[dir=rtl] .dex-okds-eye-hide-filled:before,
[dir=rtl] .dex-okds-eye-hide:before,
[dir=rtl] .dex-okds-guide:before,
[dir=rtl] .dex-okds-logout:before,
[dir=rtl] .dex-okds-network-fee-standard:before,
[dir=rtl] .dex-okds-open-link:before,
[dir=rtl] .dex-okds-orders:before,
[dir=rtl] .dex-okds-question-mark-circle-fill:before,
[dir=rtl] .dex-okds-question-mark-circle:before,
[dir=rtl] .dex-okds-report-centre:before {
  transform: scaleX(-1)
}

.dex-icon.icon {
  font-family: var(--ok-icon-font-family) !important
}

.dex-a11y-button:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-a11y-text {
  clip: rect(0, 0, 0, 0);
  border-width: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px
}

.dex-empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%
}

.dex-empty-img {
  height: var(--dex-okd-empty-img-height);
  margin-bottom: var(--dex-okd-empty-img-margin-bottom);
  width: var(--dex-okd-empty-img-width)
}

.dex-empty-title {
  color: var(--dex-okd-empty-title-color);
  font-size: var(--dex-okd-empty-title-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-empty-title-font-weight, 400);
  line-height: var(--dex-okd-empty-title-light-height);
  margin-bottom: var(--dex-okd-empty-title-margin-bottom);
  text-align: center
}

.dex-empty-title:last-child {
  margin-bottom: 0
}

.dex-empty-only-title {
  margin-bottom: var(--dex-okd-empty-desc-margin-bottom)
}

.dex-empty-only-title:last-child {
  margin-bottom: 0
}

.dex-empty-description {
  color: var(--dex-okd-empty-desc-color);
  font-size: var(--dex-okd-empty-desc-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-empty-desc-font-weight, 400);
  line-height: var(--dex-okd-empty-desc-light-height);
  margin-bottom: var(--dex-okd-empty-desc-margin-bottom);
  text-align: center
}

.dex-empty-description:last-child {
  margin-bottom: 0
}

.dex-empty-sm .dex-empty-title {
  font-size: 14px;
  font-size: var(--dex-okd-empty-sm-title-font-size, 14px);
  line-height: 16px;
  line-height: var(--dex-okd-empty-sm-title-line-height, 16px);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-empty-sm-title-margin-bottom, 4px)
}

.dex-empty-sm .dex-empty-description {
  font-size: 12px;
  font-size: var(--dex-okd-empty-sm-desc-font-size, 12px);
  line-height: 18px;
  line-height: var(--dex-okd-empty-sm-desc-line-height, 18px)
}

.dex-empty-sm .dex-empty-description,
.dex-empty-sm .dex-empty-only-title {
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-empty-sm-desc-margin-bottom, 4px)
}

.dex-result {
  background-color: var(--dex-okd-color-background-base-primary);
  background-color: var(--dex-okd-result-background-color, var(--dex-okd-color-background-base-primary))
}

.dex-result-animation {
  margin: auto
}

.dex-result-title {
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-result-title-color, var(--dex-okd-color-content-primary));
  font-size: 24px;
  font-size: var(--dex-okd-result-title-sm-font-size, 24px);
  font-weight: 700;
  font-weight: var(--dex-okd-result-title-sm-font-weight, 700);
  line-height: 28px;
  line-height: var(--dex-okd-result-title-sm-line-height, 28px);
  text-align: center
}

.dex-result-desc {
  color: var(--dex-okd-color-content-secondary);
  color: var(--dex-okd-result-desc-color, var(--dex-okd-color-content-secondary));
  font-size: 14px;
  font-size: var(--dex-okd-result-desc-sm-font-size, 14px);
  line-height: 22px;
  line-height: var(--dex-okd-result-desc-sm-line-height, 22px);
  margin-top: 16px;
  margin-top: var(--dex-okd-result-desc-sm-margin-top, 16px);
  text-align: center
}

.dex-result-extra {
  margin-top: 24px;
  margin-top: var(--dex-okd-result-extra-sm-margin-top, 24px);
  text-align: center
}

.dex-result-animation-sm {
  height: 136px;
  height: var(--dex-okd-result-sm-height, 136px);
  width: 136px;
  width: var(--dex-okd-result-sm-width, 136px)
}

.dex-result-animation-lg {
  height: 216px;
  height: var(--dex-okd-result-lg-height, 216px);
  width: 216px;
  width: var(--dex-okd-result-lg-width, 216px)
}

.dex-breadcrumbs,
.dex-breadcrumbs-crumb,
.dex-breadcrumbs-crumb-active {
  align-items: center;
  display: flex
}

.dex-breadcrumbs-primary .dex-breadcrumbs-crumb-link {
  font-weight: var(--dex-okd-hyperlink-medium-font-weight);
  font-weight: var(--dex-okd-breadcrumbs-primary-default-font-weight, var(--dex-okd-hyperlink-medium-font-weight))
}

.dex-breadcrumbs-primary .dex-breadcrumbs-crumb-link,
.dex-breadcrumbs-primary .dex-breadcrumbs-crumb-link a,
.dex-breadcrumbs-primary .dex-breadcrumbs-crumb-link a:active,
.dex-breadcrumbs-primary .dex-breadcrumbs-crumb-link a:visited {
  color: var(--dex-okd-hyperlink-primary-default-color);
  color: var(--dex-okd-breadcrumbs-primary-default-font-color, var(--dex-okd-hyperlink-primary-default-color))
}

.dex-breadcrumbs-primary .dex-breadcrumbs-crumb-link:hover {
  font-weight: 500;
  font-weight: var(--dex-okd-breadcrumbs-primary-hover-font-weight, 500)
}

.dex-breadcrumbs-primary .dex-breadcrumbs-crumb-active {
  color: var(--dex-okd-breadcrumbs-primary-current-font-color);
  font-weight: var(--dex-okd-breadcrumbs-common-current-font-weight);
  font-weight: var(--dex-okd-breadcrumbs-primary-current-font-weight, var(--dex-okd-breadcrumbs-common-current-font-weight))
}

.dex-breadcrumbs-primary .crumb-icon {
  color: var(--dex-okd-breadcrumbs-primary-icon-color)
}

.dex-breadcrumbs-secondary .dex-breadcrumbs-crumb-link {
  font-weight: var(--dex-okd-hyperlink-medium-font-weight);
  font-weight: var(--dex-okd-breadcrumbs-secondary-default-font-weight, var(--dex-okd-hyperlink-medium-font-weight))
}

.dex-breadcrumbs-secondary .dex-breadcrumbs-crumb-link,
.dex-breadcrumbs-secondary .dex-breadcrumbs-crumb-link a,
.dex-breadcrumbs-secondary .dex-breadcrumbs-crumb-link a:active,
.dex-breadcrumbs-secondary .dex-breadcrumbs-crumb-link a:visited {
  color: var(--dex-okd-hyperlink-secondary-default-color);
  color: var(--dex-okd-breadcrumbs-secondary-default-font-color, var(--dex-okd-hyperlink-secondary-default-color))
}

.dex-breadcrumbs-secondary .dex-breadcrumbs-crumb-link:hover {
  font-weight: 500;
  font-weight: var(--dex-okd-breadcrumbs-secondary-hover-font-weight, 500)
}

.dex-breadcrumbs-secondary .dex-breadcrumbs-crumb-active {
  color: var(--dex-okd-breadcrumbs-secondary-current-font-color);
  font-weight: var(--dex-okd-breadcrumbs-common-current-font-weight);
  font-weight: var(--dex-okd-breadcrumbs-secondary-current-font-weight, var(--dex-okd-breadcrumbs-common-current-font-weight))
}

.dex-breadcrumbs-secondary .crumb-icon {
  color: var(--dex-okd-breadcrumbs-secondary-icon-color)
}

.dex-breadcrumbs-reversed .dex-breadcrumbs-crumb-link {
  font-weight: var(--dex-okd-hyperlink-medium-font-weight);
  font-weight: var(--dex-okd-breadcrumbs-reversed-default-font-weight, var(--dex-okd-hyperlink-medium-font-weight))
}

.dex-breadcrumbs-reversed .dex-breadcrumbs-crumb-link,
.dex-breadcrumbs-reversed .dex-breadcrumbs-crumb-link a,
.dex-breadcrumbs-reversed .dex-breadcrumbs-crumb-link a:active,
.dex-breadcrumbs-reversed .dex-breadcrumbs-crumb-link a:visited {
  color: var(--dex-okd-hyperlink-reversed-default-color);
  color: var(--dex-okd-breadcrumbs-reversed-default-font-color, var(--dex-okd-hyperlink-reversed-default-color))
}

.dex-breadcrumbs-reversed .dex-breadcrumbs-crumb-link:hover {
  font-weight: 500;
  font-weight: var(--dex-okd-breadcrumbs-reversed-hover-font-weight, 500)
}

.dex-breadcrumbs-reversed .dex-breadcrumbs-crumb-active {
  color: var(--dex-okd-breadcrumbs-reversed-current-font-color);
  font-weight: var(--dex-okd-breadcrumbs-common-current-font-weight);
  font-weight: var(--dex-okd-breadcrumbs-reversed-current-font-weight, var(--dex-okd-breadcrumbs-common-current-font-weight))
}

.dex-breadcrumbs-reversed .crumb-icon {
  color: var(--dex-okd-breadcrumbs-reversed-icon-color)
}

.dex-breadcrumbs-xs .dex-breadcrumbs-crumb-active {
  font-size: var(--dex-okd-breadcrumbs-xs-current-font-size);
  line-height: var(--dex-okd-breadcrumbs-xs-current-line-height)
}

.dex-breadcrumbs-xs .crumb-icon {
  font-size: var(--dex-okd-breadcrumbs-xs-icon-font-size);
  margin-left: var(--dex-okd-breadcrumbs-xs-icon-margin-left);
  margin-right: var(--dex-okd-breadcrumbs-xs-icon-margin-right)
}

.dex-breadcrumbs-sm .dex-breadcrumbs-crumb-active {
  font-size: var(--dex-okd-breadcrumbs-sm-current-font-size);
  line-height: var(--dex-okd-breadcrumbs-sm-current-line-height)
}

.dex-breadcrumbs-sm .crumb-icon {
  font-size: var(--dex-okd-breadcrumbs-sm-icon-font-size);
  margin-left: var(--dex-okd-breadcrumbs-sm-icon-margin-left);
  margin-right: var(--dex-okd-breadcrumbs-sm-icon-margin-right)
}

.dex-breadcrumbs-md .dex-breadcrumbs-crumb-active {
  font-size: var(--dex-okd-breadcrumbs-md-current-font-size);
  line-height: var(--dex-okd-breadcrumbs-md-current-line-height)
}

.dex-breadcrumbs-md .crumb-icon {
  font-size: var(--dex-okd-breadcrumbs-md-icon-font-size);
  margin-left: var(--dex-okd-breadcrumbs-md-icon-margin-left);
  margin-right: var(--dex-okd-breadcrumbs-md-icon-margin-right)
}

.dex-breadcrumbs-lg .dex-breadcrumbs-crumb-active {
  font-size: var(--dex-okd-breadcrumbs-lg-current-font-size);
  line-height: var(--dex-okd-breadcrumbs-lg-current-line-height)
}

.dex-breadcrumbs-lg .crumb-icon {
  font-size: var(--dex-okd-breadcrumbs-lg-icon-font-size);
  margin-left: var(--dex-okd-breadcrumbs-lg-icon-margin-left);
  margin-right: var(--dex-okd-breadcrumbs-lg-icon-margin-right)
}

.dex-checkbox-wrapper-indeterminate .dex-checkbox-inner {
  background-color: var(--dex-okd-checkbox-selected-background);
  border-color: var(--dex-okd-checkbox-selected-border-color)
}

.dex-checkbox-wrapper-indeterminate .dex-checkbox-inner:after {
  background-color: var(--dex-okd-checkbox-selected-inner-color);
  box-sizing: border-box;
  content: " ";
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
  width: 10px
}

.dex-checkbox-wrapper.dex-checkbox-circular .dex-checkbox-inner,
.dex-checkbox-wrapper.dex-checkbox-circular .dex-checkbox-input {
  border-radius: 50px
}

.dex-checkbox-inner {
  background-color: var(--dex-okd-checkbox-default-background);
  border: 1px solid var(--dex-okd-checkbox-default-border-color);
  border-radius: var(--dex-okd-checkbox-common-border-radius);
  box-shadow: var(--dex-okd-checkbox-default-shadow);
  box-sizing: border-box;
  cursor: pointer;
  direction: ltr;
  display: block;
  height: 12px;
  left: 0;
  position: relative;
  top: 0;
  width: 12px
}

.dex-checkbox-input {
  cursor: pointer;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 1
}

.dex-checkbox-input:focus-visible {
  border-radius: var(--dex-okd-checkbox-common-border-radius);
  opacity: 1;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-checkbox-children {
  cursor: pointer;
  display: inline-block;
  font-size: var(--dex-okd-checkbox-common-label-font-size);
  margin-left: 4px;
  vertical-align: top;
  white-space: normal;
  word-break: break-word
}

.dex-checkbox-wrapper {
  cursor: pointer;
  display: inline-block;
  font-size: 0;
  margin-right: 8px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap
}

.dex-checkbox-wrapper .dex-checkbox-children {
  color: var(--dex-okd-checkbox-default-text-color)
}

.dex-checkbox-wrapper .dex-checkbox {
  cursor: pointer;
  display: inline-block;
  margin-top: 2px;
  position: relative;
  vertical-align: top
}

.dex-checkbox-wrapper.hover-status .dex-checkbox-inner {
  border-color: var(--dex-okd-checkbox-default-hover-border-color);
  box-shadow: var(--dex-okd-checkbox-default-hover-shadow)
}

.dex-checkbox-wrapper-checked .dex-checkbox-children {
  color: var(--dex-okd-checkbox-selected-text-color)
}

.dex-checkbox-wrapper-checked .dex-checkbox-inner {
  background-color: var(--dex-okd-checkbox-selected-background);
  border-color: var(--dex-okd-checkbox-selected-border-color);
  box-shadow: var(--dex-okd-checkbox-selected-shadow)
}

.dex-checkbox-wrapper-checked .dex-checkbox-inner:after {
  background-color: initial;
  border: 2px solid var(--dex-okd-checkbox-selected-inner-color);
  border-left: 0;
  border-top: 0;
  box-sizing: border-box;
  content: " ";
  height: 8px;
  left: 50%;
  position: absolute;
  top: calc(50% - 1px);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
  width: 5px
}

.dex-checkbox-wrapper-checked.hover-status .dex-checkbox-inner {
  border-color: var(--dex-okd-checkbox-selected-hover-border-color);
  box-shadow: var(--dex-okd-checkbox-selected-hover-shadow)
}

.dex-checkbox-wrapper-error .dex-checkbox-children {
  color: var(--dex-okd-checkbox-error-text-color)
}

.dex-checkbox-wrapper-error .dex-checkbox-inner {
  border-color: var(--dex-okd-checkbox-error-border-color);
  box-shadow: var(--dex-okd-checkbox-error-shadow)
}

.dex-checkbox-wrapper-error.hover-status .dex-checkbox-inner {
  border-color: var(--dex-okd-checkbox-error-hover-border-color);
  box-shadow: var(--dex-okd-checkbox-error-hover-shadow)
}

.dex-checkbox-wrapper-error.dex-checkbox-wrapper-checked .dex-checkbox-inner {
  background-color: var(--dex-okd-checkbox-error-background);
  border-color: var(--dex-okd-checkbox-error-border-color)
}

.dex-checkbox-wrapper-error.dex-checkbox-wrapper-checked .dex-checkbox-inner:after {
  border-color: var(--dex-okd-checkbox-error-inner-color)
}

.dex-checkbox-wrapper-disabled {
  cursor: not-allowed
}

.dex-checkbox-wrapper-disabled .dex-checkbox-children {
  color: var(--dex-okd-checkbox-disabled-text-color);
  cursor: not-allowed
}

.dex-checkbox-wrapper-disabled .dex-checkbox,
.dex-checkbox-wrapper-disabled .dex-checkbox .dex-checkbox-input {
  cursor: default
}

.dex-checkbox-wrapper-disabled .dex-checkbox .dex-checkbox-inner {
  background-color: var(--dex-okd-checkbox-disabled-background);
  border-color: var(--dex-okd-checkbox-disabled-border-color);
  cursor: default
}

.dex-checkbox-wrapper-disabled.hover-status .dex-checkbox-inner {
  border-color: var(--dex-okd-checkbox-disabled-hover-border-color);
  box-shadow: unset
}

.dex-checkbox-wrapper-disabled.dex-checkbox-wrapper-checked .dex-checkbox-inner {
  background-color: var(--dex-okd-checkbox-disabled-background);
  border-color: var(--dex-okd-checkbox-disabled-border-color)
}

.dex-checkbox-wrapper-disabled.dex-checkbox-wrapper-checked .dex-checkbox-inner:after {
  border-color: var(--dex-okd-checkbox-disabled-inner-color)
}

.dex-checkbox-wrapper-disabled.dex-checkbox-wrapper-indeterminate .dex-checkbox-inner {
  background-color: var(--dex-okd-checkbox-disabled-background);
  border-color: var(--dex-okd-checkbox-disabled-border-color)
}

.dex-checkbox-wrapper-disabled.dex-checkbox-wrapper-indeterminate .dex-checkbox-inner:after {
  background-color: var(--dex-okd-checkbox-disabled-inner-color)
}

.dex-checkbox-sm .dex-checkbox-inner {
  border-radius: 2px;
  border-radius: var(--dex-okd-checkbox-sm-border-radius, 2px);
  height: var(--dex-okd-checkbox-sm-height);
  width: var(--dex-okd-checkbox-sm-width)
}

.dex-checkbox-sm .dex-checkbox-children {
  font-size: var(--dex-okd-checkbox-sm-font-size);
  margin-left: var(--dex-okd-checkbox-sm-margin)
}

.dex-checkbox-sm.dex-checkbox-wrapper {
  line-height: var(--dex-okd-checkbox-sm-line-height);
  padding-bottom: var(--dex-okd-checkbox-sm-padding);
  padding-top: var(--dex-okd-checkbox-sm-padding)
}

.dex-checkbox-md .dex-checkbox-inner {
  border-radius: 4px;
  border-radius: var(--dex-okd-checkbox-md-border-radius, 4px);
  height: var(--dex-okd-checkbox-md-height);
  width: var(--dex-okd-checkbox-md-width)
}

.dex-checkbox-md .dex-checkbox-children {
  font-size: var(--dex-okd-checkbox-md-font-size);
  margin-left: var(--dex-okd-checkbox-md-margin)
}

.dex-checkbox-md.dex-checkbox-wrapper {
  line-height: var(--dex-okd-checkbox-md-line-height);
  padding-bottom: var(--dex-okd-checkbox-md-padding);
  padding-top: var(--dex-okd-checkbox-md-padding)
}

@media (min-width:768px) {

  .dex-checkbox-wrapper-disabled.dex-checkbox-wrapper-checked:hover .dex-checkbox-inner,
  .dex-checkbox-wrapper-disabled:hover .dex-checkbox-inner {
    border-color: var(--dex-okd-checkbox-disabled-hover-border-color);
    box-shadow: unset
  }

  .dex-checkbox-wrapper:not(.dex-checkbox-wrapper-disabled):hover .dex-checkbox-inner {
    border-color: var(--dex-okd-checkbox-default-hover-border-color);
    box-shadow: var(--dex-okd-checkbox-default-hover-shadow)
  }

  .dex-checkbox-wrapper-checked:not(.dex-checkbox-wrapper-disabled):hover .dex-checkbox-inner {
    border-color: var(--dex-okd-checkbox-selected-hover-border-color);
    box-shadow: var(--dex-okd-checkbox-selected-hover-shadow)
  }

  .dex-checkbox-wrapper-error:not(.dex-checkbox-wrapper-disabled):hover .dex-checkbox-inner {
    border-color: var(--dex-okd-checkbox-error-hover-border-color);
    box-shadow: var(--dex-okd-checkbox-error-hover-shadow)
  }
}

.dex-checkbox-reversed.dex-checkbox-wrapper-indeterminate .dex-checkbox-inner {
  background-color: var(--dex-okd-checkbox-reversed-selected-background);
  border-color: var(--dex-okd-checkbox-reversed-selected-border-color)
}

.dex-checkbox-reversed.dex-checkbox-wrapper-indeterminate .dex-checkbox-inner:after {
  background-color: var(--dex-okd-checkbox-reversed-selected-inner-color)
}

.dex-checkbox-reversed .dex-checkbox-inner {
  background-color: var(--dex-okd-checkbox-reversed-default-background);
  border-color: var(--dex-okd-checkbox-reversed-default-border-color);
  box-shadow: var(--dex-okd-checkbox-reversed-default-shadow)
}

.dex-checkbox-reversed.dex-checkbox-wrapper .dex-checkbox-children {
  color: var(--dex-okd-checkbox-reversed-default-text-color)
}

.dex-checkbox-reversed.dex-checkbox-wrapper.hover-status .dex-checkbox-inner,
.dex-checkbox-reversed.dex-checkbox-wrapper:hover .dex-checkbox-inner {
  border-color: var(--dex-okd-checkbox-reversed-default-hover-border-color);
  box-shadow: var(--dex-okd-checkbox-reversed-default-hover-shadow)
}

.dex-checkbox-reversed.dex-checkbox-wrapper-checked .dex-checkbox-children {
  color: var(--dex-okd-checkbox-reversed-selected-text-color)
}

.dex-checkbox-reversed.dex-checkbox-wrapper-checked .dex-checkbox-inner {
  background-color: var(--dex-okd-checkbox-reversed-selected-background);
  border-color: var(--dex-okd-checkbox-reversed-selected-border-color);
  box-shadow: var(--dex-okd-checkbox-reversed-selected-shadow)
}

.dex-checkbox-reversed.dex-checkbox-wrapper-checked .dex-checkbox-inner:after {
  border-color: var(--dex-okd-checkbox-reversed-selected-inner-color)
}

.dex-checkbox-reversed.dex-checkbox-wrapper-checked.hover-status .dex-checkbox-inner,
.dex-checkbox-reversed.dex-checkbox-wrapper-checked:hover .dex-checkbox-inner {
  border-color: var(--dex-okd-checkbox-reversed-selected-hover-border-color);
  box-shadow: var(--dex-okd-checkbox-reversed-selected-hover-shadow)
}

.dex-checkbox-reversed.dex-checkbox-wrapper-error .dex-checkbox-children {
  color: var(--dex-okd-checkbox-reversed-error-text-color)
}

.dex-checkbox-reversed.dex-checkbox-wrapper-error .dex-checkbox-inner {
  border-color: var(--dex-okd-checkbox-reversed-error-border-color);
  box-shadow: var(--dex-okd-checkbox-reversed-error-shadow)
}

.dex-checkbox-reversed.dex-checkbox-wrapper-error.hover-status .dex-checkbox-inner,
.dex-checkbox-reversed.dex-checkbox-wrapper-error:hover .dex-checkbox-inner {
  border-color: var(--dex-okd-checkbox-reversed-error-hover-border-color);
  box-shadow: var(--dex-okd-checkbox-reversed-error-hover-shadow)
}

.dex-checkbox-reversed.dex-checkbox-wrapper-error.dex-checkbox-wrapper-checked .dex-checkbox-inner {
  background-color: var(--dex-okd-checkbox-reversed-error-background);
  border-color: var(--dex-okd-checkbox-reversed-error-border-color)
}

.dex-checkbox-reversed.dex-checkbox-wrapper-error.dex-checkbox-wrapper-checked .dex-checkbox-inner:after {
  border-color: var(--dex-okd-checkbox-reversed-error-inner-color)
}

.dex-checkbox-reversed.dex-checkbox-wrapper-disabled .dex-checkbox-children {
  color: var(--dex-okd-checkbox-reversed-disabled-text-color)
}

.dex-checkbox-reversed.dex-checkbox-wrapper-disabled .dex-checkbox .dex-checkbox-inner {
  background-color: var(--dex-okd-checkbox-reversed-disabled-background);
  border-color: var(--dex-okd-checkbox-reversed-disabled-border-color)
}

.dex-checkbox-reversed.dex-checkbox-wrapper-disabled.hover-status .dex-checkbox-inner,
.dex-checkbox-reversed.dex-checkbox-wrapper-disabled:hover .dex-checkbox-inner {
  border-color: var(--dex-okd-checkbox-reversed-disabled-hover-border-color)
}

.dex-checkbox-reversed.dex-checkbox-wrapper-disabled.dex-checkbox-wrapper-checked .dex-checkbox-inner {
  background-color: var(--dex-okd-checkbox-reversed-disabled-background);
  border-color: var(--dex-okd-checkbox-reversed-disabled-border-color)
}

.dex-checkbox-reversed.dex-checkbox-wrapper-disabled.dex-checkbox-wrapper-checked .dex-checkbox-inner:after {
  border-color: var(--dex-okd-checkbox-reversed-disabled-inner-color)
}

.dex-checkbox-circle {
  align-items: center;
  background-color: initial;
  background-color: var(--dex-okd-checkbox-circle-default-background-color, transparent);
  border: 1px solid #dbdbdb;
  border: 1px solid var(--dex-okd-checkbox-circle-default-border-color, #dbdbdb);
  border-radius: 100%;
  cursor: pointer;
  display: inline-block;
  height: 18px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 18px
}

.dex-checkbox-circle:after {
  background-color: initial;
  border: 2px solid #fff;
  border: 2px solid var(--dex-okd-checkbox-circle-inner-color, #fff);
  border-left: 0;
  border-top: 0;
  box-sizing: border-box;
  content: " ";
  display: none;
  height: 8px;
  left: 50%;
  position: absolute;
  top: calc(50% - 1px);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
  width: 5px
}

.dex-checkbox-circle-checked {
  background-color: #000;
  background-color: var(--dex-okd-checkbox-circle-checked-background-color, #000);
  border-color: #000;
  border-color: var(--dex-okd-checkbox-circle-checked-border-color, #000)
}

.dex-checkbox-circle-checked .dex-checkbox-circle-icon {
  visibility: visible
}

.dex-checkbox-circle-checked:after {
  display: block
}

.dex-checkbox-circle-disabled {
  background-color: #f9f9f9;
  background-color: var(--dex-okd-checkbox-circle-default-disabled-background-color, #f9f9f9);
  border-color: #ebebeb;
  border-color: var(--dex-okd-checkbox-circle-default-disabled-border-color, #ebebeb);
  cursor: not-allowed
}

.dex-checkbox-circle-disabled.dex-checkbox-circle-checked {
  background-color: #bdbdbd;
  background-color: var(--dex-okd-checkbox-circle-checked-disabled-background-color, #bdbdbd);
  border-color: #bdbdbd;
  border-color: var(--dex-okd-checkbox-circle-checked-disabled-border-color, #bdbdbd)
}

.dex-form-item-no-style-hidden {
  display: none
}

.dex-form-item {
  flex: auto;
  max-width: 100%;
  min-height: auto
}

.dex-form-item.dex-form-item-hidden {
  display: none !important
}

.dex-form-item .dex-form-item-label {
  color: var(--dex-okd-input-label-color);
  position: relative
}

.dex-form-item .dex-form-item-label-text {
  font-weight: 500
}

.dex-form-item .dex-form-item-label.dex-form-item-label-required:before {
  color: #da252f;
  color: var(--dex-okd-form-item-label-required-color, #da252f);
  content: "*";
  margin-right: 4px;
  margin-right: var(--dex-okd-form-item-label-required-margin-horizontal, 4px)
}

.dex-form-item .dex-form-item-label-action {
  color: var(--dex-okd-input-action-color);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%)
}

.dex-form-item .dex-form-item-control-input-content {
  flex: auto;
  max-width: 100%
}

.dex-form-item .dex-form-item-control-explain {
  margin-top: 4px;
  margin-top: var(--dex-okd-input-md-tip-margin, 4px);
  position: relative
}

.dex-form-item .dex-form-item-control-explain-error {
  color: var(--dex-okd-input-error-tips-color)
}

.dex-form-item .dex-form-item-control-explain-tip {
  color: var(--dex-okd-input-tips-text-color)
}

.dex-form-item .dex-form-item-control-extra {
  color: var(--dex-okd-input-tips-text-color);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-md-tip-margin, 4px)
}

.dex-form * {
  box-sizing: border-box
}

.dex-form .dex-form-item {
  display: flex;
  vertical-align: top
}

.dex-form .dex-form-item.dex-form-item-no-margin,
.dex-form .dex-form-item:not(.dex-form-item-has-error-preserve-margin).dex-form-item-has-error,
.dex-form .dex-form-item:not(.dex-form-item-has-error-preserve-margin).dex-form-item-has-tip {
  margin-bottom: 0 !important
}

.dex-form .dex-form-item.dex-form-item-xs,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name {
  margin-bottom: calc(var(--dex-okd-input-xs-tip-line-height) + var(--dex-okd-input-xs-tip-margin, 4px) + 5px)
}

.dex-form .dex-form-item.dex-form-item-xs .dex-form-item-label,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-label {
  font-size: var(--dex-okd-input-xs-label-font-size)
}

.dex-form .dex-form-item.dex-form-item-xs.dex-form-item-has-error .dex-form-item-control-explain,
.dex-form .dex-form-item.dex-form-item-xs.dex-form-item-has-tip .dex-form-item-control-explain,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name.dex-form-item-has-error .dex-form-item-control-explain,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name.dex-form-item-has-tip .dex-form-item-control-explain {
  line-height: 1.6;
  min-height: calc(var(--dex-okd-input-xs-tip-line-height) + 9px);
  min-height: calc(var(--dex-okd-input-xs-tip-line-height) + var(--dex-okd-input-xs-tip-margin, 4px) + 5px)
}

.dex-form .dex-form-item.dex-form-item-xs .dex-form-item-control-extra,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-control-extra {
  font-size: var(--dex-okd-input-xs-tip-font-size)
}

.dex-form .dex-form-item.dex-form-item-xs .dex-form-item-control-explain-error,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-control-explain-error {
  font-size: var(--dex-okd-input-xs-error-font-size)
}

.dex-form .dex-form-item.dex-form-item-xs .dex-form-item-control-explain-tip,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-control-explain-tip {
  font-size: var(--dex-okd-input-xs-tip-font-size)
}

.dex-form .dex-form-item.dex-form-item-sm,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name {
  margin-bottom: calc(var(--dex-okd-input-sm-tip-line-height) + var(--dex-okd-input-sm-tip-margin, 4px) + 5px)
}

.dex-form .dex-form-item.dex-form-item-sm .dex-form-item-label,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-label {
  font-size: var(--dex-okd-input-sm-label-font-size)
}

.dex-form .dex-form-item.dex-form-item-sm.dex-form-item-has-error .dex-form-item-control-explain,
.dex-form .dex-form-item.dex-form-item-sm.dex-form-item-has-tip .dex-form-item-control-explain,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name.dex-form-item-has-error .dex-form-item-control-explain,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name.dex-form-item-has-tip .dex-form-item-control-explain {
  line-height: 1.6;
  min-height: calc(var(--dex-okd-input-sm-tip-line-height) + 9px);
  min-height: calc(var(--dex-okd-input-sm-tip-line-height) + var(--dex-okd-input-sm-tip-margin, 4px) + 5px)
}

.dex-form .dex-form-item.dex-form-item-sm .dex-form-item-control-extra,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-control-extra {
  font-size: var(--dex-okd-input-sm-tip-font-size)
}

.dex-form .dex-form-item.dex-form-item-sm .dex-form-item-control-explain-error,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-control-explain-error {
  font-size: var(--dex-okd-input-sm-error-font-size)
}

.dex-form .dex-form-item.dex-form-item-sm .dex-form-item-control-explain-tip,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-control-explain-tip {
  font-size: var(--dex-okd-input-sm-tip-font-size)
}

.dex-form .dex-form-item.dex-form-item-md,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name {
  margin-bottom: calc(var(--dex-okd-input-md-tip-line-height) + var(--dex-okd-input-md-tip-margin, 4px) + 5px)
}

.dex-form .dex-form-item.dex-form-item-md .dex-form-item-label,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-label {
  font-size: var(--dex-okd-input-md-label-font-size)
}

.dex-form .dex-form-item.dex-form-item-md.dex-form-item-has-error .dex-form-item-control-explain,
.dex-form .dex-form-item.dex-form-item-md.dex-form-item-has-tip .dex-form-item-control-explain,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name.dex-form-item-has-error .dex-form-item-control-explain,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name.dex-form-item-has-tip .dex-form-item-control-explain {
  line-height: 1.6;
  min-height: calc(var(--dex-okd-input-md-tip-line-height) + 9px);
  min-height: calc(var(--dex-okd-input-md-tip-line-height) + var(--dex-okd-input-md-tip-margin, 4px) + 5px)
}

.dex-form .dex-form-item.dex-form-item-md .dex-form-item-control-extra,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-control-extra {
  font-size: var(--dex-okd-input-md-tip-font-size)
}

.dex-form .dex-form-item.dex-form-item-md .dex-form-item-control-explain-error,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-control-explain-error {
  font-size: var(--dex-okd-input-md-error-font-size)
}

.dex-form .dex-form-item.dex-form-item-md .dex-form-item-control-explain-tip,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-control-explain-tip {
  font-size: var(--dex-okd-input-md-tip-font-size)
}

.dex-form .dex-form-item.dex-form-item-lg,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name {
  margin-bottom: calc(var(--dex-okd-input-lg-tip-line-height) + var(--dex-okd-input-lg-tip-margin, 6px) + 5px)
}

.dex-form .dex-form-item.dex-form-item-lg .dex-form-item-label,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-label {
  font-size: var(--dex-okd-input-lg-label-font-size)
}

.dex-form .dex-form-item.dex-form-item-lg.dex-form-item-has-error .dex-form-item-control-explain,
.dex-form .dex-form-item.dex-form-item-lg.dex-form-item-has-tip .dex-form-item-control-explain,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name.dex-form-item-has-error .dex-form-item-control-explain,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name.dex-form-item-has-tip .dex-form-item-control-explain {
  line-height: 1.6;
  min-height: calc(var(--dex-okd-input-lg-tip-line-height) + 11px);
  min-height: calc(var(--dex-okd-input-lg-tip-line-height) + var(--dex-okd-input-lg-tip-margin, 6px) + 5px)
}

.dex-form .dex-form-item.dex-form-item-lg .dex-form-item-control-extra,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-control-extra {
  font-size: var(--dex-okd-input-lg-tip-font-size)
}

.dex-form .dex-form-item.dex-form-item-lg .dex-form-item-control-explain-error,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-control-explain-error {
  font-size: var(--dex-okd-input-lg-error-font-size)
}

.dex-form .dex-form-item.dex-form-item-lg .dex-form-item-control-explain-tip,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-control-explain-tip {
  font-size: var(--dex-okd-input-lg-tip-font-size)
}

.dex-form .dex-form-item.dex-form-item-xl,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name {
  margin-bottom: calc(var(--dex-okd-input-xl-tip-line-height) + var(--dex-okd-input-xl-tip-margin, 6px) + 5px)
}

.dex-form .dex-form-item.dex-form-item-xl .dex-form-item-label,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-label {
  font-size: var(--dex-okd-input-xl-label-font-size)
}

.dex-form .dex-form-item.dex-form-item-xl.dex-form-item-has-error .dex-form-item-control-explain,
.dex-form .dex-form-item.dex-form-item-xl.dex-form-item-has-tip .dex-form-item-control-explain,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name.dex-form-item-has-error .dex-form-item-control-explain,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name.dex-form-item-has-tip .dex-form-item-control-explain {
  line-height: 1.6;
  min-height: calc(var(--dex-okd-input-xl-tip-line-height) + 11px);
  min-height: calc(var(--dex-okd-input-xl-tip-line-height) + var(--dex-okd-input-xl-tip-margin, 6px) + 5px)
}

.dex-form .dex-form-item.dex-form-item-xl .dex-form-item-control-extra,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-control-extra {
  font-size: var(--dex-okd-input-xl-tip-font-size)
}

.dex-form .dex-form-item.dex-form-item-xl .dex-form-item-control-explain-error,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-control-explain-error {
  font-size: var(--dex-okd-input-xl-error-font-size)
}

.dex-form .dex-form-item.dex-form-item-xl .dex-form-item-control-explain-tip,
.dex-form .dex-form-item.dex-form-line.dex-form-item-has-name .dex-form-item-control-explain-tip {
  font-size: var(--dex-okd-input-xl-tip-font-size)
}

.dex-form .dex-form-item.dex-form-line {
  margin-bottom: 0
}

.dex-form.dex-form-vertical .dex-form-item {
  flex-direction: column
}

.dex-form.dex-form-vertical .dex-form-item.dex-form-item-xs .dex-form-item-label {
  line-height: var(--dex-okd-input-xs-label-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-xs-label-margin, 4px)
}

.dex-form.dex-form-vertical .dex-form-item.dex-form-item-sm .dex-form-item-label {
  line-height: var(--dex-okd-input-sm-label-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-sm-label-margin, 4px)
}

.dex-form.dex-form-vertical .dex-form-item.dex-form-item-md .dex-form-item-label {
  line-height: var(--dex-okd-input-md-label-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-md-label-margin, 4px)
}

.dex-form.dex-form-vertical .dex-form-item.dex-form-item-lg .dex-form-item-label {
  line-height: var(--dex-okd-input-lg-label-line-height);
  margin-bottom: 6px;
  margin-bottom: var(--dex-okd-input-lg-label-margin, 6px)
}

.dex-form.dex-form-vertical .dex-form-item.dex-form-item-xl .dex-form-item-label {
  line-height: var(--dex-okd-input-xl-label-line-height);
  margin-bottom: 6px;
  margin-bottom: var(--dex-okd-input-xl-label-margin, 6px)
}

.dex-form.dex-form-horizontal .dex-form-item-no-label .dex-form-item-control {
  margin-left: 16.66666667%;
  margin-left: var(--dex-okd-form-item-label-width-horizontal, 16.66666667%)
}

.dex-form.dex-form-horizontal .dex-form-item .dex-form-item-label {
  flex: 0 0 16.66666667%;
  flex: 0 0 var(--dex-okd-form-item-label-width-horizontal, 16.66666667%);
  overflow: hidden;
  white-space: nowrap;
  width: 16.66666667%;
  width: var(--dex-okd-form-item-label-width-horizontal, 16.66666667%)
}

.dex-form.dex-form-horizontal .dex-form-item .dex-form-item-label:after {
  content: ":";
  margin: 0 8px 0 2px
}

.dex-form.dex-form-horizontal .dex-form-item .dex-form-item-label.dex-form-item-label-no-colon:after {
  content: ""
}

.dex-form.dex-form-horizontal .dex-form-item .dex-form-item-label.dex-form-item-label-align-left {
  text-align: left
}

.dex-form.dex-form-horizontal .dex-form-item .dex-form-item-label.dex-form-item-label-align-right {
  text-align: right
}

.dex-form.dex-form-horizontal .dex-form-item .dex-form-item-label-action {
  display: none
}

.dex-form.dex-form-horizontal .dex-form-item .dex-form-item-control {
  flex: 1 1
}

.dex-form.dex-form-horizontal .dex-form-item.dex-form-item-xs .dex-form-item-label {
  line-height: var(--dex-okd-input-xs-height)
}

.dex-form.dex-form-horizontal .dex-form-item.dex-form-item-xs .dex-form-item-control-input {
  align-items: center;
  display: flex;
  min-height: var(--dex-okd-input-xs-height)
}

.dex-form.dex-form-horizontal .dex-form-item.dex-form-item-xs .dex-form-item-control-input-content {
  width: 100%
}

.dex-form.dex-form-horizontal .dex-form-item.dex-form-item-sm .dex-form-item-label {
  line-height: var(--dex-okd-input-sm-height)
}

.dex-form.dex-form-horizontal .dex-form-item.dex-form-item-sm .dex-form-item-control-input {
  align-items: center;
  display: flex;
  min-height: var(--dex-okd-input-sm-height)
}

.dex-form.dex-form-horizontal .dex-form-item.dex-form-item-sm .dex-form-item-control-input-content {
  width: 100%
}

.dex-form.dex-form-horizontal .dex-form-item.dex-form-item-md .dex-form-item-label {
  line-height: var(--dex-okd-input-md-height)
}

.dex-form.dex-form-horizontal .dex-form-item.dex-form-item-md .dex-form-item-control-input {
  align-items: center;
  display: flex;
  min-height: var(--dex-okd-input-md-height)
}

.dex-form.dex-form-horizontal .dex-form-item.dex-form-item-md .dex-form-item-control-input-content {
  width: 100%
}

.dex-form.dex-form-horizontal .dex-form-item.dex-form-item-lg .dex-form-item-label {
  line-height: var(--dex-okd-input-lg-height)
}

.dex-form.dex-form-horizontal .dex-form-item.dex-form-item-lg .dex-form-item-control-input {
  align-items: center;
  display: flex;
  min-height: var(--dex-okd-input-lg-height)
}

.dex-form.dex-form-horizontal .dex-form-item.dex-form-item-lg .dex-form-item-control-input-content {
  width: 100%
}

.dex-form.dex-form-horizontal .dex-form-item.dex-form-item-xl .dex-form-item-label {
  line-height: var(--dex-okd-input-xl-height)
}

.dex-form.dex-form-horizontal .dex-form-item.dex-form-item-xl .dex-form-item-control-input {
  align-items: center;
  display: flex;
  min-height: var(--dex-okd-input-xl-height)
}

.dex-form.dex-form-horizontal .dex-form-item.dex-form-item-xl .dex-form-item-control-input-content {
  width: 100%
}

.dex-form.dex-form-horizontal .dex-form-line .dex-form-item-no-label .dex-form-item-control {
  margin-left: 0
}

.dex-form.dex-form-inline {
  display: flex;
  flex-wrap: wrap
}

.dex-form.dex-form-inline .dex-form-item {
  display: flex;
  flex: none;
  margin-right: 16px;
  margin-right: var(--dex-okd-form-item-margin-inline, 16px)
}

.dex-form.dex-form-inline .dex-form-item .dex-form-item-label {
  width: auto
}

.dex-form.dex-form-inline .dex-form-item .dex-form-item-label:after {
  content: ":";
  margin: 0 8px 0 2px
}

.dex-form.dex-form-inline .dex-form-item .dex-form-item-label .dex-form-item-label-action,
.dex-form.dex-form-inline .dex-form-item .dex-form-item-label-action {
  display: none
}

.dex-form.dex-form-inline .dex-form-item.dex-form-item-xs .dex-form-item-label {
  line-height: var(--dex-okd-input-xs-height)
}

.dex-form.dex-form-inline .dex-form-item.dex-form-item-xs .dex-form-item-control-input {
  align-items: center;
  display: flex;
  min-height: var(--dex-okd-input-xs-height)
}

.dex-form.dex-form-inline .dex-form-item.dex-form-item-sm .dex-form-item-label {
  line-height: var(--dex-okd-input-sm-height)
}

.dex-form.dex-form-inline .dex-form-item.dex-form-item-sm .dex-form-item-control-input {
  align-items: center;
  display: flex;
  min-height: var(--dex-okd-input-sm-height)
}

.dex-form.dex-form-inline .dex-form-item.dex-form-item-md .dex-form-item-label {
  line-height: var(--dex-okd-input-md-height)
}

.dex-form.dex-form-inline .dex-form-item.dex-form-item-md .dex-form-item-control-input {
  align-items: center;
  display: flex;
  min-height: var(--dex-okd-input-md-height)
}

.dex-form.dex-form-inline .dex-form-item.dex-form-item-lg .dex-form-item-label {
  line-height: var(--dex-okd-input-lg-height)
}

.dex-form.dex-form-inline .dex-form-item.dex-form-item-lg .dex-form-item-control-input {
  align-items: center;
  display: flex;
  min-height: var(--dex-okd-input-lg-height)
}

.dex-form.dex-form-inline .dex-form-item.dex-form-item-xl .dex-form-item-label {
  line-height: var(--dex-okd-input-xl-height)
}

.dex-form.dex-form-inline .dex-form-item.dex-form-item-xl .dex-form-item-control-input {
  align-items: center;
  display: flex;
  min-height: var(--dex-okd-input-xl-height)
}

.dex-slider {
  display: flex
}

.dex-slider div {
  box-sizing: border-box
}

.dex-slider-content {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  padding: 5px 8px
}

.dex-slider-total {
  align-items: center;
  display: flex;
  margin-left: 16px;
  width: 48px
}

.dex-slider-label {
  color: var(--dex-okd-slider-label-color);
  font-size: var(--dex-okd-slider-label-font-size);
  line-height: var(--dex-okd-slider-label-line-height)
}

.dex-slider-desc {
  color: var(--dex-okd-slider-desc-color);
  font-size: var(--dex-okd-slider-desc-font-size);
  line-height: var(--dex-okd-slider-desc-line-height);
  margin-top: 6px;
  margin-top: var(--dex-okd-slider-desc-margin-top, 6px)
}

.dex-slider-clickable {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 10px;
  margin: 10px 0
}

.dex-slider-clickable-margin {
  margin-bottom: 20px
}

.dex-slider-track {
  background: var(--dex-okd-slider-common-track-color);
  border-radius: 3px;
  height: var(--dex-okd-slider-md-track-height);
  position: relative;
  width: 100%
}

.dex-slider-mark {
  background-color: var(--dex-okd-slider-common-active-color);
  border-radius: 3px;
  height: 100%;
  position: absolute
}

.dex-slider-mark-node {
  align-items: center;
  background: var(--dex-okd-slider-node-bg-color);
  border: 1px solid var(--dex-okd-slider-node-border-color);
  border-radius: 100%;
  cursor: pointer;
  display: flex;
  height: var(--dex-okd-slider-md-node-size);
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--dex-okd-slider-md-node-size)
}

.dex-slider-mark-node-text {
  color: var(--dex-okd-slider-common-text-color);
  font-size: 12px;
  left: 50%;
  line-height: 20px;
  position: absolute;
  top: 14px;
  top: var(--dex-okd-slider-common-top, 14px);
  transform: translateX(-50%);
  word-break: keep-all
}

.dex-slider-mark-node:last-child .dex-slider-mark-node-text {
  left: auto;
  right: 0;
  transform: none
}

.dex-slider-mark-node:first-child .dex-slider-mark-node-text {
  left: 0;
  transform: none
}

.dex-slider-mark-node-active {
  border-color: var(--dex-okd-slider-common-active-color)
}

.dex-slider-mark-node-active .dex-slider-mark-node-text {
  color: var(--dex-okd-slider-common-text-color);
  color: var(--dex-okd-slider-common-text-active-color, var(--dex-okd-slider-common-text-color))
}

.dex-slider-mark-node-no-circle {
  background: none;
  border: none
}

.dex-slider-handler {
  align-items: center;
  border-radius: 100%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%)
}

.dex-slider-handler:focus-visible {
  border-radius: 20px;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-slider-handler-inner {
  background-color: #fff;
  background-color: var(--dex-okd-slider-handler-bg-color, #fff);
  border: 2px solid var(--dex-okd-slider-handler-border-color);
  border-radius: 100%;
  height: var(--dex-okd-slider-md-handler-size);
  width: var(--dex-okd-slider-md-handler-size)
}

.dex-slider-handler-inner.dex-slider-active,
.dex-slider-handler-inner:hover {
  height: var(--dex-okd-slider-md-handler-hover-size);
  width: var(--dex-okd-slider-md-handler-hover-size)
}

.dex-slider-handler-inner.dex-slider-active {
  border: 4px solid var(--dex-okd-slider-handler-shadow-color)
}

.dex-slider-disabled {
  cursor: not-allowed
}

.dex-slider-disabled .dex-slider-handler-inner {
  border-color: var(--dex-okd-slider-handler-border-disabled-color, var(--dex-okd-slider-handler-border-color))
}

.dex-slider-disabled .dex-slider-handler-inner:hover {
  height: var(--dex-okd-slider-md-handler-size);
  width: var(--dex-okd-slider-md-handler-size)
}

.dex-slider-disabled .dex-slider-mark {
  background-color: var(--dex-okd-slider-common-active-color);
  background-color: var(--dex-okd-slider-common-disabled-active-color, var(--dex-okd-slider-common-active-color))
}

.dex-slider-disabled .dex-slider-mark-node-active {
  border-color: var(--dex-okd-slider-common-disabled-active-color, var(--dex-okd-slider-common-active-color))
}

.dex-slider-disabled .dex-slider-mark-node-active .dex-slider-mark-node-text {
  color: var(--dex-okd-slider-common-text-color);
  color: var(--dex-okd-slider-common-text-disabled-active-color, var(--dex-okd-slider-common-text-color))
}

.dex-slider-sm .dex-slider-track {
  height: var(--dex-okd-slider-sm-track-height)
}

.dex-slider-sm .dex-slider-mark-node {
  background: var(--dex-okd-slider-node-bg-color);
  border: 1px solid var(--dex-okd-slider-node-border-color);
  height: var(--dex-okd-slider-sm-node-size);
  width: var(--dex-okd-slider-sm-node-size)
}

.dex-slider-sm .dex-slider-mark-node-active {
  border: 1px solid var(--dex-okd-slider-common-active-color)
}

.dex-slider-sm .dex-slider-mark-node-text {
  top: 14px;
  top: var(--dex-okd-slider-sm-node-text-top, 14px)
}

.dex-slider-sm .dex-slider-handler-inner {
  border: 2px solid var(--dex-okd-slider-handler-border-color);
  height: var(--dex-okd-slider-sm-handler-size);
  width: var(--dex-okd-slider-sm-handler-size)
}

.dex-slider-sm .dex-slider-handler-inner:hover {
  height: var(--dex-okd-slider-sm-handler-hover-size);
  width: var(--dex-okd-slider-sm-handler-hover-size)
}

.dex-slider-sm .dex-slider-handler-inner.dex-slider-active {
  border-width: 2px
}

.dex-slider-sm .dex-slider-active {
  height: var(--dex-okd-slider-sm-handler-hover-size);
  width: var(--dex-okd-slider-sm-handler-hover-size)
}

.dex-slider-sm .dex-slider-disabled {
  cursor: not-allowed
}

.dex-slider-sm .dex-slider-disabled .dex-slider-handler-inner {
  border-color: var(--dex-okd-slider-handler-border-disabled-color, var(--dex-okd-slider-handler-border-color))
}

.dex-slider-sm .dex-slider-disabled .dex-slider-handler-inner:hover {
  height: var(--dex-okd-slider-sm-handler-size);
  width: var(--dex-okd-slider-sm-handler-size)
}

.dex-slider-sm .dex-slider-disabled .dex-slider-mark {
  background-color: var(--dex-okd-slider-common-active-color);
  background-color: var(--dex-okd-slider-common-disabled-active-color, var(--dex-okd-slider-common-active-color))
}

.dex-slider-sm .dex-slider-disabled .dex-slider-mark-node-active {
  border-color: var(--dex-okd-slider-common-disabled-active-color, var(--dex-okd-slider-common-active-color))
}

.dex-slider-sm .dex-slider-disabled .dex-slider-mark-node-active .dex-slider-mark-node-text {
  color: var(--dex-okd-slider-common-text-color);
  color: var(--dex-okd-slider-common-text-disabled-active-color, var(--dex-okd-slider-common-text-color))
}

.dex-select-empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: calc(100% - 48px);
  justify-content: center;
  min-height: 160px
}

.dex-select-empty .empty-text {
  color: var(--dex-okd-select-empty-default-text-color)
}

.dex-select-empty .empty-text-sm {
  font-size: var(--dex-okd-select-sm-empty-font-size)
}

.dex-select-empty .empty-text-md {
  font-size: var(--dex-okd-select-md-empty-font-size)
}

.dex-select-empty .empty-text-xs {
  font-size: var(--dex-okd-select-xs-empty-font-size)
}

.dex-select-empty .empty-text-lg {
  font-size: var(--dex-okd-select-md-empty-font-size);
  font-size: var(--dex-okd-select-lg-empty-font-size, var(--dex-okd-select-md-empty-font-size))
}

.dex-select-empty .empty-text-xl {
  font-size: var(--dex-okd-select-md-empty-font-size);
  font-size: var(--dex-okd-select-xl-empty-font-size, var(--dex-okd-select-md-empty-font-size))
}

.dex-select-empty .empty-text-mobile {
  font-size: 14px;
  font-size: var(--dex-okd-select-mobile-empty-font-size, 14px)
}

.dex-select-item {
  align-items: center;
  color: var(--dex-okd-select-option-default-text-color);
  cursor: pointer;
  display: flex;
  font-weight: 400;
  min-width: 90px
}

.dex-select-item.dex-select-item-active {
  background: var(--dex-okd-select-option-active-bg);
  color: var(--dex-okd-select-option-active-text-color)
}

.dex-select-item.hover,
.dex-select-item:hover {
  background: var(--dex-okd-select-option-hover-bg);
  color: var(--dex-okd-select-option-hover-text-color)
}

.dex-select-item.disabled {
  background: var(--dex-okd-select-option-disabled-bg);
  color: var(--dex-okd-select-option-disabled-text-color);
  cursor: not-allowed
}

.dex-select-item.disabled .dex-select-item-check {
  opacity: .2
}

.dex-select-item.align-center {
  justify-content: center
}

.dex-select-item.align-left {
  justify-content: flex-start
}

.dex-select-item.align-right {
  justify-content: flex-end
}

.dex-select-item-check {
  color: var(--dex-okd-select-check-default-icon-color);
  margin-left: auto
}

.dex-select-item-title {
  color: var(--dex-okd-select-common-title-color)
}

.dex-select-item-title-inner {
  display: inline-block
}

.dex-select-item-line {
  border-top: var(--dex-okd-select-option-common-line-height) solid var(--dex-okd-select-option-common-line-color);
  height: 0;
  margin: var(--dex-okd-select-option-common-line-margin-vertical) 0;
  width: 100%
}

.dex-select-item-show-check .dex-select-item-active {
  background: var(--dex-okd-select-option-active-bg)
}

.option-sm .dex-select-item-title {
  font-size: var(--dex-okd-select-sm-title-font-size);
  line-height: var(--dex-okd-select-sm-title-line-height);
  padding: var(--dex-okd-select-sm-title-padding-top) var(--dex-okd-select-sm-title-padding-horizontal) var(--dex-okd-select-sm-title-padding-bottom)
}

.option-sm .dex-select-item {
  font-size: var(--dex-okd-select-sm-option-font-size);
  line-height: var(--dex-okd-select-sm-option-line-height);
  padding: var(--dex-okd-select-sm-option-padding-vertical) var(--dex-okd-select-sm-option-padding-horizontal)
}

.option-sm .dex-select-item-check {
  font-size: 18px;
  font-size: var(--dex-okd-select-sm-option-icon-font-size, 18px);
  padding-left: 8px
}

.option-sm .dex-select-item.custom {
  padding: 0
}

.option-md .dex-select-item-title {
  font-size: var(--dex-okd-select-md-title-font-size);
  line-height: var(--dex-okd-select-md-title-line-height);
  padding: var(--dex-okd-select-md-title-padding-top) var(--dex-okd-select-md-title-padding-horizontal) var(--dex-okd-select-md-title-padding-bottom)
}

.option-md .dex-select-item {
  font-size: var(--dex-okd-select-md-option-font-size);
  line-height: var(--dex-okd-select-md-option-line-height);
  padding: var(--dex-okd-select-md-option-padding-vertical) var(--dex-okd-select-md-option-padding-horizontal)
}

.option-md .dex-select-item-check {
  font-size: 18px;
  font-size: var(--dex-okd-select-md-option-icon-font-size, 18px);
  padding-left: 8px
}

.option-md .dex-select-item.custom {
  padding: 0
}

.option-xs .dex-select-item-title {
  font-size: var(--dex-okd-select-xs-title-font-size);
  line-height: var(--dex-okd-select-xs-title-line-height);
  padding: var(--dex-okd-select-xs-title-padding-top) var(--dex-okd-select-xs-title-padding-horizontal) var(--dex-okd-select-xs-title-padding-bottom)
}

.option-xs .dex-select-item {
  font-size: var(--dex-okd-select-xs-option-font-size);
  line-height: var(--dex-okd-select-xs-option-line-height);
  padding: var(--dex-okd-select-xs-option-padding-vertical) var(--dex-okd-select-xs-option-padding-horizontal)
}

.option-xs .dex-select-item-check {
  font-size: 18px;
  font-size: var(--dex-okd-select-xs-option-icon-font-size, 18px);
  padding-left: 8px
}

.option-xs .dex-select-item.custom {
  padding: 0
}

.option-lg .dex-select-item-title {
  font-size: var(--dex-okd-select-md-title-font-size);
  font-size: var(--dex-okd-select-lg-title-font-size, var(--dex-okd-select-md-title-font-size));
  line-height: var(--dex-okd-select-md-title-line-height);
  line-height: var(--dex-okd-select-lg-title-line-height, var(--dex-okd-select-md-title-line-height));
  padding: var(--dex-okd-select-lg-title-padding-top, var(--dex-okd-select-md-title-padding-top)) var(--dex-okd-select-lg-title-padding-horizontal, var(--dex-okd-select-md-title-padding-horizontal)) var(--dex-okd-select-lg-title-padding-bottom, var(--dex-okd-select-md-title-padding-bottom))
}

.option-lg .dex-select-item {
  font-size: var(--dex-okd-select-md-option-font-size);
  font-size: var(--dex-okd-select-lg-option-font-size, var(--dex-okd-select-md-option-font-size));
  line-height: var(--dex-okd-select-md-option-line-height);
  line-height: var(--dex-okd-select-lg-option-line-height, var(--dex-okd-select-md-option-line-height));
  padding: var(--dex-okd-select-lg-option-padding-vertical, var(--dex-okd-select-md-option-padding-vertical)) var(--dex-okd-select-lg-option-padding-horizontal, var(--dex-okd-select-md-option-padding-horizontal))
}

.option-lg .dex-select-item-check {
  font-size: 18px;
  font-size: var(--dex-okd-select-lg-option-icon-font-size, 18px);
  padding-left: 8px
}

.option-lg .dex-select-item.custom {
  padding: 0
}

.option-xl .dex-select-item-title {
  font-size: var(--dex-okd-select-md-title-font-size);
  font-size: var(--dex-okd-select-xl-title-font-size, var(--dex-okd-select-md-title-font-size));
  line-height: var(--dex-okd-select-md-title-line-height);
  line-height: var(--dex-okd-select-xl-title-line-height, var(--dex-okd-select-md-title-line-height));
  padding: var(--dex-okd-select-xl-title-padding-top, var(--dex-okd-select-md-title-padding-top)) var(--dex-okd-select-xl-title-padding-horizontal, var(--dex-okd-select-md-title-padding-horizontal)) var(--dex-okd-select-xl-title-padding-bottom, var(--dex-okd-select-md-title-padding-bottom))
}

.option-xl .dex-select-item {
  font-size: var(--dex-okd-select-md-option-font-size);
  font-size: var(--dex-okd-select-xl-option-font-size, var(--dex-okd-select-md-option-font-size));
  line-height: var(--dex-okd-select-md-option-line-height);
  line-height: var(--dex-okd-select-xl-option-line-height, var(--dex-okd-select-md-option-line-height));
  padding: var(--dex-okd-select-xl-option-padding-vertical, var(--dex-okd-select-md-option-padding-vertical)) var(--dex-okd-select-xl-option-padding-horizontal, var(--dex-okd-select-md-option-padding-horizontal))
}

.option-xl .dex-select-item-check {
  font-size: 18px;
  font-size: var(--dex-okd-select-xl-option-icon-font-size, 18px);
  padding-left: 8px
}

.option-xl .dex-select-item.custom {
  padding: 0
}

@media (max-width:767px) {
  .dex-select-option:not(.drop-mode) .dex-select-item-container .dex-select-item-title {
    font-size: var(--dex-okd-select-md-title-font-size);
    font-size: var(--dex-okd-select-mobile-option-title-font-size, var(--dex-okd-select-md-title-font-size));
    line-height: var(--dex-okd-select-md-title-line-height);
    line-height: var(--dex-okd-select-mobile-option-title-line-height, var(--dex-okd-select-md-title-line-height));
    padding: var(--dex-okd-select-mobile-option-title-padding-top, var(--dex-okd-select-md-title-padding-top)) var(--dex-okd-select-mobile-option-title-padding-horizontal, var(--dex-okd-select-md-title-padding-horizontal)) var(--dex-okd-select-mobile-option-title-padding-bottom, var(--dex-okd-select-md-title-padding-bottom))
  }

  .dex-select-option:not(.drop-mode) .dex-select-item-container .dex-select-item {
    font-size: 16px;
    font-size: var(--dex-okd-select-mobile-option-font-size, 16px);
    line-height: 20px;
    line-height: var(--dex-okd-select-mobile-option-line-height, 20px);
    padding: 18px 16px;
    padding: var(--dex-okd-select-mobile-option-padding-vertical, 18px) var(--dex-okd-select-mobile-option-padding-horizontal, 16px)
  }

  .dex-select-option:not(.drop-mode) .dex-select-item-container .dex-select-item-check {
    font-size: 24px;
    font-size: var(--dex-okd-select-mobile-option-icon-font-size, 24px)
  }

  .dex-select-option:not(.drop-mode) .dex-select-item-container .dex-select-item.custom {
    padding: 0
  }
}

.dex-select-search.focus .dex-input-box.dex-select-search-box,
.dex-select-search.hover .dex-input-box.dex-select-search-box,
.dex-select-search:focus .dex-input-box.dex-select-search-box,
.dex-select-search:hover .dex-input-box.dex-select-search-box {
  background-color: var(--dex-okd-input-search-default-background);
  border-color: var(--dex-okd-input-search-default-border-color);
  box-shadow: var(--dex-okd-input-search-default-shadow)
}

.dex-select-search .dex-select-search-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.dex-select-search .dex-select-search-default-width {
  min-width: 70px;
  width: unset
}

.option-sm .dex-select-empty,
.option-sm .dex-select-search {
  margin: var(--dex-okd-select-sm-search-margin-vertical) var(--dex-okd-select-sm-search-margin-horizontal)
}

.option-md .dex-select-empty,
.option-md .dex-select-search {
  margin: var(--dex-okd-select-md-search-margin-vertical) var(--dex-okd-select-md-search-margin-horizontal)
}

.option-xs .dex-select-empty,
.option-xs .dex-select-search {
  margin: var(--dex-okd-select-xs-search-margin-vertical) var(--dex-okd-select-xs-search-margin-horizontal)
}

.option-lg .dex-select-empty,
.option-lg .dex-select-search {
  margin: var(--dex-okd-select-lg-search-margin-vertical, var(--dex-okd-select-md-search-margin-vertical)) var(--dex-okd-select-lg-search-margin-horizontal, var(--dex-okd-select-md-search-margin-horizontal))
}

.option-xl .dex-select-empty,
.option-xl .dex-select-search {
  margin: var(--dex-okd-select-xl-search-margin-vertical, var(--dex-okd-select-md-search-margin-vertical)) var(--dex-okd-select-xl-search-margin-horizontal, var(--dex-okd-select-md-search-margin-horizontal))
}

.dex-select-tag {
  align-items: center;
  background-color: #f2f2f2;
  background-color: var(--dex-okd-select-tag-default-background, #f2f2f2);
  border-radius: 4px;
  border-radius: var(--dex-okd-select-tag-border-radius, 4px);
  color: #000;
  color: var(--dex-okd-select-tag-text-default-color, #000);
  cursor: unset;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-select-tag-margin-bottom, 4px);
  margin-right: 4px;
  margin-right: var(--dex-okd-select-tag-margin-right, 4px);
  max-width: 100%;
  padding-left: 8px;
  padding-left: var(--dex-okd-select-tag-padding-horizontal, 8px);
  padding-right: 8px;
  padding-right: var(--dex-okd-select-tag-padding-horizontal, 8px)
}

.dex-select-tag-icon {
  color: #929292;
  color: var(--dex-okd-select-tag-icon-default-color, #929292);
  cursor: pointer;
  padding-left: 4px;
  padding-left: var(--dex-okd-select-tag-icon-padding-left, 4px)
}

.dex-select-tag-icon:hover {
  color: #000;
  color: var(--dex-okd-select-tag-icon-hover-color, #000)
}

.dex-select-tag-inner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.dex-select-tag.disabled {
  background-color: #f2f2f2;
  background-color: var(--dex-okd-select-tag-disabled-background, #f2f2f2);
  color: #929292;
  color: var(--dex-okd-select-tag-text-disabled-color, #929292);
  pointer-events: none
}

.dex-select-tag-sm {
  font-size: 12px;
  font-size: var(--dex-okd-select-sm-tag-text-font-size, 12px);
  height: 24px;
  height: var(--dex-okd-select-sm-tag-height, 24px);
  line-height: 24px;
  line-height: var(--dex-okd-select-sm-tag-height, 24px)
}

.dex-select-tag-sm .dex-select-tag-icon {
  font-size: 14px;
  font-size: var(--dex-okd-select-sm-tag-icon-font-size, 14px)
}

.dex-select-tag-md {
  font-size: 14px;
  font-size: var(--dex-okd-select-md-tag-text-font-size, 14px);
  height: 32px;
  height: var(--dex-okd-select-md-tag-height, 32px);
  line-height: 32px;
  line-height: var(--dex-okd-select-md-tag-height, 32px)
}

.dex-select-tag-md .dex-select-tag-icon {
  font-size: 16px;
  font-size: var(--dex-okd-select-md-tag-icon-font-size, 16px)
}

.dex-select-tag-xs {
  font-size: 12px;
  font-size: var(--dex-okd-select-xs-tag-text-font-size, 12px);
  height: 20px;
  height: var(--dex-okd-select-xs-tag-height, 20px);
  line-height: 20px;
  line-height: var(--dex-okd-select-xs-tag-height, 20px)
}

.dex-select-tag-xs .dex-select-tag-icon {
  font-size: 10px;
  font-size: var(--dex-okd-select-xs-tag-icon-font-size, 10px)
}

.dex-select-tag-lg {
  font-size: 14px;
  font-size: var(--dex-okd-select-lg-tag-text-font-size, 14px);
  height: 36px;
  height: var(--dex-okd-select-lg-tag-height, 36px);
  line-height: 36px;
  line-height: var(--dex-okd-select-lg-tag-height, 36px)
}

.dex-select-tag-lg .dex-select-tag-icon {
  font-size: 16px;
  font-size: var(--dex-okd-select-lg-tag-icon-font-size, 16px)
}

.dex-select-tag-xl {
  font-size: 14px;
  font-size: var(--dex-okd-select-xl-tag-text-font-size, 14px);
  height: 40px;
  height: var(--dex-okd-select-xl-tag-height, 40px);
  line-height: 40px;
  line-height: var(--dex-okd-select-xl-tag-height, 40px)
}

.dex-select-tag-xl .dex-select-tag-icon {
  font-size: 16px;
  font-size: var(--dex-okd-select-xl-tag-icon-font-size, 16px)
}

.dex-select-footer-dialog>.dex-select-footer {
  align-items: center;
  display: flex
}

.dex-select-footer-dialog>.dex-select-footer>.dex-select-footer-cancel {
  max-width: 30%
}

.dex-select-footer-dialog>.dex-select-footer>.dex-select-footer-confirm {
  margin-left: 12px
}

.dex-select-option-dialog-container {
  background: var(--dex-okd-select-drop-box-bg) !important;
  padding: var(--dex-okd-select-mobile-option-container-padding-vertical) 0
}

.dex-select-option.fixed-height {
  height: calc(100% - 32px);
  max-height: unset
}

.dex-select-option.fixed-height .dex-dialog-scroll-box {
  display: flex;
  flex-direction: column;
  overflow-y: hidden
}

.dex-select-option.fixed-height .dex-dialog-container {
  display: flex;
  flex-direction: column
}

.dex-select-option.fixed-height .dex-select-item-container {
  flex: 1 1
}

.dex-select-option.fixed-height .dex-select-item-container.dex-select-item-container-real {
  -webkit-overflow-scrolling: touch;
  overflow: auto
}

.dex-select-option.fixed-height.dex-select-option-fit-to-height {
  height: unset;
  max-height: calc(100% - 32px)
}

.dex-select-option.fixed-height.dex-select-option-fit-to-height .dex-dialog-container {
  max-height: 100%;
  overflow: auto
}

.dex-select-option-pc {
  cursor: auto;
  display: flex;
  flex-direction: column;
  max-height: 248px;
  padding-top: var(--dex-okd-select-drop-box-margin-top)
}

.dex-select-option-pc .dex-select-option-box {
  background: var(--dex-okd-select-drop-box-bg);
  border: 1px solid var(--dex-okd-select-drop-box-border-color);
  border-radius: var(--dex-okd-select-drop-box-border-radius);
  box-shadow: var(--dex-okd-select-drop-box-shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  padding: 4px 0
}

.dex-select-option-pc .pc-option-scroll {
  -webkit-overflow-scrolling: touch;
  flex: 1 1;
  overflow: auto
}

.dex-select-option-pc .pc-option-footer {
  border-top: thin solid var(--dex-okd-select-common-border-color);
  padding: 12px 16px
}

.dex-select-option-pc.align-left {
  right: unset
}

.dex-select-option-pc.align-right {
  left: unset
}

.dex-select-option-pc.fixed-height {
  height: unset
}

.dex-select-option-pc.fixed-height .pc-option-scroll {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  height: 276px;
  overflow: hidden
}

.dex-select-option .pc-option-scroll.dex-select-option-pc-fit-to-height {
  height: auto;
  max-height: 292px
}

.dex-select-option-mask {
  z-index: 9800
}

.dex-select .select-popup-reference {
  cursor: pointer;
  position: absolute
}

.dex-select-option-dialog-container>.dex-select-footer-dialog {
  padding: 16px
}

.dex-select-value {
  box-sizing: border-box;
  cursor: pointer;
  font-size: var(--dex-okd-select-md-text-font-size)
}

.dex-select-value-box {
  outline: none
}

.dex-select-value .value {
  align-items: center;
  color: var(--dex-okd-select-common-text-color);
  display: flex;
  margin-right: 8px;
  width: 100%
}

.dex-select-value .placeholder {
  color: var(--dex-okd-input-default-placeholder-color)
}

.dex-select-value .disabled {
  cursor: not-allowed
}

.dex-select-value .disabled .value {
  color: var(--dex-okd-input-disabled-text-color)
}

.dex-select-value .disabled .icon-sign {
  color: var(--dex-okd-select-input-select-default-icon-color);
  color: var(--dex-okd-select-input-select-disabled-icon-color, var(--dex-okd-select-input-select-default-icon-color))
}

.dex-select-value .icon-sign {
  color: var(--dex-okd-select-input-select-default-icon-color);
  font-size: var(--dex-okd-select-input-select-default-icon-size);
  margin-left: auto;
  margin-right: 4px;
  transition: transform .2s linear
}

.dex-select-inner-box {
  cursor: pointer;
  position: relative
}

.dex-select-inner-box input[readonly] {
  cursor: pointer
}

.dex-select-inner-box>.reference-suffix {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%)
}

.dex-select-tag-container {
  display: flex;
  flex-wrap: wrap;
  margin-right: 4px;
  margin-top: 4px;
  max-width: 100%;
  padding-right: 24px
}

.dex-select-tag-container-responsive {
  display: flex;
  margin-right: 24px;
  margin-top: 4px;
  width: 100%
}

.dex-input-sm .dex-select-inner-box>.reference-suffix {
  right: var(--dex-okd-input-sm-padding-horizontal)
}

.dex-input-sm.dex-select-value {
  font-size: var(--dex-okd-select-sm-text-font-size)
}

.dex-input-md .dex-select-inner-box>.reference-suffix {
  right: var(--dex-okd-input-md-padding-horizontal)
}

.dex-input-md.dex-select-value {
  font-size: var(--dex-okd-select-md-text-font-size)
}

.dex-input-xs .dex-select-inner-box>.reference-suffix {
  right: var(--dex-okd-input-xs-padding-horizontal)
}

.dex-input-xs.dex-select-value {
  font-size: var(--dex-okd-select-xs-text-font-size)
}

.dex-input-lg .dex-select-inner-box>.reference-suffix {
  right: var(--dex-okd-input-lg-padding-horizontal)
}

.dex-input-lg.dex-select-value {
  font-size: var(--dex-okd-select-lg-text-font-size);
  font-size: var(--dex-okd-select-lg-text-font-size, var(--dex-okd-select-lg-text-font-size))
}

.dex-input-xl .dex-select-inner-box>.reference-suffix {
  right: var(--dex-okd-input-xl-padding-horizontal)
}

.dex-input-xl.dex-select-value {
  font-size: var(--dex-okd-select-md-text-font-size);
  font-size: var(--dex-okd-select-xl-text-font-size, var(--dex-okd-select-md-text-font-size))
}

.dex-select-value {
  width: 100%
}

.dex-select-text-value {
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  font-size: var(--dex-okd-select-md-text-font-size);
  justify-content: flex-start
}

.dex-select-text-value.align-right {
  justify-content: flex-end
}

.dex-select-text-value .value {
  align-items: center;
  color: var(--dex-okd-select-text-select-default-font-color);
  display: flex
}

.dex-select-text-value .icon-sign {
  align-items: center;
  color: var(--dex-okd-select-text-select-default-icon-color);
  display: flex;
  font-size: var(--dex-okd-select-text-select-default-icon-size);
  margin-left: 6px;
  margin-right: 0
}

.dex-select-text-value:hover .value {
  color: var(--dex-okd-select-text-select-hover-font-color)
}

.dex-select-text-value:hover .icon-sign {
  color: var(--dex-okd-select-text-select-hover-icon-color)
}

.dex-select-text-value.focus .value {
  color: var(--dex-okd-select-text-select-select-font-color)
}

.dex-select-text-value.focus .icon-sign {
  color: var(--dex-okd-select-text-select-select-icon-color)
}

.dex-select-text-value.disabled {
  cursor: not-allowed
}

.dex-select-text-value.disabled .value {
  color: var(--dex-okd-select-text-select-disabled-font-color)
}

.dex-select-text-value.disabled .icon-sign {
  color: var(--dex-okd-select-text-select-disabled-icon-color)
}

.input-sm.dex-select-text-value {
  font-size: var(--dex-okd-select-sm-text-font-size)
}

.input-md.dex-select-text-value {
  font-size: var(--dex-okd-select-md-text-font-size)
}

.input-xs.dex-select-text-value {
  font-size: var(--dex-okd-select-xs-text-font-size)
}

.input-lg.dex-select-text-value {
  font-size: var(--dex-okd-select-lg-text-font-size);
  font-size: var(--dex-okd-select-lg-text-font-size, var(--dex-okd-select-lg-text-font-size))
}

.input-xl.dex-select-text-value {
  font-size: var(--dex-okd-select-md-text-font-size);
  font-size: var(--dex-okd-select-xl-text-font-size, var(--dex-okd-select-md-text-font-size))
}

.dex-select-value-box:focus-visible .dex-select-a11y-ring {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-select-value-box:focus-visible .dex-select-a11y-ring-text {
  border-radius: 4px;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-select-value-box.display-area:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-select .select-up {
  transition: transform .2s linear
}

.dex-select .select-up-active {
  transform: rotate(180deg)
}

.dex-select-reference-icon-clear {
  color: #929292;
  color: var(--dex-okd-select-reference-icon-default-color, #929292);
  display: inline-block;
  margin-right: 4px;
  transition: transform .2s linear
}

.dex-select-reference-icon-clear:hover {
  color: #000;
  color: var(--dex-okd-select-reference-icon-hover-color, #000)
}

.dex-select-reference-icon-clear.disabled {
  pointer-events: none
}

.dex-select-reference-icon {
  display: inline-block
}

.dex-select-reference-icon.dex-select-arrow-icon-sm {
  font-size: 14px;
  font-size: var(--dex-okd-select-sm-arrow-icon-font-size, 14px)
}

.dex-select-reference-icon.dex-select-reference-icon-sm {
  font-size: 14px;
  font-size: var(--dex-okd-select-sm-reference-icon-font-size, 14px)
}

.dex-select-reference-icon.dex-select-arrow-icon-md {
  font-size: 16px;
  font-size: var(--dex-okd-select-md-arrow-icon-font-size, 16px)
}

.dex-select-reference-icon.dex-select-reference-icon-md {
  font-size: 16px;
  font-size: var(--dex-okd-select-md-reference-icon-font-size, 16px)
}

.dex-select-reference-icon.dex-select-arrow-icon-xs {
  font-size: 14px;
  font-size: var(--dex-okd-select-xs-arrow-icon-font-size, 14px)
}

.dex-select-reference-icon.dex-select-reference-icon-xs {
  font-size: 14px;
  font-size: var(--dex-okd-select-xs-reference-icon-font-size, 14px)
}

.dex-select-reference-icon.dex-select-arrow-icon-lg {
  font-size: 16px;
  font-size: var(--dex-okd-select-lg-arrow-icon-font-size, 16px)
}

.dex-select-reference-icon.dex-select-reference-icon-lg {
  font-size: 16px;
  font-size: var(--dex-okd-select-lg-reference-icon-font-size, 16px)
}

.dex-select-reference-icon.dex-select-arrow-icon-xl {
  font-size: 16px;
  font-size: var(--dex-okd-select-xl-arrow-icon-font-size, 16px)
}

.dex-select-reference-icon.dex-select-reference-icon-xl {
  font-size: 16px;
  font-size: var(--dex-okd-select-xl-reference-icon-font-size, 16px)
}

.dex-select {
  box-sizing: border-box;
  position: relative
}

.dex-select.select-text {
  display: inline-block
}

.dex-a11y-card {
  position: relative
}

.dex-a11y-card .dex-a11y-card-focusable:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-a11y-card-main-action {
  bottom: 0;
  cursor: pointer;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%
}

.dex-a11y-card-inner-action {
  position: relative;
  z-index: 1
}

.dex-datepicker-reference {
  position: relative
}

.dex-datepicker-reference-native {
  background: transparent;
  color: transparent;
  height: 100%;
  left: 0;
  outline: none;
  padding-right: 8px;
  position: absolute;
  top: 0;
  width: calc(100% - 42px);
  z-index: 100
}

.dex-datepicker-input-custom-icon {
  color: var(--dex-okd-color-gray-400);
  color: var(--dex-okd-datepicker-input-icon-color, var(--dex-okd-color-gray-400));
  cursor: pointer
}

.dex-datepicker-input-icon-disabled {
  cursor: not-allowed
}

.dex-datepicker .dex-datepicker-input-xs-icon-size {
  font-size: 16px;
  font-size: var(--dex-okd-datepicker-xs-icon-font-size, 16px)
}

.dex-datepicker .dex-datepicker-input-sm-icon-size {
  font-size: 16px;
  font-size: var(--dex-okd-datepicker-sm-icon-font-size, 16px)
}

.dex-datepicker .dex-datepicker-input-md-icon-size {
  font-size: 16px;
  font-size: var(--dex-okd-datepicker-md-icon-font-size, 16px)
}

.dex-datepicker .dex-datepicker-input-lg-icon-size {
  font-size: 18px;
  font-size: var(--dex-okd-datepicker-lg-icon-font-size, 18px)
}

.dex-datepicker .dex-datepicker-input-xl-icon-size {
  font-size: 20px;
  font-size: var(--dex-okd-datepicker-xl-icon-font-size, 20px)
}

.dex-datepicker-header {
  color: var(--dex-okd-datepicker-title-default-color);
  color: var(--dex-okd-datepicker-panel-header-default-text-color, var(--dex-okd-datepicker-title-default-color));
  display: flex;
  font-size: 16px;
  font-weight: 500;
  height: 36px;
  justify-content: space-between;
  line-height: 36px;
  padding: 0 16px
}

.dex-datepicker-header-block {
  align-items: center;
  display: flex;
  font-size: 14px
}

.dex-datepicker-header .text-box {
  border-radius: 4px;
  cursor: pointer;
  padding: 8px
}

.dex-datepicker-header .text-box:hover {
  background-color: var(--dex-okd-color-gray-100);
  background-color: var(--dex-okd-datepicker-panel-header-hover-text-bg-color, var(--dex-okd-color-gray-100))
}

.dex-datepicker-header .header-icon {
  margin-left: 4px;
  transition: transform .2s;
  vertical-align: middle
}

.dex-datepicker-header .arrow-up {
  transform: rotate(180deg)
}

.dex-datepicker-header .display-year {
  align-items: center;
  display: flex;
  margin-left: 8px
}

.dex-datepicker-header .nav-box .nav-icon {
  color: var(--dex-okd-datepicker-icon-default-color);
  color: var(--dex-okd-datepicker-panel-header-default-icon-color, var(--dex-okd-datepicker-icon-default-color));
  font-size: 20px
}

.dex-datepicker-header .nav-box .nav-item {
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  height: 32px;
  justify-content: center;
  width: 32px
}

.dex-datepicker-header .nav-box .nav-item:hover {
  background-color: var(--dex-okd-color-gray-100);
  background-color: var(--dex-okd-datepicker-panel-header-hover-icon-bg-color, var(--dex-okd-color-gray-100))
}

.dex-datepicker-header .nav-box .nav-item:last-child {
  margin-left: 4px
}

.dex-datepicker-body {
  display: flex
}

.dex-datepicker-panel-day {
  color: var(--dex-okd-datepicker-day-default-text-color)
}

.dex-datepicker-panel-day:not(.dex-datepicker-panel-day-disabled):not(.dex-datepicker-panel-day-active):hover .item-inner {
  background-color: var(--dex-okd-datepicker-day-hover-background)
}

.dex-datepicker-panel-day-active:not(.dex-datepicker-panel-day-disable) .item-inner {
  background-color: var(--dex-okd-datepicker-day-selected-background);
  color: var(--dex-okd-datepicker-day-selected-text-color);
  font-weight: 500
}

.dex-datepicker-panel-day-disabled:not(.dex-datepicker-panel-day-notSelectable) {
  background-color: var(--dex-okd-datepicker-day-disable-background);
  color: var(--dex-okd-datepicker-day-disable-text-color);
  cursor: not-allowed
}

.dex-datepicker-panel-day-disabled:not(.dex-datepicker-panel-day-notSelectable) .dex-datepicker-panel-today {
  border-color: var(--dex-okd-datepicker-today-border-disable-color)
}

.dex-datepicker-panel-day-notSelectable {
  cursor: not-allowed
}

.dex-datepicker-panel-month {
  color: var(--dex-okd-datepicker-month-default-text-color)
}

.dex-datepicker-panel-month:not(.dex-datepicker-panel-month-disabled):not(.dex-datepicker-panel-month-active):hover .item-inner {
  background-color: var(--dex-okd-datepicker-month-hover-background)
}

.dex-datepicker-panel-month-active:not(.dex-datepicker-panel-month-disable) .item-inner {
  background-color: var(--dex-okd-datepicker-month-selected-background);
  color: var(--dex-okd-datepicker-month-selected-text-color);
  font-weight: 500
}

.dex-datepicker-panel-month-disabled:not(.dex-datepicker-panel-month-notSelectable) {
  background-color: var(--dex-okd-datepicker-month-disable-background);
  color: var(--dex-okd-datepicker-month-disable-text-color);
  cursor: not-allowed
}

.dex-datepicker-panel-month-disabled:not(.dex-datepicker-panel-month-notSelectable) .dex-datepicker-panel-today {
  border-color: var(--dex-okd-datepicker-today-border-disable-color)
}

.dex-datepicker-panel-month-notSelectable {
  cursor: not-allowed
}

.dex-datepicker-panel-year {
  color: var(--dex-okd-datepicker-year-default-text-color)
}

.dex-datepicker-panel-year:not(.dex-datepicker-panel-year-disabled):not(.dex-datepicker-panel-year-active):hover .item-inner {
  background-color: var(--dex-okd-datepicker-year-hover-background)
}

.dex-datepicker-panel-cover:before {
  background-color: var(--dex-okd-datepicker-day-range-background)
}

.dex-datepicker-panel-year-active:not(.dex-datepicker-panel-year-disable) .item-inner {
  background-color: var(--dex-okd-datepicker-year-selected-background);
  color: var(--dex-okd-datepicker-year-selected-text-color);
  font-weight: 500
}

.dex-datepicker-panel-year-disabled:not(.dex-datepicker-panel-year-notSelectable) {
  background-color: var(--dex-okd-datepicker-year-disable-background);
  color: var(--dex-okd-datepicker-year-disable-text-color);
  cursor: not-allowed
}

.dex-datepicker-panel-year-disabled:not(.dex-datepicker-panel-year-notSelectable) .dex-datepicker-panel-today {
  border-color: var(--dex-okd-datepicker-today-border-disable-color)
}

.dex-datepicker-panel-year-notSelectable {
  cursor: not-allowed
}

.dex-datepicker-panel {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  height: 100%;
  padding: 0 16px 16px;
  width: 100%
}

.dex-datepicker-panel-header {
  border-bottom: 1px solid var(--dex-okd-color-line-muted);
  display: flex;
  height: 36px;
  margin-bottom: 8px
}

.dex-datepicker-panel-footer {
  border-top: 1px solid var(--dex-okd-color-line-muted);
  display: flex;
  justify-content: flex-end;
  padding: 12px 22px
}

.dex-datepicker-panel-footer .confirm-button {
  margin-left: 12px
}

.dex-datepicker-panel-week {
  align-items: center;
  color: var(--dex-okd-datepicker-week-default-text-color);
  display: flex;
  flex: 1 1;
  font-size: 12px;
  justify-content: center;
  text-align: center
}

.dex-datepicker-panel-main {
  cursor: pointer;
  display: flex;
  flex: 1 1;
  flex-direction: column
}

.dex-datepicker-panel-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  width: 100%
}

.dex-datepicker-panel-row:last-child {
  margin-bottom: 0
}

.dex-datepicker-panel-row-week:hover .dex-datepicker-panel-day:not(.dex-datepicker-panel-day-disabled):before {
  background-color: var(--dex-okd-datepicker-day-range-background)
}

.dex-datepicker-panel-item {
  flex: 1 1;
  flex-direction: column
}

.dex-datepicker-panel-item,
.dex-datepicker-panel-item .item-inner {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative
}

.dex-datepicker-panel-item .item-inner {
  border-radius: 50%;
  height: 32px;
  width: 32px;
  z-index: 2
}

.dex-datepicker-panel-item:before {
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1
}

.dex-datepicker-panel-item.range-start:before {
  border-radius: 50% 0 0 50%
}

.dex-datepicker-panel-item.range-end:before {
  border-radius: 0 50% 50% 0
}

.dex-datepicker-panel-hidden {
  visibility: hidden
}

.dex-datepicker-panel-today .item-inner {
  background-color: var(--dex-okd-color-gray-050);
  background-color: var(--dex-okd-datepicker-today-bg-color, var(--dex-okd-color-gray-050));
  color: var(--dex-okd-datepicker-today-border-color);
  color: var(--dex-okd-datepicker-today-text-color, var(--dex-okd-datepicker-today-border-color));
  font-weight: 500
}

.dex-datepicker-panel-second {
  color: var(--dex-okd-datepicker-day-second-color);
  font-weight: 400
}

.dex-datepicker-panel-second .dex-datepicker-panel-today {
  border-color: var(--dex-okd-datepicker-today-border-disable-color)
}

.dex-datepicker-panel.no-padding {
  padding: 0
}

.dex-datepicker-panel .picker-scroll-view {
  direction: ltr;
  height: 260px;
  height: var(--dex-okd-datepicker-scroll-container-height, 260px);
  padding: 0;
  padding: var(--dex-okd-datepicker-scroll-container-padding-vertical, 0) var(--dex-okd-datepicker-scroll-container-padding-horizontal, 0)
}

.dex-datepicker-panel .picker-scroll-view .scroll-view-mask {
  background-color: initial;
  background-color: var(--dex-okd-datepicker-scroll-item-active-background, transparent);
  border-bottom: 1px solid #ebebeb;
  border-bottom: 1px solid var(--dex-okd-datepicker-scroll-item-active-border-color, #ebebeb);
  border-radius: 0;
  border-radius: var(--dex-okd-datepicker-scroll-item-active-radius, 0);
  border-top: 1px solid #ebebeb;
  border-top: 1px solid var(--dex-okd-datepicker-scroll-item-active-border-color, #ebebeb);
  height: 36px;
  height: var(--dex-okd-datepicker-scroll-item-default-height, 36px);
  margin: 0;
  margin: 0 var(--dex-okd-datepicker-scroll-container-padding-horizontal, 0)
}

.dex-datepicker-panel .picker-scroll-view .scroll-view-item {
  color: #929292;
  color: var(--dex-okd-datepicker-scroll-item-default-font-color, #929292);
  font-size: 14px;
  font-size: var(--dex-okd-datepicker-scroll-item-default-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-datepicker-scroll-item-default-font-weight, 400);
  height: 36px;
  height: var(--dex-okd-datepicker-scroll-item-default-height, 36px);
  line-height: 36px;
  line-height: var(--dex-okd-datepicker-scroll-item-default-height, 36px)
}

.dex-datepicker-panel .picker-scroll-view .scroll-view-item-active {
  color: #000;
  color: var(--dex-okd-datepicker-scroll-item-active-font-color, #000);
  font-size: 16px;
  font-size: var(--dex-okd-datepicker-scroll-item-active-font-size, 16px);
  font-weight: 500;
  font-weight: var(--dex-okd-datepicker-scroll-item-active-font-weight, 500)
}

@media (max-width:767px) {
  .dex-datepicker-panel-footer .confirm-button {
    flex: 1 1
  }

  .dex-datepicker-panel-footer .cancel-button {
    min-width: 100px
  }
}

.dex-datepicker-footer {
  align-items: center;
  border-top: 1px solid var(--dex-okd-datepicker-footer-border-color);
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  padding: 20px
}

.dex-datepicker-footer-clear {
  color: var(--dex-okd-datepicker-footer-button-color);
  cursor: pointer;
  font-weight: 500;
  height: 100%
}

.dex-datepicker-footer-confirm {
  color: var(--dex-okd-datepicker-footer-button-color);
  justify-content: space-between;
  padding: 13px 16px
}

.dex-datepicker-footer-confirm .pc-confirm-button {
  margin-left: 12px
}

.dex-datepicker-footer-confirm-desc {
  font-size: 16px
}

.dex-datepicker-footer-confirm-desc .footer-confirm-desc-selected {
  padding-right: 4px
}

.dex-datepicker-footer-confirm-desc .footer-confirm-desc-to {
  padding: 0 4px
}

.dex-datepicker-footer-confirm-mobile {
  padding: 12px 16px
}

.dex-datepicker-footer-confirm-mobile .confirm-button {
  margin-left: 12px
}

@media (max-width:767px) {
  .dex-datepicker-footer-confirm-mobile .confirm-button {
    flex: 1 1
  }

  .dex-datepicker-footer-confirm-mobile .cancel-button {
    min-width: 100px
  }
}

.dex-datepicker-popup {
  display: flex
}

.dex-datepicker-dialog {
  background-color: var(--dex-okd-datepicker-default-background) !important
}

.dex-datepicker-inner {
  min-width: 284px;
  padding-top: 16px
}

.dex-datepicker-board {
  background: var(--dex-okd-datepicker-default-background);
  display: flex;
  flex-direction: column
}

.dex-datepicker-picker-group {
  display: flex;
  flex-direction: column;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content
}

.dex-datepicker-picker-group .picker-group-box {
  display: flex;
  position: relative
}

.dex-datepicker-picker-group .picker-group-split-line {
  background-color: var(--dex-okd-color-line-muted);
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  width: 1px
}

.dex-datepicker-picker-group .picker-group-shortcut {
  box-sizing: border-box;
  max-width: 568px;
  padding: 0 16px 26px
}

.dex-datepicker-range-mobile-reference {
  padding: 0 16px
}

.dex-datepicker-shortcut-mobile {
  padding: 0 16px;
  padding: var(--dex-okd-datepicker-shortcut-button-container-padding-horizontal, 0) var(--dex-okd-datepicker-shortcut-button-container-padding-vertical, 16px)
}

.dex-datepicker-range-reference {
  cursor: pointer
}

.dex-datepicker-range-reference .custom-clear-icon {
  color: var(--dex-okd-color-gray-400);
  color: var(--dex-okd-datepicker-input-icon-color, var(--dex-okd-color-gray-400));
  cursor: pointer
}

.dex-datepicker-range-reference-input {
  display: flex
}

.dex-datepicker-range-reference-container {
  align-items: center;
  display: flex;
  flex: 1 1;
  height: 100%;
  position: relative
}

.dex-datepicker-range-reference-container .disabled {
  color: var(--dex-okd-input-disabled-text-color);
  cursor: not-allowed
}

.dex-datepicker-range-reference-place {
  opacity: 0;
  position: absolute;
  z-index: -999999
}

.dex-datepicker-range-reference-item {
  align-items: center;
  display: flex;
  height: 100%;
  width: 100%
}

.dex-datepicker-range-reference-item-input {
  border: none;
  caret-color: var(--dex-okd-datepicker-input-caret-color);
  color: var(--dex-okd-datepicker-default-font-color);
  cursor: pointer;
  height: 100%;
  outline: none;
  width: 100%
}

.dex-datepicker-range-reference-item-input::-webkit-input-placeholder {
  color: var(--dex-okd-datepicker-input-placeholder-color)
}

.dex-datepicker-range-reference-item-input:-moz-placeholder {
  color: var(--dex-okd-datepicker-input-placeholder-color);
  opacity: 1
}

.dex-datepicker-range-reference-item-input::-ms-input-placeholder {
  color: var(--dex-okd-datepicker-input-placeholder-color)
}

.dex-datepicker-range-reference-connection.icon-pointer {
  color: var(--dex-okd-datepicker-day-second-color);
  font-size: 20px;
  margin-right: 8px
}

.dex-datepicker-range-reference-focus {
  border-bottom: 2px solid var(--dex-okd-datepicker-input-border-color);
  margin-bottom: -2px
}

.dex-datepicker-range-reference-input-group {
  justify-content: center;
  margin-top: 20px
}

.dex-datepicker-range-reference-input-group .dex-datepicker-range-reference-item-input {
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  height: 36px;
  text-align: center;
  width: 100% !important
}

.dex-datepicker-range-reference-input-group .dex-datepicker-range-reference-connection {
  margin: 0 10px
}

.dex-datepicker-range-reference-input-group .dex-datepicker-range-reference-item {
  border: 1px solid var(--dex-okd-color-gray-200);
  border-radius: 4px
}

.dex-datepicker-range-reference-input-group .dex-datepicker-range-reference-focus {
  border: 1px solid var(--dex-okd-datepicker-input-mobile-border-color, var(--dex-okd-color-fq-blue-lv1));
  margin: 0
}

.dex-datepicker-range-reference-xs {
  font-size: var(--dex-okd-datepicker-xs-range-input-font-size)
}

.dex-datepicker-range-reference-sm {
  font-size: var(--dex-okd-datepicker-sm-range-input-font-size)
}

.dex-datepicker-range-reference-md {
  font-size: var(--dex-okd-datepicker-md-range-input-font-size)
}

.dex-datepicker-range-reference-lg {
  font-size: 16px;
  font-size: var(--dex-okd-datepicker-lg-range-input-font-size, 16px)
}

.dex-datepicker-range-reference-xl {
  font-size: 16px;
  font-size: var(--dex-okd-datepicker-xl-range-input-font-size, 16px)
}

.dex-datepicker-range-board {
  background: #fff;
  background: var(--dex-okd-datepicker-range-board-background-color, #fff)
}

.dex-datepicker-shortcut {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: -6px;
  margin-top: 12px;
  margin-top: var(--dex-okd-datepicker-shortcut-margin-top, 12px);
  width: 100%
}

.dex-datepicker-shortcut-button {
  align-items: center;
  background-color: var(--dex-okd-color-background-2);
  background-color: var(--dex-okd-datepicker-shortcut-button-bg-color, var(--dex-okd-color-background-2));
  border-radius: 4px;
  color: var(--dex-okd-datepicker-shortcut-text-default-color);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-size: var(--dex-okd-datepicker-shortcut-button-font-size, 12px);
  font-weight: 500;
  justify-content: center;
  margin-bottom: 8px;
  margin-right: 8px;
  padding: 8px;
  padding: var(--dex-okd-datepicker-shortcut-button-padding-horizontal, 8px) var(--dex-okd-datepicker-shortcut-button-padding-vertical, 8px)
}

.dex-datepicker-shortcut-active {
  background-color: var(--dex-okd-datepicker-shortcut-active-background);
  color: var(--dex-okd-datepicker-shortcut-text-active-color)
}

.dex-datepicker-dateinput-title {
  color: var(--dex-okd-datepicker-dateinput-title-color);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px
}

.dex-datepicker-dateinput-body {
  align-items: center;
  direction: ltr;
  display: flex;
  justify-content: start
}

.dex-datepicker-dateinput-connector {
  color: var(--dex-okd-datepicker-dateinput-connector-color);
  padding: 0 4px
}

.dex-datepicker-dateinput-input-small {
  width: 48px
}

.dex-datepicker-dateinput-input-large {
  width: 72px
}

.dex-datepicker-dateinput-placeholder {
  color: var(--dex-okd-datepicker-dateinput-placeholder-color);
  font-size: 14px;
  margin-top: 8px
}

.dex-radio-inner {
  background-color: var(--dex-okd-radio-default-background);
  border: 1px solid var(--dex-okd-radio-default-border-color);
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  direction: ltr;
  display: block;
  left: 0;
  margin-top: 1px;
  position: relative;
  top: 0
}

.dex-radio-input {
  cursor: pointer;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 1
}

.dex-radio-input:focus-visible {
  border-radius: 50%;
  opacity: 1;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-radio-children {
  cursor: pointer;
  display: inline-block;
  font-size: var(--dex-okd-radio-common-label-font-size);
  margin-left: 4px;
  vertical-align: top;
  white-space: normal;
  word-break: break-word
}

.dex-radio-wrapper {
  cursor: pointer;
  display: inline-block;
  font-size: 0;
  margin-right: 8px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap
}

.dex-radio-wrapper .dex-radio {
  cursor: pointer;
  display: inline-block;
  position: relative;
  vertical-align: middle
}

.dex-radio-wrapper .dex-radio-children {
  color: var(--dex-okd-radio-default-text-color)
}

.dex-radio-wrapper.hover-status .dex-radio-inner {
  border-color: var(--dex-okd-radio-default-hover-border-color);
  box-shadow: var(--dex-okd-radio-default-hover-shadow)
}

.dex-radio-wrapper-checked .dex-radio-children {
  color: var(--dex-okd-radio-selected-text-color)
}

.dex-radio-wrapper-checked .dex-radio-inner {
  background-color: var(--dex-okd-radio-selected-background);
  border-color: var(--dex-okd-radio-selected-border-color)
}

.dex-radio-wrapper-checked .dex-radio-inner:after {
  background-color: var(--dex-okd-radio-selected-inner-color);
  border: 2px solid var(--dex-okd-radio-selected-inner-color);
  border-left: 0;
  border-radius: 50%;
  border-top: 0;
  box-sizing: border-box;
  content: " ";
  height: 6px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: all .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
  width: 6px
}

.dex-radio-wrapper-error .dex-radio-children {
  color: var(--dex-okd-radio-error-text-color)
}

.dex-radio-wrapper-error .dex-radio-inner {
  border-color: var(--dex-okd-radio-error-border-color)
}

.dex-radio-wrapper-error.hover-status .dex-radio-inner {
  border-color: var(--dex-okd-radio-error-hover-border-color);
  box-shadow: var(--dex-okd-radio-error-hover-shadow)
}

.dex-radio-wrapper-error.dex-radio-wrapper-checked .dex-radio-inner {
  background-color: var(--dex-okd-radio-error-background);
  border-color: var(--dex-okd-radio-error-border-color)
}

.dex-radio-wrapper-error.dex-radio-wrapper-checked .dex-radio-inner:after {
  background: var(--dex-okd-radio-error-inner-color);
  border-color: var(--dex-okd-radio-error-inner-color)
}

.dex-radio-wrapper-disabled {
  cursor: not-allowed
}

.dex-radio-wrapper-disabled .dex-radio-children {
  color: var(--dex-okd-radio-disabled-text-color);
  cursor: not-allowed
}

.dex-radio-wrapper-disabled .dex-radio,
.dex-radio-wrapper-disabled .dex-radio .dex-radio-input {
  cursor: default
}

.dex-radio-wrapper-disabled .dex-radio .dex-radio-inner {
  background-color: var(--dex-okd-radio-disabled-background);
  border-color: var(--dex-okd-radio-disabled-border-color);
  cursor: default
}

.dex-radio-wrapper-disabled.hover-status .dex-radio-inner {
  border-color: var(--dex-okd-radio-disabled-hover-border-color);
  box-shadow: unset
}

.dex-radio-wrapper-disabled.dex-radio-wrapper-checked .dex-radio-inner {
  border-color: var(--dex-okd-radio-disabled-checked-border-color)
}

.dex-radio-wrapper-disabled.dex-radio-wrapper-checked .dex-radio-inner:after {
  background-color: var(--dex-okd-radio-disabled-checked-inner-color);
  border-color: var(--dex-okd-radio-disabled-inner-color)
}

.dex-radio-sm .dex-radio-inner {
  height: var(--dex-okd-radio-sm-height);
  width: var(--dex-okd-radio-sm-width)
}

.dex-radio-sm .dex-radio-children {
  font-size: var(--dex-okd-radio-sm-font-size);
  margin-left: var(--dex-okd-radio-sm-margin)
}

.dex-radio-sm.dex-radio-wrapper {
  line-height: var(--dex-okd-radio-sm-line-height);
  padding-bottom: var(--dex-okd-radio-sm-padding);
  padding-top: var(--dex-okd-radio-sm-padding)
}

.dex-radio-md .dex-radio-inner {
  height: var(--dex-okd-radio-md-height);
  width: var(--dex-okd-radio-md-width)
}

.dex-radio-md .dex-radio-children {
  font-size: var(--dex-okd-radio-md-font-size);
  margin-left: var(--dex-okd-radio-md-margin)
}

.dex-radio-md.dex-radio-wrapper {
  line-height: var(--dex-okd-radio-md-line-height);
  padding-bottom: var(--dex-okd-radio-md-padding);
  padding-top: var(--dex-okd-radio-md-padding)
}

@media (min-width:768px) {

  .dex-radio-wrapper-disabled.dex-radio-wrapper-checked:hover .dex-radio-inner,
  .dex-radio-wrapper-disabled:hover .dex-radio-inner {
    border-color: var(--dex-okd-radio-disabled-hover-border-color);
    box-shadow: unset
  }

  .dex-radio-wrapper:not(.dex-radio-wrapper-disabled):hover .dex-radio-inner {
    border-color: var(--dex-okd-radio-default-hover-border-color);
    box-shadow: var(--dex-okd-radio-default-hover-shadow)
  }

  .dex-radio-wrapper-checked:not(.dex-radio-wrapper-disabled):hover .dex-radio-inner {
    border-color: var(--dex-okd-radio-selected-hover-border-color);
    box-shadow: var(--dex-okd-radio-selected-hover-shadow)
  }

  .dex-radio-wrapper-error:not(.dex-radio-wrapper-disabled):hover .dex-radio-inner {
    border-color: var(--dex-okd-radio-error-hover-border-color);
    box-shadow: var(--dex-okd-radio-error-hover-shadow)
  }
}

.dex-radio-reversed .dex-radio-inner {
  background-color: var(--dex-okd-radio-reversed-default-background);
  border: 1px solid var(--dex-okd-radio-reversed-default-border-color)
}

.dex-radio-reversed.dex-radio-wrapper .dex-radio-children {
  color: var(--dex-okd-radio-reversed-default-text-color)
}

.dex-radio-reversed.dex-radio-wrapper.hover-status .dex-radio-inner,
.dex-radio-reversed.dex-radio-wrapper:hover .dex-radio-inner {
  border-color: var(--dex-okd-radio-reversed-default-hover-border-color);
  box-shadow: var(--dex-okd-radio-reversed-default-hover-shadow)
}

.dex-radio-reversed.dex-radio-wrapper-checked .dex-radio-children {
  color: var(--dex-okd-radio-reversed-selected-text-color)
}

.dex-radio-reversed.dex-radio-wrapper-checked .dex-radio-inner {
  background-color: var(--dex-okd-radio-reversed-selected-background);
  border-color: var(--dex-okd-radio-reversed-selected-border-color)
}

.dex-radio-reversed.dex-radio-wrapper-checked .dex-radio-inner:after {
  background-color: var(--dex-okd-radio-reversed-selected-inner-color);
  border: 2px solid var(--dex-okd-radio-reversed-selected-inner-color)
}

.dex-radio-reversed.dex-radio-wrapper-checked:hover .dex-radio-inner {
  border-color: var(--dex-okd-radio-reversed-selected-hover-border-color);
  box-shadow: var(--dex-okd-radio-reversed-selected-hover-shadow)
}

.dex-radio-reversed.dex-radio-wrapper-error .dex-radio-children {
  color: var(--dex-okd-radio-reversed-error-text-color)
}

.dex-radio-reversed.dex-radio-wrapper-error .dex-radio-inner {
  border-color: var(--dex-okd-radio-reversed-error-border-color)
}

.dex-radio-reversed.dex-radio-wrapper-error.hover-status .dex-radio-inner,
.dex-radio-reversed.dex-radio-wrapper-error:hover .dex-radio-inner {
  border-color: var(--dex-okd-radio-reversed-error-hover-border-color);
  box-shadow: var(--dex-okd-radio-reversed-error-hover-shadow)
}

.dex-radio-reversed.dex-radio-wrapper-error.dex-radio-wrapper-checked .dex-radio-inner {
  background-color: var(--dex-okd-radio-reversed-error-background);
  border-color: var(--dex-okd-radio-reversed-error-border-color)
}

.dex-radio-reversed.dex-radio-wrapper-error.dex-radio-wrapper-checked .dex-radio-inner:after {
  background: var(--dex-okd-radio-reversed-error-inner-color);
  border-color: var(--dex-okd-radio-reversed-error-inner-color)
}

.dex-radio-reversed.dex-radio-wrapper-disabled .dex-radio-children {
  color: var(--dex-okd-radio-reversed-disabled-text-color)
}

.dex-radio-reversed.dex-radio-wrapper-disabled .dex-radio .dex-radio-inner {
  background-color: var(--dex-okd-radio-reversed-disabled-background);
  border-color: var(--dex-okd-radio-reversed-disabled-border-color)
}

.dex-radio-reversed.dex-radio-wrapper-disabled.hover-status .dex-radio-inner,
.dex-radio-reversed.dex-radio-wrapper-disabled:hover .dex-radio-inner {
  border-color: var(--dex-okd-radio-reversed-disabled-hover-border-color)
}

.dex-radio-reversed.dex-radio-wrapper-disabled.dex-radio-wrapper-checked .dex-radio-inner {
  border-color: var(--dex-okd-radio-reversed-disabled-checked-border-color)
}

.dex-radio-reversed.dex-radio-wrapper-disabled.dex-radio-wrapper-checked .dex-radio-inner:after {
  background-color: var(--dex-okd-radio-reversed-disabled-checked-inner-color);
  border-color: var(--dex-okd-radio-reversed-disabled-inner-color)
}

.dex-form-line>.dex-form-item-control>.dex-form-item-control-input>.dex-form-item-control-input-content {
  display: flex
}

.dex-form-line>.dex-form-item-control>.dex-form-item-control-input>.dex-form-item-control-input-content>.dex-form-item {
  margin-right: 16px
}

.dex-form-line>.dex-form-item-control>.dex-form-item-control-input>.dex-form-item-control-input-content>.dex-form-item:last-child {
  margin-right: 0
}

.dex-form-line.dex-form-line-column>.dex-form-item-control>.dex-form-item-control-input>.dex-form-item-control-input-content {
  flex-direction: column
}

.dex-form-line.dex-form-line-column>.dex-form-item-control>.dex-form-item-control-input>.dex-form-item-control-input-content>.dex-form-item {
  margin-right: 0
}

.dex-form-line.dex-form-line-hidden {
  display: none !important
}

.dex-selection-chips {
  align-items: center;
  background: var(--dex-okd-color-background-surface-primary);
  background: var(--dex-okd-selectionchips-default-background, var(--dex-okd-color-background-surface-primary));
  border: 1px solid transparent;
  box-sizing: border-box;
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-selectionchips-default-font-color, var(--dex-okd-color-content-primary));
  cursor: pointer;
  display: flex;
  justify-content: center;
  text-align: center
}

.dex-selection-chips.hover,
.dex-selection-chips:not(.dex-selection-chips-disabled):not(.dex-selection-chips-focus):hover {
  background: var(--dex-okd-color-background-surface-primary);
  background: var(--dex-okd-selectionchips-hover-background, var(--dex-okd-color-background-surface-primary));
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-selectionchips-hover-font-color, var(--dex-okd-color-content-primary))
}

.dex-selection-chips.active,
.dex-selection-chips:not(.dex-selection-chips-disabled):active {
  background: var(--dex-okd-color-background-surface-pressed);
  background: var(--dex-okd-selectionchips-active-background, var(--dex-okd-color-background-surface-pressed));
  border-color: var(--dex-okd-selectionchips-active-border-color, var(--dex-okd-selectionchips-focus-border-color));
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-selectionchips-active-font-color, var(--dex-okd-color-content-primary))
}

.dex-selection-chips.focus,
.dex-selection-chips:not(.dex-selection-chips-disabled).dex-selection-chips-focus {
  border-color: var(--dex-okd-selectionchips-focus-border-color, var(--dex-okd-color-border-selected))
}

.dex-selection-chips.dex-selection-chips-disabled,
.dex-selection-chips.disabled {
  background: var(--dex-okd-color-background-surface-disable);
  background: var(--dex-okd-selectionchips-disabled-background, var(--dex-okd-color-background-surface-disable));
  color: var(--dex-okd-color-content-disabled);
  color: var(--dex-okd-selectionchips-disabled-font-color, var(--dex-okd-color-content-disabled));
  cursor: not-allowed
}

.dex-selection-chips.dex-selection-chips-md {
  border-radius: 8px;
  border-radius: var(--dex-okd-selectionchips-md-border-radius, 8px);
  font-size: 14px;
  font-size: var(--dex-okd-selectionchips-md-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-selectionchips-md-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-selectionchips-md-line-height, 16px);
  min-height: 36px;
  min-height: var(--dex-okd-selectionchips-md-min-height, 36px);
  min-width: 32px;
  min-width: var(--dex-okd-selectionchips-md-min-width, 32px);
  padding: 8px;
  padding: var(--dex-okd-selectionchips-md-padding-vertical, 8px) var(--dex-okd-selectionchips-md-padding-horizontal, 8px)
}

.dex-selection-chips.dex-selection-chips-lg {
  border-radius: 8px;
  border-radius: var(--dex-okd-selectionchips-lg-border-radius, 8px);
  font-size: 14px;
  font-size: var(--dex-okd-selectionchips-lg-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-selectionchips-lg-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-selectionchips-lg-line-height, 16px);
  min-height: 40px;
  min-height: var(--dex-okd-selectionchips-lg-min-height, 40px);
  min-width: 32px;
  min-width: var(--dex-okd-selectionchips-lg-min-width, 32px);
  padding: 8px;
  padding: var(--dex-okd-selectionchips-lg-padding-vertical, 8px) var(--dex-okd-selectionchips-lg-padding-horizontal, 8px)
}

.dex-selection-chips-truncate {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden
}

.dex-selection-chips-group {
  display: flex;
  gap: 8px;
  gap: var(--dex-okd-selectionchips-group-margin-right, 8px)
}

.dex-selection-chips-group .dex-selection-chips .dex-selection-chips-truncate {
  -webkit-line-clamp: 3
}

.dex-a11y-selection {
  display: none
}

.dex-skeleton {
  display: flex;
  width: 100%
}

.dex-skeleton-header {
  display: flex;
  margin-right: 24px
}

.dex-skeleton-content {
  flex-grow: 1
}

.dex-skeleton-avatar {
  background-color: var(--dex-okd-color-background-2);
  background-color: var(--dex-okd-skeleton-background-color, var(--dex-okd-color-background-2))
}

.dex-skeleton-avatar.dex-skeleton-avatar-animate {
  animation: dex-skeleton-loading 1.4s ease infinite;
  background: linear-gradient(90deg, var(--dex-okd-color-background-2) 25%, hsla(0, 0%, 98%, .1) 37%, var(--dex-okd-color-background-2) 63%);
  background: linear-gradient(90deg, var(--dex-okd-skeleton-background-color, var(--dex-okd-color-background-2)) 25%, var(--dex-okd-skeleton-active-background-color, hsla(0, 0%, 98%, .1)) 37%, var(--dex-okd-skeleton-background-color, var(--dex-okd-color-background-2)) 63%);
  background-size: 400% 100%;
  content: ""
}

.dex-skeleton-avatar-sm {
  height: 24px;
  height: var(--dex-okd-skeleton-avatar-sm-width, 24px);
  width: 24px;
  width: var(--dex-okd-skeleton-avatar-sm-width, 24px)
}

.dex-skeleton-avatar-md {
  height: 64px;
  height: var(--dex-okd-skeleton-avatar-md-width, 64px);
  width: 64px;
  width: var(--dex-okd-skeleton-avatar-md-width, 64px)
}

.dex-skeleton-avatar-lg {
  height: 128px;
  height: var(--dex-okd-skeleton-avatar-lg-width, 128px);
  width: 128px;
  width: var(--dex-okd-skeleton-avatar-lg-width, 128px)
}

.dex-skeleton-avatar-circle {
  border-radius: 50%
}

.dex-skeleton-input {
  background-color: var(--dex-okd-color-background-2);
  background-color: var(--dex-okd-skeleton-background-color, var(--dex-okd-color-background-2));
  border-radius: 4px;
  border-radius: var(--dex-okd-skeleton-input-border-radius, 4px)
}

.dex-skeleton-input.dex-skeleton-input-animate {
  animation: dex-skeleton-loading 1.4s ease infinite;
  background: linear-gradient(90deg, var(--dex-okd-color-background-2) 25%, hsla(0, 0%, 98%, .1) 37%, var(--dex-okd-color-background-2) 63%);
  background: linear-gradient(90deg, var(--dex-okd-skeleton-background-color, var(--dex-okd-color-background-2)) 25%, var(--dex-okd-skeleton-active-background-color, hsla(0, 0%, 98%, .1)) 37%, var(--dex-okd-skeleton-background-color, var(--dex-okd-color-background-2)) 63%);
  background-size: 400% 100%;
  content: ""
}

.dex-skeleton-input-sm {
  height: 24px;
  height: var(--dex-okd-skeleton-input-sm-height, 24px)
}

.dex-skeleton-input-md {
  height: 40px;
  height: var(--dex-okd-skeleton-input-md-height, 40px)
}

.dex-skeleton-paragraph-row {
  background-color: var(--dex-okd-color-background-2);
  background-color: var(--dex-okd-skeleton-background-color, var(--dex-okd-color-background-2));
  border-radius: 4px;
  border-radius: var(--dex-okd-skeleton-input-border-radius, 4px)
}

.dex-skeleton-paragraph-row.dex-skeleton-paragraph-animate {
  animation: dex-skeleton-loading 1.4s ease infinite;
  background: linear-gradient(90deg, var(--dex-okd-color-background-2) 25%, hsla(0, 0%, 98%, .1) 37%, var(--dex-okd-color-background-2) 63%);
  background: linear-gradient(90deg, var(--dex-okd-skeleton-background-color, var(--dex-okd-color-background-2)) 25%, var(--dex-okd-skeleton-active-background-color, hsla(0, 0%, 98%, .1)) 37%, var(--dex-okd-skeleton-background-color, var(--dex-okd-color-background-2)) 63%);
  background-size: 400% 100%;
  content: ""
}

.dex-skeleton-paragraph-row+.dex-skeleton-paragraph-row {
  margin-top: 20px
}

.dex-skeleton-paragraph-sm {
  height: 24px;
  height: var(--dex-okd-skeleton-input-sm-height, 24px)
}

.dex-skeleton-paragraph-md {
  height: 40px;
  height: var(--dex-okd-skeleton-input-md-height, 40px)
}

@keyframes dex-skeleton-loading {
  0% {
    background-position: 100% 50%
  }

  to {
    background-position: 0 50%
  }
}

.dex-alert {
  border-radius: var(--dex-okd-alert-box-border-radius);
  box-sizing: border-box;
  display: inline-flex;
  padding: var(--dex-okd-alert-box-padding-vertical) var(--dex-okd-alert-box-padding-horizontal);
  position: relative;
  width: 100%
}

.dex-alert.closable {
  padding-right: 44px
}

.dex-alert * {
  box-sizing: border-box
}

.dex-alert .dex-alert-icon {
  align-items: center;
  display: flex;
  font-size: 20px;
  font-size: var(--dex-okd-alert-icon-tip-size, 20px);
  height: 20px;
  height: var(--dex-okd-alert-icon-tip-size, 20px);
  justify-content: center;
  width: 20px;
  width: var(--dex-okd-alert-icon-tip-size, 20px)
}

.dex-alert-msg-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1
}

.dex-alert-icon+.dex-alert-msg-box {
  margin-left: 15px;
  margin-left: var(--dex-okd-alert-box-margin-left, 15px)
}

.dex-alert-title {
  font-size: var(--dex-okd-alert-title-font-size);
  font-weight: 500;
  line-height: var(--dex-okd-alert-title-line-height)
}

.dex-alert-desc {
  font-size: var(--dex-okd-alert-text-font-size);
  font-weight: 400;
  line-height: var(--dex-okd-alert-text-line-height)
}

.dex-alert-title+.dex-alert-desc {
  margin-top: 4px;
  margin-top: var(--dex-okd-alert-desc-margin-top, 4px)
}

.dex-alert-link {
  font-weight: 500;
  text-decoration: none
}

.dex-alert-desc-list {
  -webkit-padding-start: 17px;
  -moz-padding-start: 17px;
  -webkit-margin-before: 4px;
  -webkit-margin-after: 0;
  margin-block-end: 0;
  margin-block-start: 4px;
  padding-inline-start: 17px
}

.dex-alert-action-box {
  margin-bottom: 8px;
  margin-bottom: var(--dex-okd-alert-action-box-margin-bottom, 8px);
  margin-top: 21px;
  margin-top: var(--dex-okd-alert-action-box-margin-top, 21px)
}

.dex-alert-action {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--dex-okd-alert-action-font-size);
  font-weight: 500;
  line-height: var(--dex-okd-alert-action-line-height);
  outline: 0;
  padding: 0
}

.dex-alert-action:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-alert-action+.dex-alert-action {
  margin-left: 32px;
  margin-left: var(--dex-okd-alert-action-margin-left, 32px)
}

.dex-alert .dex-alert-close {
  cursor: pointer;
  font-size: 20px;
  font-size: var(--dex-okd-alert-icon-close-size, 20px);
  line-height: 1;
  position: absolute;
  right: 12px
}

.dex-alert.normal-alert {
  background: var(--dex-okd-alert-normal-background)
}

.dex-alert.normal-alert .dex-alert-icon {
  color: var(--dex-okd-alert-normal-icon-color)
}

.dex-alert.normal-alert .dex-alert-title {
  color: var(--dex-okd-alert-normal-title-color)
}

.dex-alert.normal-alert .dex-alert-desc {
  color: var(--dex-okd-alert-normal-desc-color)
}

.dex-alert.normal-alert .dex-alert-close {
  color: var(--dex-okd-color-gray-300);
  color: var(--dex-okd-alert-normal-close-color, var(--dex-okd-color-gray-300))
}

.dex-alert.normal-alert .dex-alert-link {
  border-bottom: 1px solid var(--dex-okd-alert-normal-link-color);
  color: var(--dex-okd-alert-normal-link-color);
  text-decoration: none
}

.dex-alert.normal-alert .dex-alert-action {
  color: var(--dex-okd-alert-normal-action-color)
}

.dex-alert.success-alert {
  background: var(--dex-okd-alert-success-background)
}

.dex-alert.success-alert .dex-alert-icon {
  color: var(--dex-okd-alert-success-icon-color)
}

.dex-alert.success-alert .dex-alert-title {
  color: var(--dex-okd-alert-success-title-color)
}

.dex-alert.success-alert .dex-alert-desc {
  color: var(--dex-okd-alert-success-desc-color)
}

.dex-alert.success-alert .dex-alert-close {
  color: var(--dex-okd-color-gray-300);
  color: var(--dex-okd-alert-success-close-color, var(--dex-okd-color-gray-300))
}

.dex-alert.success-alert .dex-alert-link {
  border-bottom: 1px solid var(--dex-okd-alert-success-link-color);
  color: var(--dex-okd-alert-success-link-color);
  text-decoration: none
}

.dex-alert.success-alert .dex-alert-action {
  color: var(--dex-okd-alert-success-action-color)
}

.dex-alert.info-alert {
  background: var(--dex-okd-alert-info-background)
}

.dex-alert.info-alert .dex-alert-icon {
  color: var(--dex-okd-alert-info-icon-color)
}

.dex-alert.info-alert .dex-alert-title {
  color: var(--dex-okd-alert-info-title-color)
}

.dex-alert.info-alert .dex-alert-desc {
  color: var(--dex-okd-alert-info-desc-color)
}

.dex-alert.info-alert .dex-alert-close {
  color: var(--dex-okd-color-gray-300);
  color: var(--dex-okd-alert-info-close-color, var(--dex-okd-color-gray-300))
}

.dex-alert.info-alert .dex-alert-link {
  border-bottom: 1px solid var(--dex-okd-alert-info-link-color);
  color: var(--dex-okd-alert-info-link-color);
  text-decoration: none
}

.dex-alert.info-alert .dex-alert-action {
  color: var(--dex-okd-alert-info-action-color)
}

.dex-alert.warn-alert {
  background: var(--dex-okd-alert-warn-background)
}

.dex-alert.warn-alert .dex-alert-icon {
  color: var(--dex-okd-alert-warn-icon-color)
}

.dex-alert.warn-alert .dex-alert-title {
  color: var(--dex-okd-alert-warn-title-color)
}

.dex-alert.warn-alert .dex-alert-desc {
  color: var(--dex-okd-alert-warn-desc-color)
}

.dex-alert.warn-alert .dex-alert-close {
  color: var(--dex-okd-color-gray-300);
  color: var(--dex-okd-alert-warn-close-color, var(--dex-okd-color-gray-300))
}

.dex-alert.warn-alert .dex-alert-link {
  border-bottom: 1px solid var(--dex-okd-alert-warn-link-color);
  color: var(--dex-okd-alert-warn-link-color);
  text-decoration: none
}

.dex-alert.warn-alert .dex-alert-action {
  color: var(--dex-okd-alert-warn-action-color)
}

.dex-alert.error-alert {
  background: var(--dex-okd-alert-error-background)
}

.dex-alert.error-alert .dex-alert-icon {
  color: var(--dex-okd-alert-error-icon-color)
}

.dex-alert.error-alert .dex-alert-title {
  color: var(--dex-okd-alert-error-title-color)
}

.dex-alert.error-alert .dex-alert-desc {
  color: var(--dex-okd-alert-error-desc-color)
}

.dex-alert.error-alert .dex-alert-close {
  color: var(--dex-okd-color-gray-300);
  color: var(--dex-okd-alert-error-close-color, var(--dex-okd-color-gray-300))
}

.dex-alert.error-alert .dex-alert-link {
  border-bottom: 1px solid var(--dex-okd-alert-error-link-color);
  color: var(--dex-okd-alert-error-link-color);
  text-decoration: none
}

.dex-alert.error-alert .dex-alert-action {
  color: var(--dex-okd-alert-error-action-color)
}

.dex-hyperlink-xs .dex-hyperlink-text {
  font-size: var(--dex-okd-hyperlink-xs-font-size);
  line-height: var(--dex-okd-hyperlink-xs-line-height)
}

.dex-hyperlink-xs .icon-arrow,
.dex-hyperlink-xs .icon-jump {
  font-size: var(--dex-okd-hyperlink-xs-icon-font-size)
}

.dex-hyperlink-xs .icon-jump {
  margin-left: var(--dex-okd-hyperlink-xs-icon-margin-left)
}

.dex-hyperlink-sm .dex-hyperlink-text {
  font-size: var(--dex-okd-hyperlink-sm-font-size);
  line-height: var(--dex-okd-hyperlink-sm-line-height)
}

.dex-hyperlink-sm .icon-arrow,
.dex-hyperlink-sm .icon-jump {
  font-size: var(--dex-okd-hyperlink-sm-icon-font-size)
}

.dex-hyperlink-sm .icon-jump {
  margin-left: var(--dex-okd-hyperlink-sm-icon-margin-left)
}

.dex-hyperlink-md .dex-hyperlink-text {
  font-size: var(--dex-okd-hyperlink-md-font-size);
  line-height: var(--dex-okd-hyperlink-md-line-height)
}

.dex-hyperlink-md .icon-arrow,
.dex-hyperlink-md .icon-jump {
  font-size: var(--dex-okd-hyperlink-md-icon-font-size)
}

.dex-hyperlink-md .icon-jump {
  margin-left: var(--dex-okd-hyperlink-md-icon-margin-left)
}

.dex-hyperlink-lg .dex-hyperlink-text {
  font-size: var(--dex-okd-hyperlink-lg-font-size);
  line-height: var(--dex-okd-hyperlink-lg-line-height)
}

.dex-hyperlink-lg .icon-arrow,
.dex-hyperlink-lg .icon-jump {
  font-size: var(--dex-okd-hyperlink-lg-icon-font-size)
}

.dex-hyperlink-lg .icon-jump {
  margin-left: var(--dex-okd-hyperlink-lg-icon-margin-left)
}

.dex-hyperlink-muted {
  font-weight: var(--dex-okd-hyperlink-muted-font-weight)
}

.dex-hyperlink-muted:hover {
  font-weight: var(--dex-okd-hyperlink-muted-hover-font-weight)
}

.dex-hyperlink-medium {
  font-weight: var(--dex-okd-hyperlink-medium-font-weight)
}

.dex-hyperlink-medium:hover {
  font-weight: var(--dex-okd-hyperlink-medium-hover-font-weight)
}

.dex-hyperlink-amplified {
  font-weight: var(--dex-okd-hyperlink-amplified-font-weight)
}

.dex-hyperlink-amplified:hover {
  font-weight: var(--dex-okd-hyperlink-amplified-hover-font-weight)
}

.dex-hyperlink-primary {
  color: var(--dex-okd-hyperlink-primary-default-color)
}

.dex-hyperlink-primary .icon-arrow,
.dex-hyperlink-primary .icon-jump {
  color: var(--dex-okd-hyperlink-primary-default-icon-color)
}

.dex-hyperlink-primary.dex-hyperlink-disabled {
  color: var(--dex-okd-hyperlink-primary-disabled-color)
}

.dex-hyperlink-primary.dex-hyperlink-disabled .dex-hyperlink-text,
.dex-hyperlink-primary.dex-hyperlink-disabled .icon-arrow,
.dex-hyperlink-primary.dex-hyperlink-disabled .icon-jump {
  color: var(--dex-okd-hyperlink-primary-disabled-color);
  cursor: not-allowed
}

.dex-hyperlink-primary:not(.dex-hyperlink-disabled):hover {
  color: var(--dex-okd-hyperlink-primary-hover-color)
}

.dex-hyperlink-primary:not(.dex-hyperlink-disabled):hover .dex-hyperlink-text {
  color: var(--dex-okd-hyperlink-primary-hover-color);
  text-decoration: underline;
  text-underline-offset: 3px
}

.dex-hyperlink-primary:not(.dex-hyperlink-disabled):hover .icon-arrow,
.dex-hyperlink-primary:not(.dex-hyperlink-disabled):hover .icon-jump {
  color: var(--dex-okd-hyperlink-primary-hover-icon-color)
}

.dex-hyperlink-primary a,
.dex-hyperlink-primary a:active,
.dex-hyperlink-primary a:visited {
  color: var(--dex-okd-hyperlink-primary-default-color)
}

.dex-hyperlink-secondary {
  color: var(--dex-okd-hyperlink-secondary-default-color)
}

.dex-hyperlink-secondary .icon-arrow,
.dex-hyperlink-secondary .icon-jump {
  color: var(--dex-okd-hyperlink-secondary-default-icon-color)
}

.dex-hyperlink-secondary.dex-hyperlink-disabled {
  color: var(--dex-okd-hyperlink-secondary-disabled-color)
}

.dex-hyperlink-secondary.dex-hyperlink-disabled .dex-hyperlink-text,
.dex-hyperlink-secondary.dex-hyperlink-disabled .icon-arrow,
.dex-hyperlink-secondary.dex-hyperlink-disabled .icon-jump {
  color: var(--dex-okd-hyperlink-secondary-disabled-color);
  cursor: not-allowed
}

.dex-hyperlink-secondary:not(.dex-hyperlink-disabled):hover {
  color: var(--dex-okd-hyperlink-secondary-hover-color)
}

.dex-hyperlink-secondary:not(.dex-hyperlink-disabled):hover .dex-hyperlink-text {
  color: var(--dex-okd-hyperlink-secondary-hover-color);
  text-decoration: underline;
  text-underline-offset: 3px
}

.dex-hyperlink-secondary:not(.dex-hyperlink-disabled):hover .icon-arrow,
.dex-hyperlink-secondary:not(.dex-hyperlink-disabled):hover .icon-jump {
  color: var(--dex-okd-hyperlink-secondary-hover-icon-color)
}

.dex-hyperlink-secondary a,
.dex-hyperlink-secondary a:active,
.dex-hyperlink-secondary a:visited {
  color: var(--dex-okd-hyperlink-secondary-default-color)
}

.dex-hyperlink-reversed {
  color: var(--dex-okd-hyperlink-reversed-default-color)
}

.dex-hyperlink-reversed .icon-arrow,
.dex-hyperlink-reversed .icon-jump {
  color: var(--dex-okd-hyperlink-reversed-default-icon-color)
}

.dex-hyperlink-reversed.dex-hyperlink-disabled {
  color: var(--dex-okd-hyperlink-reversed-disabled-color)
}

.dex-hyperlink-reversed.dex-hyperlink-disabled .dex-hyperlink-text,
.dex-hyperlink-reversed.dex-hyperlink-disabled .icon-arrow,
.dex-hyperlink-reversed.dex-hyperlink-disabled .icon-jump {
  color: var(--dex-okd-hyperlink-reversed-disabled-color);
  cursor: not-allowed
}

.dex-hyperlink-reversed:not(.dex-hyperlink-disabled):hover {
  color: var(--dex-okd-hyperlink-reversed-hover-color)
}

.dex-hyperlink-reversed:not(.dex-hyperlink-disabled):hover .dex-hyperlink-text {
  color: var(--dex-okd-hyperlink-reversed-hover-color);
  text-decoration: underline;
  text-underline-offset: 3px
}

.dex-hyperlink-reversed:not(.dex-hyperlink-disabled):hover .icon-arrow,
.dex-hyperlink-reversed:not(.dex-hyperlink-disabled):hover .icon-jump {
  color: var(--dex-okd-hyperlink-reversed-hover-icon-color)
}

.dex-hyperlink-reversed a,
.dex-hyperlink-reversed a:active,
.dex-hyperlink-reversed a:visited {
  color: var(--dex-okd-hyperlink-reversed-default-color)
}

.dex-hyperlink-accent {
  color: var(--dex-okd-hyperlink-accent-default-color)
}

.dex-hyperlink-accent .icon-arrow,
.dex-hyperlink-accent .icon-jump {
  color: var(--dex-okd-hyperlink-accent-default-icon-color)
}

.dex-hyperlink-accent.dex-hyperlink-disabled {
  color: var(--dex-okd-hyperlink-accent-disabled-color)
}

.dex-hyperlink-accent.dex-hyperlink-disabled .dex-hyperlink-text,
.dex-hyperlink-accent.dex-hyperlink-disabled .icon-arrow,
.dex-hyperlink-accent.dex-hyperlink-disabled .icon-jump {
  color: var(--dex-okd-hyperlink-accent-disabled-color);
  cursor: not-allowed
}

.dex-hyperlink-accent:not(.dex-hyperlink-disabled):hover {
  color: var(--dex-okd-hyperlink-accent-hover-color)
}

.dex-hyperlink-accent:not(.dex-hyperlink-disabled):hover .dex-hyperlink-text {
  color: var(--dex-okd-hyperlink-accent-hover-color);
  text-decoration: underline;
  text-underline-offset: 3px
}

.dex-hyperlink-accent:not(.dex-hyperlink-disabled):hover .icon-arrow,
.dex-hyperlink-accent:not(.dex-hyperlink-disabled):hover .icon-jump {
  color: var(--dex-okd-hyperlink-accent-hover-icon-color)
}

.dex-hyperlink-accent a,
.dex-hyperlink-accent a:active,
.dex-hyperlink-accent a:visited {
  color: var(--dex-okd-hyperlink-accent-default-color)
}

.dex-hyperlink-text {
  text-decoration: none
}

.dex-hyperlink-underline .dex-hyperlink-text {
  text-decoration: underline;
  text-underline-offset: 3px
}

.dex-hyperlink-no-hover-underline:not(.dex-hyperlink-disabled):hover .dex-hyperlink-text {
  text-decoration: none
}

.dex-hyperlink {
  align-items: center;
  cursor: pointer;
  display: inline-flex
}

.dex-hyperlink .icon-arrow,
.dex-hyperlink .icon-jump {
  cursor: auto;
  font-weight: inherit
}

.dex-hyperlink a:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-animation {
  position: relative
}

.dex-animation-poster {
  left: 0;
  position: absolute;
  top: 0
}

.dex-animation-view {
  height: 100%;
  width: 100%
}

.dex-qrcode {
  background-color: #fff;
  border-radius: 8px;
  box-sizing: initial;
  display: inline-flex;
  position: relative
}

.dex-qrcode-mask {
  align-items: center;
  background-color: hsla(0, 0%, 100%, .9);
  border-radius: 8px;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.dex-skeleton-avatar-reversed {
  background-color: var(--dex-okd-color-gray-700);
  background-color: var(--dex-okd-skeleton-reversed-background-color, var(--dex-okd-color-gray-700))
}

.dex-skeleton-avatar-reversed.dex-skeleton-avatar-animate {
  background: linear-gradient(90deg, var(--dex-okd-color-gray-700) 25%, hsla(0, 0%, 98%, .1) 37%, var(--dex-okd-color-gray-700) 63%);
  background: linear-gradient(90deg, var(--dex-okd-skeleton-reversed-background-color, var(--dex-okd-color-gray-700)) 25%, var(--dex-okd-skeleton-reversed-active-background-color, hsla(0, 0%, 98%, .1)) 37%, var(--dex-okd-skeleton-reversed-background-color, var(--dex-okd-color-gray-700)) 63%);
  background-size: 400% 100%
}

.dex-skeleton-input-reversed {
  background-color: var(--dex-okd-color-gray-700);
  background-color: var(--dex-okd-skeleton-reversed-background-color, var(--dex-okd-color-gray-700))
}

.dex-skeleton-input-reversed.dex-skeleton-input-animate {
  background: linear-gradient(90deg, var(--dex-okd-color-gray-700) 25%, hsla(0, 0%, 98%, .1) 37%, var(--dex-okd-color-gray-700) 63%);
  background: linear-gradient(90deg, var(--dex-okd-skeleton-reversed-background-color, var(--dex-okd-color-gray-700)) 25%, var(--dex-okd-skeleton-reversed-active-background-color, hsla(0, 0%, 98%, .1)) 37%, var(--dex-okd-skeleton-reversed-background-color, var(--dex-okd-color-gray-700)) 63%);
  background-size: 400% 100%
}

.dex-skeleton-paragraph-reversed>.dex-skeleton-paragraph-row {
  background-color: var(--dex-okd-color-gray-700);
  background-color: var(--dex-okd-skeleton-reversed-background-color, var(--dex-okd-color-gray-700))
}

.dex-skeleton-paragraph-reversed>.dex-skeleton-paragraph-row.dex-skeleton-paragraph-animate {
  background: linear-gradient(90deg, var(--dex-okd-color-gray-700) 25%, hsla(0, 0%, 98%, .1) 37%, var(--dex-okd-color-gray-700) 63%);
  background: linear-gradient(90deg, var(--dex-okd-skeleton-reversed-background-color, var(--dex-okd-color-gray-700)) 25%, var(--dex-okd-skeleton-reversed-active-background-color, hsla(0, 0%, 98%, .1)) 37%, var(--dex-okd-skeleton-reversed-background-color, var(--dex-okd-color-gray-700)) 63%);
  background-size: 400% 100%
}

.dex-avatar {
  align-items: center;
  background-color: var(--dex-okd-avatar-default-background);
  border: 1px solid var(--dex-okd-avatar-border-color);
  border-radius: 100%;
  box-sizing: border-box;
  color: var(--dex-okd-avatar-content-color);
  display: flex;
  justify-content: center;
  position: relative
}

.dex-avatar-img {
  border-radius: 100%;
  height: 100%;
  width: 100%
}

.dex-avatar-img-loading {
  position: relative;
  visibility: hidden
}

.dex-avatar .dex-avatar-skeleton {
  border-radius: 100%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0
}

.dex-avatar-alt {
  align-items: center;
  background-color: var(--dex-okd-avatar-default-background);
  border-radius: 100%;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%
}

.dex-avatar-alt span {
  max-width: 80%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap
}

.dex-avatar-xxs {
  font-size: var(--dex-okd-avatar-xs-font-size);
  font-size: var(--dex-okd-avatar-xxs-font-size, var(--dex-okd-avatar-xs-font-size));
  height: 20px;
  height: var(--dex-okd-avatar-xxs-size, 20px);
  line-height: var(--dex-okd-avatar-xs-line-height);
  line-height: var(--dex-okd-avatar-xxs-line-height, var(--dex-okd-avatar-xs-line-height));
  width: 20px;
  width: var(--dex-okd-avatar-xxs-size, 20px)
}

.dex-avatar-xs {
  font-size: var(--dex-okd-avatar-xs-font-size);
  height: 32px;
  height: var(--dex-okd-avatar-xs-size, 32px);
  line-height: var(--dex-okd-avatar-xs-line-height);
  width: 32px;
  width: var(--dex-okd-avatar-xs-size, 32px)
}

.dex-avatar-sm {
  font-size: var(--dex-okd-avatar-sm-font-size);
  height: 36px;
  height: var(--dex-okd-avatar-sm-size, 36px);
  line-height: var(--dex-okd-avatar-sm-line-height);
  width: 36px;
  width: var(--dex-okd-avatar-sm-size, 36px)
}

.dex-avatar-md {
  font-size: var(--dex-okd-avatar-md-font-size);
  height: 40px;
  height: var(--dex-okd-avatar-md-size, 40px);
  line-height: var(--dex-okd-avatar-md-line-height);
  width: 40px;
  width: var(--dex-okd-avatar-md-size, 40px)
}

.dex-avatar-lg {
  font-size: var(--dex-okd-avatar-lg-font-size);
  height: 52px;
  height: var(--dex-okd-avatar-lg-size, 52px);
  line-height: var(--dex-okd-avatar-lg-line-height);
  width: 52px;
  width: var(--dex-okd-avatar-lg-size, 52px)
}

.dex-avatar-xl {
  height: 80px;
  height: var(--dex-okd-avatar-xl-size, 80px);
  width: 80px;
  width: var(--dex-okd-avatar-xl-size, 80px)
}

.dex-avatar-xl,
.dex-avatar-xxl {
  font-size: var(--dex-okd-avatar-xl-font-size);
  line-height: var(--dex-okd-avatar-xl-line-height)
}

.dex-avatar-xxl {
  font-size: var(--dex-okd-avatar-xxl-font-size, var(--dex-okd-avatar-xl-font-size));
  height: 112px;
  height: var(--dex-okd-avatar-xxl-size, 112px);
  line-height: var(--dex-okd-avatar-xxl-line-height, var(--dex-okd-avatar-xl-line-height));
  width: 112px;
  width: var(--dex-okd-avatar-xxl-size, 112px)
}

.dex-avatar-ring {
  border: var(--dex-okd-avatar-ring-width, 2px) solid var(--dex-okd-avatar-ring-color, var(--dex-okd-avatar-border-color));
  border-radius: 100%;
  box-sizing: border-box;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 4px;
  padding: var(--dex-okd-avatar-ring-padding, 4px);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content
}

.dex-accordion {
  border-bottom: 1px solid #ebebeb;
  border-bottom: 1px solid var(--dex-okd-accordion-main-border-color, #ebebeb);
  display: flex;
  flex-direction: column
}

.dex-accordion-header {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 32px 0;
  padding: var(--dex-okd-accordion-header-padding-vertical, 32px) var(--dex-okd-accordion-header-padding-horizontal, 0)
}

.dex-accordion-header-title {
  color: #000;
  color: var(--dex-okd-accordion-header-title-color, #000);
  font-size: 18px;
  font-size: var(--dex-okd-accordion-header-title-font-size, 18px);
  font-weight: 500;
  font-weight: var(--dex-okd-accordion-header-title-font-weight, 500);
  line-height: 24px;
  line-height: var(--dex-okd-accordion-header-title-line-height, 24px)
}

.dex-accordion-header .dex-accordion-header-icon {
  color: #929292;
  color: var(--dex-okd-accordion-header-icon-color, #929292);
  font-size: 20px;
  font-size: var(--dex-okd-accordion-header-icon-size, 20px);
  transition: all .2s cubic-bezier(.34, .69, .1, 1)
}

.dex-accordion-header-icon-expanded {
  transform: rotate(180deg)
}

.dex-accordion-content {
  color: #929292;
  color: var(--dex-okd-accordion-content-color, #929292);
  display: none;
  font-size: 14px;
  font-size: var(--dex-okd-accordion-content-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-accordion-content-font-weight, 400);
  line-height: 1.58;
  line-height: var(--dex-okd-accordion-content-line-height, 1.58);
  overflow: hidden
}

.dex-accordion-content-transition-out {
  margin-bottom: 0;
  max-height: 0;
  opacity: 0;
  transform: translateY(-30px);
  transition: all .2s;
  will-change: transform, opacity, max-height
}

.dex-accordion-content-transition-in {
  max-height: -webkit-max-content;
  max-height: -moz-max-content;
  max-height: max-content;
  opacity: 1;
  transform: translateY(0)
}

.dex-accordion-content-expanded {
  display: block;
  margin-bottom: 32px;
  margin-bottom: var(--dex-okd-accordion-header-padding-vertical, 32px)
}

@media (max-width:767px) {
  .dex-accordion-header-title {
    font-size: 14px;
    font-size: var(--dex-okd-accordion-header-title-sm-font-size, 14px);
    font-weight: 500;
    font-weight: var(--dex-okd-accordion-header-title-sm-font-weight, 500);
    line-height: 16px;
    line-height: var(--dex-okd-accordion-header-title-sm-line-height, 16px)
  }

  .dex-accordion-header .dex-accordion-header-icon {
    font-size: 16px;
    font-size: var(--dex-okd-accordion-header-icon-sm-size, 16px)
  }

  .dex-accordion-content {
    font-size: 12px;
    font-size: var(--dex-okd-accordion-content-sm-font-size, 12px);
    font-weight: 400;
    font-weight: var(--dex-okd-accordion-content-sm-font-weight, 400);
    line-height: 1.58;
    line-height: var(--dex-okd-accordion-content-sm-line-height, 1.58)
  }
}

.dex-icon-button {
  align-items: center;
  border-color: transparent;
  border-style: solid;
  display: flex;
  justify-content: center;
  text-align: center
}

.dex-icon-button.dex-icon-button-sm {
  border-radius: 50%;
  border-width: .75px;
  border-width: var(--dex-okd-iconbutton-sm-border-width, .75px);
  height: 12px;
  height: var(--dex-okd-iconbutton-sm-height, 12px);
  width: 12px;
  width: var(--dex-okd-iconbutton-sm-width, 12px)
}

.dex-icon-button.dex-icon-button-sm .dex-icon-button-icon {
  font-size: 8px;
  font-size: var(--dex-okd-iconbutton-sm-font-size, 8px)
}

.dex-icon-button.dex-icon-button-sm .dex-icon-button-loader-circle {
  border-width: 2px;
  border-width: var(--dex-okd-iconbutton-sm-loader-border-width, 2px);
  height: 8px;
  height: var(--dex-okd-iconbutton-sm-font-size, 8px);
  width: 8px;
  width: var(--dex-okd-iconbutton-sm-font-size, 8px)
}

.dex-icon-button.dex-icon-button-md {
  border-radius: 50%;
  border-width: 1px;
  border-width: var(--dex-okd-iconbutton-md-border-width, 1px);
  height: 16px;
  height: var(--dex-okd-iconbutton-md-height, 16px);
  width: 16px;
  width: var(--dex-okd-iconbutton-md-width, 16px)
}

.dex-icon-button.dex-icon-button-md .dex-icon-button-icon {
  font-size: 10px;
  font-size: var(--dex-okd-iconbutton-md-font-size, 10px)
}

.dex-icon-button.dex-icon-button-md .dex-icon-button-loader-circle {
  border-width: 2px;
  border-width: var(--dex-okd-iconbutton-md-loader-border-width, 2px);
  height: 10px;
  height: var(--dex-okd-iconbutton-md-font-size, 10px);
  width: 10px;
  width: var(--dex-okd-iconbutton-md-font-size, 10px)
}

.dex-icon-button.dex-icon-button-lg {
  border-radius: 50%;
  border-width: 1px;
  border-width: var(--dex-okd-iconbutton-lg-border-width, 1px);
  height: 24px;
  height: var(--dex-okd-iconbutton-lg-height, 24px);
  width: 24px;
  width: var(--dex-okd-iconbutton-lg-width, 24px)
}

.dex-icon-button.dex-icon-button-lg .dex-icon-button-icon {
  font-size: 16px;
  font-size: var(--dex-okd-iconbutton-lg-font-size, 16px)
}

.dex-icon-button.dex-icon-button-lg .dex-icon-button-loader-circle {
  border-width: 2px;
  border-width: var(--dex-okd-iconbutton-lg-loader-border-width, 2px);
  height: 16px;
  height: var(--dex-okd-iconbutton-lg-font-size, 16px);
  width: 16px;
  width: var(--dex-okd-iconbutton-lg-font-size, 16px)
}

.dex-icon-button-basic {
  background: transparent;
  background: var(--dex-okd-iconbutton-basic-default-background, transparent);
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-iconbutton-basic-default-font-color, var(--dex-okd-color-content-primary))
}

.dex-icon-button-basic.hover,
.dex-icon-button-basic:not(.dex-icon-button-basic-disabled):not(.dex-icon-button-basic-loading):hover {
  background: var(--dex-okd-color-background-surface-secondary);
  background: var(--dex-okd-iconbutton-basic-hover-background, var(--dex-okd-color-background-surface-secondary));
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-iconbutton-basic-hover-font-color, var(--dex-okd-color-content-primary))
}

.dex-icon-button-basic.active,
.dex-icon-button-basic:not(.dex-icon-button-basic-disabled):not(.dex-icon-button-basic-loading):active {
  background: var(--dex-okd-color-background-surface-pressed);
  background: var(--dex-okd-iconbutton-basic-active-background, var(--dex-okd-color-background-surface-pressed));
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-iconbutton-basic-active-font-color, var(--dex-okd-color-content-primary))
}

.dex-icon-button-basic.dex-icon-button-basic-disabled,
.dex-icon-button-basic.disabled {
  background: transparent;
  background: var(--dex-okd-iconbutton-basic-disabled-background, transparent);
  color: var(--dex-okd-color-content-disabled);
  color: var(--dex-okd-iconbutton-basic-disabled-font-color, var(--dex-okd-color-content-disabled));
  cursor: not-allowed
}

.dex-icon-button-basic.dex-icon-button-basic-loading,
.dex-icon-button-basic.loading {
  background: var(--dex-okd-color-background-surface-secondary);
  background: var(--dex-okd-iconbutton-basic-loading-background, var(--dex-okd-color-background-surface-secondary));
  cursor: pointer
}

.dex-icon-button-basic-loader {
  border-color: var(--dex-okd-iconbutton-basic-loader-track-color);
  border-top-color: var(--dex-okd-iconbutton-basic-loader-mark-color)
}

.dex-icon-button-circle {
  background: var(--dex-okd-color-content-primary);
  background: var(--dex-okd-iconbutton-circle-default-background, var(--dex-okd-color-content-primary));
  color: var(--dex-okd-color-content-inverse);
  color: var(--dex-okd-iconbutton-circle-default-font-color, var(--dex-okd-color-content-inverse))
}

.dex-icon-button-circle.hover,
.dex-icon-button-circle:not(.dex-icon-button-circle-disabled):not(.dex-icon-button-circle-loading):hover {
  background: var(--dex-okd-color-content-contrast);
  background: var(--dex-okd-iconbutton-circle-hover-background, var(--dex-okd-color-content-contrast));
  color: var(--dex-okd-color-content-inverse);
  color: var(--dex-okd-iconbutton-circle-hover-font-color, var(--dex-okd-color-content-inverse))
}

.dex-icon-button-circle.active,
.dex-icon-button-circle:not(.dex-icon-button-circle-disabled):not(.dex-icon-button-circle-loading):active {
  background: var(--dex-okd-color-container-contrast);
  background: var(--dex-okd-iconbutton-circle-active-background, var(--dex-okd-color-container-contrast));
  color: var(--dex-okd-color-content-inverse);
  color: var(--dex-okd-iconbutton-circle-active-font-color, var(--dex-okd-color-content-inverse))
}

.dex-icon-button-circle.dex-icon-button-circle-disabled,
.dex-icon-button-circle.disabled {
  background: var(--dex-okd-color-background-surface-disable);
  background: var(--dex-okd-iconbutton-circle-disabled-background, var(--dex-okd-color-background-surface-disable));
  color: var(--dex-okd-color-content-disabled);
  color: var(--dex-okd-iconbutton-circle-disabled-font-color, var(--dex-okd-color-content-disabled));
  cursor: not-allowed
}

.dex-icon-button-circle.dex-icon-button-circle-loading,
.dex-icon-button-circle.loading {
  background: var(--dex-okd-color-content-contrast);
  background: var(--dex-okd-iconbutton-circle-loading-background, var(--dex-okd-color-content-contrast));
  cursor: pointer
}

.dex-icon-button-circle-loader {
  border-color: var(--dex-okd-iconbutton-circle-loader-track-color);
  border-top-color: var(--dex-okd-iconbutton-circle-loader-mark-color)
}

.dex-icon-button-circleOutline {
  background: transparent;
  background: var(--dex-okd-iconbutton-circleOutline-default-background, transparent);
  border-color: var(--dex-okd-iconbutton-circleOutline-default-border-color, var(--dex-okd-color-border-secondary));
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-iconbutton-circleOutline-default-font-color, var(--dex-okd-color-content-primary))
}

.dex-icon-button-circleOutline.hover,
.dex-icon-button-circleOutline:not(.dex-icon-button-circleOutline-disabled):not(.dex-icon-button-circleOutline-loading):hover {
  background: var(--dex-okd-color-background-surface-secondary);
  background: var(--dex-okd-iconbutton-circleOutline-hover-background, var(--dex-okd-color-background-surface-secondary));
  border-color: var(--dex-okd-iconbutton-circleOutline-hover-border-color, var(--dex-okd-color-border-secondary));
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-iconbutton-circleOutline-hover-font-color, var(--dex-okd-color-content-primary))
}

.dex-icon-button-circleOutline.active,
.dex-icon-button-circleOutline:not(.dex-icon-button-circleOutline-disabled):not(.dex-icon-button-circleOutline-loading):active {
  background: var(--dex-okd-color-background-surface-pressed);
  background: var(--dex-okd-iconbutton-circleOutline-active-background, var(--dex-okd-color-background-surface-pressed));
  border-color: var(--dex-okd-iconbutton-circleOutline-active-border-color, var(--dex-okd-color-border-secondary));
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-iconbutton-circleOutline-active-font-color, var(--dex-okd-color-content-primary))
}

.dex-icon-button-circleOutline.dex-icon-button-circleOutline-disabled,
.dex-icon-button-circleOutline.disabled {
  background: var(--dex-okd-color-background-surface-disable);
  background: var(--dex-okd-iconbutton-circleOutline-disabled-background, var(--dex-okd-color-background-surface-disable));
  border-color: var(--dex-okd-iconbutton-circleOutline-disabled-border-color, var(--dex-okd-color-border-tertiary));
  color: var(--dex-okd-color-content-disabled);
  color: var(--dex-okd-iconbutton-circleOutline-disabled-font-color, var(--dex-okd-color-content-disabled));
  cursor: not-allowed
}

.dex-icon-button-circleOutline.dex-icon-button-circleOutline-loading,
.dex-icon-button-circleOutline.loading {
  background: var(--dex-okd-color-background-surface-secondary);
  background: var(--dex-okd-iconbutton-circleOutline-loading-background, var(--dex-okd-color-background-surface-secondary));
  border-color: var(--dex-okd-iconbutton-circleOutline-loading-border-color, var(--dex-okd-color-border-secondary));
  cursor: pointer
}

.dex-icon-button-circleOutline-loader {
  border-color: var(--dex-okd-iconbutton-circleOutline-loader-track-color);
  border-top-color: var(--dex-okd-iconbutton-circleOutline-loader-mark-color)
}

.dex-coach-popover .dex-popup-layer-content {
  padding: 0
}

.dex-coach-popover .dex-popup-layer-arrow-inner {
  background-color: #fff;
  background-color: var(--dex-okd-coachmark-popover-arrow-background-color, #fff);
  border-color: #ebebeb;
  border-color: var(--dex-okd-coachmark-popover-arrow-border-color, #ebebeb)
}

.dex-coach-con {
  background-color: #fff;
  background-color: var(--dex-okd-coachmark-popover-background-color, #fff);
  border: thin solid #ebebeb;
  border: thin solid var(--dex-okd-coachmark-popover-border-color, #ebebeb);
  border-radius: 8px;
  border-radius: var(--dex-okd-coachmark-popover-border-radius, 8px);
  box-shadow: 8px 8px 16px #00000014;
  box-shadow: var(--dex-okd-coachmark-popover-border-shadow, 8px 8px 16px #00000014);
  box-sizing: border-box;
  overflow: hidden;
  padding: 16px;
  padding: var(--dex-okd-coachmark-popover-padding, 16px);
  width: 250px;
  width: var(--dex-okd-coachmark-popover-width, 250px)
}

.dex-coach-con .dex-coach-title {
  align-items: center;
  color: #000;
  color: var(--dex-okd-coachmark-popover-title-color, #000);
  display: flex;
  font-size: 16px;
  font-size: var(--dex-okd-coachmark-popover-title-font-size, 16px);
  font-weight: 700;
  font-weight: var(--dex-okd-coachmark-popover-title-font-weight, 700);
  justify-content: space-between;
  line-height: 20px;
  line-height: var(--dex-okd-coachmark-popover-title-line-height, 20px)
}

.dex-coach-con .dex-coach-title .dex-coach-title-close {
  align-self: flex-start;
  color: #929292;
  color: var(--dex-okd-coachmark-popover-close-color, #929292);
  cursor: pointer;
  display: inline-block;
  font-size: 20px;
  font-size: var(--dex-okd-coachmark-popover-close-font-size, 20px);
  margin-left: 12px;
  margin-left: var(--dex-okd-coachmark-popover-close-margin-left, 12px);
  position: relative;
  vertical-align: middle;
  z-index: 1
}

.dex-coach-con .dex-coach-title+.dex-coach-desc {
  margin-top: 8px;
  margin-top: var(--dex-okd-coachmark-popover-desc-margin-top, 8px)
}

.dex-coach-con .dex-coach-desc {
  color: #000;
  color: var(--dex-okd-coachmark-popover-desc-color, #000);
  font-size: 14px;
  font-size: var(--dex-okd-coachmark-popover-desc-font-size, 14px);
  line-height: 20px;
  line-height: var(--dex-okd-coachmark-popover-desc-line-height, 20px)
}

.dex-coach-con .dex-coach-desc+.dex-coach-footer {
  margin-top: 16px;
  margin-top: var(--dex-okd-coachmark-popover-footer-margin-top, 16px)
}

.dex-coach-con .dex-coach-tour-footer {
  align-items: center;
  color: #929292;
  color: var(--dex-okd-coachmark-tour-footer-color, #929292);
  display: flex;
  font-size: 14px;
  font-size: var(--dex-okd-coachmark-tour-footer-font-size, 14px);
  justify-content: space-between;
  line-height: 16px
}

.dex-coach-con .dex-coach-tour-footer .dex-coach-tour-footer-right {
  align-items: center;
  display: flex
}

.dex-coach-con .dex-coach-tour-footer .dex-coach-tour-footer-confirm {
  margin-left: 8px;
  margin-left: var(--dex-okd-okd-coachmark-tour-footer-margin-left, 8px)
}

.dex-coach-con .dex-coach-tour-footer .dex-coach-tour-footer-button.dex-coach-tour-footer-cancel,
.dex-coach-con .dex-coach-tour-footer .dex-coach-tour-footer-button.dex-coach-tour-footer-confirm {
  min-width: unset
}

.dex-coach-con .dex-coach-standalone-footer {
  display: flex;
  justify-content: flex-end
}

.dex-coach-con .dex-coach-standalone-footer .dex-coach-standalone-footer-button+.dex-coach-standalone-footer-button {
  margin-left: 8px;
  margin-left: var(--dex-okd-okd-coachmark-standalone-footer-margin-left, 8px)
}

@media (min-width:768px) {
  .dex-coach-con {
    max-width: 375px;
    max-width: var(--dex-okd-coachmark-popover-max-width, 375px)
  }
}

.dex-coach-mask {
  color: rgba(0, 0, 0, .65);
  color: var(--dex-okd-coachmark-mask-color, rgba(0, 0, 0, .65));
  inset: 0;
  pointer-events: none;
  position: fixed
}

.dex-carousel {
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.dex-carousel-track {
  cursor: -webkit-grab;
  cursor: grab;
  display: flex;
  position: relative
}

.dex-carousel-track-grid {
  display: grid;
  grid-auto-flow: column
}

.dex-carousel-slide {
  --dex-okd-carousel-slide-spacing: 0;
  flex-shrink: 0;
  height: 100%;
  margin-right: var(--dex-okd-carousel-slide-spacing);
  position: relative
}

.dex-carousel-slide:last-child {
  margin-right: 0
}

.dex-carousel .switch-button {
  align-items: center;
  background-color: initial;
  background-color: var(--dex-okd-carousel-switch-button-bg-color, transparent);
  border: 2px solid #dbdbdb;
  border: var(--dex-okd-carousel-switch-button-bg-border-width, 2px) solid var(--dex-okd-carousel-switch-button-bg-border-color, #dbdbdb);
  border-radius: 50%;
  color: #000;
  color: var(--dex-okd-carousel-switch-button-font-color, #000);
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  height: var(--dex-okd-carousel-switch-button-wdith, 44px);
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  width: var(--dex-okd-carousel-switch-button-wdith, 44px);
  z-index: 2
}

.dex-carousel .switch-button-prev {
  left: 10px;
  left: var(--dex-okd-carousel-switch-button-distance, 10px)
}

.dex-carousel .switch-button-next {
  right: 10px;
  right: var(--dex-okd-carousel-switch-button-distance, 10px)
}

.dex-carousel .switch-button:hover {
  background: #000;
  background: var(--dex-okd-carousel-switch-button-bg-color-hover, #000);
  border: 2px solid #000;
  border: var(--dex-okd-carousel-switch-button-bg-border-width, 2px) solid #000;
  color: #fafafa;
  color: var(--dex-okd-carousel-switch-button-font-color, #fafafa)
}

.dex-carousel .switch-button .icon-next,
.dex-carousel .switch-button .icon-prev {
  font-size: 28px;
  font-size: var(--dex-okd-carousel-switch-button-font-size, 28px)
}

.dex-carousel .switch-button .icon-prev {
  transform: rotate(90deg)
}

.dex-carousel .switch-button .icon-next {
  transform: rotate(-90deg)
}

.dex-carousel-indicators {
  bottom: 20px;
  bottom: var(--dex-okd-carousel-indicators-bottom, 20px);
  display: flex;
  left: 50%;
  list-style: none;
  position: absolute;
  transform: translateX(-50%)
}

.dex-carousel-indicator {
  background-color: #bdbdbd;
  background-color: var(--dex-okd-carousel-indicator-bg-color, #bdbdbd);
  border: none;
  cursor: pointer;
  display: block;
  height: 6px;
  height: var(--dex-okd-carousel-indicator-height, 6px);
  margin-right: 13px;
  margin-right: var(--dex-okd-carousel-indicator-margin, 13px);
  transition: background-color .5s;
  width: 60px;
  width: var(--dex-okd-carousel-indicator-width, 60px)
}

.dex-carousel-indicator:last-child {
  margin-right: 0
}

.dex-carousel-indicator.active {
  background-color: #000;
  background-color: var(--dex-okd-carousel-indicator-bg-color-active, #000)
}

.dex-carousel-dragging .dex-carousel-slide>* {
  pointer-events: none
}

.dex-btn .dex-btn-outline-primary-loader {
  border-color: var(--dex-okd-button-outline-primary-loader-track-color);
  border-top-color: var(--dex-okd-button-outline-primary-loader-mark-color)
}

.dex-btn.btn-outline-primary {
  background: var(--dex-okd-button-outline-primary-default-background);
  border-color: var(--dex-okd-button-outline-primary-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-outline-primary-border-size);
  box-shadow: var(--dex-okd-button-outline-primary-default-shadow);
  color: var(--dex-okd-button-outline-primary-default-font-color)
}

.dex-btn.btn-outline-primary.hover,
.dex-btn.btn-outline-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-outline-primary-hover-background);
  border-color: var(--dex-okd-button-outline-primary-hover-border-color);
  box-shadow: var(--dex-okd-button-outline-primary-hover-shadow);
  color: var(--dex-okd-button-outline-primary-hover-font-color)
}

.dex-btn.btn-outline-primary.hover .btn-icon,
.dex-btn.btn-outline-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-outline-primary-hover-icon-color)
}

.dex-btn.btn-outline-primary.active,
.dex-btn.btn-outline-primary:not(:disabled):active {
  background: var(--dex-okd-button-outline-primary-active-background);
  border-color: var(--dex-okd-button-outline-primary-active-border-color);
  box-shadow: var(--dex-okd-button-outline-primary-active-shadow);
  color: var(--dex-okd-button-outline-primary-active-font-color)
}

.dex-btn.btn-outline-primary.active .btn-icon,
.dex-btn.btn-outline-primary:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-outline-primary-active-icon-color)
}

.dex-btn.btn-outline-primary:not(.loading).btn-disabled,
.dex-btn.btn-outline-primary:not(.loading):disabled {
  background: var(--dex-okd-button-outline-primary-disabled-background);
  border-color: var(--dex-okd-button-outline-primary-disabled-border-color);
  box-shadow: var(--dex-okd-button-outline-primary-disabled-shadow);
  color: var(--dex-okd-button-outline-primary-disabled-font-color)
}

.dex-btn.btn-outline-primary:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-outline-primary:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-outline-primary-disabled-icon-color)
}

.dex-btn.btn-outline-primary.loading {
  cursor: pointer
}

.dex-btn.btn-outline-primary .btn-icon {
  color: var(--dex-okd-button-outline-primary-default-icon-color)
}

.dex-btn.btn-outline-primary .dex-btn-loader-text {
  color: var(--dex-okd-button-outline-primary-default-font-color)
}

.dex-btn.btn-outline-primary.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-outline-primary-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-outline-primary.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-outline-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-outline-primary-border-size)*2)
}

.dex-btn.btn-outline-primary.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-primary.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-outline-primary-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-outline-primary.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-outline-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-outline-primary-border-size)*2)
}

.dex-btn.btn-outline-primary.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-primary.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-outline-primary-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-outline-primary.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-outline-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-outline-primary-border-size)*2)
}

.dex-btn.btn-outline-primary.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-primary.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-outline-primary-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-outline-primary.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-outline-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-outline-primary-border-size)*2)
}

.dex-btn.btn-outline-primary.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-primary.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-outline-primary-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-outline-primary.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-outline-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-outline-primary-border-size)*2)
}

.dex-btn.btn-outline-primary.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-primary.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-outline-primary-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-outline-primary.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-outline-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-outline-primary-border-size)*2)
}

.dex-btn.btn-outline-primary.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-primary.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-outline-primary-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-outline-primary.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-outline-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-outline-primary-border-size)*2)
}

.dex-btn.btn-outline-primary.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn .btn-content {
  align-items: center;
  display: flex
}

.dex-btn .dex-btn-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.loading .btn-content {
  opacity: 0
}

.dex-btn.loading .btn-content-position {
  display: none
}

.dex-btn.loading .dex-btn-loader {
  line-height: 0;
  position: absolute
}

.dex-btn.loading .btn-loader-position-absolute {
  position: relative
}

.dex-btn-loader-container {
  height: 100%;
  position: relative
}

.dex-btn .btn-icon+.btn-content {
  margin-left: 4px
}

.dex-btn.btn-xxs .btn-icon {
  font-size: var(--dex-okd-button-xxs-icon-size)
}

.dex-btn.btn-xxs .btn-icon-leading {
  margin-right: var(--dex-okd-button-xxs-icon-margin)
}

.dex-btn.btn-xxs .btn-icon-tailing {
  margin-left: var(--dex-okd-button-xxs-icon-margin)
}

.dex-btn.btn-xxs .dex-btn-loader-size {
  border-radius: var(--dex-okd-button-xxs-loader-size);
  height: var(--dex-okd-button-xxs-loader-size);
  width: var(--dex-okd-button-xxs-loader-size)
}

.dex-btn.btn-xs .btn-icon {
  font-size: var(--dex-okd-button-xs-icon-size)
}

.dex-btn.btn-xs .btn-icon-leading {
  margin-right: var(--dex-okd-button-xs-icon-margin)
}

.dex-btn.btn-xs .btn-icon-tailing {
  margin-left: var(--dex-okd-button-xs-icon-margin)
}

.dex-btn.btn-xs .dex-btn-loader-size {
  border-radius: var(--dex-okd-button-xs-loader-size);
  height: var(--dex-okd-button-xs-loader-size);
  width: var(--dex-okd-button-xs-loader-size)
}

.dex-btn.btn-s .btn-icon {
  font-size: var(--dex-okd-button-s-icon-size)
}

.dex-btn.btn-s .btn-icon-leading {
  margin-right: var(--dex-okd-button-s-icon-margin)
}

.dex-btn.btn-s .btn-icon-tailing {
  margin-left: var(--dex-okd-button-s-icon-margin)
}

.dex-btn.btn-s .dex-btn-loader-size {
  border-radius: var(--dex-okd-button-s-loader-size);
  height: var(--dex-okd-button-s-loader-size);
  width: var(--dex-okd-button-s-loader-size)
}

.dex-btn.btn-sm .btn-icon {
  font-size: var(--dex-okd-button-sm-icon-size)
}

.dex-btn.btn-sm .btn-icon-leading {
  margin-right: var(--dex-okd-button-sm-icon-margin)
}

.dex-btn.btn-sm .btn-icon-tailing {
  margin-left: var(--dex-okd-button-sm-icon-margin)
}

.dex-btn.btn-sm .dex-btn-loader-size {
  border-radius: var(--dex-okd-button-sm-loader-size);
  height: var(--dex-okd-button-sm-loader-size);
  width: var(--dex-okd-button-sm-loader-size)
}

.dex-btn.btn-md .btn-icon {
  font-size: var(--dex-okd-button-md-icon-size)
}

.dex-btn.btn-md .btn-icon-leading {
  margin-right: var(--dex-okd-button-md-icon-margin)
}

.dex-btn.btn-md .btn-icon-tailing {
  margin-left: var(--dex-okd-button-md-icon-margin)
}

.dex-btn.btn-md .dex-btn-loader-size {
  border-radius: var(--dex-okd-button-md-loader-size);
  height: var(--dex-okd-button-md-loader-size);
  width: var(--dex-okd-button-md-loader-size)
}

.dex-btn.btn-lg .btn-icon {
  font-size: var(--dex-okd-button-lg-icon-size)
}

.dex-btn.btn-lg .btn-icon-leading {
  margin-right: var(--dex-okd-button-lg-icon-margin)
}

.dex-btn.btn-lg .btn-icon-tailing {
  margin-left: var(--dex-okd-button-lg-icon-margin)
}

.dex-btn.btn-lg .dex-btn-loader-size {
  border-radius: var(--dex-okd-button-lg-loader-size);
  height: var(--dex-okd-button-lg-loader-size);
  width: var(--dex-okd-button-lg-loader-size)
}

.dex-btn.btn-xl .btn-icon {
  font-size: var(--dex-okd-button-xl-icon-size)
}

.dex-btn.btn-xl .btn-icon-leading {
  margin-right: var(--dex-okd-button-xl-icon-margin)
}

.dex-btn.btn-xl .btn-icon-tailing {
  margin-left: var(--dex-okd-button-xl-icon-margin)
}

.dex-btn.btn-xl .dex-btn-loader-size {
  border-radius: var(--dex-okd-button-xl-loader-size);
  height: var(--dex-okd-button-xl-loader-size);
  width: var(--dex-okd-button-xl-loader-size)
}

.dex-btn .dex-btn-fill-grey-loader {
  border-color: var(--dex-okd-button-fill-grey-loader-track-color);
  border-top-color: var(--dex-okd-button-fill-grey-loader-mark-color)
}

.dex-btn {
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  -webkit-appearance: none;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-weight: 500;
  justify-content: center;
  outline: none;
  position: relative;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.dex-btn:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-btn.btn-fill-grey {
  background: var(--dex-okd-button-fill-grey-default-background);
  border-color: var(--dex-okd-button-fill-grey-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-fill-grey-border-size);
  box-shadow: var(--dex-okd-button-fill-grey-default-shadow);
  color: var(--dex-okd-button-fill-grey-default-font-color)
}

.dex-btn.btn-fill-grey.hover,
.dex-btn.btn-fill-grey:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-fill-grey-hover-background);
  border-color: var(--dex-okd-button-fill-grey-hover-border-color);
  box-shadow: var(--dex-okd-button-fill-grey-hover-shadow);
  color: var(--dex-okd-button-fill-grey-hover-font-color)
}

.dex-btn.btn-fill-grey.hover .btn-icon,
.dex-btn.btn-fill-grey:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-fill-grey-hover-icon-color)
}

.dex-btn.btn-fill-grey.active,
.dex-btn.btn-fill-grey:not(:disabled):active {
  background: var(--dex-okd-button-fill-grey-active-background);
  border-color: var(--dex-okd-button-fill-grey-active-border-color);
  box-shadow: var(--dex-okd-button-fill-grey-active-shadow);
  color: var(--dex-okd-button-fill-grey-active-font-color)
}

.dex-btn.btn-fill-grey.active .btn-icon,
.dex-btn.btn-fill-grey:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-fill-grey-active-icon-color)
}

.dex-btn.btn-fill-grey:not(.loading).btn-disabled,
.dex-btn.btn-fill-grey:not(.loading):disabled {
  background: var(--dex-okd-button-fill-grey-disabled-background);
  border-color: var(--dex-okd-button-fill-grey-disabled-border-color);
  box-shadow: var(--dex-okd-button-fill-grey-disabled-shadow);
  color: var(--dex-okd-button-fill-grey-disabled-font-color)
}

.dex-btn.btn-fill-grey:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-fill-grey:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-fill-grey-disabled-icon-color)
}

.dex-btn.btn-fill-grey.loading {
  cursor: pointer
}

.dex-btn.btn-fill-grey .btn-icon {
  color: var(--dex-okd-button-fill-grey-default-icon-color)
}

.dex-btn.btn-fill-grey .dex-btn-loader-text {
  color: var(--dex-okd-button-fill-grey-default-font-color)
}

.dex-btn.btn-fill-grey.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-fill-grey-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-fill-grey.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-grey-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-grey-border-size)*2)
}

.dex-btn.btn-fill-grey.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-grey.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-fill-grey-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-fill-grey.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-grey-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-grey-border-size)*2)
}

.dex-btn.btn-fill-grey.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-grey.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-fill-grey-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-fill-grey.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-grey-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-grey-border-size)*2)
}

.dex-btn.btn-fill-grey.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-grey.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-fill-grey-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-fill-grey.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-grey-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-grey-border-size)*2)
}

.dex-btn.btn-fill-grey.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-grey.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-fill-grey-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-fill-grey.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-grey-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-grey-border-size)*2)
}

.dex-btn.btn-fill-grey.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-grey.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-fill-grey-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-fill-grey.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-grey-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-grey-border-size)*2)
}

.dex-btn.btn-fill-grey.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-grey.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-fill-grey-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-fill-grey.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-grey-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-grey-border-size)*2)
}

.dex-btn.btn-fill-grey.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-xxs {
  border-radius: var(--dex-okd-button-xxs-border-radius);
  font-weight: 500;
  font-weight: var(--dex-okd-button-xxs-font-weight, 500);
  min-width: var(--dex-okd-button-xxs-min-width)
}

.dex-btn.btn-xxs,
.dex-btn.btn-xxs .dex-btn-loader-text {
  font-size: var(--dex-okd-button-xxs-font-size);
  line-height: var(--dex-okd-button-xxs-line-height)
}

.dex-btn.btn-xxs .dex-btn-loader-text {
  margin-left: var(--dex-okd-button-xxs-loader-text-margin-left)
}

.dex-btn.btn-xxs.btn-rect {
  border-radius: 4px;
  border-radius: var(--dex-okd-button-rect-xxs-border-radius, 4px)
}

.dex-btn.btn-xs {
  border-radius: var(--dex-okd-button-xs-border-radius);
  font-weight: 500;
  font-weight: var(--dex-okd-button-xs-font-weight, 500);
  min-width: var(--dex-okd-button-xs-min-width)
}

.dex-btn.btn-xs,
.dex-btn.btn-xs .dex-btn-loader-text {
  font-size: var(--dex-okd-button-xs-font-size);
  line-height: var(--dex-okd-button-xs-line-height)
}

.dex-btn.btn-xs .dex-btn-loader-text {
  margin-left: var(--dex-okd-button-xs-loader-text-margin-left)
}

.dex-btn.btn-xs.btn-rect {
  border-radius: 4px;
  border-radius: var(--dex-okd-button-rect-xs-border-radius, 4px)
}

.dex-btn.btn-s {
  border-radius: var(--dex-okd-button-s-border-radius);
  font-weight: 500;
  font-weight: var(--dex-okd-button-s-font-weight, 500);
  min-width: var(--dex-okd-button-s-min-width)
}

.dex-btn.btn-s,
.dex-btn.btn-s .dex-btn-loader-text {
  font-size: var(--dex-okd-button-s-font-size);
  line-height: var(--dex-okd-button-s-line-height)
}

.dex-btn.btn-s .dex-btn-loader-text {
  margin-left: var(--dex-okd-button-s-loader-text-margin-left)
}

.dex-btn.btn-s.btn-rect {
  border-radius: 4px;
  border-radius: var(--dex-okd-button-rect-s-border-radius, 4px)
}

.dex-btn.btn-sm {
  border-radius: var(--dex-okd-button-sm-border-radius);
  font-weight: 500;
  font-weight: var(--dex-okd-button-sm-font-weight, 500);
  min-width: var(--dex-okd-button-sm-min-width)
}

.dex-btn.btn-sm,
.dex-btn.btn-sm .dex-btn-loader-text {
  font-size: var(--dex-okd-button-sm-font-size);
  line-height: var(--dex-okd-button-sm-line-height)
}

.dex-btn.btn-sm .dex-btn-loader-text {
  margin-left: var(--dex-okd-button-sm-loader-text-margin-left)
}

.dex-btn.btn-sm.btn-rect {
  border-radius: 4px;
  border-radius: var(--dex-okd-button-rect-sm-border-radius, 4px)
}

.dex-btn.btn-md {
  border-radius: var(--dex-okd-button-md-border-radius);
  font-weight: 500;
  font-weight: var(--dex-okd-button-md-font-weight, 500);
  min-width: var(--dex-okd-button-md-min-width)
}

.dex-btn.btn-md,
.dex-btn.btn-md .dex-btn-loader-text {
  font-size: var(--dex-okd-button-md-font-size);
  line-height: var(--dex-okd-button-md-line-height)
}

.dex-btn.btn-md .dex-btn-loader-text {
  margin-left: var(--dex-okd-button-md-loader-text-margin-left)
}

.dex-btn.btn-md.btn-rect {
  border-radius: 4px;
  border-radius: var(--dex-okd-button-rect-md-border-radius, 4px)
}

.dex-btn.btn-lg {
  border-radius: var(--dex-okd-button-lg-border-radius);
  font-weight: 500;
  font-weight: var(--dex-okd-button-lg-font-weight, 500);
  min-width: var(--dex-okd-button-lg-min-width)
}

.dex-btn.btn-lg,
.dex-btn.btn-lg .dex-btn-loader-text {
  font-size: var(--dex-okd-button-lg-font-size);
  line-height: var(--dex-okd-button-lg-line-height)
}

.dex-btn.btn-lg .dex-btn-loader-text {
  margin-left: var(--dex-okd-button-lg-loader-text-margin-left)
}

.dex-btn.btn-lg.btn-rect {
  border-radius: 8px;
  border-radius: var(--dex-okd-button-rect-lg-border-radius, 8px)
}

.dex-btn.btn-xl {
  border-radius: var(--dex-okd-button-xl-border-radius);
  font-weight: 500;
  font-weight: var(--dex-okd-button-xl-font-weight, 500);
  min-width: var(--dex-okd-button-xl-min-width)
}

.dex-btn.btn-xl,
.dex-btn.btn-xl .dex-btn-loader-text {
  font-size: var(--dex-okd-button-xl-font-size);
  line-height: var(--dex-okd-button-xl-line-height)
}

.dex-btn.btn-xl .dex-btn-loader-text {
  margin-left: var(--dex-okd-button-xl-loader-text-margin-left)
}

.dex-btn.btn-xl.btn-rect {
  border-radius: 8px;
  border-radius: var(--dex-okd-button-rect-xl-border-radius, 8px)
}

.dex-btn.btn-disabled,
.dex-btn:disabled {
  cursor: not-allowed
}

.dex-btn.block {
  display: flex;
  width: 100%
}

.dex-btn.btn-circle {
  border-radius: 100px !important
}

.dex-btn {
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  -webkit-appearance: none;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-weight: 500;
  justify-content: center;
  outline: none;
  position: relative;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.dex-btn:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-btn.btn-fill-highlight {
  background: var(--dex-okd-button-fill-highlight-default-background);
  border-color: var(--dex-okd-button-fill-highlight-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-fill-highlight-border-size);
  box-shadow: var(--dex-okd-button-fill-highlight-default-shadow);
  color: var(--dex-okd-button-fill-highlight-default-font-color)
}

.dex-btn.btn-fill-highlight.hover,
.dex-btn.btn-fill-highlight:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-fill-highlight-hover-background);
  border-color: var(--dex-okd-button-fill-highlight-hover-border-color);
  box-shadow: var(--dex-okd-button-fill-highlight-hover-shadow);
  color: var(--dex-okd-button-fill-highlight-hover-font-color)
}

.dex-btn.btn-fill-highlight.hover .btn-icon,
.dex-btn.btn-fill-highlight:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-fill-highlight-hover-icon-color)
}

.dex-btn.btn-fill-highlight.active,
.dex-btn.btn-fill-highlight:not(:disabled):active {
  background: var(--dex-okd-button-fill-highlight-active-background);
  border-color: var(--dex-okd-button-fill-highlight-active-border-color);
  box-shadow: var(--dex-okd-button-fill-highlight-active-shadow);
  color: var(--dex-okd-button-fill-highlight-active-font-color)
}

.dex-btn.btn-fill-highlight.active .btn-icon,
.dex-btn.btn-fill-highlight:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-fill-highlight-active-icon-color)
}

.dex-btn.btn-fill-highlight:not(.loading).btn-disabled,
.dex-btn.btn-fill-highlight:not(.loading):disabled {
  background: var(--dex-okd-button-fill-highlight-disabled-background);
  border-color: var(--dex-okd-button-fill-highlight-disabled-border-color);
  box-shadow: var(--dex-okd-button-fill-highlight-disabled-shadow);
  color: var(--dex-okd-button-fill-highlight-disabled-font-color)
}

.dex-btn.btn-fill-highlight:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-fill-highlight:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-fill-highlight-disabled-icon-color)
}

.dex-btn.btn-fill-highlight.loading {
  cursor: pointer
}

.dex-btn.btn-fill-highlight .btn-icon {
  color: var(--dex-okd-button-fill-highlight-default-icon-color)
}

.dex-btn.btn-fill-highlight .dex-btn-loader-text {
  color: var(--dex-okd-button-fill-highlight-default-font-color)
}

.dex-btn.btn-fill-highlight.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-fill-highlight-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-fill-highlight.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-highlight-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-highlight-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-highlight-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-highlight-border-size)*2)
}

.dex-btn.btn-fill-highlight.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-highlight.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-fill-highlight-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-fill-highlight.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-highlight-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-highlight-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-highlight-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-highlight-border-size)*2)
}

.dex-btn.btn-fill-highlight.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-highlight.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-fill-highlight-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-fill-highlight.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-highlight-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-highlight-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-highlight-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-highlight-border-size)*2)
}

.dex-btn.btn-fill-highlight.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-highlight.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-fill-highlight-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-fill-highlight.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-highlight-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-highlight-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-highlight-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-highlight-border-size)*2)
}

.dex-btn.btn-fill-highlight.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-highlight.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-fill-highlight-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-fill-highlight.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-highlight-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-highlight-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-highlight-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-highlight-border-size)*2)
}

.dex-btn.btn-fill-highlight.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-highlight.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-fill-highlight-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-fill-highlight.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-highlight-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-highlight-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-highlight-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-highlight-border-size)*2)
}

.dex-btn.btn-fill-highlight.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-highlight.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-fill-highlight-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-fill-highlight.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-highlight-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-highlight-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-highlight-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-highlight-border-size)*2)
}

.dex-btn.btn-fill-highlight.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-primary {
  background: var(--dex-okd-button-fill-primary-default-background);
  border-color: var(--dex-okd-button-fill-primary-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-fill-primary-border-size);
  box-shadow: var(--dex-okd-button-fill-primary-default-shadow);
  color: var(--dex-okd-button-fill-primary-default-font-color)
}

.dex-btn.btn-fill-primary.hover,
.dex-btn.btn-fill-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-fill-primary-hover-background);
  border-color: var(--dex-okd-button-fill-primary-hover-border-color);
  box-shadow: var(--dex-okd-button-fill-primary-hover-shadow);
  color: var(--dex-okd-button-fill-primary-hover-font-color)
}

.dex-btn.btn-fill-primary.hover .btn-icon,
.dex-btn.btn-fill-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-fill-primary-hover-icon-color)
}

.dex-btn.btn-fill-primary.active,
.dex-btn.btn-fill-primary:not(:disabled):active {
  background: var(--dex-okd-button-fill-primary-active-background);
  border-color: var(--dex-okd-button-fill-primary-active-border-color);
  box-shadow: var(--dex-okd-button-fill-primary-active-shadow);
  color: var(--dex-okd-button-fill-primary-active-font-color)
}

.dex-btn.btn-fill-primary.active .btn-icon,
.dex-btn.btn-fill-primary:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-fill-primary-active-icon-color)
}

.dex-btn.btn-fill-primary:not(.loading).btn-disabled,
.dex-btn.btn-fill-primary:not(.loading):disabled {
  background: var(--dex-okd-button-fill-primary-disabled-background);
  border-color: var(--dex-okd-button-fill-primary-disabled-border-color);
  box-shadow: var(--dex-okd-button-fill-primary-disabled-shadow);
  color: var(--dex-okd-button-fill-primary-disabled-font-color)
}

.dex-btn.btn-fill-primary:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-fill-primary:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-fill-primary-disabled-icon-color)
}

.dex-btn.btn-fill-primary.loading {
  cursor: pointer
}

.dex-btn.btn-fill-primary .btn-icon {
  color: var(--dex-okd-button-fill-primary-default-icon-color)
}

.dex-btn.btn-fill-primary .dex-btn-loader-text {
  color: var(--dex-okd-button-fill-primary-default-font-color)
}

.dex-btn.btn-fill-primary.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-fill-primary-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-fill-primary.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-primary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-primary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-primary-border-size)*2)
}

.dex-btn.btn-fill-primary.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-primary.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-fill-primary-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-fill-primary.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-primary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-primary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-primary-border-size)*2)
}

.dex-btn.btn-fill-primary.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-primary.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-fill-primary-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-fill-primary.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-primary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-primary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-primary-border-size)*2)
}

.dex-btn.btn-fill-primary.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-primary.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-fill-primary-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-fill-primary.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-primary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-primary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-primary-border-size)*2)
}

.dex-btn.btn-fill-primary.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-primary.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-fill-primary-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-fill-primary.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-primary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-primary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-primary-border-size)*2)
}

.dex-btn.btn-fill-primary.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-primary.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-fill-primary-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-fill-primary.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-primary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-primary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-primary-border-size)*2)
}

.dex-btn.btn-fill-primary.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-primary.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-fill-primary-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-fill-primary.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-primary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-primary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-primary-border-size)*2)
}

.dex-btn.btn-fill-primary.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-secondary {
  background: var(--dex-okd-button-fill-secondary-default-background);
  border-color: var(--dex-okd-button-fill-secondary-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-fill-secondary-border-size);
  box-shadow: var(--dex-okd-button-fill-secondary-default-shadow);
  color: var(--dex-okd-button-fill-secondary-default-font-color)
}

.dex-btn.btn-fill-secondary.hover,
.dex-btn.btn-fill-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-fill-secondary-hover-background);
  border-color: var(--dex-okd-button-fill-secondary-hover-border-color);
  box-shadow: var(--dex-okd-button-fill-secondary-hover-shadow);
  color: var(--dex-okd-button-fill-secondary-hover-font-color)
}

.dex-btn.btn-fill-secondary.hover .btn-icon,
.dex-btn.btn-fill-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-fill-secondary-hover-icon-color)
}

.dex-btn.btn-fill-secondary.active,
.dex-btn.btn-fill-secondary:not(:disabled):active {
  background: var(--dex-okd-button-fill-secondary-active-background);
  border-color: var(--dex-okd-button-fill-secondary-active-border-color);
  box-shadow: var(--dex-okd-button-fill-secondary-active-shadow);
  color: var(--dex-okd-button-fill-secondary-active-font-color)
}

.dex-btn.btn-fill-secondary.active .btn-icon,
.dex-btn.btn-fill-secondary:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-fill-secondary-active-icon-color)
}

.dex-btn.btn-fill-secondary:not(.loading).btn-disabled,
.dex-btn.btn-fill-secondary:not(.loading):disabled {
  background: var(--dex-okd-button-fill-secondary-disabled-background);
  border-color: var(--dex-okd-button-fill-secondary-disabled-border-color);
  box-shadow: var(--dex-okd-button-fill-secondary-disabled-shadow);
  color: var(--dex-okd-button-fill-secondary-disabled-font-color)
}

.dex-btn.btn-fill-secondary:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-fill-secondary:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-fill-secondary-disabled-icon-color)
}

.dex-btn.btn-fill-secondary.loading {
  cursor: pointer
}

.dex-btn.btn-fill-secondary .btn-icon {
  color: var(--dex-okd-button-fill-secondary-default-icon-color)
}

.dex-btn.btn-fill-secondary .dex-btn-loader-text {
  color: var(--dex-okd-button-fill-secondary-default-font-color)
}

.dex-btn.btn-fill-secondary.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-fill-secondary-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-fill-secondary.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-secondary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-secondary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-secondary-border-size)*2)
}

.dex-btn.btn-fill-secondary.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-secondary.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-fill-secondary-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-fill-secondary.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-secondary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-secondary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-secondary-border-size)*2)
}

.dex-btn.btn-fill-secondary.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-secondary.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-fill-secondary-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-fill-secondary.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-secondary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-secondary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-secondary-border-size)*2)
}

.dex-btn.btn-fill-secondary.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-secondary.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-fill-secondary-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-fill-secondary.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-secondary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-secondary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-secondary-border-size)*2)
}

.dex-btn.btn-fill-secondary.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-secondary.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-fill-secondary-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-fill-secondary.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-secondary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-secondary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-secondary-border-size)*2)
}

.dex-btn.btn-fill-secondary.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-secondary.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-fill-secondary-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-fill-secondary.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-secondary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-secondary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-secondary-border-size)*2)
}

.dex-btn.btn-fill-secondary.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-secondary.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-fill-secondary-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-fill-secondary.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-secondary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-secondary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-secondary-border-size)*2)
}

.dex-btn.btn-fill-secondary.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-tertiary {
  background: var(--dex-okd-button-fill-tertiary-default-background);
  border-color: var(--dex-okd-button-fill-tertiary-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-fill-tertiary-border-size);
  box-shadow: var(--dex-okd-button-fill-tertiary-default-shadow);
  color: var(--dex-okd-button-fill-tertiary-default-font-color)
}

.dex-btn.btn-fill-tertiary.hover,
.dex-btn.btn-fill-tertiary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-fill-tertiary-hover-background);
  border-color: var(--dex-okd-button-fill-tertiary-hover-border-color);
  box-shadow: var(--dex-okd-button-fill-tertiary-hover-shadow);
  color: var(--dex-okd-button-fill-tertiary-hover-font-color)
}

.dex-btn.btn-fill-tertiary.hover .btn-icon,
.dex-btn.btn-fill-tertiary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-fill-tertiary-hover-icon-color)
}

.dex-btn.btn-fill-tertiary.active,
.dex-btn.btn-fill-tertiary:not(:disabled):active {
  background: var(--dex-okd-button-fill-tertiary-active-background);
  border-color: var(--dex-okd-button-fill-tertiary-active-border-color);
  box-shadow: var(--dex-okd-button-fill-tertiary-active-shadow);
  color: var(--dex-okd-button-fill-tertiary-active-font-color)
}

.dex-btn.btn-fill-tertiary.active .btn-icon,
.dex-btn.btn-fill-tertiary:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-fill-tertiary-active-icon-color)
}

.dex-btn.btn-fill-tertiary:not(.loading).btn-disabled,
.dex-btn.btn-fill-tertiary:not(.loading):disabled {
  background: var(--dex-okd-button-fill-tertiary-disabled-background);
  border-color: var(--dex-okd-button-fill-tertiary-disabled-border-color);
  box-shadow: var(--dex-okd-button-fill-tertiary-disabled-shadow);
  color: var(--dex-okd-button-fill-tertiary-disabled-font-color)
}

.dex-btn.btn-fill-tertiary:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-fill-tertiary:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-fill-tertiary-disabled-icon-color)
}

.dex-btn.btn-fill-tertiary.loading {
  cursor: pointer
}

.dex-btn.btn-fill-tertiary .btn-icon {
  color: var(--dex-okd-button-fill-tertiary-default-icon-color)
}

.dex-btn.btn-fill-tertiary .dex-btn-loader-text {
  color: var(--dex-okd-button-fill-tertiary-default-font-color)
}

.dex-btn.btn-fill-tertiary.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-fill-tertiary-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-fill-tertiary.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-tertiary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-tertiary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-tertiary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-tertiary-border-size)*2)
}

.dex-btn.btn-fill-tertiary.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-tertiary.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-fill-tertiary-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-fill-tertiary.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-tertiary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-tertiary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-tertiary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-tertiary-border-size)*2)
}

.dex-btn.btn-fill-tertiary.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-tertiary.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-fill-tertiary-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-fill-tertiary.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-tertiary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-tertiary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-tertiary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-tertiary-border-size)*2)
}

.dex-btn.btn-fill-tertiary.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-tertiary.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-fill-tertiary-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-fill-tertiary.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-tertiary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-tertiary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-tertiary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-tertiary-border-size)*2)
}

.dex-btn.btn-fill-tertiary.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-tertiary.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-fill-tertiary-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-fill-tertiary.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-tertiary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-tertiary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-tertiary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-tertiary-border-size)*2)
}

.dex-btn.btn-fill-tertiary.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-tertiary.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-fill-tertiary-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-fill-tertiary.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-tertiary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-tertiary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-tertiary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-tertiary-border-size)*2)
}

.dex-btn.btn-fill-tertiary.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-tertiary.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-fill-tertiary-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-fill-tertiary.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-tertiary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-tertiary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-tertiary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-tertiary-border-size)*2)
}

.dex-btn.btn-fill-tertiary.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-quaternary {
  background: var(--dex-okd-button-fill-quaternary-default-background);
  border-color: var(--dex-okd-button-fill-quaternary-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-fill-quaternary-border-size);
  box-shadow: var(--dex-okd-button-fill-quaternary-default-shadow);
  color: var(--dex-okd-button-fill-quaternary-default-font-color)
}

.dex-btn.btn-fill-quaternary.hover,
.dex-btn.btn-fill-quaternary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-fill-quaternary-hover-background);
  border-color: var(--dex-okd-button-fill-quaternary-hover-border-color);
  box-shadow: var(--dex-okd-button-fill-quaternary-hover-shadow);
  color: var(--dex-okd-button-fill-quaternary-hover-font-color)
}

.dex-btn.btn-fill-quaternary.hover .btn-icon,
.dex-btn.btn-fill-quaternary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-fill-quaternary-hover-icon-color)
}

.dex-btn.btn-fill-quaternary.active,
.dex-btn.btn-fill-quaternary:not(:disabled):active {
  background: var(--dex-okd-button-fill-quaternary-active-background);
  border-color: var(--dex-okd-button-fill-quaternary-active-border-color);
  box-shadow: var(--dex-okd-button-fill-quaternary-active-shadow);
  color: var(--dex-okd-button-fill-quaternary-active-font-color)
}

.dex-btn.btn-fill-quaternary.active .btn-icon,
.dex-btn.btn-fill-quaternary:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-fill-quaternary-active-icon-color)
}

.dex-btn.btn-fill-quaternary:not(.loading).btn-disabled,
.dex-btn.btn-fill-quaternary:not(.loading):disabled {
  background: var(--dex-okd-button-fill-quaternary-disabled-background);
  border-color: var(--dex-okd-button-fill-quaternary-disabled-border-color);
  box-shadow: var(--dex-okd-button-fill-quaternary-disabled-shadow);
  color: var(--dex-okd-button-fill-quaternary-disabled-font-color)
}

.dex-btn.btn-fill-quaternary:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-fill-quaternary:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-fill-quaternary-disabled-icon-color)
}

.dex-btn.btn-fill-quaternary.loading {
  cursor: pointer
}

.dex-btn.btn-fill-quaternary .btn-icon {
  color: var(--dex-okd-button-fill-quaternary-default-icon-color)
}

.dex-btn.btn-fill-quaternary .dex-btn-loader-text {
  color: var(--dex-okd-button-fill-quaternary-default-font-color)
}

.dex-btn.btn-fill-quaternary.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-fill-quaternary-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-fill-quaternary.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-quaternary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-quaternary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-quaternary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-quaternary-border-size)*2)
}

.dex-btn.btn-fill-quaternary.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-quaternary.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-fill-quaternary-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-fill-quaternary.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-quaternary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-quaternary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-quaternary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-quaternary-border-size)*2)
}

.dex-btn.btn-fill-quaternary.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-quaternary.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-fill-quaternary-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-fill-quaternary.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-quaternary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-quaternary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-quaternary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-quaternary-border-size)*2)
}

.dex-btn.btn-fill-quaternary.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-quaternary.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-fill-quaternary-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-fill-quaternary.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-quaternary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-quaternary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-quaternary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-quaternary-border-size)*2)
}

.dex-btn.btn-fill-quaternary.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-quaternary.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-fill-quaternary-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-fill-quaternary.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-quaternary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-quaternary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-quaternary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-quaternary-border-size)*2)
}

.dex-btn.btn-fill-quaternary.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-quaternary.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-fill-quaternary-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-fill-quaternary.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-quaternary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-quaternary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-quaternary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-quaternary-border-size)*2)
}

.dex-btn.btn-fill-quaternary.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-quaternary.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-fill-quaternary-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-fill-quaternary.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-quaternary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-quaternary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-quaternary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-quaternary-border-size)*2)
}

.dex-btn.btn-fill-quaternary.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-red {
  background: var(--dex-okd-button-fill-red-default-background);
  border-color: var(--dex-okd-button-fill-red-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-fill-red-border-size);
  box-shadow: var(--dex-okd-button-fill-red-default-shadow);
  color: var(--dex-okd-button-fill-red-default-font-color)
}

.dex-btn.btn-fill-red.hover,
.dex-btn.btn-fill-red:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-fill-red-hover-background);
  border-color: var(--dex-okd-button-fill-red-hover-border-color);
  box-shadow: var(--dex-okd-button-fill-red-hover-shadow);
  color: var(--dex-okd-button-fill-red-hover-font-color)
}

.dex-btn.btn-fill-red.hover .btn-icon,
.dex-btn.btn-fill-red:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-fill-red-hover-icon-color)
}

.dex-btn.btn-fill-red.active,
.dex-btn.btn-fill-red:not(:disabled):active {
  background: var(--dex-okd-button-fill-red-active-background);
  border-color: var(--dex-okd-button-fill-red-active-border-color);
  box-shadow: var(--dex-okd-button-fill-red-active-shadow);
  color: var(--dex-okd-button-fill-red-active-font-color)
}

.dex-btn.btn-fill-red.active .btn-icon,
.dex-btn.btn-fill-red:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-fill-red-active-icon-color)
}

.dex-btn.btn-fill-red:not(.loading).btn-disabled,
.dex-btn.btn-fill-red:not(.loading):disabled {
  background: var(--dex-okd-button-fill-red-disabled-background);
  border-color: var(--dex-okd-button-fill-red-disabled-border-color);
  box-shadow: var(--dex-okd-button-fill-red-disabled-shadow);
  color: var(--dex-okd-button-fill-red-disabled-font-color)
}

.dex-btn.btn-fill-red:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-fill-red:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-fill-red-disabled-icon-color)
}

.dex-btn.btn-fill-red.loading {
  cursor: pointer
}

.dex-btn.btn-fill-red .btn-icon {
  color: var(--dex-okd-button-fill-red-default-icon-color)
}

.dex-btn.btn-fill-red .dex-btn-loader-text {
  color: var(--dex-okd-button-fill-red-default-font-color)
}

.dex-btn.btn-fill-red.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-fill-red-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-fill-red.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-red-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-red-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-red-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-red-border-size)*2)
}

.dex-btn.btn-fill-red.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-red.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-fill-red-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-fill-red.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-red-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-red-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-red-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-red-border-size)*2)
}

.dex-btn.btn-fill-red.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-red.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-fill-red-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-fill-red.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-red-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-red-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-red-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-red-border-size)*2)
}

.dex-btn.btn-fill-red.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-red.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-fill-red-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-fill-red.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-red-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-red-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-red-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-red-border-size)*2)
}

.dex-btn.btn-fill-red.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-red.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-fill-red-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-fill-red.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-red-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-red-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-red-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-red-border-size)*2)
}

.dex-btn.btn-fill-red.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-red.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-fill-red-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-fill-red.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-red-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-red-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-red-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-red-border-size)*2)
}

.dex-btn.btn-fill-red.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-red.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-fill-red-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-fill-red.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-red-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-red-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-red-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-red-border-size)*2)
}

.dex-btn.btn-fill-red.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-green {
  background: var(--dex-okd-button-fill-green-default-background);
  border-color: var(--dex-okd-button-fill-green-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-fill-green-border-size);
  box-shadow: var(--dex-okd-button-fill-green-default-shadow);
  color: var(--dex-okd-button-fill-green-default-font-color)
}

.dex-btn.btn-fill-green.hover,
.dex-btn.btn-fill-green:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-fill-green-hover-background);
  border-color: var(--dex-okd-button-fill-green-hover-border-color);
  box-shadow: var(--dex-okd-button-fill-green-hover-shadow);
  color: var(--dex-okd-button-fill-green-hover-font-color)
}

.dex-btn.btn-fill-green.hover .btn-icon,
.dex-btn.btn-fill-green:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-fill-green-hover-icon-color)
}

.dex-btn.btn-fill-green.active,
.dex-btn.btn-fill-green:not(:disabled):active {
  background: var(--dex-okd-button-fill-green-active-background);
  border-color: var(--dex-okd-button-fill-green-active-border-color);
  box-shadow: var(--dex-okd-button-fill-green-active-shadow);
  color: var(--dex-okd-button-fill-green-active-font-color)
}

.dex-btn.btn-fill-green.active .btn-icon,
.dex-btn.btn-fill-green:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-fill-green-active-icon-color)
}

.dex-btn.btn-fill-green:not(.loading).btn-disabled,
.dex-btn.btn-fill-green:not(.loading):disabled {
  background: var(--dex-okd-button-fill-green-disabled-background);
  border-color: var(--dex-okd-button-fill-green-disabled-border-color);
  box-shadow: var(--dex-okd-button-fill-green-disabled-shadow);
  color: var(--dex-okd-button-fill-green-disabled-font-color)
}

.dex-btn.btn-fill-green:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-fill-green:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-fill-green-disabled-icon-color)
}

.dex-btn.btn-fill-green.loading {
  cursor: pointer
}

.dex-btn.btn-fill-green .btn-icon {
  color: var(--dex-okd-button-fill-green-default-icon-color)
}

.dex-btn.btn-fill-green .dex-btn-loader-text {
  color: var(--dex-okd-button-fill-green-default-font-color)
}

.dex-btn.btn-fill-green.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-fill-green-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-fill-green.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-green-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-green-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-green-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-green-border-size)*2)
}

.dex-btn.btn-fill-green.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-green.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-fill-green-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-fill-green.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-green-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-green-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-green-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-green-border-size)*2)
}

.dex-btn.btn-fill-green.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-green.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-fill-green-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-fill-green.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-green-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-green-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-green-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-green-border-size)*2)
}

.dex-btn.btn-fill-green.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-green.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-fill-green-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-fill-green.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-green-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-green-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-green-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-green-border-size)*2)
}

.dex-btn.btn-fill-green.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-green.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-fill-green-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-fill-green.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-green-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-green-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-green-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-green-border-size)*2)
}

.dex-btn.btn-fill-green.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-green.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-fill-green-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-fill-green.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-green-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-green-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-green-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-green-border-size)*2)
}

.dex-btn.btn-fill-green.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-green.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-fill-green-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-fill-green.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-green-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-green-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-green-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-green-border-size)*2)
}

.dex-btn.btn-fill-green.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-grey {
  background: var(--dex-okd-button-fill-grey-default-background);
  border-color: var(--dex-okd-button-fill-grey-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-fill-grey-border-size);
  box-shadow: var(--dex-okd-button-fill-grey-default-shadow);
  color: var(--dex-okd-button-fill-grey-default-font-color)
}

.dex-btn.btn-fill-grey.hover,
.dex-btn.btn-fill-grey:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-fill-grey-hover-background);
  border-color: var(--dex-okd-button-fill-grey-hover-border-color);
  box-shadow: var(--dex-okd-button-fill-grey-hover-shadow);
  color: var(--dex-okd-button-fill-grey-hover-font-color)
}

.dex-btn.btn-fill-grey.hover .btn-icon,
.dex-btn.btn-fill-grey:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-fill-grey-hover-icon-color)
}

.dex-btn.btn-fill-grey.active,
.dex-btn.btn-fill-grey:not(:disabled):active {
  background: var(--dex-okd-button-fill-grey-active-background);
  border-color: var(--dex-okd-button-fill-grey-active-border-color);
  box-shadow: var(--dex-okd-button-fill-grey-active-shadow);
  color: var(--dex-okd-button-fill-grey-active-font-color)
}

.dex-btn.btn-fill-grey.active .btn-icon,
.dex-btn.btn-fill-grey:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-fill-grey-active-icon-color)
}

.dex-btn.btn-fill-grey:not(.loading).btn-disabled,
.dex-btn.btn-fill-grey:not(.loading):disabled {
  background: var(--dex-okd-button-fill-grey-disabled-background);
  border-color: var(--dex-okd-button-fill-grey-disabled-border-color);
  box-shadow: var(--dex-okd-button-fill-grey-disabled-shadow);
  color: var(--dex-okd-button-fill-grey-disabled-font-color)
}

.dex-btn.btn-fill-grey:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-fill-grey:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-fill-grey-disabled-icon-color)
}

.dex-btn.btn-fill-grey.loading {
  cursor: pointer
}

.dex-btn.btn-fill-grey .btn-icon {
  color: var(--dex-okd-button-fill-grey-default-icon-color)
}

.dex-btn.btn-fill-grey .dex-btn-loader-text {
  color: var(--dex-okd-button-fill-grey-default-font-color)
}

.dex-btn.btn-fill-grey.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-fill-grey-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-fill-grey.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-grey-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-fill-grey-border-size)*2)
}

.dex-btn.btn-fill-grey.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-grey.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-fill-grey-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-fill-grey.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-grey-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-fill-grey-border-size)*2)
}

.dex-btn.btn-fill-grey.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-grey.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-fill-grey-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-fill-grey.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-grey-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-fill-grey-border-size)*2)
}

.dex-btn.btn-fill-grey.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-grey.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-fill-grey-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-fill-grey.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-grey-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-fill-grey-border-size)*2)
}

.dex-btn.btn-fill-grey.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-grey.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-fill-grey-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-fill-grey.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-grey-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-fill-grey-border-size)*2)
}

.dex-btn.btn-fill-grey.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-grey.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-fill-grey-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-fill-grey.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-grey-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-fill-grey-border-size)*2)
}

.dex-btn.btn-fill-grey.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-fill-grey.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-fill-grey-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-fill-grey.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-grey-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-fill-grey-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-fill-grey-border-size)*2)
}

.dex-btn.btn-fill-grey.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-highlight {
  background: var(--dex-okd-button-outline-highlight-default-background);
  border-color: var(--dex-okd-button-outline-highlight-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-outline-highlight-border-size);
  box-shadow: var(--dex-okd-button-outline-highlight-default-shadow);
  color: var(--dex-okd-button-outline-highlight-default-font-color)
}

.dex-btn.btn-outline-highlight.hover,
.dex-btn.btn-outline-highlight:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-outline-highlight-hover-background);
  border-color: var(--dex-okd-button-outline-highlight-hover-border-color);
  box-shadow: var(--dex-okd-button-outline-highlight-hover-shadow);
  color: var(--dex-okd-button-outline-highlight-hover-font-color)
}

.dex-btn.btn-outline-highlight.hover .btn-icon,
.dex-btn.btn-outline-highlight:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-outline-highlight-hover-icon-color)
}

.dex-btn.btn-outline-highlight.active,
.dex-btn.btn-outline-highlight:not(:disabled):active {
  background: var(--dex-okd-button-outline-highlight-active-background);
  border-color: var(--dex-okd-button-outline-highlight-active-border-color);
  box-shadow: var(--dex-okd-button-outline-highlight-active-shadow);
  color: var(--dex-okd-button-outline-highlight-active-font-color)
}

.dex-btn.btn-outline-highlight.active .btn-icon,
.dex-btn.btn-outline-highlight:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-outline-highlight-active-icon-color)
}

.dex-btn.btn-outline-highlight:not(.loading).btn-disabled,
.dex-btn.btn-outline-highlight:not(.loading):disabled {
  background: var(--dex-okd-button-outline-highlight-disabled-background);
  border-color: var(--dex-okd-button-outline-highlight-disabled-border-color);
  box-shadow: var(--dex-okd-button-outline-highlight-disabled-shadow);
  color: var(--dex-okd-button-outline-highlight-disabled-font-color)
}

.dex-btn.btn-outline-highlight:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-outline-highlight:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-outline-highlight-disabled-icon-color)
}

.dex-btn.btn-outline-highlight.loading {
  cursor: pointer
}

.dex-btn.btn-outline-highlight .btn-icon {
  color: var(--dex-okd-button-outline-highlight-default-icon-color)
}

.dex-btn.btn-outline-highlight .dex-btn-loader-text {
  color: var(--dex-okd-button-outline-highlight-default-font-color)
}

.dex-btn.btn-outline-highlight.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-outline-highlight-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-outline-highlight.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-highlight-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-outline-highlight-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-highlight-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-outline-highlight-border-size)*2)
}

.dex-btn.btn-outline-highlight.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-highlight.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-outline-highlight-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-outline-highlight.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-highlight-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-outline-highlight-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-highlight-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-outline-highlight-border-size)*2)
}

.dex-btn.btn-outline-highlight.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-highlight.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-outline-highlight-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-outline-highlight.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-highlight-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-outline-highlight-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-highlight-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-outline-highlight-border-size)*2)
}

.dex-btn.btn-outline-highlight.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-highlight.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-outline-highlight-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-outline-highlight.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-highlight-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-outline-highlight-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-highlight-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-outline-highlight-border-size)*2)
}

.dex-btn.btn-outline-highlight.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-highlight.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-outline-highlight-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-outline-highlight.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-highlight-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-outline-highlight-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-highlight-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-outline-highlight-border-size)*2)
}

.dex-btn.btn-outline-highlight.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-highlight.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-outline-highlight-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-outline-highlight.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-highlight-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-outline-highlight-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-highlight-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-outline-highlight-border-size)*2)
}

.dex-btn.btn-outline-highlight.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-highlight.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-outline-highlight-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-outline-highlight.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-highlight-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-outline-highlight-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-highlight-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-outline-highlight-border-size)*2)
}

.dex-btn.btn-outline-highlight.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-primary {
  background: var(--dex-okd-button-outline-primary-default-background);
  border-color: var(--dex-okd-button-outline-primary-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-outline-primary-border-size);
  box-shadow: var(--dex-okd-button-outline-primary-default-shadow);
  color: var(--dex-okd-button-outline-primary-default-font-color)
}

.dex-btn.btn-outline-primary.hover,
.dex-btn.btn-outline-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-outline-primary-hover-background);
  border-color: var(--dex-okd-button-outline-primary-hover-border-color);
  box-shadow: var(--dex-okd-button-outline-primary-hover-shadow);
  color: var(--dex-okd-button-outline-primary-hover-font-color)
}

.dex-btn.btn-outline-primary.hover .btn-icon,
.dex-btn.btn-outline-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-outline-primary-hover-icon-color)
}

.dex-btn.btn-outline-primary.active,
.dex-btn.btn-outline-primary:not(:disabled):active {
  background: var(--dex-okd-button-outline-primary-active-background);
  border-color: var(--dex-okd-button-outline-primary-active-border-color);
  box-shadow: var(--dex-okd-button-outline-primary-active-shadow);
  color: var(--dex-okd-button-outline-primary-active-font-color)
}

.dex-btn.btn-outline-primary.active .btn-icon,
.dex-btn.btn-outline-primary:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-outline-primary-active-icon-color)
}

.dex-btn.btn-outline-primary:not(.loading).btn-disabled,
.dex-btn.btn-outline-primary:not(.loading):disabled {
  background: var(--dex-okd-button-outline-primary-disabled-background);
  border-color: var(--dex-okd-button-outline-primary-disabled-border-color);
  box-shadow: var(--dex-okd-button-outline-primary-disabled-shadow);
  color: var(--dex-okd-button-outline-primary-disabled-font-color)
}

.dex-btn.btn-outline-primary:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-outline-primary:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-outline-primary-disabled-icon-color)
}

.dex-btn.btn-outline-primary.loading {
  cursor: pointer
}

.dex-btn.btn-outline-primary .btn-icon {
  color: var(--dex-okd-button-outline-primary-default-icon-color)
}

.dex-btn.btn-outline-primary .dex-btn-loader-text {
  color: var(--dex-okd-button-outline-primary-default-font-color)
}

.dex-btn.btn-outline-primary.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-outline-primary-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-outline-primary.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-outline-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-outline-primary-border-size)*2)
}

.dex-btn.btn-outline-primary.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-primary.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-outline-primary-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-outline-primary.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-outline-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-outline-primary-border-size)*2)
}

.dex-btn.btn-outline-primary.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-primary.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-outline-primary-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-outline-primary.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-outline-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-outline-primary-border-size)*2)
}

.dex-btn.btn-outline-primary.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-primary.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-outline-primary-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-outline-primary.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-outline-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-outline-primary-border-size)*2)
}

.dex-btn.btn-outline-primary.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-primary.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-outline-primary-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-outline-primary.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-outline-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-outline-primary-border-size)*2)
}

.dex-btn.btn-outline-primary.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-primary.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-outline-primary-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-outline-primary.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-outline-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-outline-primary-border-size)*2)
}

.dex-btn.btn-outline-primary.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-primary.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-outline-primary-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-outline-primary.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-outline-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-primary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-outline-primary-border-size)*2)
}

.dex-btn.btn-outline-primary.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-secondary {
  background: var(--dex-okd-button-outline-secondary-default-background);
  border-color: var(--dex-okd-button-outline-secondary-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-outline-secondary-border-size);
  box-shadow: var(--dex-okd-button-outline-secondary-default-shadow);
  color: var(--dex-okd-button-outline-secondary-default-font-color)
}

.dex-btn.btn-outline-secondary.hover,
.dex-btn.btn-outline-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-outline-secondary-hover-background);
  border-color: var(--dex-okd-button-outline-secondary-hover-border-color);
  box-shadow: var(--dex-okd-button-outline-secondary-hover-shadow);
  color: var(--dex-okd-button-outline-secondary-hover-font-color)
}

.dex-btn.btn-outline-secondary.hover .btn-icon,
.dex-btn.btn-outline-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-outline-secondary-hover-icon-color)
}

.dex-btn.btn-outline-secondary.active,
.dex-btn.btn-outline-secondary:not(:disabled):active {
  background: var(--dex-okd-button-outline-secondary-active-background);
  border-color: var(--dex-okd-button-outline-secondary-active-border-color);
  box-shadow: var(--dex-okd-button-outline-secondary-active-shadow);
  color: var(--dex-okd-button-outline-secondary-active-font-color)
}

.dex-btn.btn-outline-secondary.active .btn-icon,
.dex-btn.btn-outline-secondary:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-outline-secondary-active-icon-color)
}

.dex-btn.btn-outline-secondary:not(.loading).btn-disabled,
.dex-btn.btn-outline-secondary:not(.loading):disabled {
  background: var(--dex-okd-button-outline-secondary-disabled-background);
  border-color: var(--dex-okd-button-outline-secondary-disabled-border-color);
  box-shadow: var(--dex-okd-button-outline-secondary-disabled-shadow);
  color: var(--dex-okd-button-outline-secondary-disabled-font-color)
}

.dex-btn.btn-outline-secondary:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-outline-secondary:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-outline-secondary-disabled-icon-color)
}

.dex-btn.btn-outline-secondary.loading {
  cursor: pointer
}

.dex-btn.btn-outline-secondary .btn-icon {
  color: var(--dex-okd-button-outline-secondary-default-icon-color)
}

.dex-btn.btn-outline-secondary .dex-btn-loader-text {
  color: var(--dex-okd-button-outline-secondary-default-font-color)
}

.dex-btn.btn-outline-secondary.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-outline-secondary-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-outline-secondary.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-secondary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-outline-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-secondary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-outline-secondary-border-size)*2)
}

.dex-btn.btn-outline-secondary.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-secondary.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-outline-secondary-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-outline-secondary.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-secondary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-outline-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-secondary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-outline-secondary-border-size)*2)
}

.dex-btn.btn-outline-secondary.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-secondary.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-outline-secondary-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-outline-secondary.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-secondary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-outline-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-secondary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-outline-secondary-border-size)*2)
}

.dex-btn.btn-outline-secondary.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-secondary.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-outline-secondary-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-outline-secondary.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-secondary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-outline-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-secondary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-outline-secondary-border-size)*2)
}

.dex-btn.btn-outline-secondary.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-secondary.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-outline-secondary-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-outline-secondary.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-secondary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-outline-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-secondary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-outline-secondary-border-size)*2)
}

.dex-btn.btn-outline-secondary.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-secondary.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-outline-secondary-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-outline-secondary.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-secondary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-outline-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-secondary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-outline-secondary-border-size)*2)
}

.dex-btn.btn-outline-secondary.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-secondary.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-outline-secondary-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-outline-secondary.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-secondary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-outline-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-secondary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-outline-secondary-border-size)*2)
}

.dex-btn.btn-outline-secondary.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-tertiary {
  background: var(--dex-okd-button-outline-tertiary-default-background);
  border-color: var(--dex-okd-button-outline-tertiary-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-outline-tertiary-border-size);
  box-shadow: var(--dex-okd-button-outline-tertiary-default-shadow);
  color: var(--dex-okd-button-outline-tertiary-default-font-color)
}

.dex-btn.btn-outline-tertiary.hover,
.dex-btn.btn-outline-tertiary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-outline-tertiary-hover-background);
  border-color: var(--dex-okd-button-outline-tertiary-hover-border-color);
  box-shadow: var(--dex-okd-button-outline-tertiary-hover-shadow);
  color: var(--dex-okd-button-outline-tertiary-hover-font-color)
}

.dex-btn.btn-outline-tertiary.hover .btn-icon,
.dex-btn.btn-outline-tertiary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-outline-tertiary-hover-icon-color)
}

.dex-btn.btn-outline-tertiary.active,
.dex-btn.btn-outline-tertiary:not(:disabled):active {
  background: var(--dex-okd-button-outline-tertiary-active-background);
  border-color: var(--dex-okd-button-outline-tertiary-active-border-color);
  box-shadow: var(--dex-okd-button-outline-tertiary-active-shadow);
  color: var(--dex-okd-button-outline-tertiary-active-font-color)
}

.dex-btn.btn-outline-tertiary.active .btn-icon,
.dex-btn.btn-outline-tertiary:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-outline-tertiary-active-icon-color)
}

.dex-btn.btn-outline-tertiary:not(.loading).btn-disabled,
.dex-btn.btn-outline-tertiary:not(.loading):disabled {
  background: var(--dex-okd-button-outline-tertiary-disabled-background);
  border-color: var(--dex-okd-button-outline-tertiary-disabled-border-color);
  box-shadow: var(--dex-okd-button-outline-tertiary-disabled-shadow);
  color: var(--dex-okd-button-outline-tertiary-disabled-font-color)
}

.dex-btn.btn-outline-tertiary:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-outline-tertiary:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-outline-tertiary-disabled-icon-color)
}

.dex-btn.btn-outline-tertiary.loading {
  cursor: pointer
}

.dex-btn.btn-outline-tertiary .btn-icon {
  color: var(--dex-okd-button-outline-tertiary-default-icon-color)
}

.dex-btn.btn-outline-tertiary .dex-btn-loader-text {
  color: var(--dex-okd-button-outline-tertiary-default-font-color)
}

.dex-btn.btn-outline-tertiary.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-outline-tertiary-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-outline-tertiary.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-tertiary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-outline-tertiary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-tertiary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-outline-tertiary-border-size)*2)
}

.dex-btn.btn-outline-tertiary.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-tertiary.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-outline-tertiary-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-outline-tertiary.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-tertiary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-outline-tertiary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-tertiary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-outline-tertiary-border-size)*2)
}

.dex-btn.btn-outline-tertiary.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-tertiary.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-outline-tertiary-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-outline-tertiary.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-tertiary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-outline-tertiary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-tertiary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-outline-tertiary-border-size)*2)
}

.dex-btn.btn-outline-tertiary.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-tertiary.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-outline-tertiary-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-outline-tertiary.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-tertiary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-outline-tertiary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-tertiary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-outline-tertiary-border-size)*2)
}

.dex-btn.btn-outline-tertiary.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-tertiary.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-outline-tertiary-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-outline-tertiary.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-tertiary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-outline-tertiary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-tertiary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-outline-tertiary-border-size)*2)
}

.dex-btn.btn-outline-tertiary.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-tertiary.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-outline-tertiary-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-outline-tertiary.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-tertiary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-outline-tertiary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-tertiary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-outline-tertiary-border-size)*2)
}

.dex-btn.btn-outline-tertiary.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-outline-tertiary.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-outline-tertiary-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-outline-tertiary.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-tertiary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-outline-tertiary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-outline-tertiary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-outline-tertiary-border-size)*2)
}

.dex-btn.btn-outline-tertiary.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-primary {
  background: var(--dex-okd-button-text-primary-default-background);
  border-color: var(--dex-okd-button-text-primary-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-text-primary-border-size);
  box-shadow: var(--dex-okd-button-text-primary-default-shadow);
  color: var(--dex-okd-button-text-primary-default-font-color)
}

.dex-btn.btn-text-primary.hover,
.dex-btn.btn-text-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-text-primary-hover-background);
  border-color: var(--dex-okd-button-text-primary-hover-border-color);
  box-shadow: var(--dex-okd-button-text-primary-hover-shadow);
  color: var(--dex-okd-button-text-primary-hover-font-color)
}

.dex-btn.btn-text-primary.hover .btn-icon,
.dex-btn.btn-text-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-text-primary-hover-icon-color)
}

.dex-btn.btn-text-primary.active,
.dex-btn.btn-text-primary:not(:disabled):active {
  background: var(--dex-okd-button-text-primary-active-background);
  border-color: var(--dex-okd-button-text-primary-active-border-color);
  box-shadow: var(--dex-okd-button-text-primary-active-shadow);
  color: var(--dex-okd-button-text-primary-active-font-color)
}

.dex-btn.btn-text-primary.active .btn-icon,
.dex-btn.btn-text-primary:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-text-primary-active-icon-color)
}

.dex-btn.btn-text-primary:not(.loading).btn-disabled,
.dex-btn.btn-text-primary:not(.loading):disabled {
  background: var(--dex-okd-button-text-primary-disabled-background);
  border-color: var(--dex-okd-button-text-primary-disabled-border-color);
  box-shadow: var(--dex-okd-button-text-primary-disabled-shadow);
  color: var(--dex-okd-button-text-primary-disabled-font-color)
}

.dex-btn.btn-text-primary:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-text-primary:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-text-primary-disabled-icon-color)
}

.dex-btn.btn-text-primary.loading {
  cursor: pointer
}

.dex-btn.btn-text-primary .btn-icon {
  color: var(--dex-okd-button-text-primary-default-icon-color)
}

.dex-btn.btn-text-primary .dex-btn-loader-text {
  color: var(--dex-okd-button-text-primary-default-font-color)
}

.dex-btn.btn-text-primary.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-text-primary-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-text-primary.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-primary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-text-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-primary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-text-primary-border-size)*2)
}

.dex-btn.btn-text-primary.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-primary.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-text-primary-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-text-primary.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-primary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-text-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-primary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-text-primary-border-size)*2)
}

.dex-btn.btn-text-primary.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-primary.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-text-primary-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-text-primary.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-text-primary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-text-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-text-primary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-text-primary-border-size)*2)
}

.dex-btn.btn-text-primary.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-primary.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-text-primary-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-text-primary.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-text-primary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-text-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-text-primary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-text-primary-border-size)*2)
}

.dex-btn.btn-text-primary.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-primary.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-text-primary-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-text-primary.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-text-primary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-text-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-text-primary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-text-primary-border-size)*2)
}

.dex-btn.btn-text-primary.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-primary.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-text-primary-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-text-primary.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-text-primary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-text-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-text-primary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-text-primary-border-size)*2)
}

.dex-btn.btn-text-primary.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-primary.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-text-primary-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-text-primary.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-text-primary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-text-primary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-text-primary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-text-primary-border-size)*2)
}

.dex-btn.btn-text-primary.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-secondary {
  background: var(--dex-okd-button-text-secondary-default-background);
  border-color: var(--dex-okd-button-text-secondary-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-text-secondary-border-size);
  box-shadow: var(--dex-okd-button-text-secondary-default-shadow);
  color: var(--dex-okd-button-text-secondary-default-font-color)
}

.dex-btn.btn-text-secondary.hover,
.dex-btn.btn-text-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-text-secondary-hover-background);
  border-color: var(--dex-okd-button-text-secondary-hover-border-color);
  box-shadow: var(--dex-okd-button-text-secondary-hover-shadow);
  color: var(--dex-okd-button-text-secondary-hover-font-color)
}

.dex-btn.btn-text-secondary.hover .btn-icon,
.dex-btn.btn-text-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-text-secondary-hover-icon-color)
}

.dex-btn.btn-text-secondary.active,
.dex-btn.btn-text-secondary:not(:disabled):active {
  background: var(--dex-okd-button-text-secondary-active-background);
  border-color: var(--dex-okd-button-text-secondary-active-border-color);
  box-shadow: var(--dex-okd-button-text-secondary-active-shadow);
  color: var(--dex-okd-button-text-secondary-active-font-color)
}

.dex-btn.btn-text-secondary.active .btn-icon,
.dex-btn.btn-text-secondary:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-text-secondary-active-icon-color)
}

.dex-btn.btn-text-secondary:not(.loading).btn-disabled,
.dex-btn.btn-text-secondary:not(.loading):disabled {
  background: var(--dex-okd-button-text-secondary-disabled-background);
  border-color: var(--dex-okd-button-text-secondary-disabled-border-color);
  box-shadow: var(--dex-okd-button-text-secondary-disabled-shadow);
  color: var(--dex-okd-button-text-secondary-disabled-font-color)
}

.dex-btn.btn-text-secondary:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-text-secondary:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-text-secondary-disabled-icon-color)
}

.dex-btn.btn-text-secondary.loading {
  cursor: pointer
}

.dex-btn.btn-text-secondary .btn-icon {
  color: var(--dex-okd-button-text-secondary-default-icon-color)
}

.dex-btn.btn-text-secondary .dex-btn-loader-text {
  color: var(--dex-okd-button-text-secondary-default-font-color)
}

.dex-btn.btn-text-secondary.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-text-secondary-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-text-secondary.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-secondary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-text-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-secondary-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-text-secondary-border-size)*2)
}

.dex-btn.btn-text-secondary.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-secondary.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-text-secondary-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-text-secondary.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-secondary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-text-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-secondary-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-text-secondary-border-size)*2)
}

.dex-btn.btn-text-secondary.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-secondary.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-text-secondary-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-text-secondary.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-text-secondary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-text-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-text-secondary-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-text-secondary-border-size)*2)
}

.dex-btn.btn-text-secondary.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-secondary.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-text-secondary-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-text-secondary.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-text-secondary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-text-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-text-secondary-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-text-secondary-border-size)*2)
}

.dex-btn.btn-text-secondary.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-secondary.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-text-secondary-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-text-secondary.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-text-secondary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-text-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-text-secondary-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-text-secondary-border-size)*2)
}

.dex-btn.btn-text-secondary.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-secondary.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-text-secondary-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-text-secondary.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-text-secondary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-text-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-text-secondary-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-text-secondary-border-size)*2)
}

.dex-btn.btn-text-secondary.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-secondary.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-text-secondary-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-text-secondary.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-text-secondary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-text-secondary-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-text-secondary-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-text-secondary-border-size)*2)
}

.dex-btn.btn-text-secondary.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-red {
  background: var(--dex-okd-button-text-red-default-background);
  border-color: var(--dex-okd-button-text-red-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-text-red-border-size);
  box-shadow: var(--dex-okd-button-text-red-default-shadow);
  color: var(--dex-okd-button-text-red-default-font-color)
}

.dex-btn.btn-text-red.hover,
.dex-btn.btn-text-red:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-text-red-hover-background);
  border-color: var(--dex-okd-button-text-red-hover-border-color);
  box-shadow: var(--dex-okd-button-text-red-hover-shadow);
  color: var(--dex-okd-button-text-red-hover-font-color)
}

.dex-btn.btn-text-red.hover .btn-icon,
.dex-btn.btn-text-red:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-text-red-hover-icon-color)
}

.dex-btn.btn-text-red.active,
.dex-btn.btn-text-red:not(:disabled):active {
  background: var(--dex-okd-button-text-red-active-background);
  border-color: var(--dex-okd-button-text-red-active-border-color);
  box-shadow: var(--dex-okd-button-text-red-active-shadow);
  color: var(--dex-okd-button-text-red-active-font-color)
}

.dex-btn.btn-text-red.active .btn-icon,
.dex-btn.btn-text-red:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-text-red-active-icon-color)
}

.dex-btn.btn-text-red:not(.loading).btn-disabled,
.dex-btn.btn-text-red:not(.loading):disabled {
  background: var(--dex-okd-button-text-red-disabled-background);
  border-color: var(--dex-okd-button-text-red-disabled-border-color);
  box-shadow: var(--dex-okd-button-text-red-disabled-shadow);
  color: var(--dex-okd-button-text-red-disabled-font-color)
}

.dex-btn.btn-text-red:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-text-red:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-text-red-disabled-icon-color)
}

.dex-btn.btn-text-red.loading {
  cursor: pointer
}

.dex-btn.btn-text-red .btn-icon {
  color: var(--dex-okd-button-text-red-default-icon-color)
}

.dex-btn.btn-text-red .dex-btn-loader-text {
  color: var(--dex-okd-button-text-red-default-font-color)
}

.dex-btn.btn-text-red.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-text-red-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-text-red.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-red-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-text-red-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-red-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-text-red-border-size)*2)
}

.dex-btn.btn-text-red.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-red.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-text-red-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-text-red.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-red-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-text-red-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-red-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-text-red-border-size)*2)
}

.dex-btn.btn-text-red.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-red.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-text-red-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-text-red.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-text-red-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-text-red-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-text-red-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-text-red-border-size)*2)
}

.dex-btn.btn-text-red.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-red.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-text-red-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-text-red.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-text-red-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-text-red-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-text-red-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-text-red-border-size)*2)
}

.dex-btn.btn-text-red.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-red.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-text-red-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-text-red.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-text-red-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-text-red-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-text-red-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-text-red-border-size)*2)
}

.dex-btn.btn-text-red.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-red.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-text-red-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-text-red.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-text-red-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-text-red-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-text-red-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-text-red-border-size)*2)
}

.dex-btn.btn-text-red.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-red.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-text-red-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-text-red.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-text-red-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-text-red-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-text-red-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-text-red-border-size)*2)
}

.dex-btn.btn-text-red.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-green {
  background: var(--dex-okd-button-text-green-default-background);
  border-color: var(--dex-okd-button-text-green-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-text-green-border-size);
  box-shadow: var(--dex-okd-button-text-green-default-shadow);
  color: var(--dex-okd-button-text-green-default-font-color)
}

.dex-btn.btn-text-green.hover,
.dex-btn.btn-text-green:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-text-green-hover-background);
  border-color: var(--dex-okd-button-text-green-hover-border-color);
  box-shadow: var(--dex-okd-button-text-green-hover-shadow);
  color: var(--dex-okd-button-text-green-hover-font-color)
}

.dex-btn.btn-text-green.hover .btn-icon,
.dex-btn.btn-text-green:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-text-green-hover-icon-color)
}

.dex-btn.btn-text-green.active,
.dex-btn.btn-text-green:not(:disabled):active {
  background: var(--dex-okd-button-text-green-active-background);
  border-color: var(--dex-okd-button-text-green-active-border-color);
  box-shadow: var(--dex-okd-button-text-green-active-shadow);
  color: var(--dex-okd-button-text-green-active-font-color)
}

.dex-btn.btn-text-green.active .btn-icon,
.dex-btn.btn-text-green:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-text-green-active-icon-color)
}

.dex-btn.btn-text-green:not(.loading).btn-disabled,
.dex-btn.btn-text-green:not(.loading):disabled {
  background: var(--dex-okd-button-text-green-disabled-background);
  border-color: var(--dex-okd-button-text-green-disabled-border-color);
  box-shadow: var(--dex-okd-button-text-green-disabled-shadow);
  color: var(--dex-okd-button-text-green-disabled-font-color)
}

.dex-btn.btn-text-green:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-text-green:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-text-green-disabled-icon-color)
}

.dex-btn.btn-text-green.loading {
  cursor: pointer
}

.dex-btn.btn-text-green .btn-icon {
  color: var(--dex-okd-button-text-green-default-icon-color)
}

.dex-btn.btn-text-green .dex-btn-loader-text {
  color: var(--dex-okd-button-text-green-default-font-color)
}

.dex-btn.btn-text-green.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-text-green-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-text-green.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-green-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-text-green-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-green-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-text-green-border-size)*2)
}

.dex-btn.btn-text-green.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-green.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-text-green-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-text-green.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-green-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-text-green-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-green-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-text-green-border-size)*2)
}

.dex-btn.btn-text-green.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-green.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-text-green-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-text-green.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-text-green-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-text-green-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-text-green-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-text-green-border-size)*2)
}

.dex-btn.btn-text-green.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-green.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-text-green-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-text-green.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-text-green-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-text-green-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-text-green-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-text-green-border-size)*2)
}

.dex-btn.btn-text-green.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-green.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-text-green-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-text-green.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-text-green-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-text-green-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-text-green-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-text-green-border-size)*2)
}

.dex-btn.btn-text-green.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-green.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-text-green-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-text-green.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-text-green-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-text-green-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-text-green-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-text-green-border-size)*2)
}

.dex-btn.btn-text-green.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-green.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-text-green-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-text-green.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-text-green-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-text-green-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-text-green-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-text-green-border-size)*2)
}

.dex-btn.btn-text-green.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-orange {
  background: var(--dex-okd-button-text-orange-default-background);
  border-color: var(--dex-okd-button-text-orange-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-text-orange-border-size);
  box-shadow: var(--dex-okd-button-text-orange-default-shadow);
  color: var(--dex-okd-button-text-orange-default-font-color)
}

.dex-btn.btn-text-orange.hover,
.dex-btn.btn-text-orange:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-text-orange-hover-background);
  border-color: var(--dex-okd-button-text-orange-hover-border-color);
  box-shadow: var(--dex-okd-button-text-orange-hover-shadow);
  color: var(--dex-okd-button-text-orange-hover-font-color)
}

.dex-btn.btn-text-orange.hover .btn-icon,
.dex-btn.btn-text-orange:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-text-orange-hover-icon-color)
}

.dex-btn.btn-text-orange.active,
.dex-btn.btn-text-orange:not(:disabled):active {
  background: var(--dex-okd-button-text-orange-active-background);
  border-color: var(--dex-okd-button-text-orange-active-border-color);
  box-shadow: var(--dex-okd-button-text-orange-active-shadow);
  color: var(--dex-okd-button-text-orange-active-font-color)
}

.dex-btn.btn-text-orange.active .btn-icon,
.dex-btn.btn-text-orange:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-text-orange-active-icon-color)
}

.dex-btn.btn-text-orange:not(.loading).btn-disabled,
.dex-btn.btn-text-orange:not(.loading):disabled {
  background: var(--dex-okd-button-text-orange-disabled-background);
  border-color: var(--dex-okd-button-text-orange-disabled-border-color);
  box-shadow: var(--dex-okd-button-text-orange-disabled-shadow);
  color: var(--dex-okd-button-text-orange-disabled-font-color)
}

.dex-btn.btn-text-orange:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-text-orange:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-text-orange-disabled-icon-color)
}

.dex-btn.btn-text-orange.loading {
  cursor: pointer
}

.dex-btn.btn-text-orange .btn-icon {
  color: var(--dex-okd-button-text-orange-default-icon-color)
}

.dex-btn.btn-text-orange .dex-btn-loader-text {
  color: var(--dex-okd-button-text-orange-default-font-color)
}

.dex-btn.btn-text-orange.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-text-orange-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-text-orange.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-orange-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-text-orange-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-orange-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-text-orange-border-size)*2)
}

.dex-btn.btn-text-orange.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-orange.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-text-orange-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-text-orange.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-orange-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-text-orange-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-orange-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-text-orange-border-size)*2)
}

.dex-btn.btn-text-orange.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-orange.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-text-orange-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-text-orange.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-text-orange-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-text-orange-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-text-orange-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-text-orange-border-size)*2)
}

.dex-btn.btn-text-orange.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-orange.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-text-orange-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-text-orange.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-text-orange-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-text-orange-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-text-orange-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-text-orange-border-size)*2)
}

.dex-btn.btn-text-orange.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-orange.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-text-orange-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-text-orange.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-text-orange-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-text-orange-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-text-orange-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-text-orange-border-size)*2)
}

.dex-btn.btn-text-orange.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-orange.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-text-orange-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-text-orange.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-text-orange-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-text-orange-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-text-orange-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-text-orange-border-size)*2)
}

.dex-btn.btn-text-orange.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-orange.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-text-orange-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-text-orange.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-text-orange-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-text-orange-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-text-orange-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-text-orange-border-size)*2)
}

.dex-btn.btn-text-orange.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-yellow {
  background: var(--dex-okd-button-text-yellow-default-background);
  border-color: var(--dex-okd-button-text-yellow-default-border-color);
  border-style: solid;
  border-width: var(--dex-okd-button-text-yellow-border-size);
  box-shadow: var(--dex-okd-button-text-yellow-default-shadow);
  color: var(--dex-okd-button-text-yellow-default-font-color)
}

.dex-btn.btn-text-yellow.hover,
.dex-btn.btn-text-yellow:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--dex-okd-button-text-yellow-hover-background);
  border-color: var(--dex-okd-button-text-yellow-hover-border-color);
  box-shadow: var(--dex-okd-button-text-yellow-hover-shadow);
  color: var(--dex-okd-button-text-yellow-hover-font-color)
}

.dex-btn.btn-text-yellow.hover .btn-icon,
.dex-btn.btn-text-yellow:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
  color: var(--dex-okd-button-text-yellow-hover-icon-color)
}

.dex-btn.btn-text-yellow.active,
.dex-btn.btn-text-yellow:not(:disabled):active {
  background: var(--dex-okd-button-text-yellow-active-background);
  border-color: var(--dex-okd-button-text-yellow-active-border-color);
  box-shadow: var(--dex-okd-button-text-yellow-active-shadow);
  color: var(--dex-okd-button-text-yellow-active-font-color)
}

.dex-btn.btn-text-yellow.active .btn-icon,
.dex-btn.btn-text-yellow:not(:disabled):active .btn-icon {
  color: var(--dex-okd-button-text-yellow-active-icon-color)
}

.dex-btn.btn-text-yellow:not(.loading).btn-disabled,
.dex-btn.btn-text-yellow:not(.loading):disabled {
  background: var(--dex-okd-button-text-yellow-disabled-background);
  border-color: var(--dex-okd-button-text-yellow-disabled-border-color);
  box-shadow: var(--dex-okd-button-text-yellow-disabled-shadow);
  color: var(--dex-okd-button-text-yellow-disabled-font-color)
}

.dex-btn.btn-text-yellow:not(.loading).btn-disabled .btn-icon,
.dex-btn.btn-text-yellow:not(.loading):disabled .btn-icon {
  color: var(--dex-okd-button-text-yellow-disabled-icon-color)
}

.dex-btn.btn-text-yellow.loading {
  cursor: pointer
}

.dex-btn.btn-text-yellow .btn-icon {
  color: var(--dex-okd-button-text-yellow-default-icon-color)
}

.dex-btn.btn-text-yellow .dex-btn-loader-text {
  color: var(--dex-okd-button-text-yellow-default-font-color)
}

.dex-btn.btn-text-yellow.btn-xxs {
  padding: calc(var(--dex-okd-button-xxs-padding-vertical) + 1px - var(--dex-okd-button-text-yellow-border-size)) var(--dex-okd-button-xxs-padding-horizontal)
}

.dex-btn.btn-text-yellow.btn-xxs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-yellow-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-text-yellow-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xxs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-yellow-border-size)*2 + var(--dex-okd-button-xxs-line-height) + var(--dex-okd-button-text-yellow-border-size)*2)
}

.dex-btn.btn-text-yellow.btn-xxs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-yellow.btn-xs {
  padding: calc(var(--dex-okd-button-xs-padding-vertical) + 1px - var(--dex-okd-button-text-yellow-border-size)) var(--dex-okd-button-xs-padding-horizontal)
}

.dex-btn.btn-text-yellow.btn-xs.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-yellow-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-text-yellow-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xs-padding-vertical)*2 + 2px - var(--dex-okd-button-text-yellow-border-size)*2 + var(--dex-okd-button-xs-line-height) + var(--dex-okd-button-text-yellow-border-size)*2)
}

.dex-btn.btn-text-yellow.btn-xs.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-yellow.btn-s {
  padding: calc(var(--dex-okd-button-s-padding-vertical) + 1px - var(--dex-okd-button-text-yellow-border-size)) var(--dex-okd-button-s-padding-horizontal)
}

.dex-btn.btn-text-yellow.btn-s.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-text-yellow-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-text-yellow-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-s-padding-vertical)*2 + 2px - var(--dex-okd-button-text-yellow-border-size)*2 + var(--dex-okd-button-s-line-height) + var(--dex-okd-button-text-yellow-border-size)*2)
}

.dex-btn.btn-text-yellow.btn-s.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-yellow.btn-sm {
  padding: calc(var(--dex-okd-button-sm-padding-vertical) + 1px - var(--dex-okd-button-text-yellow-border-size)) var(--dex-okd-button-sm-padding-horizontal)
}

.dex-btn.btn-text-yellow.btn-sm.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-text-yellow-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-text-yellow-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-sm-padding-vertical)*2 + 2px - var(--dex-okd-button-text-yellow-border-size)*2 + var(--dex-okd-button-sm-line-height) + var(--dex-okd-button-text-yellow-border-size)*2)
}

.dex-btn.btn-text-yellow.btn-sm.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-yellow.btn-md {
  padding: calc(var(--dex-okd-button-md-padding-vertical) + 1px - var(--dex-okd-button-text-yellow-border-size)) var(--dex-okd-button-md-padding-horizontal)
}

.dex-btn.btn-text-yellow.btn-md.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-text-yellow-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-text-yellow-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-md-padding-vertical)*2 + 2px - var(--dex-okd-button-text-yellow-border-size)*2 + var(--dex-okd-button-md-line-height) + var(--dex-okd-button-text-yellow-border-size)*2)
}

.dex-btn.btn-text-yellow.btn-md.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-yellow.btn-lg {
  padding: calc(var(--dex-okd-button-lg-padding-vertical) + 1px - var(--dex-okd-button-text-yellow-border-size)) var(--dex-okd-button-lg-padding-horizontal)
}

.dex-btn.btn-text-yellow.btn-lg.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-text-yellow-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-text-yellow-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-lg-padding-vertical)*2 + 2px - var(--dex-okd-button-text-yellow-border-size)*2 + var(--dex-okd-button-lg-line-height) + var(--dex-okd-button-text-yellow-border-size)*2)
}

.dex-btn.btn-text-yellow.btn-lg.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-text-yellow.btn-xl {
  padding: calc(var(--dex-okd-button-xl-padding-vertical) + 1px - var(--dex-okd-button-text-yellow-border-size)) var(--dex-okd-button-xl-padding-horizontal)
}

.dex-btn.btn-text-yellow.btn-xl.dex-btn-strict-circle {
  border-radius: 100px;
  height: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-text-yellow-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-text-yellow-border-size)*2);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(var(--dex-okd-button-xl-padding-vertical)*2 + 2px - var(--dex-okd-button-text-yellow-border-size)*2 + var(--dex-okd-button-xl-line-height) + var(--dex-okd-button-text-yellow-border-size)*2)
}

.dex-btn.btn-text-yellow.btn-xl.dex-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.btn-xxs {
  border-radius: var(--dex-okd-button-xxs-border-radius);
  font-weight: 500;
  font-weight: var(--dex-okd-button-xxs-font-weight, 500);
  min-width: var(--dex-okd-button-xxs-min-width)
}

.dex-btn.btn-xxs,
.dex-btn.btn-xxs .dex-btn-loader-text {
  font-size: var(--dex-okd-button-xxs-font-size);
  line-height: var(--dex-okd-button-xxs-line-height)
}

.dex-btn.btn-xxs .dex-btn-loader-text {
  margin-left: var(--dex-okd-button-xxs-loader-text-margin-left)
}

.dex-btn.btn-xxs.btn-rect {
  border-radius: 4px;
  border-radius: var(--dex-okd-button-rect-xxs-border-radius, 4px)
}

.dex-btn.btn-xs {
  border-radius: var(--dex-okd-button-xs-border-radius);
  font-weight: 500;
  font-weight: var(--dex-okd-button-xs-font-weight, 500);
  min-width: var(--dex-okd-button-xs-min-width)
}

.dex-btn.btn-xs,
.dex-btn.btn-xs .dex-btn-loader-text {
  font-size: var(--dex-okd-button-xs-font-size);
  line-height: var(--dex-okd-button-xs-line-height)
}

.dex-btn.btn-xs .dex-btn-loader-text {
  margin-left: var(--dex-okd-button-xs-loader-text-margin-left)
}

.dex-btn.btn-xs.btn-rect {
  border-radius: 4px;
  border-radius: var(--dex-okd-button-rect-xs-border-radius, 4px)
}

.dex-btn.btn-s {
  border-radius: var(--dex-okd-button-s-border-radius);
  font-weight: 500;
  font-weight: var(--dex-okd-button-s-font-weight, 500);
  min-width: var(--dex-okd-button-s-min-width)
}

.dex-btn.btn-s,
.dex-btn.btn-s .dex-btn-loader-text {
  font-size: var(--dex-okd-button-s-font-size);
  line-height: var(--dex-okd-button-s-line-height)
}

.dex-btn.btn-s .dex-btn-loader-text {
  margin-left: var(--dex-okd-button-s-loader-text-margin-left)
}

.dex-btn.btn-s.btn-rect {
  border-radius: 4px;
  border-radius: var(--dex-okd-button-rect-s-border-radius, 4px)
}

.dex-btn.btn-sm {
  border-radius: var(--dex-okd-button-sm-border-radius);
  font-weight: 500;
  font-weight: var(--dex-okd-button-sm-font-weight, 500);
  min-width: var(--dex-okd-button-sm-min-width)
}

.dex-btn.btn-sm,
.dex-btn.btn-sm .dex-btn-loader-text {
  font-size: var(--dex-okd-button-sm-font-size);
  line-height: var(--dex-okd-button-sm-line-height)
}

.dex-btn.btn-sm .dex-btn-loader-text {
  margin-left: var(--dex-okd-button-sm-loader-text-margin-left)
}

.dex-btn.btn-sm.btn-rect {
  border-radius: 4px;
  border-radius: var(--dex-okd-button-rect-sm-border-radius, 4px)
}

.dex-btn.btn-md {
  border-radius: var(--dex-okd-button-md-border-radius);
  font-weight: 500;
  font-weight: var(--dex-okd-button-md-font-weight, 500);
  min-width: var(--dex-okd-button-md-min-width)
}

.dex-btn.btn-md,
.dex-btn.btn-md .dex-btn-loader-text {
  font-size: var(--dex-okd-button-md-font-size);
  line-height: var(--dex-okd-button-md-line-height)
}

.dex-btn.btn-md .dex-btn-loader-text {
  margin-left: var(--dex-okd-button-md-loader-text-margin-left)
}

.dex-btn.btn-md.btn-rect {
  border-radius: 4px;
  border-radius: var(--dex-okd-button-rect-md-border-radius, 4px)
}

.dex-btn.btn-lg {
  border-radius: var(--dex-okd-button-lg-border-radius);
  font-weight: 500;
  font-weight: var(--dex-okd-button-lg-font-weight, 500);
  min-width: var(--dex-okd-button-lg-min-width)
}

.dex-btn.btn-lg,
.dex-btn.btn-lg .dex-btn-loader-text {
  font-size: var(--dex-okd-button-lg-font-size);
  line-height: var(--dex-okd-button-lg-line-height)
}

.dex-btn.btn-lg .dex-btn-loader-text {
  margin-left: var(--dex-okd-button-lg-loader-text-margin-left)
}

.dex-btn.btn-lg.btn-rect {
  border-radius: 8px;
  border-radius: var(--dex-okd-button-rect-lg-border-radius, 8px)
}

.dex-btn.btn-xl {
  border-radius: var(--dex-okd-button-xl-border-radius);
  font-weight: 500;
  font-weight: var(--dex-okd-button-xl-font-weight, 500);
  min-width: var(--dex-okd-button-xl-min-width)
}

.dex-btn.btn-xl,
.dex-btn.btn-xl .dex-btn-loader-text {
  font-size: var(--dex-okd-button-xl-font-size);
  line-height: var(--dex-okd-button-xl-line-height)
}

.dex-btn.btn-xl .dex-btn-loader-text {
  margin-left: var(--dex-okd-button-xl-loader-text-margin-left)
}

.dex-btn.btn-xl.btn-rect {
  border-radius: 8px;
  border-radius: var(--dex-okd-button-rect-xl-border-radius, 8px)
}

.dex-btn.btn-disabled,
.dex-btn:disabled {
  cursor: not-allowed
}

.dex-btn.block {
  display: flex;
  width: 100%
}

.dex-btn.btn-circle {
  border-radius: 100px !important
}

.dex-btn .btn-content {
  align-items: center;
  display: flex
}

.dex-btn .dex-btn-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-btn.loading .btn-content {
  opacity: 0
}

.dex-btn.loading .btn-content-position {
  display: none
}

.dex-btn.loading .dex-btn-loader {
  line-height: 0;
  position: absolute
}

.dex-btn.loading .btn-loader-position-absolute {
  position: relative
}

.dex-btn-loader-container {
  height: 100%;
  position: relative
}

.dex-btn .btn-icon+.btn-content {
  margin-left: 4px
}

.dex-btn.btn-xxs .btn-icon {
  font-size: var(--dex-okd-button-xxs-icon-size)
}

.dex-btn.btn-xxs .btn-icon-leading {
  margin-right: var(--dex-okd-button-xxs-icon-margin)
}

.dex-btn.btn-xxs .btn-icon-tailing {
  margin-left: var(--dex-okd-button-xxs-icon-margin)
}

.dex-btn.btn-xxs .dex-btn-loader-size {
  border-radius: var(--dex-okd-button-xxs-loader-size);
  height: var(--dex-okd-button-xxs-loader-size);
  width: var(--dex-okd-button-xxs-loader-size)
}

.dex-btn.btn-xs .btn-icon {
  font-size: var(--dex-okd-button-xs-icon-size)
}

.dex-btn.btn-xs .btn-icon-leading {
  margin-right: var(--dex-okd-button-xs-icon-margin)
}

.dex-btn.btn-xs .btn-icon-tailing {
  margin-left: var(--dex-okd-button-xs-icon-margin)
}

.dex-btn.btn-xs .dex-btn-loader-size {
  border-radius: var(--dex-okd-button-xs-loader-size);
  height: var(--dex-okd-button-xs-loader-size);
  width: var(--dex-okd-button-xs-loader-size)
}

.dex-btn.btn-s .btn-icon {
  font-size: var(--dex-okd-button-s-icon-size)
}

.dex-btn.btn-s .btn-icon-leading {
  margin-right: var(--dex-okd-button-s-icon-margin)
}

.dex-btn.btn-s .btn-icon-tailing {
  margin-left: var(--dex-okd-button-s-icon-margin)
}

.dex-btn.btn-s .dex-btn-loader-size {
  border-radius: var(--dex-okd-button-s-loader-size);
  height: var(--dex-okd-button-s-loader-size);
  width: var(--dex-okd-button-s-loader-size)
}

.dex-btn.btn-sm .btn-icon {
  font-size: var(--dex-okd-button-sm-icon-size)
}

.dex-btn.btn-sm .btn-icon-leading {
  margin-right: var(--dex-okd-button-sm-icon-margin)
}

.dex-btn.btn-sm .btn-icon-tailing {
  margin-left: var(--dex-okd-button-sm-icon-margin)
}

.dex-btn.btn-sm .dex-btn-loader-size {
  border-radius: var(--dex-okd-button-sm-loader-size);
  height: var(--dex-okd-button-sm-loader-size);
  width: var(--dex-okd-button-sm-loader-size)
}

.dex-btn.btn-md .btn-icon {
  font-size: var(--dex-okd-button-md-icon-size)
}

.dex-btn.btn-md .btn-icon-leading {
  margin-right: var(--dex-okd-button-md-icon-margin)
}

.dex-btn.btn-md .btn-icon-tailing {
  margin-left: var(--dex-okd-button-md-icon-margin)
}

.dex-btn.btn-md .dex-btn-loader-size {
  border-radius: var(--dex-okd-button-md-loader-size);
  height: var(--dex-okd-button-md-loader-size);
  width: var(--dex-okd-button-md-loader-size)
}

.dex-btn.btn-lg .btn-icon {
  font-size: var(--dex-okd-button-lg-icon-size)
}

.dex-btn.btn-lg .btn-icon-leading {
  margin-right: var(--dex-okd-button-lg-icon-margin)
}

.dex-btn.btn-lg .btn-icon-tailing {
  margin-left: var(--dex-okd-button-lg-icon-margin)
}

.dex-btn.btn-lg .dex-btn-loader-size {
  border-radius: var(--dex-okd-button-lg-loader-size);
  height: var(--dex-okd-button-lg-loader-size);
  width: var(--dex-okd-button-lg-loader-size)
}

.dex-btn.btn-xl .btn-icon {
  font-size: var(--dex-okd-button-xl-icon-size)
}

.dex-btn.btn-xl .btn-icon-leading {
  margin-right: var(--dex-okd-button-xl-icon-margin)
}

.dex-btn.btn-xl .btn-icon-tailing {
  margin-left: var(--dex-okd-button-xl-icon-margin)
}

.dex-btn.btn-xl .dex-btn-loader-size {
  border-radius: var(--dex-okd-button-xl-loader-size);
  height: var(--dex-okd-button-xl-loader-size);
  width: var(--dex-okd-button-xl-loader-size)
}

.dex-btn .dex-btn-fill-highlight-loader {
  border-color: var(--dex-okd-button-fill-highlight-loader-track-color);
  border-top-color: var(--dex-okd-button-fill-highlight-loader-mark-color)
}

.dex-btn .dex-btn-fill-primary-loader {
  border-color: var(--dex-okd-button-fill-primary-loader-track-color);
  border-top-color: var(--dex-okd-button-fill-primary-loader-mark-color)
}

.dex-btn .dex-btn-fill-secondary-loader {
  border-color: var(--dex-okd-button-fill-secondary-loader-track-color);
  border-top-color: var(--dex-okd-button-fill-secondary-loader-mark-color)
}

.dex-btn .dex-btn-fill-tertiary-loader {
  border-color: var(--dex-okd-button-fill-tertiary-loader-track-color);
  border-top-color: var(--dex-okd-button-fill-tertiary-loader-mark-color)
}

.dex-btn .dex-btn-fill-quaternary-loader {
  border-color: var(--dex-okd-button-fill-quaternary-loader-track-color);
  border-top-color: var(--dex-okd-button-fill-quaternary-loader-mark-color)
}

.dex-btn .dex-btn-fill-red-loader {
  border-color: var(--dex-okd-button-fill-red-loader-track-color);
  border-top-color: var(--dex-okd-button-fill-red-loader-mark-color)
}

.dex-btn .dex-btn-fill-green-loader {
  border-color: var(--dex-okd-button-fill-green-loader-track-color);
  border-top-color: var(--dex-okd-button-fill-green-loader-mark-color)
}

.dex-btn .dex-btn-fill-grey-loader {
  border-color: var(--dex-okd-button-fill-grey-loader-track-color);
  border-top-color: var(--dex-okd-button-fill-grey-loader-mark-color)
}

.dex-btn .dex-btn-outline-highlight-loader {
  border-color: var(--dex-okd-button-outline-highlight-loader-track-color);
  border-top-color: var(--dex-okd-button-outline-highlight-loader-mark-color)
}

.dex-btn .dex-btn-outline-primary-loader {
  border-color: var(--dex-okd-button-outline-primary-loader-track-color);
  border-top-color: var(--dex-okd-button-outline-primary-loader-mark-color)
}

.dex-btn .dex-btn-outline-secondary-loader {
  border-color: var(--dex-okd-button-outline-secondary-loader-track-color);
  border-top-color: var(--dex-okd-button-outline-secondary-loader-mark-color)
}

.dex-btn .dex-btn-outline-tertiary-loader {
  border-color: var(--dex-okd-button-outline-tertiary-loader-track-color);
  border-top-color: var(--dex-okd-button-outline-tertiary-loader-mark-color)
}

.dex-dialog {
  --inner-okd-dialog-close-btn-padding: var(--dex-okd-dialog-window-action-fixed-padding, 16px);
  height: 100%;
  pointer-events: none;
  width: 100%
}

.dex-dialog-float {
  left: 0;
  position: fixed;
  top: 0
}

.dex-dialog * {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box
}

.dex-dialog-window-float {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%)
}

@supports (bottom:constant(safe-area-inset-bottom)) or (bottom:env(safe-area-inset-bottom)) {
  .dex-dialog-window-safe {
    padding-bottom: env(safe-area-inset-bottom)
  }
}

.dex-dialog-window {
  border-radius: var(--dex-okd-dialog-window-border-radius);
  box-shadow: var(--dex-okd-dialog-window-box-shadow);
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  max-height: calc(100% - 48px);
  outline: none;
  pointer-events: auto;
  width: calc(100% - 32px)
}

.dex-dialog-window-border {
  border: 1px solid transparent;
  border: 1px solid var(--dex-okd-dialog-window-border-color, transparent)
}

.dex-dialog-title-container {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  justify-content: space-between
}

.dex-dialog-title-container .title-center {
  text-align: center
}

.dex-dialog-title-container .title-center .modal-title {
  justify-content: center
}

.dex-dialog .title-center .dex-dialog-top-l {
  margin-right: 32px;
  margin-right: var(--dex-okd-dialog-title-icon-close-margin-left, 32px)
}

.dex-dialog-title-block {
  display: flex;
  flex-direction: column;
  flex-grow: 1
}

.dex-dialog-title-block .modal-title {
  font-size: 16px;
  font-size: var(--dex-okd-dialog-title-font-size, 16px);
  font-weight: 700;
  font-weight: var(--dex-okd-dialog-title-font-weight, 700);
  line-height: var(--dex-okd-dialog-title-line-height);
  padding-top: 2px
}

.dex-dialog-title-block .modal-sub-title {
  font-size: var(--dex-okd-dialog-sub-title-font-size);
  font-weight: 400;
  line-height: var(--dex-okd-dialog-sub-title-line-height);
  margin-top: 2px
}

.dex-dialog-b-btn,
.dex-dialog-c-btn {
  cursor: pointer;
  display: inline-block;
  height: var(--dex-okd-dialog-window-close-icon-size);
  justify-content: center;
  line-height: 1;
  position: relative;
  vertical-align: middle;
  width: var(--dex-okd-dialog-window-close-icon-size);
  z-index: 1
}

.dex-dialog-b-btn.icon,
.dex-dialog-c-btn.icon {
  font-size: var(--dex-okd-dialog-window-close-icon-size)
}

.dex-dialog-b-btn:after,
.dex-dialog-c-btn:after {
  content: " ";
  display: block;
  height: calc(var(--dex-okd-dialog-window-close-icon-size)*1.5);
  left: -25%;
  position: absolute;
  top: -25%;
  width: calc(var(--dex-okd-dialog-window-close-icon-size)*1.5)
}

.dex-dialog-b-btn {
  height: var(--dex-okd-dialog-window-back-icon-size);
  margin-right: 16px;
  margin-right: var(--dex-okd-dialog-title-icon-back-margin-right, 16px);
  width: var(--dex-okd-dialog-window-back-icon-size)
}

.dex-dialog-b-btn.icon {
  font-size: var(--dex-okd-dialog-window-back-icon-size)
}

.dex-dialog-c-btn {
  margin-left: 32px;
  margin-left: var(--dex-okd-dialog-title-icon-close-margin-left, 32px)
}

.dex-dialog-top-action-fixed {
  padding: var(--inner-okd-dialog-close-btn-padding);
  position: absolute;
  top: 0
}

.dex-dialog-top-action-fixed .dex-dialog-b-btn,
.dex-dialog-top-action-fixed .dex-dialog-c-btn {
  margin: 0
}

.dex-dialog-top-l {
  align-self: flex-start;
  left: 0
}

.dex-dialog-top-r {
  align-self: flex-start;
  right: 0
}

.dex-dialog-top-hidden-for-t-center {
  pointer-events: none;
  visibility: hidden
}

.dex-dialog-top-action-hidden {
  display: none;
  pointer-events: none
}

.dex-dialog-scroll-box {
  flex-grow: 1;
  overflow-y: auto
}

.dex-dialog-scroll-box.scroll-disable {
  overflow-y: unset
}

.dex-dialog-container,
.dex-dialog-customer-box {
  height: 100%
}

.dex-dialog-container.no-padding,
.dex-dialog-customer-box.no-padding {
  padding: 0
}

.dex-dialog .dex-dialog-footer-line {
  border-top: thin solid var(--dex-okd-dialog-window-split-line-border-color)
}

.dex-dialog .dex-dialog-header-line {
  border-bottom: thin solid var(--dex-okd-dialog-window-split-line-border-color)
}

.dex-dialog-btn-box {
  display: flex
}

.dex-dialog-btn-box.layout-right {
  justify-content: flex-end
}

.dex-dialog-btn-box.layout-left {
  justify-content: flex-start
}

.dex-dialog-btn-box.layout-full .dialog-btn {
  flex: 1 1
}

.dex-dialog .dex-dialog-window {
  background: var(--dex-okd-dialog-window-background);
  color: var(--dex-okd-dialog-window-default-text-color)
}

.dex-dialog .dex-dialog-window.container-mode {
  background: transparent;
  box-shadow: none
}

.dex-dialog .dex-dialog-title-container .modal-title {
  align-items: center;
  color: var(--dex-okd-dialog-title-color);
  display: flex
}

.dex-dialog .dex-dialog-title-container .modal-sub-title {
  color: var(--dex-okd-dialog-sub-title-color)
}

.dex-dialog .dex-dialog-c-btn {
  color: var(--dex-okd-color-gray-400);
  color: var(--dex-okd-dialog-title-icon-close-color, var(--dex-okd-color-gray-400))
}

.dex-dialog .dex-dialog-c-btn:hover {
  background-color: var(--dex-okd-color-background-hover);
  background-color: var(--dex-okd-dialog-title-icon-hover-background-color, var(--dex-okd-color-background-hover));
  border-radius: 4px;
  border-radius: var(--dex-okd-dialog-title-icon-hover-border-radius, 4px);
  color: var(--dex-okd-color-gray-900);
  color: var(--dex-okd-dialog-title-icon-close-hover-color, var(--dex-okd-color-gray-900))
}

.dex-dialog .dex-dialog-b-btn {
  color: var(--dex-okd-color-gray-900);
  color: var(--dex-okd-dialog-title-icon-back-color, var(--dex-okd-color-gray-900))
}

.dex-dialog .dex-dialog-b-btn:hover {
  background-color: var(--dex-okd-color-background-hover);
  background-color: var(--dex-okd-dialog-title-icon-hover-background-color, var(--dex-okd-color-background-hover));
  border-radius: 4px;
  border-radius: var(--dex-okd-dialog-title-icon-hover-border-radius, 4px)
}

.dex-dialog-mask {
  background: var(--dex-okd-dialog-window-mask-color)
}

.dex-dialog-scroll-bar-end::-webkit-scrollbar,
.dex-dialog-scroll-bar-start::-webkit-scrollbar {
  background-color: initial
}

.dex-dialog-scroll-bar-start::-webkit-scrollbar-button:vertical:start:increment {
  background-color: initial;
  display: block;
  height: var(--dex-okd-dialog-window-border-radius)
}

.dex-dialog-scroll-bar-end::-webkit-scrollbar-button:vertical:end:increment {
  background-color: initial;
  display: block;
  height: var(--dex-okd-dialog-window-border-radius)
}

@media (min-width:768px) {
  .dex-dialog-window {
    min-width: var(--dex-okd-dialog-window-min-width);
    width: auto
  }

  .dex-dialog-title-container {
    padding: var(--dex-okd-dialog-title-box-md-padding-vertical) var(--dex-okd-dialog-container-md-padding-horizontal)
  }

  .dex-dialog-container {
    padding: var(--dex-okd-dialog-container-md-padding-vertical) var(--dex-okd-dialog-container-md-padding-horizontal)
  }

  .dex-dialog-customer-box {
    padding: 0 var(--dex-okd-dialog-container-md-padding-horizontal)
  }

  .dex-dialog-footer-box {
    padding: var(--dex-okd-dialog-footer-box-md-padding-vertical) var(--dex-okd-dialog-container-md-padding-horizontal)
  }

  .dex-dialog-btn-box .dialog-btn.double-btn {
    width: auto
  }

  .dex-dialog-btn-box.layout-full {
    flex-direction: row
  }

  .dex-dialog-btn-box .dialog-btn+.dialog-btn {
    margin-left: 16px;
    margin-left: var(--dex-okd-dialog-footer-btn-md-margin-left, 16px)
  }
}

@media (max-width:767px) {
  .dex-dialog-title-container {
    padding: var(--dex-okd-dialog-title-box-sm-padding-vertical) var(--dex-okd-dialog-container-sm-padding-horizontal)
  }

  .dex-dialog-container {
    padding: var(--dex-okd-dialog-container-sm-padding-vertical) var(--dex-okd-dialog-container-sm-padding-horizontal)
  }

  .dex-dialog-customer-box {
    padding: 0 var(--dex-okd-dialog-container-sm-padding-horizontal)
  }

  .dex-dialog-footer-box {
    padding: var(--dex-okd-dialog-footer-box-sm-padding-top, 12px) var(--dex-okd-dialog-container-sm-padding-horizontal) var(--dex-okd-dialog-footer-box-sm-padding-bottom, 20px)
  }

  .dex-dialog-btn-box .dialog-btn {
    width: 100%
  }

  .dex-dialog-btn-box .dialog-btn+.dialog-btn {
    margin-left: 12px;
    margin-left: var(--dex-okd-dialog-footer-btn-sm-margin-left, 12px)
  }

  .dex-dialog-btn-box.layout-full {
    flex-direction: column-reverse
  }

  .dex-dialog-btn-box.layout-full .dialog-btn+.dialog-btn {
    margin-left: 0
  }

  .dex-dialog-btn-box.layout-full .double-btn:first-child {
    margin-top: 8px;
    margin-top: var(--dex-okd-dialog-footer-btn-full-sm-margin-top, 8px)
  }

  .dex-dialog-window {
    border-radius: 8px;
    border-radius: var(--dex-okd-dialog-window-sm-border-radius, 8px)
  }

  .dex-dialog-window.full-page {
    height: auto !important;
    min-height: calc(100% - 48px) !important
  }

  .dex-dialog-window.full-page-with-show-header {
    height: auto !important
  }

  .dex-dialog-window.bottom-align {
    border-radius: var(--dex-okd-dialog-window-border-radius) var(--dex-okd-dialog-window-border-radius) 0 0;
    bottom: 0;
    top: auto;
    transform: translate(-50%)
  }

  .dex-dialog-window.no-margin {
    min-width: unset;
    width: 100%
  }
}

.dex-dialog-mobile-mode .dex-dialog-title-container {
  padding: var(--dex-okd-dialog-title-box-sm-padding-vertical) var(--dex-okd-dialog-container-sm-padding-horizontal)
}

.dex-dialog-mobile-mode .dex-dialog-container {
  padding: var(--dex-okd-dialog-container-sm-padding-vertical) var(--dex-okd-dialog-container-sm-padding-horizontal)
}

.dex-dialog-mobile-mode .dex-dialog-customer-box {
  padding: 0 var(--dex-okd-dialog-container-sm-padding-horizontal)
}

.dex-dialog-mobile-mode .dex-dialog-footer-box {
  padding: var(--dex-okd-dialog-footer-box-sm-padding-top, 12px) var(--dex-okd-dialog-container-sm-padding-horizontal) var(--dex-okd-dialog-footer-box-sm-padding-bottom, 20px)
}

.dex-dialog-mobile-mode .dex-dialog-btn-box .dialog-btn {
  width: 100%
}

.dex-dialog-mobile-mode .dex-dialog-btn-box .dialog-btn+.dialog-btn {
  margin-left: 12px;
  margin-left: var(--dex-okd-dialog-footer-btn-sm-margin-left, 12px)
}

.dex-dialog-mobile-mode .dex-dialog-btn-box.layout-full {
  flex-direction: column-reverse
}

.dex-dialog-mobile-mode .dex-dialog-btn-box.layout-full .dialog-btn+.dialog-btn {
  margin-left: 0
}

.dex-dialog-mobile-mode .dex-dialog-btn-box.layout-full .double-btn:first-child {
  margin-top: 8px;
  margin-top: var(--dex-okd-dialog-footer-btn-full-sm-margin-top, 8px)
}

.dex-dialog-mobile-mode .dex-dialog-window {
  border-radius: 8px;
  border-radius: var(--dex-okd-dialog-window-sm-border-radius, 8px)
}

.dex-dialog-mobile-mode .dex-dialog-window.full-page {
  height: auto !important;
  min-height: calc(100% - 48px) !important
}

.dex-dialog-mobile-mode .dex-dialog-window.full-page-with-show-header {
  height: auto !important
}

.dex-dialog-mobile-mode .dex-dialog-window.bottom-align {
  border-radius: var(--dex-okd-dialog-window-border-radius) var(--dex-okd-dialog-window-border-radius) 0 0;
  bottom: 0;
  top: auto;
  transform: translate(-50%)
}

.dex-dialog-mobile-mode .dex-dialog-window.no-margin {
  min-width: unset;
  width: 100%
}

.dex-dialog-mobile-mode .dex-dialog-container.no-padding,
.dex-dialog-mobile-mode .dex-dialog-customer-box.no-padding {
  padding: 0
}

.dex-dialog-mobile-mode .dex-dialog-window {
  min-width: unset;
  width: calc(100% - 32px)
}

.dex-dialog.dex-action-dialog .dex-dialog-window.no-radius {
  border-radius: 0
}

.dex-dialog-group {
  overflow: hidden
}

.dex-dialog-group-window {
  display: flex;
  flex-direction: column
}

.dex-dialog.dex-tip-dialog .dex-dialog-tip-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center
}

.dex-dialog.dex-tip-dialog .dex-dialog-tip-content .tip-title-box {
  width: 100%
}

.dex-dialog.dex-tip-dialog .dex-dialog-tip-content .tip-title {
  font-size: var(--dex-okd-dialog-tip-title-font-size);
  font-weight: 500;
  line-height: var(--dex-okd-dialog-tip-title-line-height);
  min-height: var(--dex-okd-dialog-tip-title-line-height)
}

.dex-dialog.dex-tip-dialog .dex-dialog-tip-content .tip-detail {
  font-size: var(--dex-okd-dialog-tip-detail-font-size);
  font-weight: 400;
  line-height: var(--dex-okd-dialog-tip-detail-line-height);
  margin-top: 8px
}

.dex-dialog.dex-tip-dialog .dex-dialog-tip-content .tip-detail+.tip-detail {
  margin-top: 2px
}

.dex-dialog.dex-tip-dialog .dex-dialog-tip-content .tip-title {
  color: var(--dex-okd-dialog-tip-title-color)
}

.dex-dialog.dex-tip-dialog .dex-dialog-tip-content .tip-detail {
  color: var(--dex-okd-dialog-tip-detail-color)
}

.dex-dialog.dex-tip-dialog .dex-dialog-footer-box {
  border-top: none
}

@media (max-width:767px) {
  .dex-dialog.dex-tip-dialog .dex-dialog-window.bottom-align {
    border-radius: var(--dex-okd-dialog-window-border-radius);
    bottom: 16px
  }

  .dex-dialog.dex-tip-dialog .dex-dialog-container {
    padding: var(--dex-okd-dialog-tip-container-sm-padding-top, 20px) var(--dex-okd-dialog-container-sm-padding-horizontal) var(--dex-okd-dialog-tip-container-sm-padding-bottom, 24px)
  }

  .dex-dialog.dex-tip-dialog .dex-dialog-footer-box {
    padding: 0 var(--dex-okd-dialog-container-sm-padding-horizontal) var(--dex-okd-dialog-tip-footer-box-sm-padding-vertical) var(--dex-okd-dialog-container-sm-padding-horizontal)
  }
}

@media (min-width:768px) {
  .dex-dialog.dex-tip-dialog .dex-dialog-tip-content {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--dex-okd-dialog-tip-window-min-width)
  }

  .dex-dialog.dex-tip-dialog .dex-dialog-tip-content.two-btn {
    max-width: var(--dex-okd-dialog-tip-window-2btn-min-width)
  }

  .dex-dialog.dex-tip-dialog .dex-dialog-container {
    padding: var(--dex-okd-dialog-tip-container-md-padding-top, 28px) var(--dex-okd-dialog-container-sm-padding-horizontal) var(--dex-okd-dialog-tip-container-md-padding-bottom, 24px)
  }

  .dex-dialog.dex-tip-dialog .dex-dialog-footer-box {
    padding: 0 var(--dex-okd-dialog-container-md-padding-horizontal) var(--dex-okd-dialog-tip-footer-box-md-padding-vertical) var(--dex-okd-dialog-container-md-padding-horizontal)
  }
}

.dex-dialog-tip-icon-bg {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 12px
}

.dex-dialog-tip-icon-bg .tip-icon {
  font-size: var(--dex-okd-dialog-tip-icon-font-size)
}

.dex-dialog-alert-icon {
  margin-top: -6px
}

.dex-dialog .dex-dialog-window-tip {
  background-color: var(--dex-okd-dialog-window-background);
  background-color: var(--dex-okd-dialog-confirm-window-background, var(--dex-okd-dialog-window-background))
}

.dex-dialog.dex-new-tip-dialog .dex-dialog-new-tip-top {
  padding: 24px 24px 0;
  padding: var(--dex-okd-dialog-confirm-title-padding-top, 24px) var(--dex-okd-dialog-confirm-title-padding-horizontal, 24px) var(--dex-okd-dialog-confirm-title-padding-bottom, 0)
}

.dex-dialog.dex-new-tip-dialog .dex-dialog-container.dex-dialog-new-tip-container {
  color: #000;
  color: var(--dex-okd-dialog-confirm-container-color, #000);
  font-size: 14px;
  font-size: var(--dex-okd-dialog-confirm-container-font-size, 14px);
  line-height: 20px;
  line-height: var(--dex-okd-dialog-confirm-container-line-height, 20px)
}

@media (min-width:768px) {
  .dex-dialog.dex-new-tip-dialog .dex-dialog-window {
    max-width: 520px;
    max-width: var(--dex-okd-dialog-confirm-max-width, 520px);
    min-width: 280px;
    min-width: var(--dex-okd-dialog-confirm-min-width, 280px)
  }

  .dex-dialog.dex-new-tip-dialog .dex-dialog-container.dex-dialog-new-tip-container {
    padding-bottom: 32px;
    padding-bottom: var(--dex-okd-dialog-confirm-container-padding-bottom, 32px);
    padding-top: 32px;
    padding-top: var(--dex-okd-dialog-confirm-container-padding-top, 32px)
  }

  .dex-dialog.dex-new-tip-dialog .dex-dialog-footer-box {
    padding-bottom: 24px;
    padding-bottom: var(--dex-okd-dialog-confirm-footer-padding-bottom, 24px);
    padding-top: 0;
    padding-top: var(--dex-okd-dialog-confirm-footer-padding-top, 0)
  }
}

@media (max-width:767px) {
  .dex-dialog.dex-new-tip-dialog .dex-dialog-window {
    width: calc(100% - 64px)
  }

  .dex-dialog.dex-new-tip-dialog .dex-dialog-container.dex-dialog-new-tip-container {
    padding: 8px 24px 24px;
    padding: var(--dex-okd-dialog-confirm-container-sm-padding-top, 8px) var(--dex-okd-dialog-confirm-container-sm-padding-horizontal, 24px) var(--dex-okd-dialog-confirm-container-sm-padding-bottom, 24px)
  }

  .dex-dialog.dex-new-tip-dialog .dex-dialog-container.dex-dialog-no-title {
    padding-top: 24px;
    padding-top: var(--dex-okd-dialog-confirm-no-title-padding-top, 24px)
  }

  .dex-dialog.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer {
    padding: 0
  }

  .dex-dialog.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer .dex-dialog-tip-button {
    border: 0;
    border-radius: 0;
    border-top: thin solid #dbdbdb;
    border-top: thin solid var(--dex-okd-dialog-confirm-footer-sm-button-border-color, #dbdbdb)
  }

  .dex-dialog.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer .dex-dialog-tip-button-color {
    color: var(--dex-okd-color-blue-800);
    color: var(--dex-okd-dialog-confirm-footer-sm-button-color, var(--dex-okd-color-blue-800))
  }

  .dex-dialog.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer .dex-dialog-tip-button-confirm {
    font-weight: 700
  }

  .dex-dialog.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer .dex-dialog-tip-button-cancel {
    font-weight: 400
  }

  .dex-dialog.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer .dex-dialog-tip-only-one {
    border-radius: 0 0 var(--dex-okd-dialog-window-sm-border-radius) var(--dex-okd-dialog-window-sm-border-radius)
  }

  .dex-dialog.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer .dex-dialog-tip-border-top:first-child {
    border-radius: 0 0 var(--dex-okd-dialog-window-sm-border-radius) var(--dex-okd-dialog-window-sm-border-radius);
    margin-top: 0
  }

  .dex-dialog.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer .dex-dialog-tip-border-left:first-child {
    border-radius: 0 0 0 var(--dex-okd-dialog-window-sm-border-radius)
  }

  .dex-dialog.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer .dex-dialog-tip-border-left+.dex-dialog-tip-border-left {
    border-left: thin solid #dbdbdb;
    border-left: thin solid var(--dex-okd-dialog-confirm-footer-sm-button-border-color, #dbdbdb);
    border-radius: 0 0 var(--dex-okd-dialog-window-sm-border-radius) 0;
    margin-left: 0
  }
}

.dex-dialog-mobile-mode.dex-new-tip-dialog .dex-dialog-window {
  width: calc(100% - 64px)
}

.dex-dialog-mobile-mode.dex-new-tip-dialog .dex-dialog-container.dex-dialog-new-tip-container {
  padding: 8px 24px 24px;
  padding: var(--dex-okd-dialog-confirm-container-sm-padding-top, 8px) var(--dex-okd-dialog-confirm-container-sm-padding-horizontal, 24px) var(--dex-okd-dialog-confirm-container-sm-padding-bottom, 24px)
}

.dex-dialog-mobile-mode.dex-new-tip-dialog .dex-dialog-container.dex-dialog-no-title {
  padding-top: 24px;
  padding-top: var(--dex-okd-dialog-confirm-no-title-padding-top, 24px)
}

.dex-dialog-mobile-mode.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer {
  padding: 0
}

.dex-dialog-mobile-mode.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer .dex-dialog-tip-button {
  border: 0;
  border-radius: 0;
  border-top: thin solid #dbdbdb;
  border-top: thin solid var(--dex-okd-dialog-confirm-footer-sm-button-border-color, #dbdbdb)
}

.dex-dialog-mobile-mode.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer .dex-dialog-tip-button-color {
  color: var(--dex-okd-color-blue-800);
  color: var(--dex-okd-dialog-confirm-footer-sm-button-color, var(--dex-okd-color-blue-800))
}

.dex-dialog-mobile-mode.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer .dex-dialog-tip-button-confirm {
  font-weight: 700
}

.dex-dialog-mobile-mode.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer .dex-dialog-tip-button-cancel {
  font-weight: 400
}

.dex-dialog-mobile-mode.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer .dex-dialog-tip-only-one {
  border-radius: 0 0 var(--dex-okd-dialog-window-sm-border-radius) var(--dex-okd-dialog-window-sm-border-radius)
}

.dex-dialog-mobile-mode.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer .dex-dialog-tip-border-top:first-child {
  border-radius: 0 0 var(--dex-okd-dialog-window-sm-border-radius) var(--dex-okd-dialog-window-sm-border-radius);
  margin-top: 0
}

.dex-dialog-mobile-mode.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer .dex-dialog-tip-border-left:first-child {
  border-radius: 0 0 0 var(--dex-okd-dialog-window-sm-border-radius)
}

.dex-dialog-mobile-mode.dex-new-tip-dialog .dex-dialog-footer-box.dex-dialog-new-tip-footer .dex-dialog-tip-border-left+.dex-dialog-tip-border-left {
  border-left: thin solid #dbdbdb;
  border-left: thin solid var(--dex-okd-dialog-confirm-footer-sm-button-border-color, #dbdbdb);
  border-radius: 0 0 var(--dex-okd-dialog-window-sm-border-radius) 0;
  margin-left: 0
}

.iconfont.dex-dialog-tip-icon {
  align-self: flex-start;
  font-size: 22px;
  font-size: var(--dex-okd-dialog-confirm-icon-font-size, 22px);
  font-weight: 400;
  line-height: 22px;
  line-height: var(--dex-okd-dialog-confirm-icon-line-height, 22px);
  margin-right: 10px;
  margin-right: var(--dex-okd-dialog-confirm-icon-margin-right, 10px)
}

.dex-dialog-success-icon,
.dex-dialog-success-tip-icon {
  color: var(--dex-okd-dialog-tip-success-icon-color)
}

.dex-dialog-info-icon,
.dex-dialog-info-tip-icon {
  color: var(--dex-okd-dialog-tip-info-icon-color)
}

.dex-dialog-prompt-icon,
.dex-dialog-prompt-tip-icon {
  color: var(--dex-okd-dialog-tip-prompt-icon-color)
}

.dex-dialog-warn-icon,
.dex-dialog-warn-tip-icon {
  color: var(--dex-okd-dialog-tip-warn-icon-color)
}

.dex-dialog-alert-icon,
.dex-dialog-alert-tip-icon {
  color: var(--dex-okd-dialog-tip-alert-icon-color)
}

.dex-dialog-error-icon,
.dex-dialog-error-tip-icon {
  color: var(--dex-okd-dialog-tip-error-icon-color)
}

.dex-dialog .dex-dialog-confirmation-window {
  background-color: var(--dex-okd-dialog-window-background);
  background-color: var(--dex-okd-dialog-confirmation-window-background, var(--dex-okd-dialog-window-background))
}

.dex-dialog-confirmation {
  --inner-okd-dialog-close-btn-padding: 22px
}

.dex-dialog-confirmation-header {
  font-size: 16px;
  font-size: var(--dex-okd-dialog-title-font-size, 16px);
  font-weight: 700;
  font-weight: var(--dex-okd-dialog-title-font-weight, 700);
  line-height: var(--dex-okd-dialog-title-line-height);
  padding: 24px;
  padding: var(--dex-okd-dialog-confirmation-header-padding-top, 24px) var(--dex-okd-dialog-confirmation-padding-right, 24px) var(--dex-okd-dialog-confirmation-header-padding-top, 24px) var(--dex-okd-dialog-confirmation-padding-left, 24px)
}

.dex-dialog-confirmation-header-margin {
  margin-right: 36px
}

.dex-dialog-confirmation-container {
  flex-grow: 1;
  line-height: 22px;
  overflow-y: auto;
  padding-bottom: 8px;
  padding-left: 24px;
  padding-left: var(--dex-okd-dialog-confirmation-padding-left, 24px);
  padding-right: 24px;
  padding-right: var(--dex-okd-dialog-confirmation-padding-right, 24px);
  padding-top: 8px
}

.dex-dialog-confirmation-container-no-header {
  padding-top: 32px;
  padding-top: var(--dex-okd-dialog-confirmation-container-padding-top, 32px)
}

.dex-dialog-confirmation-container-no-footer {
  padding-bottom: 32px;
  padding-bottom: var(--dex-okd-dialog-confirmation-container-padding-bottom, 32px)
}

.dex-dialog-confirmation-footer {
  padding: 24px;
  padding: var(--dex-okd-dialog-confirmation-footer-padding-bottom, 24px) var(--dex-okd-dialog-confirmation-padding-right, 24px) var(--dex-okd-dialog-confirmation-footer-padding-bottom, 24px) var(--dex-okd-dialog-confirmation-padding-left, 24px)
}

.dex-dropdown-option {
  white-space: nowrap
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.dex-dragdrop-sortable-wrapper {
  background-color: #fff;
  background-color: var(--dex-okd-dragdrop-sortable-item-default-background, #fff);
  box-sizing: border-box;
  display: flex;
  margin-bottom: var(--dex-okd-inner-dragdrop-wrapper-gutter);
  position: relative;
  touch-action: manipulation;
  transform: translateZ(0);
  transform: translate3d(var(--dex-okd-inner-dragdrop-translate-x, 0), var(--dex-okd-inner-dragdrop-translate-y, 0), 0);
  transform-origin: 0 0;
  width: 100%
}

.dex-dragdrop-sortable-wrapper:nth-last-child(3) {
  margin-bottom: 0
}

.dex-dragdrop-sortable-wrapper.dex-dragdrop-sortable-fadeIn {
  animation: fadeIn .5s ease
}

.dex-dragdrop-sortable-horizontal {
  margin-bottom: 0;
  margin-right: var(--dex-okd-inner-dragdrop-wrapper-gutter)
}

.dex-dragdrop-sortable-horizontal:nth-last-child(3) {
  margin-right: 0
}

.dex-dragdrop-sortable-wrapper-dragging {
  animation: pop .2s cubic-bezier(.18, .67, .6, 1.22);
  border: 1px solid #0569ff;
  border: 1px solid var(--dex-okd-dragdrop-sortable-item-active-border-color, #0569ff);
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
  box-shadow: var(--dex-okd-dragdrop-sortable-item-active-shadow, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05));
  cursor: -webkit-grab;
  cursor: grab;
  opacity: 1;
  z-index: 9
}

.dex-dragdrop-sortable-wrapper.dex-dragdrop-sortable-wrapper-dragging .dex-dragdrop-sortable-item {
  border: none
}

.dex-dragdrop-sortable-wrapper.dex-dragdrop-sortable-wrapper-dragging .dex-dragdrop-sortable-item .dex-dragdrop-sortable-children {
  opacity: 1
}

.dex-dragdrop-sortable-dragging-hidden {
  visibility: hidden
}

.dex-dragdrop-sortable-item {
  -webkit-tap-highlight-color: transparent;
  border: 1px solid #ebebeb;
  border: 1px solid var(--dex-okd-dragdrop-sortable-item-default-border-color, #ebebeb);
  border-radius: 6px;
  box-sizing: border-box;
  display: flex;
  flex-grow: 1;
  position: relative;
  transform-origin: 50% 50%;
  transition: box-shadow .2s cubic-bezier(.18, .67, .6, 1.22)
}

.dex-dragdrop-sortable-item:focus-visible {
  outline: none
}

.dex-dragdrop-sortable-item-draggable {
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: manipulation
}

.dex-dragdrop-sortable-dragging:not(.dex-dragdrop-sortable-dragOverlay) {
  background-color: #f5f9ff;
  background-color: var(--dex-okd-dragdrop-sortable-overlay-background-color, #f5f9ff);
  border: 1px dashed #205fec;
  border: 1px dashed var(--dex-okd-dragdrop-sortable-overlay-border-color, #205fec);
  z-index: 0
}

.dex-dragdrop-sortable-dragging:not(.dex-dragdrop-sortable-dragOverlay) .dex-dragdrop-sortable-children {
  opacity: 0;
  opacity: var(--dex-okd-inner-dragdrop-overlay-virtual-item-opacity, 0)
}

.dex-dragdrop-sortable-disabled.dex-dragdrop-sortable-withHandler .dex-dragdrop-sortable-actions,
.dex-dragdrop-sortable-disabled:not(.dex-dragdrop-sortable-withHandler) {
  cursor: not-allowed;
  opacity: .4
}

.dex-dragdrop-sortable-dragOverlay {
  animation: pop .2s cubic-bezier(.18, .67, .6, 1.22);
  border: 1px solid #0569ff;
  border: 1px solid var(--dex-okd-dragdrop-sortable-item-active-border-color, #0569ff);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
  box-shadow: var(--dex-okd-dragdrop-sortable-item-active-shadow, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05));
  cursor: -webkit-grab;
  cursor: grab;
  opacity: 1;
  z-index: 999
}

.dex-dragdrop-sortable-children {
  flex: 1 1
}

.dex-dragdrop-sortable-actions {
  align-items: center;
  color: #929292;
  color: var(--dex-okd-dragdrop-sortable-item-handler-default-color, #929292);
  cursor: -webkit-grab;
  cursor: grab;
  display: flex;
  height: 100%;
  padding: 0 20px
}

.dex-dragdrop-sortable-actions .dex-dragdrop-sortable-icon {
  font-size: 24px
}

.dex-drawer {
  background: var(--dex-okd-drawer-content-bg);
  outline: none;
  padding: 0 16px;
  width: 320px;
  z-index: 9600
}

.dex-drawer.no-padding {
  padding: 0
}

.dex-drawer-mask {
  background: var(--dex-okd-drawer-mask-color);
  z-index: 9600
}

.dex-drawer-right {
  box-shadow: -6px 0 16px 0 rgba(0, 0, 0, .08), -3px 0 6px -4px rgba(0, 0, 0, .12), -9px 0 28px 8px rgba(0, 0, 0, .05);
  box-shadow: var(--dex-okd-drawer-mask-right-box-shadow, -6px 0 16px 0 rgba(0, 0, 0, .08), -3px 0 6px -4px rgba(0, 0, 0, .12), -9px 0 28px 8px rgba(0, 0, 0, .05))
}

.dex-drawer-left {
  box-shadow: 6px 0 16px 0 rgba(0, 0, 0, .08), 3px 0 6px -4px rgba(0, 0, 0, .12), 9px 0 28px 8px rgba(0, 0, 0, .05);
  box-shadow: var(--dex-okd-drawer-mask-left-box-shadow, 6px 0 16px 0 rgba(0, 0, 0, .08), 3px 0 6px -4px rgba(0, 0, 0, .12), 9px 0 28px 8px rgba(0, 0, 0, .05))
}

.dex-label-reversed .dex-label-text {
  color: var(--dex-okd-input-reversed-label-color)
}

.dex-label-reversed .dex-label-action {
  color: var(--dex-okd-input-reversed-action-color)
}

.dex-input-reversed .dex-input-box {
  background: var(--dex-okd-input-reversed-default-background);
  border: thin solid var(--dex-okd-input-reversed-default-border-color);
  box-shadow: var(--dex-okd-input-reversed-default-shadow);
  transition: border-color .3s, box-shadow .3s
}

.dex-input-reversed .dex-input-input {
  color: var(--dex-okd-input-reversed-default-text-color)
}

.dex-input-reversed .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-default-placeholder-color);
  color: var(--dex-okd-input-reversed-default-placeholder-color)
}

.dex-input-reversed .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-default-placeholder-color);
  color: var(--dex-okd-input-reversed-default-placeholder-color);
  opacity: 1
}

.dex-input-reversed .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-default-placeholder-color);
  color: var(--dex-okd-input-reversed-default-placeholder-color)
}

.dex-input-reversed .dex-input-input:-webkit-autofill {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-default-text-color) !important;
  border: none;
  -webkit-box-shadow: 0 0 0 30px var(--dex-okd-input-reversed-default-background) inset
}

.dex-input-reversed .dex-input-error {
  color: var(--dex-okd-input-reversed-error-tips-color)
}

.dex-input-reversed .dex-input-help-text,
.dex-input-reversed .dex-input-tips {
  color: var(--dex-okd-input-reversed-tips-text-color)
}

.dex-input.dex-input-reversed.hover .dex-input-box,
.dex-input.dex-input-reversed:hover .dex-input-box {
  background: var(--dex-okd-input-reversed-hover-background);
  border: thin solid var(--dex-okd-input-reversed-hover-border-color);
  box-shadow: var(--dex-okd-input-reversed-hover-shadow)
}

.dex-input.dex-input-reversed.hover .dex-input-box .dex-input-input,
.dex-input.dex-input-reversed:hover .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-hover-text-color);
  caret-color: var(--dex-okd-input-reversed-hover-caret-color);
  color: var(--dex-okd-input-reversed-hover-text-color)
}

.dex-input.dex-input-reversed.hover .dex-input-box .dex-input-input::-webkit-input-placeholder,
.dex-input.dex-input-reversed:hover .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-hover-placeholder-color);
  color: var(--dex-okd-input-reversed-hover-placeholder-color)
}

.dex-input.dex-input-reversed.hover .dex-input-box .dex-input-input:-moz-placeholder,
.dex-input.dex-input-reversed:hover .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-hover-placeholder-color);
  color: var(--dex-okd-input-reversed-hover-placeholder-color);
  opacity: 1
}

.dex-input.dex-input-reversed.hover .dex-input-box .dex-input-input::-ms-input-placeholder,
.dex-input.dex-input-reversed:hover .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-hover-placeholder-color);
  color: var(--dex-okd-input-reversed-hover-placeholder-color)
}

.dex-input.dex-input-reversed.focus .dex-input-box {
  background: var(--dex-okd-input-reversed-focus-background);
  border: thin solid var(--dex-okd-input-reversed-focus-border-color);
  box-shadow: var(--dex-okd-input-reversed-focus-shadow)
}

.dex-input.dex-input-reversed.focus .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-focus-text-color);
  caret-color: var(--dex-okd-input-reversed-focus-caret-color);
  color: var(--dex-okd-input-reversed-focus-text-color)
}

.dex-input.dex-input-reversed.focus .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-focus-placeholder-color);
  color: var(--dex-okd-input-reversed-focus-placeholder-color)
}

.dex-input.dex-input-reversed.focus .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-focus-placeholder-color);
  color: var(--dex-okd-input-reversed-focus-placeholder-color);
  opacity: 1
}

.dex-input.dex-input-reversed.focus .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-focus-placeholder-color);
  color: var(--dex-okd-input-reversed-focus-placeholder-color)
}

.dex-input.dex-input-reversed.disabled .dex-input-box {
  background: var(--dex-okd-input-reversed-disabled-background);
  border: thin solid var(--dex-okd-input-reversed-disabled-border-color);
  box-shadow: var(--dex-okd-input-reversed-disabled-shadow)
}

.dex-input.dex-input-reversed.disabled .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-disabled-text-color);
  caret-color: var(--dex-okd-input-reversed-disabled-caret-color);
  color: var(--dex-okd-input-reversed-disabled-text-color)
}

.dex-input.dex-input-reversed.disabled .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-disabled-placeholder-color);
  color: var(--dex-okd-input-reversed-disabled-placeholder-color)
}

.dex-input.dex-input-reversed.disabled .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-disabled-placeholder-color);
  color: var(--dex-okd-input-reversed-disabled-placeholder-color);
  opacity: 1
}

.dex-input.dex-input-reversed.disabled .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-disabled-placeholder-color);
  color: var(--dex-okd-input-reversed-disabled-placeholder-color)
}

.dex-input.dex-input-reversed.disabled .dex-input-input:-webkit-autofill {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-disabled-text-color) !important;
  -webkit-box-shadow: 0 0 0 30px var(--dex-okd-input-reversed-disabled-background) inset
}

.dex-input.dex-input-reversed.error .dex-input-box {
  background: var(--dex-okd-input-reversed-error-background);
  border: thin solid var(--dex-okd-input-reversed-error-border-color);
  box-shadow: var(--dex-okd-input-reversed-error-shadow)
}

.dex-input.dex-input-reversed.error .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-error-text-color);
  caret-color: var(--dex-okd-input-reversed-error-caret-color);
  color: var(--dex-okd-input-reversed-error-text-color)
}

.dex-input.dex-input-reversed.error .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-error-placeholder-color);
  color: var(--dex-okd-input-reversed-error-placeholder-color)
}

.dex-input.dex-input-reversed.error .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-error-placeholder-color);
  color: var(--dex-okd-input-reversed-error-placeholder-color);
  opacity: 1
}

.dex-input.dex-input-reversed.error .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-reversed-error-placeholder-color);
  color: var(--dex-okd-input-reversed-error-placeholder-color)
}

.dex-input-reversed .dex-input-prefix .prefix-icon,
.dex-input-reversed .dex-input-suffix .suffix-icon,
.dex-input-reversed .dex-input-suffix .suffix-icon:hover {
  color: var(--dex-okd-input-reversed-icon-color)
}

.dex-input-reversed .dex-input-suffix .error-icon {
  color: var(--dex-okd-input-reversed-error-tips-color)
}

.dex-input-reversed .dex-input-number-suffix {
  border-left: 1px solid var(--dex-okd-input-reversed-default-border-color)
}

.dex-input-reversed .dex-input-number-suffix-part {
  background: var(--dex-okd-input-number-reversed-default-add-icon-background)
}

.dex-input-reversed .dex-input-number-suffix-part .icon {
  color: var(--dex-okd-input-number-reversed-default-add-icon-color)
}

.dex-input-reversed .dex-input-number-suffix-part .hover,
.dex-input-reversed .dex-input-number-suffix-part:hover {
  background: var(--dex-okd-input-number-reversed-hover-add-icon-background)
}

.dex-input-reversed .dex-input-number-suffix-part .hover .icon,
.dex-input-reversed .dex-input-number-suffix-part:hover .icon {
  color: var(--dex-okd-input-number-reversed-hover-add-icon-color)
}

.dex-input-reversed .dex-input-number-suffix-part .active,
.dex-input-reversed .dex-input-number-suffix-part:active {
  background: var(--dex-okd-input-number-reversed-active-add-icon-background)
}

.dex-input-reversed .dex-input-number-suffix-part .active .icon,
.dex-input-reversed .dex-input-number-suffix-part:active .icon {
  color: var(--dex-okd-input-number-reversed-active-add-icon-color)
}

.dex-input-reversed .dex-input-number-suffix-part .disabled,
.dex-input-reversed .dex-input-number-suffix-part-disabled {
  background: var(--dex-okd-input-number-reversed-disabled-add-icon-background)
}

.dex-input-reversed .dex-input-number-suffix-part .disabled .icon,
.dex-input-reversed .dex-input-number-suffix-part .disabled:hover .icon,
.dex-input-reversed .dex-input-number-suffix-part-disabled .icon,
.dex-input-reversed .dex-input-number-suffix-part-disabled:hover .icon {
  color: var(--dex-okd-input-number-reversed-disabled-add-icon-color)
}

.dex-input-reversed .dex-input-number-suffix-line {
  background: var(--dex-okd-input-reversed-default-border-color)
}

.dex-input-reversed.dex-input .dex-input-code-btn {
  color: var(--dex-okd-input-code-reversed-common-btn-color)
}

.dex-input-reversed.dex-input .dex-input-code-btn.disabled {
  color: var(--dex-okd-input-code-reversed-common-btn-disabled-color)
}

.dex-input-reversed.dex-input .dex-input-count-down {
  color: var(--dex-okd-input-code-reversed-common-count-color)
}

.dex-input-reversed.dex-input-search .dex-input-prefix .dex-input-search-prefix-icon {
  color: var(--dex-okd-input-search-reversed-prefix-icon-color)
}

.dex-input-reversed.dex-input-search .dex-input-error {
  color: var(--dex-okd-input-search-reversed-error-tips-color)
}

.dex-input-reversed.dex-input-search .dex-input-box {
  background-color: var(--dex-okd-input-search-reversed-default-background);
  border-color: var(--dex-okd-input-search-reversed-default-border-color);
  box-shadow: var(--dex-okd-input-search-reversed-default-shadow)
}

.dex-input-reversed.dex-input-search .dex-input-input {
  color: var(--dex-okd-input-search-reversed-default-text-color)
}

.dex-input-reversed.dex-input-search .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-default-placeholder-color);
  color: var(--dex-okd-input-search-reversed-default-placeholder-color)
}

.dex-input-reversed.dex-input-search .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-default-placeholder-color);
  color: var(--dex-okd-input-search-reversed-default-placeholder-color);
  opacity: 1
}

.dex-input-reversed.dex-input-search .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-default-placeholder-color);
  color: var(--dex-okd-input-search-reversed-default-placeholder-color)
}

.dex-input-reversed.dex-input-search.hover .dex-input-box,
.dex-input-reversed.dex-input-search:hover .dex-input-box {
  background: var(--dex-okd-input-search-reversed-hover-background);
  border: thin solid var(--dex-okd-input-search-reversed-hover-border-color);
  box-shadow: var(--dex-okd-input-search-reversed-hover-shadow)
}

.dex-input-reversed.dex-input-search.hover .dex-input-box .dex-input-input,
.dex-input-reversed.dex-input-search:hover .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-hover-text-color);
  caret-color: var(--dex-okd-input-search-reversed-hover-caret-color);
  color: var(--dex-okd-input-search-reversed-hover-text-color)
}

.dex-input-reversed.dex-input-search.hover .dex-input-box .dex-input-input::-webkit-input-placeholder,
.dex-input-reversed.dex-input-search:hover .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-hover-placeholder-color);
  color: var(--dex-okd-input-search-reversed-hover-placeholder-color)
}

.dex-input-reversed.dex-input-search.hover .dex-input-box .dex-input-input:-moz-placeholder,
.dex-input-reversed.dex-input-search:hover .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-hover-placeholder-color);
  color: var(--dex-okd-input-search-reversed-hover-placeholder-color);
  opacity: 1
}

.dex-input-reversed.dex-input-search.hover .dex-input-box .dex-input-input::-ms-input-placeholder,
.dex-input-reversed.dex-input-search:hover .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-hover-placeholder-color);
  color: var(--dex-okd-input-search-reversed-hover-placeholder-color)
}

.dex-input-reversed.dex-input-search.focus .dex-input-box {
  background: var(--dex-okd-input-search-reversed-focus-background);
  border: thin solid var(--dex-okd-input-search-reversed-focus-border-color);
  box-shadow: var(--dex-okd-input-search-reversed-focus-shadow)
}

.dex-input-reversed.dex-input-search.focus .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-focus-text-color);
  caret-color: var(--dex-okd-input-search-reversed-focus-caret-color);
  color: var(--dex-okd-input-search-reversed-focus-text-color)
}

.dex-input-reversed.dex-input-search.focus .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-focus-placeholder-color);
  color: var(--dex-okd-input-search-reversed-focus-placeholder-color)
}

.dex-input-reversed.dex-input-search.focus .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-focus-placeholder-color);
  color: var(--dex-okd-input-search-reversed-focus-placeholder-color);
  opacity: 1
}

.dex-input-reversed.dex-input-search.focus .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-focus-placeholder-color);
  color: var(--dex-okd-input-search-reversed-focus-placeholder-color)
}

.dex-input-reversed.dex-input-search.disabled .dex-input-box {
  background: var(--dex-okd-input-search-reversed-disabled-background);
  border: thin solid var(--dex-okd-input-search-reversed-disabled-border-color);
  box-shadow: var(--dex-okd-input-search-reversed-disabled-shadow)
}

.dex-input-reversed.dex-input-search.disabled .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-disabled-text-color);
  caret-color: var(--dex-okd-input-search-reversed-disabled-caret-color);
  color: var(--dex-okd-input-search-reversed-disabled-text-color)
}

.dex-input-reversed.dex-input-search.disabled .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-disabled-placeholder-color);
  color: var(--dex-okd-input-search-reversed-disabled-placeholder-color)
}

.dex-input-reversed.dex-input-search.disabled .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-disabled-placeholder-color);
  color: var(--dex-okd-input-search-reversed-disabled-placeholder-color);
  opacity: 1
}

.dex-input-reversed.dex-input-search.disabled .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-disabled-placeholder-color);
  color: var(--dex-okd-input-search-reversed-disabled-placeholder-color)
}

.dex-input-reversed.dex-input-search.error .dex-input-box {
  background: var(--dex-okd-input-search-reversed-error-background);
  border: thin solid var(--dex-okd-input-search-reversed-error-border-color);
  box-shadow: var(--dex-okd-input-search-reversed-error-shadow)
}

.dex-input-reversed.dex-input-search.error .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-error-text-color);
  caret-color: var(--dex-okd-input-search-reversed-error-caret-color);
  color: var(--dex-okd-input-search-reversed-error-text-color)
}

.dex-input-reversed.dex-input-search.error .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-error-placeholder-color);
  color: var(--dex-okd-input-search-reversed-error-placeholder-color)
}

.dex-input-reversed.dex-input-search.error .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-error-placeholder-color);
  color: var(--dex-okd-input-search-reversed-error-placeholder-color);
  opacity: 1
}

.dex-input-reversed.dex-input-search.error .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-reversed-error-placeholder-color);
  color: var(--dex-okd-input-search-reversed-error-placeholder-color)
}

.dex-input:hover .dex-input-number-suffix:not(.operation-always) {
  opacity: 1
}

.dex-input-number-inner {
  overflow: hidden
}

.dex-input-number-suffix {
  align-items: center;
  border-left: 1px solid var(--dex-okd-input-number-suffix-border-color, var(--dex-okd-input-default-border-color));
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  line-height: 0;
  margin-left: 6px;
  overflow: hidden;
  text-align: center;
  transition: opacity .5s;
  width: 24px
}

.dex-input-number-suffix:not(.operation-always) {
  opacity: 0
}

.dex-input-number-suffix-part {
  align-items: center;
  background: var(--dex-okd-input-number-default-add-icon-background);
  box-sizing: border-box;
  display: flex;
  flex: 1 1;
  justify-content: center;
  width: 100%
}

.dex-input-number-suffix-part .icon {
  color: var(--dex-okd-input-number-default-add-icon-color);
  font-size: 13px
}

.dex-input-number-suffix-part .hover,
.dex-input-number-suffix-part:not(.dex-input-number-suffix-part-disabled):hover {
  background: var(--dex-okd-input-number-hover-add-icon-background)
}

.dex-input-number-suffix-part .hover .icon,
.dex-input-number-suffix-part:not(.dex-input-number-suffix-part-disabled):hover .icon {
  color: var(--dex-okd-input-number-hover-add-icon-color)
}

.dex-input-number-suffix-part .active,
.dex-input-number-suffix-part:not(.dex-input-number-suffix-part-disabled):active {
  background: var(--dex-okd-input-number-active-add-icon-background)
}

.dex-input-number-suffix-part .active .icon,
.dex-input-number-suffix-part:not(.dex-input-number-suffix-part-disabled):active .icon {
  color: var(--dex-okd-input-number-active-add-icon-color)
}

.dex-input-number-suffix-part-disabled {
  cursor: not-allowed
}

.dex-input-number-suffix-line {
  background: var(--dex-okd-input-default-border-color);
  background: var(--dex-okd-input-number-suffix-border-color, var(--dex-okd-input-default-border-color));
  height: 1px;
  width: 100%
}

.dex-input-number-suffix .up {
  transform: rotate(180deg)
}

.dex-input-number-localization {
  text-align: right
}

.dex-input-number-localization-percent {
  color: var(--dex-okd-input-default-text-color);
  display: inline-block
}

.dex-input-xl .dex-input-number-suffix.xl {
  border-bottom-right-radius: calc(var(--dex-okd-input-xl-border-radius) - 1px);
  border-top-right-radius: calc(var(--dex-okd-input-xl-border-radius) - 1px)
}

.dex-input-lg .dex-input-number-suffix.lg {
  border-bottom-right-radius: calc(var(--dex-okd-input-lg-border-radius) - 1px);
  border-top-right-radius: calc(var(--dex-okd-input-lg-border-radius) - 1px)
}

.dex-input-xs .dex-input-number-suffix.xs {
  border-bottom-right-radius: calc(var(--dex-okd-input-xs-border-radius) - 1px);
  border-top-right-radius: calc(var(--dex-okd-input-xs-border-radius) - 1px)
}

.dex-input-sm .dex-input-number-suffix.sm {
  border-bottom-right-radius: calc(var(--dex-okd-input-sm-border-radius) - 1px);
  border-top-right-radius: calc(var(--dex-okd-input-sm-border-radius) - 1px)
}

.dex-input-md .dex-input-number-suffix.md {
  border-bottom-right-radius: calc(var(--dex-okd-input-md-border-radius) - 1px);
  border-top-right-radius: calc(var(--dex-okd-input-md-border-radius) - 1px)
}

.dex-label {
  display: flex;
  width: 100%
}

.dex-label.top-right {
  justify-content: flex-end
}

.dex-label.top-between {
  justify-content: space-between
}

.dex-label-text {
  color: var(--dex-okd-input-label-color);
  font-weight: 500
}

.dex-label-action {
  color: var(--dex-okd-input-action-color);
  cursor: pointer;
  font-weight: 500
}

.dex-label.label-xl .dex-label-text {
  font-size: var(--dex-okd-input-xl-label-font-size);
  line-height: var(--dex-okd-input-xl-label-line-height);
  margin-bottom: 6px;
  margin-bottom: var(--dex-okd-input-xl-label-margin, 6px)
}

.dex-label.label-xl .dex-label-action {
  font-size: var(--dex-okd-input-xl-action-font-size);
  line-height: var(--dex-okd-input-xl-action-line-height);
  margin-bottom: 6px;
  margin-bottom: var(--dex-okd-input-xl-label-margin, 6px)
}

.dex-label.label-xl .dex-label-place {
  min-height: var(--dex-okd-input-xl-label-line-height)
}

.dex-label.label-lg .dex-label-text {
  font-size: var(--dex-okd-input-lg-label-font-size);
  line-height: var(--dex-okd-input-lg-label-line-height);
  margin-bottom: 6px;
  margin-bottom: var(--dex-okd-input-lg-label-margin, 6px)
}

.dex-label.label-lg .dex-label-action {
  font-size: var(--dex-okd-input-lg-action-font-size);
  line-height: var(--dex-okd-input-lg-action-line-height);
  margin-bottom: 6px;
  margin-bottom: var(--dex-okd-input-lg-label-margin, 6px)
}

.dex-label.label-lg .dex-label-place {
  min-height: var(--dex-okd-input-lg-label-line-height)
}

.dex-label.label-xs .dex-label-text {
  font-size: var(--dex-okd-input-xs-label-font-size);
  line-height: var(--dex-okd-input-xs-label-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-xs-label-margin, 4px)
}

.dex-label.label-xs .dex-label-action {
  font-size: var(--dex-okd-input-xs-action-font-size);
  line-height: var(--dex-okd-input-xs-action-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-xs-label-margin, 4px)
}

.dex-label.label-xs .dex-label-place {
  min-height: var(--dex-okd-input-xs-label-line-height)
}

.dex-label.label-sm .dex-label-text {
  font-size: var(--dex-okd-input-sm-label-font-size);
  line-height: var(--dex-okd-input-sm-label-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-sm-label-margin, 4px)
}

.dex-label.label-sm .dex-label-action {
  font-size: var(--dex-okd-input-sm-action-font-size);
  line-height: var(--dex-okd-input-sm-action-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-sm-label-margin, 4px)
}

.dex-label.label-sm .dex-label-place {
  min-height: var(--dex-okd-input-sm-label-line-height)
}

.dex-label.label-md .dex-label-text {
  font-size: var(--dex-okd-input-md-label-font-size);
  line-height: var(--dex-okd-input-md-label-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-md-label-margin, 4px)
}

.dex-label.label-md .dex-label-action {
  font-size: var(--dex-okd-input-md-action-font-size);
  line-height: var(--dex-okd-input-md-action-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-md-label-margin, 4px)
}

.dex-label.label-md .dex-label-place {
  min-height: var(--dex-okd-input-md-label-line-height)
}

.dex-input-caret-color {
  caret-color: var(--dex-okd-input-focus-caret-color)
}

.dex-input-caret-color input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none
}

.dex-input-caret-color input[type=search]::-moz-search-cancel-button {
  -moz-appearance: none;
  appearance: none
}

.dex-input-caret-color input::-ms-clear,
.dex-input-caret-color input::-ms-reveal {
  display: none
}

.dex-input-caret-color input::-o-clear {
  display: none
}

.dex-input {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  position: relative
}

.dex-input input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none
}

.dex-input input[type=search]::-moz-search-cancel-button {
  -moz-appearance: none;
  appearance: none
}

.dex-input input::-ms-clear,
.dex-input input::-ms-reveal {
  display: none
}

.dex-input input::-o-clear {
  display: none
}

.dex-input * {
  box-sizing: border-box
}

.dex-input-prefix,
.dex-input-suffix {
  align-items: center;
  display: flex;
  flex-shrink: 1;
  white-space: nowrap
}

.dex-input-input {
  background: transparent;
  border: none;
  color: var(--dex-okd-input-default-text-color);
  flex-grow: 1;
  font-family: inherit;
  height: 100%;
  outline: none;
  width: 100%
}

.dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-default-placeholder-color)
}

.dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-default-placeholder-color);
  opacity: 1
}

.dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-default-placeholder-color)
}

.dex-input-input:-webkit-autofill {
  -webkit-text-fill-color: var(--dex-okd-input-default-text-color) !important;
  border: none;
  -webkit-box-shadow: 0 0 0 30px var(--dex-okd-input-default-background) inset
}

.dex-input-input.input-textarea {
  box-shadow: none;
  outline: none;
  resize: none
}

.dex-input-custom-placeholder {
  position: relative;
  width: 100%
}

.dex-input-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.dex-input-placeholder {
  bottom: 0;
  color: var(--dex-okd-input-default-placeholder-color);
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%)
}

.dex-input-tips-box {
  display: flex;
  width: 100%
}

.dex-input-error {
  color: var(--dex-okd-input-error-tips-color)
}

.dex-input-tips {
  display: inline-block
}

.dex-input-help-text,
.dex-input-tips {
  color: var(--dex-okd-input-tips-text-color)
}

.dex-input-help-text {
  flex-grow: 1;
  flex-shrink: 0;
  text-align: right
}

.dex-input.hover,
.dex-input:hover {
  cursor: text
}

.dex-input.hover .dex-input-box,
.dex-input:hover .dex-input-box {
  background: var(--dex-okd-input-hover-background);
  border: thin solid var(--dex-okd-input-hover-border-color);
  box-shadow: var(--dex-okd-input-hover-shadow)
}

.dex-input.hover .dex-input-box .dex-input-input,
.dex-input:hover .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-hover-text-color);
  caret-color: var(--dex-okd-input-hover-caret-color);
  color: var(--dex-okd-input-hover-text-color)
}

.dex-input.hover .dex-input-box .dex-input-input::-webkit-input-placeholder,
.dex-input:hover .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-hover-placeholder-color);
  color: var(--dex-okd-input-hover-placeholder-color)
}

.dex-input.hover .dex-input-box .dex-input-input:-moz-placeholder,
.dex-input:hover .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-hover-placeholder-color);
  color: var(--dex-okd-input-hover-placeholder-color);
  opacity: 1
}

.dex-input.hover .dex-input-box .dex-input-input::-ms-input-placeholder,
.dex-input:hover .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-hover-placeholder-color);
  color: var(--dex-okd-input-hover-placeholder-color)
}

.dex-input.focus .dex-input-box {
  background: var(--dex-okd-input-focus-background);
  border: thin solid var(--dex-okd-input-focus-border-color);
  box-shadow: var(--dex-okd-input-focus-shadow)
}

.dex-input.focus .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-focus-text-color);
  caret-color: var(--dex-okd-input-focus-caret-color);
  color: var(--dex-okd-input-focus-text-color)
}

.dex-input.focus .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-focus-placeholder-color);
  color: var(--dex-okd-input-focus-placeholder-color)
}

.dex-input.focus .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-focus-placeholder-color);
  color: var(--dex-okd-input-focus-placeholder-color);
  opacity: 1
}

.dex-input.focus .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-focus-placeholder-color);
  color: var(--dex-okd-input-focus-placeholder-color)
}

.dex-input.readonly .dex-input-box {
  background: var(--dex-okd-input-default-background);
  background: var(--dex-okd-input-readonly-background, var(--dex-okd-input-default-background));
  border: thin solid var(--dex-okd-input-readonly-border-color, var(--dex-okd-input-default-border-color));
  box-shadow: var(--dex-okd-input-default-shadow);
  box-shadow: var(--dex-okd-input-readonly-shadow, var(--dex-okd-input-default-shadow))
}

.dex-input.readonly .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-default-text-color);
  -webkit-text-fill-color: var(--dex-okd-input-readonly-text-color, var(--dex-okd-input-default-text-color));
  caret-color: var(--dex-okd-input-default-caret-color);
  caret-color: var(--dex-okd-input-readonly-caret-color, var(--dex-okd-input-default-caret-color));
  color: var(--dex-okd-input-default-text-color);
  color: var(--dex-okd-input-readonly-text-color, var(--dex-okd-input-default-text-color))
}

.dex-input.readonly .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  -webkit-text-fill-color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color));
  color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color))
}

.dex-input.readonly .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  -webkit-text-fill-color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color));
  color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color));
  opacity: 1
}

.dex-input.readonly .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  -webkit-text-fill-color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color));
  color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color))
}

.dex-input.readonly.focus .dex-input-box {
  border-color: var(--dex-okd-input-focus-border-color)
}

.dex-input.disabled {
  cursor: not-allowed
}

.dex-input.disabled .dex-input-box {
  background: var(--dex-okd-input-disabled-background);
  border: thin solid var(--dex-okd-input-disabled-border-color);
  box-shadow: var(--dex-okd-input-disabled-shadow)
}

.dex-input.disabled .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-text-color);
  caret-color: var(--dex-okd-input-disabled-caret-color);
  color: var(--dex-okd-input-disabled-text-color)
}

.dex-input.disabled .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-placeholder-color);
  color: var(--dex-okd-input-disabled-placeholder-color)
}

.dex-input.disabled .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-placeholder-color);
  color: var(--dex-okd-input-disabled-placeholder-color);
  opacity: 1
}

.dex-input.disabled .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-placeholder-color);
  color: var(--dex-okd-input-disabled-placeholder-color)
}

.dex-input.disabled .dex-input-input {
  cursor: not-allowed;
  opacity: 1
}

.dex-input.disabled .dex-input-input:-webkit-autofill {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-text-color) !important;
  -webkit-box-shadow: 0 0 0 30px var(--dex-okd-input-disabled-background) inset
}

.dex-input.error .dex-input-box {
  background: var(--dex-okd-input-error-background);
  border: thin solid var(--dex-okd-input-error-border-color);
  box-shadow: var(--dex-okd-input-error-shadow)
}

.dex-input.error .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-error-text-color);
  caret-color: var(--dex-okd-input-error-caret-color);
  color: var(--dex-okd-input-error-text-color)
}

.dex-input.error .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-error-placeholder-color);
  color: var(--dex-okd-input-error-placeholder-color)
}

.dex-input.error .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-error-placeholder-color);
  color: var(--dex-okd-input-error-placeholder-color);
  opacity: 1
}

.dex-input.error .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-error-placeholder-color);
  color: var(--dex-okd-input-error-placeholder-color)
}

.dex-input.error .dex-input-error {
  display: inline-block
}

.dex-input.no-border .dex-input-box {
  background: transparent;
  border: thin solid transparent;
  box-shadow: none
}

.dex-input-textarea-resize-virtual-dom::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0
}

.dex-input-box {
  align-items: center;
  background: var(--dex-okd-input-default-background);
  border: thin solid var(--dex-okd-input-default-border-color);
  box-shadow: var(--dex-okd-input-default-shadow);
  display: flex;
  transition: border-color .3s, box-shadow .3s;
  width: 100%
}

.dex-input-xl>.dex-input-box {
  border-radius: var(--dex-okd-input-xl-border-radius);
  height: var(--dex-okd-input-xl-height);
  padding: 0 8px;
  padding: 0 var(--dex-okd-input-xl-padding-horizontal, 8px)
}

.dex-input-xl>.dex-input-box.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-xl-height)
}

.dex-input-xl>.dex-input-box.no-padding-left {
  padding-left: 0
}

.dex-input-xl>.dex-input-box.no-padding-right {
  padding-right: 0
}

.dex-input-xl>.dex-input-box.ta {
  height: 100%;
  padding: 8px
}

.dex-input-xl>.dex-input-box.auto-resize-auto-height {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-xl-height)
}

.dex-input-xl>.dex-input-box.input-circle {
  border-radius: 100px
}

.dex-input-xl .dex-input-input {
  font-size: var(--dex-okd-input-xl-text-font-size);
  padding: calc(var(--dex-okd-input-xl-height)/2 - var(--dex-okd-input-xl-text-font-size)/2 - 2px) 0
}

.dex-input-xl .dex-input-input::-webkit-input-placeholder {
  font-size: var(--dex-okd-input-xl-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xl .dex-input-input:-moz-placeholder {
  font-size: var(--dex-okd-input-xl-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xl .dex-input-input::-ms-input-placeholder {
  font-size: var(--dex-okd-input-xl-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xl .dex-input-input.ta {
  padding: 0
}

.dex-input-xl .dex-input-input.textarea-auto-resize {
  line-height: var(--dex-okd-input-xl-text-font-size)
}

.dex-input-xl .dex-input-placeholder {
  font-size: var(--dex-okd-input-xl-text-font-size);
  height: calc(var(--dex-okd-input-xl-text-font-size) + 2px);
  line-height: calc(var(--dex-okd-input-xl-text-font-size) + 2px)
}

.dex-input-xl .dex-input.dex-input-place-mode .dex-input-tips-box {
  min-height: calc(var(--dex-okd-input-xl-tip-line-height) + 6px);
  min-height: calc(var(--dex-okd-input-xl-tip-line-height) + var(--dex-okd-input-xl-tip-margin, 6px))
}

.dex-input-xl .dex-input-error {
  font-size: var(--dex-okd-input-xl-error-font-size);
  line-height: var(--dex-okd-input-xl-error-line-height);
  margin-top: 6px;
  margin-top: var(--dex-okd-input-xl-tip-margin, 6px)
}

.dex-input-xl .dex-input-help-text,
.dex-input-xl .dex-input-tips {
  font-size: var(--dex-okd-input-xl-tip-font-size);
  line-height: var(--dex-okd-input-xl-tip-line-height);
  margin-top: 6px;
  margin-top: var(--dex-okd-input-xl-tip-margin, 6px)
}

.dex-input-lg>.dex-input-box {
  border-radius: var(--dex-okd-input-lg-border-radius);
  height: var(--dex-okd-input-lg-height);
  padding: 0 8px;
  padding: 0 var(--dex-okd-input-lg-padding-horizontal, 8px)
}

.dex-input-lg>.dex-input-box.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-lg-height)
}

.dex-input-lg>.dex-input-box.no-padding-left {
  padding-left: 0
}

.dex-input-lg>.dex-input-box.no-padding-right {
  padding-right: 0
}

.dex-input-lg>.dex-input-box.ta {
  height: 100%;
  padding: 8px
}

.dex-input-lg>.dex-input-box.auto-resize-auto-height {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-lg-height)
}

.dex-input-lg>.dex-input-box.input-circle {
  border-radius: 100px
}

.dex-input-lg .dex-input-input {
  font-size: var(--dex-okd-input-lg-text-font-size);
  padding: calc(var(--dex-okd-input-lg-height)/2 - var(--dex-okd-input-lg-text-font-size)/2 - 2px) 0
}

.dex-input-lg .dex-input-input::-webkit-input-placeholder {
  font-size: var(--dex-okd-input-lg-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-lg .dex-input-input:-moz-placeholder {
  font-size: var(--dex-okd-input-lg-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-lg .dex-input-input::-ms-input-placeholder {
  font-size: var(--dex-okd-input-lg-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-lg .dex-input-input.ta {
  padding: 0
}

.dex-input-lg .dex-input-input.textarea-auto-resize {
  line-height: var(--dex-okd-input-lg-text-font-size)
}

.dex-input-lg .dex-input-placeholder {
  font-size: var(--dex-okd-input-lg-text-font-size);
  height: calc(var(--dex-okd-input-lg-text-font-size) + 2px);
  line-height: calc(var(--dex-okd-input-lg-text-font-size) + 2px)
}

.dex-input-lg .dex-input.dex-input-place-mode .dex-input-tips-box {
  min-height: calc(var(--dex-okd-input-lg-tip-line-height) + 6px);
  min-height: calc(var(--dex-okd-input-lg-tip-line-height) + var(--dex-okd-input-lg-tip-margin, 6px))
}

.dex-input-lg .dex-input-error {
  font-size: var(--dex-okd-input-lg-error-font-size);
  line-height: var(--dex-okd-input-lg-error-line-height);
  margin-top: 6px;
  margin-top: var(--dex-okd-input-lg-tip-margin, 6px)
}

.dex-input-lg .dex-input-help-text,
.dex-input-lg .dex-input-tips {
  font-size: var(--dex-okd-input-lg-tip-font-size);
  line-height: var(--dex-okd-input-lg-tip-line-height);
  margin-top: 6px;
  margin-top: var(--dex-okd-input-lg-tip-margin, 6px)
}

.dex-input-xs>.dex-input-box {
  border-radius: var(--dex-okd-input-xs-border-radius);
  height: var(--dex-okd-input-xs-height);
  padding: 0 8px;
  padding: 0 var(--dex-okd-input-xs-padding-horizontal, 8px)
}

.dex-input-xs>.dex-input-box.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-xs-height)
}

.dex-input-xs>.dex-input-box.no-padding-left {
  padding-left: 0
}

.dex-input-xs>.dex-input-box.no-padding-right {
  padding-right: 0
}

.dex-input-xs>.dex-input-box.ta {
  height: 100%;
  padding: 8px
}

.dex-input-xs>.dex-input-box.auto-resize-auto-height {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-xs-height)
}

.dex-input-xs>.dex-input-box.input-circle {
  border-radius: 100px
}

.dex-input-xs .dex-input-input {
  font-size: var(--dex-okd-input-xs-text-font-size);
  padding: calc(var(--dex-okd-input-xs-height)/2 - var(--dex-okd-input-xs-text-font-size)/2 - 2px) 0
}

.dex-input-xs .dex-input-input::-webkit-input-placeholder {
  font-size: var(--dex-okd-input-xs-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xs .dex-input-input:-moz-placeholder {
  font-size: var(--dex-okd-input-xs-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xs .dex-input-input::-ms-input-placeholder {
  font-size: var(--dex-okd-input-xs-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xs .dex-input-input.ta {
  padding: 0
}

.dex-input-xs .dex-input-input.textarea-auto-resize {
  line-height: var(--dex-okd-input-xs-text-font-size)
}

.dex-input-xs .dex-input-placeholder {
  font-size: var(--dex-okd-input-xs-text-font-size);
  height: calc(var(--dex-okd-input-xs-text-font-size) + 2px);
  line-height: calc(var(--dex-okd-input-xs-text-font-size) + 2px)
}

.dex-input-xs .dex-input.dex-input-place-mode .dex-input-tips-box {
  min-height: calc(var(--dex-okd-input-xs-tip-line-height) + 4px);
  min-height: calc(var(--dex-okd-input-xs-tip-line-height) + var(--dex-okd-input-xs-tip-margin, 4px))
}

.dex-input-xs .dex-input-error {
  font-size: var(--dex-okd-input-xs-error-font-size);
  line-height: var(--dex-okd-input-xs-error-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-xs-tip-margin, 4px)
}

.dex-input-xs .dex-input-help-text,
.dex-input-xs .dex-input-tips {
  font-size: var(--dex-okd-input-xs-tip-font-size);
  line-height: var(--dex-okd-input-xs-tip-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-xs-tip-margin, 4px)
}

.dex-input-sm>.dex-input-box {
  border-radius: var(--dex-okd-input-sm-border-radius);
  height: var(--dex-okd-input-sm-height);
  padding: 0 8px;
  padding: 0 var(--dex-okd-input-sm-padding-horizontal, 8px)
}

.dex-input-sm>.dex-input-box.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-sm-height)
}

.dex-input-sm>.dex-input-box.no-padding-left {
  padding-left: 0
}

.dex-input-sm>.dex-input-box.no-padding-right {
  padding-right: 0
}

.dex-input-sm>.dex-input-box.ta {
  height: 100%;
  padding: 8px
}

.dex-input-sm>.dex-input-box.auto-resize-auto-height {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-sm-height)
}

.dex-input-sm>.dex-input-box.input-circle {
  border-radius: 100px
}

.dex-input-sm .dex-input-input {
  font-size: var(--dex-okd-input-sm-text-font-size);
  padding: calc(var(--dex-okd-input-sm-height)/2 - var(--dex-okd-input-sm-text-font-size)/2 - 2px) 0
}

.dex-input-sm .dex-input-input::-webkit-input-placeholder {
  font-size: var(--dex-okd-input-sm-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-sm .dex-input-input:-moz-placeholder {
  font-size: var(--dex-okd-input-sm-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-sm .dex-input-input::-ms-input-placeholder {
  font-size: var(--dex-okd-input-sm-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-sm .dex-input-input.ta {
  padding: 0
}

.dex-input-sm .dex-input-input.textarea-auto-resize {
  line-height: var(--dex-okd-input-sm-text-font-size)
}

.dex-input-sm .dex-input-placeholder {
  font-size: var(--dex-okd-input-sm-text-font-size);
  height: calc(var(--dex-okd-input-sm-text-font-size) + 2px);
  line-height: calc(var(--dex-okd-input-sm-text-font-size) + 2px)
}

.dex-input-sm .dex-input.dex-input-place-mode .dex-input-tips-box {
  min-height: calc(var(--dex-okd-input-sm-tip-line-height) + 4px);
  min-height: calc(var(--dex-okd-input-sm-tip-line-height) + var(--dex-okd-input-sm-tip-margin, 4px))
}

.dex-input-sm .dex-input-error {
  font-size: var(--dex-okd-input-sm-error-font-size);
  line-height: var(--dex-okd-input-sm-error-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-sm-tip-margin, 4px)
}

.dex-input-sm .dex-input-help-text,
.dex-input-sm .dex-input-tips {
  font-size: var(--dex-okd-input-sm-tip-font-size);
  line-height: var(--dex-okd-input-sm-tip-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-sm-tip-margin, 4px)
}

.dex-input-md>.dex-input-box {
  border-radius: var(--dex-okd-input-md-border-radius);
  height: var(--dex-okd-input-md-height);
  padding: 0 8px;
  padding: 0 var(--dex-okd-input-md-padding-horizontal, 8px)
}

.dex-input-md>.dex-input-box.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-md-height)
}

.dex-input-md>.dex-input-box.no-padding-left {
  padding-left: 0
}

.dex-input-md>.dex-input-box.no-padding-right {
  padding-right: 0
}

.dex-input-md>.dex-input-box.ta {
  height: 100%;
  padding: 8px
}

.dex-input-md>.dex-input-box.auto-resize-auto-height {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-md-height)
}

.dex-input-md>.dex-input-box.input-circle {
  border-radius: 100px
}

.dex-input-md .dex-input-input {
  font-size: var(--dex-okd-input-md-text-font-size);
  padding: calc(var(--dex-okd-input-md-height)/2 - var(--dex-okd-input-md-text-font-size)/2 - 2px) 0
}

.dex-input-md .dex-input-input::-webkit-input-placeholder {
  font-size: var(--dex-okd-input-md-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-md .dex-input-input:-moz-placeholder {
  font-size: var(--dex-okd-input-md-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-md .dex-input-input::-ms-input-placeholder {
  font-size: var(--dex-okd-input-md-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-md .dex-input-input.ta {
  padding: 0
}

.dex-input-md .dex-input-input.textarea-auto-resize {
  line-height: var(--dex-okd-input-md-text-font-size)
}

.dex-input-md .dex-input-placeholder {
  font-size: var(--dex-okd-input-md-text-font-size);
  height: calc(var(--dex-okd-input-md-text-font-size) + 2px);
  line-height: calc(var(--dex-okd-input-md-text-font-size) + 2px)
}

.dex-input-md .dex-input.dex-input-place-mode .dex-input-tips-box {
  min-height: calc(var(--dex-okd-input-md-tip-line-height) + 4px);
  min-height: calc(var(--dex-okd-input-md-tip-line-height) + var(--dex-okd-input-md-tip-margin, 4px))
}

.dex-input-md .dex-input-error {
  font-size: var(--dex-okd-input-md-error-font-size);
  line-height: var(--dex-okd-input-md-error-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-md-tip-margin, 4px)
}

.dex-input-md .dex-input-help-text,
.dex-input-md .dex-input-tips {
  font-size: var(--dex-okd-input-md-tip-font-size);
  line-height: var(--dex-okd-input-md-tip-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-md-tip-margin, 4px)
}

.dex-input-prefix {
  height: 100%
}

.dex-input-prefix .prefix-icon {
  color: var(--dex-okd-input-icon-color)
}

.dex-input-prefix .select {
  padding-right: 8px
}

.dex-input-suffix {
  height: 100%
}

.dex-input-suffix .suffix-icon {
  color: var(--dex-okd-input-icon-color)
}

.dex-input-suffix .clean-icon {
  cursor: pointer
}

.dex-input-suffix .clean-icon:hover {
  color: #000;
  color: var(--dex-okd-input-search-suffix-icon-hover-color, #000)
}

.dex-input-suffix .error-icon {
  color: var(--dex-okd-input-error-tips-color)
}

.dex-input-xl .dex-input-prefix .prefix-icon {
  font-size: var(--dex-okd-input-xl-icon-size);
  margin-left: 0;
  margin-right: var(--dex-okd-input-xl-icon-margin)
}

.dex-input-xl .dex-input-suffix .suffix-icon {
  font-size: var(--dex-okd-input-xl-icon-size);
  margin-left: var(--dex-okd-input-xl-icon-margin);
  margin-right: 0
}

.dex-input-lg .dex-input-prefix .prefix-icon {
  font-size: var(--dex-okd-input-lg-icon-size);
  margin-left: 0;
  margin-right: var(--dex-okd-input-lg-icon-margin)
}

.dex-input-lg .dex-input-suffix .suffix-icon {
  font-size: var(--dex-okd-input-lg-icon-size);
  margin-left: var(--dex-okd-input-lg-icon-margin);
  margin-right: 0
}

.dex-input-xs .dex-input-prefix .prefix-icon {
  font-size: var(--dex-okd-input-xs-icon-size);
  margin-left: 0;
  margin-right: var(--dex-okd-input-xs-icon-margin)
}

.dex-input-xs .dex-input-suffix .suffix-icon {
  font-size: var(--dex-okd-input-xs-icon-size);
  margin-left: var(--dex-okd-input-xs-icon-margin);
  margin-right: 0
}

.dex-input-sm .dex-input-prefix .prefix-icon {
  font-size: var(--dex-okd-input-sm-icon-size);
  margin-left: 0;
  margin-right: var(--dex-okd-input-sm-icon-margin)
}

.dex-input-sm .dex-input-suffix .suffix-icon {
  font-size: var(--dex-okd-input-sm-icon-size);
  margin-left: var(--dex-okd-input-sm-icon-margin);
  margin-right: 0
}

.dex-input-md .dex-input-prefix .prefix-icon {
  font-size: var(--dex-okd-input-md-icon-size);
  margin-left: 0;
  margin-right: var(--dex-okd-input-md-icon-margin)
}

.dex-input-md .dex-input-suffix .suffix-icon {
  font-size: var(--dex-okd-input-md-icon-size);
  margin-left: var(--dex-okd-input-md-icon-margin);
  margin-right: 0
}

.dex-loadable {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%
}

.dex-loadable .frendly-tips {
  min-width: 300px;
  text-align: center
}

.dex-loadable .margin-t-md {
  margin-top: 10px
}

.dex-loadable-img {
  height: 96px
}

@keyframes loadingLine {
  to {
    left: 100%
  }
}

.dex-loader-line {
  background: var(--dex-okd-loader-line-inactive-color);
  height: var(--dex-okd-loader-line-size);
  overflow: hidden;
  position: relative;
  width: 100%
}

.dex-loader-line,
.dex-loader-line .dex-loader-mark {
  border-radius: calc(var(--dex-okd-loader-line-size)/2)
}

.dex-loader-line .dex-loader-mark {
  background: var(--dex-okd-loader-line-active-color);
  height: 100%
}

.dex-loader-line.dex-loader-loading .dex-loader-mark {
  animation: loadingLine 2s linear infinite;
  left: -25%;
  position: absolute;
  top: 0
}

@keyframes okui-loader-rotation {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

.dex-loader-box {
  position: relative
}

.dex-loader-mask {
  align-items: center;
  background: var(--dex-okd-loader-mask-bg-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.dex-loader-mask-text {
  color: var(--dex-okd-loader-mask-text-color);
  font-size: var(--dex-okd-loader-mask-text-font-size);
  font-weight: var(--dex-okd-loader-mask-text-font-weight);
  line-height: var(--dex-okd-loader-mask-text-line-height);
  margin-top: var(--dex-okd-loader-mask-text-margin-top)
}

.dex-loader-spin {
  animation: okui-loader-rotation 1s linear infinite;
  background-color: initial;
  border-style: solid;
  box-sizing: border-box;
  display: inline-flex
}

.dex-loader-spin-xl {
  border-radius: var(--dex-okd-loader-circle-xl-size);
  border-width: var(--dex-okd-loader-circle-xl-track-width);
  height: var(--dex-okd-loader-circle-xl-size);
  width: var(--dex-okd-loader-circle-xl-size)
}

.dex-loader-spin-lg {
  border-radius: var(--dex-okd-loader-circle-lg-size);
  border-width: var(--dex-okd-loader-circle-lg-track-width);
  height: var(--dex-okd-loader-circle-lg-size);
  width: var(--dex-okd-loader-circle-lg-size)
}

.dex-loader-spin-md {
  border-radius: var(--dex-okd-loader-circle-md-size);
  border-width: var(--dex-okd-loader-circle-md-track-width);
  height: var(--dex-okd-loader-circle-md-size);
  width: var(--dex-okd-loader-circle-md-size)
}

.dex-loader-spin-sm {
  border-radius: var(--dex-okd-loader-circle-sm-size);
  border-width: var(--dex-okd-loader-circle-sm-track-width);
  height: var(--dex-okd-loader-circle-sm-size);
  width: var(--dex-okd-loader-circle-sm-size)
}

.dex-loader-spin-primary {
  border-color: var(--dex-okd-loader-primary-inactive-color);
  border-top-color: var(--dex-okd-loader-primary-active-color)
}

.dex-loader-spin-neutral {
  border-color: var(--dex-okd-loader-neutral-inactive-color);
  border-top-color: var(--dex-okd-loader-neutral-active-color)
}

.dex-loader-inner-circle {
  border: none;
  border-radius: 0;
  overflow: hidden;
  transform: rotate(180deg)
}

.dex-loader-inner-fill-primary {
  background: var(--dex-okd-loader-primary-active-color)
}

.dex-loader-inner-fill-neutral {
  background: var(--dex-okd-loader-neutral-active-color)
}

.dex-loader-inner-track-primary {
  background: var(--dex-okd-loader-primary-inactive-color)
}

.dex-loader-inner-track-neutral {
  background: var(--dex-okd-loader-neutral-inactive-color)
}

.dex-loader-inner-track-right {
  height: 100%;
  overflow: hidden;
  position: absolute;
  right: 0
}

.dex-loader-inner-track-right-content {
  content: "";
  height: 100%;
  position: absolute;
  transform: rotate(0deg);
  transform-origin: left center;
  width: 100%
}

.dex-loader-inner-track-left {
  height: 100%;
  overflow: hidden;
  position: absolute
}

.dex-loader-inner-track-left-content {
  content: "";
  height: 100%;
  position: absolute;
  transform: rotate(0deg);
  transform-origin: right center;
  width: 100%
}

.dex-loader-inner-xl {
  border-radius: var(--dex-okd-loader-circle-xl-size);
  height: var(--dex-okd-loader-circle-xl-size);
  width: var(--dex-okd-loader-circle-xl-size)
}

.dex-loader-inner-xl-cover {
  background-color: var(--dex-okd-loader-circle-cover-background);
  border-radius: 100%;
  height: calc(var(--dex-okd-loader-circle-xl-size) - var(--dex-okd-loader-circle-xl-track-width)*2);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--dex-okd-loader-circle-xl-size) - var(--dex-okd-loader-circle-xl-track-width)*2)
}

.dex-loader-inner-track-xl {
  width: calc(var(--dex-okd-loader-circle-xl-size)/2)
}

.dex-loader-inner-track-xl-inner-track-left-content {
  border-radius: calc(var(--dex-okd-loader-circle-xl-size)/2) 0 0 calc(var(--dex-okd-loader-circle-xl-size)/2);
  width: 100%
}

.dex-loader-inner-track-xl-inner-track-right-content {
  border-radius: 0 calc(var(--dex-okd-loader-circle-xl-size)/2) calc(var(--dex-okd-loader-circle-xl-size)/2) 0;
  width: 100%
}

.dex-loader-inner-lg {
  border-radius: var(--dex-okd-loader-circle-lg-size);
  height: var(--dex-okd-loader-circle-lg-size);
  width: var(--dex-okd-loader-circle-lg-size)
}

.dex-loader-inner-lg-cover {
  background-color: var(--dex-okd-loader-circle-cover-background);
  border-radius: 100%;
  height: calc(var(--dex-okd-loader-circle-lg-size) - var(--dex-okd-loader-circle-lg-track-width)*2);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--dex-okd-loader-circle-lg-size) - var(--dex-okd-loader-circle-lg-track-width)*2)
}

.dex-loader-inner-track-lg {
  width: calc(var(--dex-okd-loader-circle-lg-size)/2)
}

.dex-loader-inner-track-lg-inner-track-left-content {
  border-radius: calc(var(--dex-okd-loader-circle-lg-size)/2) 0 0 calc(var(--dex-okd-loader-circle-lg-size)/2);
  width: 100%
}

.dex-loader-inner-track-lg-inner-track-right-content {
  border-radius: 0 calc(var(--dex-okd-loader-circle-lg-size)/2) calc(var(--dex-okd-loader-circle-lg-size)/2) 0;
  width: 100%
}

.dex-loader-inner-md {
  border-radius: var(--dex-okd-loader-circle-md-size);
  height: var(--dex-okd-loader-circle-md-size);
  width: var(--dex-okd-loader-circle-md-size)
}

.dex-loader-inner-md-cover {
  background-color: var(--dex-okd-loader-circle-cover-background);
  border-radius: 100%;
  height: calc(var(--dex-okd-loader-circle-md-size) - var(--dex-okd-loader-circle-md-track-width)*2);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--dex-okd-loader-circle-md-size) - var(--dex-okd-loader-circle-md-track-width)*2)
}

.dex-loader-inner-track-md {
  width: calc(var(--dex-okd-loader-circle-md-size)/2)
}

.dex-loader-inner-track-md-inner-track-left-content {
  border-radius: calc(var(--dex-okd-loader-circle-md-size)/2) 0 0 calc(var(--dex-okd-loader-circle-md-size)/2);
  width: 100%
}

.dex-loader-inner-track-md-inner-track-right-content {
  border-radius: 0 calc(var(--dex-okd-loader-circle-md-size)/2) calc(var(--dex-okd-loader-circle-md-size)/2) 0;
  width: 100%
}

.dex-loader-inner-sm {
  border-radius: var(--dex-okd-loader-circle-sm-size);
  height: var(--dex-okd-loader-circle-sm-size);
  width: var(--dex-okd-loader-circle-sm-size)
}

.dex-loader-inner-sm-cover {
  background-color: var(--dex-okd-loader-circle-cover-background);
  border-radius: 100%;
  height: calc(var(--dex-okd-loader-circle-sm-size) - var(--dex-okd-loader-circle-sm-track-width)*2);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--dex-okd-loader-circle-sm-size) - var(--dex-okd-loader-circle-sm-track-width)*2)
}

.dex-loader-inner-track-sm {
  width: calc(var(--dex-okd-loader-circle-sm-size)/2)
}

.dex-loader-inner-track-sm-inner-track-left-content {
  border-radius: calc(var(--dex-okd-loader-circle-sm-size)/2) 0 0 calc(var(--dex-okd-loader-circle-sm-size)/2);
  width: 100%
}

.dex-loader-inner-track-sm-inner-track-right-content {
  border-radius: 0 calc(var(--dex-okd-loader-circle-sm-size)/2) calc(var(--dex-okd-loader-circle-sm-size)/2) 0;
  width: 100%
}

.dex-mask {
  background: rgba(0, 0, 0, .65);
  background: var(--dex-okd-dialog-window-mask-color, rgba(0, 0, 0, .65));
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0
}

.dex-label {
  display: flex;
  width: 100%
}

.dex-label.top-right {
  justify-content: flex-end
}

.dex-label.top-between {
  justify-content: space-between
}

.dex-label-text {
  color: var(--dex-okd-input-label-color);
  font-weight: 500
}

.dex-label-action {
  color: var(--dex-okd-input-action-color);
  cursor: pointer;
  font-weight: 500
}

.dex-label.label-xl .dex-label-text {
  font-size: var(--dex-okd-input-xl-label-font-size);
  line-height: var(--dex-okd-input-xl-label-line-height);
  margin-bottom: 6px;
  margin-bottom: var(--dex-okd-input-xl-label-margin, 6px)
}

.dex-label.label-xl .dex-label-action {
  font-size: var(--dex-okd-input-xl-action-font-size);
  line-height: var(--dex-okd-input-xl-action-line-height);
  margin-bottom: 6px;
  margin-bottom: var(--dex-okd-input-xl-label-margin, 6px)
}

.dex-label.label-xl .dex-label-place {
  min-height: var(--dex-okd-input-xl-label-line-height)
}

.dex-label.label-lg .dex-label-text {
  font-size: var(--dex-okd-input-lg-label-font-size);
  line-height: var(--dex-okd-input-lg-label-line-height);
  margin-bottom: 6px;
  margin-bottom: var(--dex-okd-input-lg-label-margin, 6px)
}

.dex-label.label-lg .dex-label-action {
  font-size: var(--dex-okd-input-lg-action-font-size);
  line-height: var(--dex-okd-input-lg-action-line-height);
  margin-bottom: 6px;
  margin-bottom: var(--dex-okd-input-lg-label-margin, 6px)
}

.dex-label.label-lg .dex-label-place {
  min-height: var(--dex-okd-input-lg-label-line-height)
}

.dex-label.label-xs .dex-label-text {
  font-size: var(--dex-okd-input-xs-label-font-size);
  line-height: var(--dex-okd-input-xs-label-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-xs-label-margin, 4px)
}

.dex-label.label-xs .dex-label-action {
  font-size: var(--dex-okd-input-xs-action-font-size);
  line-height: var(--dex-okd-input-xs-action-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-xs-label-margin, 4px)
}

.dex-label.label-xs .dex-label-place {
  min-height: var(--dex-okd-input-xs-label-line-height)
}

.dex-label.label-sm .dex-label-text {
  font-size: var(--dex-okd-input-sm-label-font-size);
  line-height: var(--dex-okd-input-sm-label-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-sm-label-margin, 4px)
}

.dex-label.label-sm .dex-label-action {
  font-size: var(--dex-okd-input-sm-action-font-size);
  line-height: var(--dex-okd-input-sm-action-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-sm-label-margin, 4px)
}

.dex-label.label-sm .dex-label-place {
  min-height: var(--dex-okd-input-sm-label-line-height)
}

.dex-label.label-md .dex-label-text {
  font-size: var(--dex-okd-input-md-label-font-size);
  line-height: var(--dex-okd-input-md-label-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-md-label-margin, 4px)
}

.dex-label.label-md .dex-label-action {
  font-size: var(--dex-okd-input-md-action-font-size);
  line-height: var(--dex-okd-input-md-action-line-height);
  margin-bottom: 4px;
  margin-bottom: var(--dex-okd-input-md-label-margin, 4px)
}

.dex-label.label-md .dex-label-place {
  min-height: var(--dex-okd-input-md-label-line-height)
}

.dex-input-caret-color {
  caret-color: var(--dex-okd-input-focus-caret-color)
}

.dex-input-caret-color input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none
}

.dex-input-caret-color input[type=search]::-moz-search-cancel-button {
  -moz-appearance: none;
  appearance: none
}

.dex-input-caret-color input::-ms-clear,
.dex-input-caret-color input::-ms-reveal {
  display: none
}

.dex-input-caret-color input::-o-clear {
  display: none
}

.dex-input {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  position: relative
}

.dex-input input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none
}

.dex-input input[type=search]::-moz-search-cancel-button {
  -moz-appearance: none;
  appearance: none
}

.dex-input input::-ms-clear,
.dex-input input::-ms-reveal {
  display: none
}

.dex-input input::-o-clear {
  display: none
}

.dex-input * {
  box-sizing: border-box
}

.dex-input-prefix,
.dex-input-suffix {
  align-items: center;
  display: flex;
  flex-shrink: 1;
  white-space: nowrap
}

.dex-input-input {
  background: transparent;
  border: none;
  color: var(--dex-okd-input-default-text-color);
  flex-grow: 1;
  font-family: inherit;
  height: 100%;
  outline: none;
  width: 100%
}

.dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-default-placeholder-color)
}

.dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-default-placeholder-color);
  opacity: 1
}

.dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-default-placeholder-color)
}

.dex-input-input:-webkit-autofill {
  -webkit-text-fill-color: var(--dex-okd-input-default-text-color) !important;
  border: none;
  -webkit-box-shadow: 0 0 0 30px var(--dex-okd-input-default-background) inset
}

.dex-input-input.input-textarea {
  box-shadow: none;
  outline: none;
  resize: none
}

.dex-input-custom-placeholder {
  position: relative;
  width: 100%
}

.dex-input-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.dex-input-placeholder {
  bottom: 0;
  color: var(--dex-okd-input-default-placeholder-color);
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%)
}

.dex-input-tips-box {
  display: flex;
  width: 100%
}

.dex-input-error {
  color: var(--dex-okd-input-error-tips-color)
}

.dex-input-tips {
  display: inline-block
}

.dex-input-help-text,
.dex-input-tips {
  color: var(--dex-okd-input-tips-text-color)
}

.dex-input-help-text {
  flex-grow: 1;
  flex-shrink: 0;
  text-align: right
}

.dex-input.hover,
.dex-input:hover {
  cursor: text
}

.dex-input.hover .dex-input-box,
.dex-input:hover .dex-input-box {
  background: var(--dex-okd-input-hover-background);
  border: thin solid var(--dex-okd-input-hover-border-color);
  box-shadow: var(--dex-okd-input-hover-shadow)
}

.dex-input.hover .dex-input-box .dex-input-input,
.dex-input:hover .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-hover-text-color);
  caret-color: var(--dex-okd-input-hover-caret-color);
  color: var(--dex-okd-input-hover-text-color)
}

.dex-input.hover .dex-input-box .dex-input-input::-webkit-input-placeholder,
.dex-input:hover .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-hover-placeholder-color);
  color: var(--dex-okd-input-hover-placeholder-color)
}

.dex-input.hover .dex-input-box .dex-input-input:-moz-placeholder,
.dex-input:hover .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-hover-placeholder-color);
  color: var(--dex-okd-input-hover-placeholder-color);
  opacity: 1
}

.dex-input.hover .dex-input-box .dex-input-input::-ms-input-placeholder,
.dex-input:hover .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-hover-placeholder-color);
  color: var(--dex-okd-input-hover-placeholder-color)
}

.dex-input.focus .dex-input-box {
  background: var(--dex-okd-input-focus-background);
  border: thin solid var(--dex-okd-input-focus-border-color);
  box-shadow: var(--dex-okd-input-focus-shadow)
}

.dex-input.focus .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-focus-text-color);
  caret-color: var(--dex-okd-input-focus-caret-color);
  color: var(--dex-okd-input-focus-text-color)
}

.dex-input.focus .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-focus-placeholder-color);
  color: var(--dex-okd-input-focus-placeholder-color)
}

.dex-input.focus .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-focus-placeholder-color);
  color: var(--dex-okd-input-focus-placeholder-color);
  opacity: 1
}

.dex-input.focus .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-focus-placeholder-color);
  color: var(--dex-okd-input-focus-placeholder-color)
}

.dex-input.readonly .dex-input-box {
  background: var(--dex-okd-input-default-background);
  background: var(--dex-okd-input-readonly-background, var(--dex-okd-input-default-background));
  border: thin solid var(--dex-okd-input-readonly-border-color, var(--dex-okd-input-default-border-color));
  box-shadow: var(--dex-okd-input-default-shadow);
  box-shadow: var(--dex-okd-input-readonly-shadow, var(--dex-okd-input-default-shadow))
}

.dex-input.readonly .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-default-text-color);
  -webkit-text-fill-color: var(--dex-okd-input-readonly-text-color, var(--dex-okd-input-default-text-color));
  caret-color: var(--dex-okd-input-default-caret-color);
  caret-color: var(--dex-okd-input-readonly-caret-color, var(--dex-okd-input-default-caret-color));
  color: var(--dex-okd-input-default-text-color);
  color: var(--dex-okd-input-readonly-text-color, var(--dex-okd-input-default-text-color))
}

.dex-input.readonly .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  -webkit-text-fill-color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color));
  color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color))
}

.dex-input.readonly .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  -webkit-text-fill-color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color));
  color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color));
  opacity: 1
}

.dex-input.readonly .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-default-placeholder-color);
  -webkit-text-fill-color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color));
  color: var(--dex-okd-input-default-placeholder-color);
  color: var(--dex-okd-input-readonly-placeholder-color, var(--dex-okd-input-default-placeholder-color))
}

.dex-input.readonly.focus .dex-input-box {
  border-color: var(--dex-okd-input-focus-border-color)
}

.dex-input.disabled {
  cursor: not-allowed
}

.dex-input.disabled .dex-input-box {
  background: var(--dex-okd-input-disabled-background);
  border: thin solid var(--dex-okd-input-disabled-border-color);
  box-shadow: var(--dex-okd-input-disabled-shadow)
}

.dex-input.disabled .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-text-color);
  caret-color: var(--dex-okd-input-disabled-caret-color);
  color: var(--dex-okd-input-disabled-text-color)
}

.dex-input.disabled .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-placeholder-color);
  color: var(--dex-okd-input-disabled-placeholder-color)
}

.dex-input.disabled .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-placeholder-color);
  color: var(--dex-okd-input-disabled-placeholder-color);
  opacity: 1
}

.dex-input.disabled .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-placeholder-color);
  color: var(--dex-okd-input-disabled-placeholder-color)
}

.dex-input.disabled .dex-input-input {
  cursor: not-allowed;
  opacity: 1
}

.dex-input.disabled .dex-input-input:-webkit-autofill {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-text-color) !important;
  -webkit-box-shadow: 0 0 0 30px var(--dex-okd-input-disabled-background) inset
}

.dex-input.error .dex-input-box {
  background: var(--dex-okd-input-error-background);
  border: thin solid var(--dex-okd-input-error-border-color);
  box-shadow: var(--dex-okd-input-error-shadow)
}

.dex-input.error .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-error-text-color);
  caret-color: var(--dex-okd-input-error-caret-color);
  color: var(--dex-okd-input-error-text-color)
}

.dex-input.error .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-error-placeholder-color);
  color: var(--dex-okd-input-error-placeholder-color)
}

.dex-input.error .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-error-placeholder-color);
  color: var(--dex-okd-input-error-placeholder-color);
  opacity: 1
}

.dex-input.error .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-error-placeholder-color);
  color: var(--dex-okd-input-error-placeholder-color)
}

.dex-input.error .dex-input-error {
  display: inline-block
}

.dex-input.no-border .dex-input-box {
  background: transparent;
  border: thin solid transparent;
  box-shadow: none
}

.dex-input-textarea-resize-virtual-dom::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0
}

.dex-input-box {
  align-items: center;
  background: var(--dex-okd-input-default-background);
  border: thin solid var(--dex-okd-input-default-border-color);
  box-shadow: var(--dex-okd-input-default-shadow);
  display: flex;
  transition: border-color .3s, box-shadow .3s;
  width: 100%
}

.dex-input-xl>.dex-input-box {
  border-radius: var(--dex-okd-input-xl-border-radius);
  height: var(--dex-okd-input-xl-height);
  padding: 0 8px;
  padding: 0 var(--dex-okd-input-xl-padding-horizontal, 8px)
}

.dex-input-xl>.dex-input-box.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-xl-height)
}

.dex-input-xl>.dex-input-box.no-padding-left {
  padding-left: 0
}

.dex-input-xl>.dex-input-box.no-padding-right {
  padding-right: 0
}

.dex-input-xl>.dex-input-box.ta {
  height: 100%;
  padding: 8px
}

.dex-input-xl>.dex-input-box.auto-resize-auto-height {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-xl-height)
}

.dex-input-xl>.dex-input-box.input-circle {
  border-radius: 100px
}

.dex-input-xl .dex-input-input {
  font-size: var(--dex-okd-input-xl-text-font-size);
  padding: calc(var(--dex-okd-input-xl-height)/2 - var(--dex-okd-input-xl-text-font-size)/2 - 2px) 0
}

.dex-input-xl .dex-input-input::-webkit-input-placeholder {
  font-size: var(--dex-okd-input-xl-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xl .dex-input-input:-moz-placeholder {
  font-size: var(--dex-okd-input-xl-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xl .dex-input-input::-ms-input-placeholder {
  font-size: var(--dex-okd-input-xl-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xl .dex-input-input.ta {
  padding: 0
}

.dex-input-xl .dex-input-input.textarea-auto-resize {
  line-height: var(--dex-okd-input-xl-text-font-size)
}

.dex-input-xl .dex-input-placeholder {
  font-size: var(--dex-okd-input-xl-text-font-size);
  height: calc(var(--dex-okd-input-xl-text-font-size) + 2px);
  line-height: calc(var(--dex-okd-input-xl-text-font-size) + 2px)
}

.dex-input-xl .dex-input.dex-input-place-mode .dex-input-tips-box {
  min-height: calc(var(--dex-okd-input-xl-tip-line-height) + 6px);
  min-height: calc(var(--dex-okd-input-xl-tip-line-height) + var(--dex-okd-input-xl-tip-margin, 6px))
}

.dex-input-xl .dex-input-error {
  font-size: var(--dex-okd-input-xl-error-font-size);
  line-height: var(--dex-okd-input-xl-error-line-height);
  margin-top: 6px;
  margin-top: var(--dex-okd-input-xl-tip-margin, 6px)
}

.dex-input-xl .dex-input-help-text,
.dex-input-xl .dex-input-tips {
  font-size: var(--dex-okd-input-xl-tip-font-size);
  line-height: var(--dex-okd-input-xl-tip-line-height);
  margin-top: 6px;
  margin-top: var(--dex-okd-input-xl-tip-margin, 6px)
}

.dex-input-lg>.dex-input-box {
  border-radius: var(--dex-okd-input-lg-border-radius);
  height: var(--dex-okd-input-lg-height);
  padding: 0 8px;
  padding: 0 var(--dex-okd-input-lg-padding-horizontal, 8px)
}

.dex-input-lg>.dex-input-box.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-lg-height)
}

.dex-input-lg>.dex-input-box.no-padding-left {
  padding-left: 0
}

.dex-input-lg>.dex-input-box.no-padding-right {
  padding-right: 0
}

.dex-input-lg>.dex-input-box.ta {
  height: 100%;
  padding: 8px
}

.dex-input-lg>.dex-input-box.auto-resize-auto-height {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-lg-height)
}

.dex-input-lg>.dex-input-box.input-circle {
  border-radius: 100px
}

.dex-input-lg .dex-input-input {
  font-size: var(--dex-okd-input-lg-text-font-size);
  padding: calc(var(--dex-okd-input-lg-height)/2 - var(--dex-okd-input-lg-text-font-size)/2 - 2px) 0
}

.dex-input-lg .dex-input-input::-webkit-input-placeholder {
  font-size: var(--dex-okd-input-lg-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-lg .dex-input-input:-moz-placeholder {
  font-size: var(--dex-okd-input-lg-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-lg .dex-input-input::-ms-input-placeholder {
  font-size: var(--dex-okd-input-lg-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-lg .dex-input-input.ta {
  padding: 0
}

.dex-input-lg .dex-input-input.textarea-auto-resize {
  line-height: var(--dex-okd-input-lg-text-font-size)
}

.dex-input-lg .dex-input-placeholder {
  font-size: var(--dex-okd-input-lg-text-font-size);
  height: calc(var(--dex-okd-input-lg-text-font-size) + 2px);
  line-height: calc(var(--dex-okd-input-lg-text-font-size) + 2px)
}

.dex-input-lg .dex-input.dex-input-place-mode .dex-input-tips-box {
  min-height: calc(var(--dex-okd-input-lg-tip-line-height) + 6px);
  min-height: calc(var(--dex-okd-input-lg-tip-line-height) + var(--dex-okd-input-lg-tip-margin, 6px))
}

.dex-input-lg .dex-input-error {
  font-size: var(--dex-okd-input-lg-error-font-size);
  line-height: var(--dex-okd-input-lg-error-line-height);
  margin-top: 6px;
  margin-top: var(--dex-okd-input-lg-tip-margin, 6px)
}

.dex-input-lg .dex-input-help-text,
.dex-input-lg .dex-input-tips {
  font-size: var(--dex-okd-input-lg-tip-font-size);
  line-height: var(--dex-okd-input-lg-tip-line-height);
  margin-top: 6px;
  margin-top: var(--dex-okd-input-lg-tip-margin, 6px)
}

.dex-input-xs>.dex-input-box {
  border-radius: var(--dex-okd-input-xs-border-radius);
  height: var(--dex-okd-input-xs-height);
  padding: 0 8px;
  padding: 0 var(--dex-okd-input-xs-padding-horizontal, 8px)
}

.dex-input-xs>.dex-input-box.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-xs-height)
}

.dex-input-xs>.dex-input-box.no-padding-left {
  padding-left: 0
}

.dex-input-xs>.dex-input-box.no-padding-right {
  padding-right: 0
}

.dex-input-xs>.dex-input-box.ta {
  height: 100%;
  padding: 8px
}

.dex-input-xs>.dex-input-box.auto-resize-auto-height {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-xs-height)
}

.dex-input-xs>.dex-input-box.input-circle {
  border-radius: 100px
}

.dex-input-xs .dex-input-input {
  font-size: var(--dex-okd-input-xs-text-font-size);
  padding: calc(var(--dex-okd-input-xs-height)/2 - var(--dex-okd-input-xs-text-font-size)/2 - 2px) 0
}

.dex-input-xs .dex-input-input::-webkit-input-placeholder {
  font-size: var(--dex-okd-input-xs-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xs .dex-input-input:-moz-placeholder {
  font-size: var(--dex-okd-input-xs-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xs .dex-input-input::-ms-input-placeholder {
  font-size: var(--dex-okd-input-xs-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-xs .dex-input-input.ta {
  padding: 0
}

.dex-input-xs .dex-input-input.textarea-auto-resize {
  line-height: var(--dex-okd-input-xs-text-font-size)
}

.dex-input-xs .dex-input-placeholder {
  font-size: var(--dex-okd-input-xs-text-font-size);
  height: calc(var(--dex-okd-input-xs-text-font-size) + 2px);
  line-height: calc(var(--dex-okd-input-xs-text-font-size) + 2px)
}

.dex-input-xs .dex-input.dex-input-place-mode .dex-input-tips-box {
  min-height: calc(var(--dex-okd-input-xs-tip-line-height) + 4px);
  min-height: calc(var(--dex-okd-input-xs-tip-line-height) + var(--dex-okd-input-xs-tip-margin, 4px))
}

.dex-input-xs .dex-input-error {
  font-size: var(--dex-okd-input-xs-error-font-size);
  line-height: var(--dex-okd-input-xs-error-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-xs-tip-margin, 4px)
}

.dex-input-xs .dex-input-help-text,
.dex-input-xs .dex-input-tips {
  font-size: var(--dex-okd-input-xs-tip-font-size);
  line-height: var(--dex-okd-input-xs-tip-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-xs-tip-margin, 4px)
}

.dex-input-sm>.dex-input-box {
  border-radius: var(--dex-okd-input-sm-border-radius);
  height: var(--dex-okd-input-sm-height);
  padding: 0 8px;
  padding: 0 var(--dex-okd-input-sm-padding-horizontal, 8px)
}

.dex-input-sm>.dex-input-box.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-sm-height)
}

.dex-input-sm>.dex-input-box.no-padding-left {
  padding-left: 0
}

.dex-input-sm>.dex-input-box.no-padding-right {
  padding-right: 0
}

.dex-input-sm>.dex-input-box.ta {
  height: 100%;
  padding: 8px
}

.dex-input-sm>.dex-input-box.auto-resize-auto-height {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-sm-height)
}

.dex-input-sm>.dex-input-box.input-circle {
  border-radius: 100px
}

.dex-input-sm .dex-input-input {
  font-size: var(--dex-okd-input-sm-text-font-size);
  padding: calc(var(--dex-okd-input-sm-height)/2 - var(--dex-okd-input-sm-text-font-size)/2 - 2px) 0
}

.dex-input-sm .dex-input-input::-webkit-input-placeholder {
  font-size: var(--dex-okd-input-sm-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-sm .dex-input-input:-moz-placeholder {
  font-size: var(--dex-okd-input-sm-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-sm .dex-input-input::-ms-input-placeholder {
  font-size: var(--dex-okd-input-sm-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-sm .dex-input-input.ta {
  padding: 0
}

.dex-input-sm .dex-input-input.textarea-auto-resize {
  line-height: var(--dex-okd-input-sm-text-font-size)
}

.dex-input-sm .dex-input-placeholder {
  font-size: var(--dex-okd-input-sm-text-font-size);
  height: calc(var(--dex-okd-input-sm-text-font-size) + 2px);
  line-height: calc(var(--dex-okd-input-sm-text-font-size) + 2px)
}

.dex-input-sm .dex-input.dex-input-place-mode .dex-input-tips-box {
  min-height: calc(var(--dex-okd-input-sm-tip-line-height) + 4px);
  min-height: calc(var(--dex-okd-input-sm-tip-line-height) + var(--dex-okd-input-sm-tip-margin, 4px))
}

.dex-input-sm .dex-input-error {
  font-size: var(--dex-okd-input-sm-error-font-size);
  line-height: var(--dex-okd-input-sm-error-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-sm-tip-margin, 4px)
}

.dex-input-sm .dex-input-help-text,
.dex-input-sm .dex-input-tips {
  font-size: var(--dex-okd-input-sm-tip-font-size);
  line-height: var(--dex-okd-input-sm-tip-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-sm-tip-margin, 4px)
}

.dex-input-md>.dex-input-box {
  border-radius: var(--dex-okd-input-md-border-radius);
  height: var(--dex-okd-input-md-height);
  padding: 0 8px;
  padding: 0 var(--dex-okd-input-md-padding-horizontal, 8px)
}

.dex-input-md>.dex-input-box.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-md-height)
}

.dex-input-md>.dex-input-box.no-padding-left {
  padding-left: 0
}

.dex-input-md>.dex-input-box.no-padding-right {
  padding-right: 0
}

.dex-input-md>.dex-input-box.ta {
  height: 100%;
  padding: 8px
}

.dex-input-md>.dex-input-box.auto-resize-auto-height {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: var(--dex-okd-input-md-height)
}

.dex-input-md>.dex-input-box.input-circle {
  border-radius: 100px
}

.dex-input-md .dex-input-input {
  font-size: var(--dex-okd-input-md-text-font-size);
  padding: calc(var(--dex-okd-input-md-height)/2 - var(--dex-okd-input-md-text-font-size)/2 - 2px) 0
}

.dex-input-md .dex-input-input::-webkit-input-placeholder {
  font-size: var(--dex-okd-input-md-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-md .dex-input-input:-moz-placeholder {
  font-size: var(--dex-okd-input-md-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-md .dex-input-input::-ms-input-placeholder {
  font-size: var(--dex-okd-input-md-text-font-size);
  font-weight: 400;
  text-overflow: ellipsis
}

.dex-input-md .dex-input-input.ta {
  padding: 0
}

.dex-input-md .dex-input-input.textarea-auto-resize {
  line-height: var(--dex-okd-input-md-text-font-size)
}

.dex-input-md .dex-input-placeholder {
  font-size: var(--dex-okd-input-md-text-font-size);
  height: calc(var(--dex-okd-input-md-text-font-size) + 2px);
  line-height: calc(var(--dex-okd-input-md-text-font-size) + 2px)
}

.dex-input-md .dex-input.dex-input-place-mode .dex-input-tips-box {
  min-height: calc(var(--dex-okd-input-md-tip-line-height) + 4px);
  min-height: calc(var(--dex-okd-input-md-tip-line-height) + var(--dex-okd-input-md-tip-margin, 4px))
}

.dex-input-md .dex-input-error {
  font-size: var(--dex-okd-input-md-error-font-size);
  line-height: var(--dex-okd-input-md-error-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-md-tip-margin, 4px)
}

.dex-input-md .dex-input-help-text,
.dex-input-md .dex-input-tips {
  font-size: var(--dex-okd-input-md-tip-font-size);
  line-height: var(--dex-okd-input-md-tip-line-height);
  margin-top: 4px;
  margin-top: var(--dex-okd-input-md-tip-margin, 4px)
}

.dex-input-prefix {
  height: 100%
}

.dex-input-prefix .prefix-icon {
  color: var(--dex-okd-input-icon-color)
}

.dex-input-prefix .select {
  padding-right: 8px
}

.dex-input-suffix {
  height: 100%
}

.dex-input-suffix .suffix-icon {
  color: var(--dex-okd-input-icon-color)
}

.dex-input-suffix .clean-icon:hover {
  color: #000;
  color: var(--dex-okd-input-search-suffix-icon-hover-color, #000)
}

.dex-input-suffix .error-icon {
  color: var(--dex-okd-input-error-tips-color)
}

.dex-input-xl .dex-input-prefix .prefix-icon {
  font-size: var(--dex-okd-input-xl-icon-size);
  margin-left: 0;
  margin-right: var(--dex-okd-input-xl-icon-margin)
}

.dex-input-xl .dex-input-suffix .suffix-icon {
  font-size: var(--dex-okd-input-xl-icon-size);
  margin-left: var(--dex-okd-input-xl-icon-margin);
  margin-right: 0
}

.dex-input-lg .dex-input-prefix .prefix-icon {
  font-size: var(--dex-okd-input-lg-icon-size);
  margin-left: 0;
  margin-right: var(--dex-okd-input-lg-icon-margin)
}

.dex-input-lg .dex-input-suffix .suffix-icon {
  font-size: var(--dex-okd-input-lg-icon-size);
  margin-left: var(--dex-okd-input-lg-icon-margin);
  margin-right: 0
}

.dex-input-xs .dex-input-prefix .prefix-icon {
  font-size: var(--dex-okd-input-xs-icon-size);
  margin-left: 0;
  margin-right: var(--dex-okd-input-xs-icon-margin)
}

.dex-input-xs .dex-input-suffix .suffix-icon {
  font-size: var(--dex-okd-input-xs-icon-size);
  margin-left: var(--dex-okd-input-xs-icon-margin);
  margin-right: 0
}

.dex-input-sm .dex-input-prefix .prefix-icon {
  font-size: var(--dex-okd-input-sm-icon-size);
  margin-left: 0;
  margin-right: var(--dex-okd-input-sm-icon-margin)
}

.dex-input-sm .dex-input-suffix .suffix-icon {
  font-size: var(--dex-okd-input-sm-icon-size);
  margin-left: var(--dex-okd-input-sm-icon-margin);
  margin-right: 0
}

.dex-input-md .dex-input-prefix .prefix-icon {
  font-size: var(--dex-okd-input-md-icon-size);
  margin-left: 0;
  margin-right: var(--dex-okd-input-md-icon-margin)
}

.dex-input-md .dex-input-suffix .suffix-icon {
  font-size: var(--dex-okd-input-md-icon-size);
  margin-left: var(--dex-okd-input-md-icon-margin);
  margin-right: 0
}

.dex-input:hover .dex-input-number-suffix:not(.operation-always) {
  opacity: 1
}

.dex-input-number-inner {
  overflow: hidden
}

.dex-input-number-suffix {
  align-items: center;
  border-left: 1px solid var(--dex-okd-input-number-suffix-border-color, var(--dex-okd-input-default-border-color));
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  line-height: 0;
  margin-left: 6px;
  overflow: hidden;
  text-align: center;
  transition: opacity .5s;
  width: 24px
}

.dex-input-number-suffix:not(.operation-always) {
  opacity: 0
}

.dex-input-number-suffix-part {
  align-items: center;
  background: var(--dex-okd-input-number-default-add-icon-background);
  box-sizing: border-box;
  display: flex;
  flex: 1 1;
  justify-content: center;
  width: 100%
}

.dex-input-number-suffix-part .icon {
  color: var(--dex-okd-input-number-default-add-icon-color);
  font-size: 13px
}

.dex-input-number-suffix-part .hover,
.dex-input-number-suffix-part:not(.dex-input-number-suffix-part-disabled):hover {
  background: var(--dex-okd-input-number-hover-add-icon-background)
}

.dex-input-number-suffix-part .hover .icon,
.dex-input-number-suffix-part:not(.dex-input-number-suffix-part-disabled):hover .icon {
  color: var(--dex-okd-input-number-hover-add-icon-color)
}

.dex-input-number-suffix-part .active,
.dex-input-number-suffix-part:not(.dex-input-number-suffix-part-disabled):active {
  background: var(--dex-okd-input-number-active-add-icon-background)
}

.dex-input-number-suffix-part .active .icon,
.dex-input-number-suffix-part:not(.dex-input-number-suffix-part-disabled):active .icon {
  color: var(--dex-okd-input-number-active-add-icon-color)
}

.dex-input-number-suffix-part-disabled {
  cursor: not-allowed
}

.dex-input-number-suffix-line {
  background: var(--dex-okd-input-default-border-color);
  background: var(--dex-okd-input-number-suffix-border-color, var(--dex-okd-input-default-border-color));
  height: 1px;
  width: 100%
}

.dex-input-number-suffix .up {
  transform: rotate(180deg)
}

.dex-input-number-localization {
  text-align: right
}

.dex-input-number-localization-percent {
  color: var(--dex-okd-input-default-text-color);
  display: inline-block
}

.dex-input-xl .dex-input-number-suffix.xl {
  border-bottom-right-radius: calc(var(--dex-okd-input-xl-border-radius) - 1px);
  border-top-right-radius: calc(var(--dex-okd-input-xl-border-radius) - 1px)
}

.dex-input-lg .dex-input-number-suffix.lg {
  border-bottom-right-radius: calc(var(--dex-okd-input-lg-border-radius) - 1px);
  border-top-right-radius: calc(var(--dex-okd-input-lg-border-radius) - 1px)
}

.dex-input-xs .dex-input-number-suffix.xs {
  border-bottom-right-radius: calc(var(--dex-okd-input-xs-border-radius) - 1px);
  border-top-right-radius: calc(var(--dex-okd-input-xs-border-radius) - 1px)
}

.dex-input-sm .dex-input-number-suffix.sm {
  border-bottom-right-radius: calc(var(--dex-okd-input-sm-border-radius) - 1px);
  border-top-right-radius: calc(var(--dex-okd-input-sm-border-radius) - 1px)
}

.dex-input-md .dex-input-number-suffix.md {
  border-bottom-right-radius: calc(var(--dex-okd-input-md-border-radius) - 1px);
  border-top-right-radius: calc(var(--dex-okd-input-md-border-radius) - 1px)
}

.dex-input-suffix .suffix-icon+.dex-input-code-btn,
.dex-input-suffix .suffix-icon+.dex-input-count-down {
  margin-left: var(--dex-okd-input-md-icon-margin)
}

.dex-input-count-down {
  color: var(--dex-okd-input-code-common-count-color)
}

.dex-input input::-webkit-inner-spin-button,
.dex-input input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0
}

.dex-input input[type=number] {
  -moz-appearance: textfield
}

.dex-input-xl .dex-input-count-down {
  font-size: var(--dex-okd-input-code-xl-count-font-size);
  line-height: var(--dex-okd-input-code-xl-count-line-height)
}

.dex-input-lg .dex-input-count-down {
  font-size: var(--dex-okd-input-code-lg-count-font-size);
  line-height: var(--dex-okd-input-code-lg-count-line-height)
}

.dex-input-xs .dex-input-count-down {
  font-size: var(--dex-okd-input-code-xs-count-font-size);
  line-height: var(--dex-okd-input-code-xs-count-line-height)
}

.dex-input-sm .dex-input-count-down {
  font-size: var(--dex-okd-input-code-sm-count-font-size);
  line-height: var(--dex-okd-input-code-sm-count-line-height)
}

.dex-input-md .dex-input-count-down {
  font-size: var(--dex-okd-input-code-md-count-font-size);
  line-height: var(--dex-okd-input-code-md-count-line-height)
}

.dex-input-switch-icon.icon {
  cursor: pointer
}

.dex-input-prefix .dex-input-search-prefix-icon {
  color: var(--dex-okd-input-search-prefix-icon-color);
  cursor: pointer;
  font-size: var(--dex-okd-input-search-prefix-icon-size);
  margin-right: 8px
}

.dex-input-suffix .clean-icon {
  color: var(--dex-okd-input-search-suffix-icon-color);
  cursor: pointer;
  font-size: var(--dex-okd-input-search-suffix-icon-size)
}

.dex-input-search .dex-input-error {
  color: var(--dex-okd-input-search-error-tips-color)
}

.dex-input-search .dex-input-box {
  background-color: var(--dex-okd-input-search-default-background);
  border-color: var(--dex-okd-input-search-default-border-color);
  box-shadow: var(--dex-okd-input-search-default-shadow)
}

.dex-input-search .dex-input-input {
  color: var(--dex-okd-input-search-default-text-color)
}

.dex-input-search .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-default-placeholder-color);
  color: var(--dex-okd-input-search-default-placeholder-color)
}

.dex-input-search .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-default-placeholder-color);
  color: var(--dex-okd-input-search-default-placeholder-color);
  opacity: 1
}

.dex-input-search .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-default-placeholder-color);
  color: var(--dex-okd-input-search-default-placeholder-color)
}

.dex-input-search.hover .dex-input-box,
.dex-input-search:hover .dex-input-box {
  background: var(--dex-okd-input-search-hover-background);
  border: thin solid var(--dex-okd-input-search-hover-border-color);
  box-shadow: var(--dex-okd-input-search-hover-shadow)
}

.dex-input-search.hover .dex-input-box .dex-input-input,
.dex-input-search:hover .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-search-hover-text-color);
  caret-color: var(--dex-okd-input-search-hover-caret-color);
  color: var(--dex-okd-input-search-hover-text-color)
}

.dex-input-search.hover .dex-input-box .dex-input-input::-webkit-input-placeholder,
.dex-input-search:hover .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-hover-placeholder-color);
  color: var(--dex-okd-input-search-hover-placeholder-color)
}

.dex-input-search.hover .dex-input-box .dex-input-input:-moz-placeholder,
.dex-input-search:hover .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-hover-placeholder-color);
  color: var(--dex-okd-input-search-hover-placeholder-color);
  opacity: 1
}

.dex-input-search.hover .dex-input-box .dex-input-input::-ms-input-placeholder,
.dex-input-search:hover .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-hover-placeholder-color);
  color: var(--dex-okd-input-search-hover-placeholder-color)
}

.dex-input-search.focus .dex-input-box {
  background: var(--dex-okd-input-search-focus-background);
  border: thin solid var(--dex-okd-input-search-focus-border-color);
  box-shadow: var(--dex-okd-input-search-focus-shadow)
}

.dex-input-search.focus .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-search-focus-text-color);
  caret-color: var(--dex-okd-input-search-focus-caret-color);
  color: var(--dex-okd-input-search-focus-text-color)
}

.dex-input-search.focus .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-focus-placeholder-color);
  color: var(--dex-okd-input-search-focus-placeholder-color)
}

.dex-input-search.focus .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-focus-placeholder-color);
  color: var(--dex-okd-input-search-focus-placeholder-color);
  opacity: 1
}

.dex-input-search.focus .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-focus-placeholder-color);
  color: var(--dex-okd-input-search-focus-placeholder-color)
}

.dex-input-search.disabled .dex-input-box {
  background: var(--dex-okd-input-search-disabled-background);
  border: thin solid var(--dex-okd-input-search-disabled-border-color);
  box-shadow: var(--dex-okd-input-search-disabled-shadow)
}

.dex-input-search.disabled .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-search-disabled-text-color);
  caret-color: var(--dex-okd-input-search-disabled-caret-color);
  color: var(--dex-okd-input-search-disabled-text-color)
}

.dex-input-search.disabled .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-disabled-placeholder-color);
  color: var(--dex-okd-input-search-disabled-placeholder-color)
}

.dex-input-search.disabled .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-disabled-placeholder-color);
  color: var(--dex-okd-input-search-disabled-placeholder-color);
  opacity: 1
}

.dex-input-search.disabled .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-disabled-placeholder-color);
  color: var(--dex-okd-input-search-disabled-placeholder-color)
}

.dex-input-search.error .dex-input-box {
  background: var(--dex-okd-input-search-error-background);
  border: thin solid var(--dex-okd-input-search-error-border-color);
  box-shadow: var(--dex-okd-input-search-error-shadow)
}

.dex-input-search.error .dex-input-box .dex-input-input {
  -webkit-text-fill-color: var(--dex-okd-input-search-error-text-color);
  caret-color: var(--dex-okd-input-search-error-caret-color);
  color: var(--dex-okd-input-search-error-text-color)
}

.dex-input-search.error .dex-input-box .dex-input-input::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-error-placeholder-color);
  color: var(--dex-okd-input-search-error-placeholder-color)
}

.dex-input-search.error .dex-input-box .dex-input-input:-moz-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-error-placeholder-color);
  color: var(--dex-okd-input-search-error-placeholder-color);
  opacity: 1
}

.dex-input-search.error .dex-input-box .dex-input-input::-ms-input-placeholder {
  -webkit-text-fill-color: var(--dex-okd-input-search-error-placeholder-color);
  color: var(--dex-okd-input-search-error-placeholder-color)
}

.dex-input-verify {
  display: flex;
  flex-direction: row;
  position: relative
}

.dex-input-verify * {
  box-sizing: border-box
}

.dex-input-verify .dex-input-verify-input:focus {
  border: 1px solid var(--dex-okd-input-focus-border-color);
  box-shadow: var(--dex-okd-input-focus-shadow)
}

.dex-input-verify .dex-input-verify-input {
  align-items: center;
  background: transparent;
  background: var(--dex-okd-input-default-background);
  border: thin solid var(--dex-okd-input-default-border-color);
  box-shadow: var(--dex-okd-input-default-shadow);
  caret-color: var(--dex-okd-input-focus-caret-color);
  color: var(--dex-okd-input-default-text-color);
  display: flex;
  font-family: inherit;
  outline: none;
  text-align: center;
  transition: border-color .3s, box-shadow .3s
}

.dex-input-verify .dex-input-verify-input:-webkit-autofill {
  -webkit-text-fill-color: var(--dex-okd-input-default-text-color) !important;
  border: none;
  -webkit-box-shadow: 0 0 0 30px var(--dex-okd-input-default-background) inset
}

.dex-input-verify .dex-input-verify-input.input-xl {
  border-radius: 6px;
  font-size: 26px;
  height: 44px;
  margin-right: 8px;
  width: 40px
}

.dex-input-verify .dex-input-verify-input.input-xl.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 44px
}

.dex-input-verify .dex-input-verify-input.input-xl:last-child {
  margin-right: unset
}

.dex-input-verify .dex-input-verify-input.input-lg {
  border-radius: 6px;
  font-size: 26px;
  height: 44px;
  margin-right: 8px;
  width: 40px
}

.dex-input-verify .dex-input-verify-input.input-lg.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 44px
}

.dex-input-verify .dex-input-verify-input.input-lg:last-child {
  margin-right: unset
}

.dex-input-verify .dex-input-verify-input.input-xs {
  border-radius: 6px;
  font-size: 26px;
  height: 44px;
  margin-right: 8px;
  width: 40px
}

.dex-input-verify .dex-input-verify-input.input-xs.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 44px
}

.dex-input-verify .dex-input-verify-input.input-xs:last-child {
  margin-right: unset
}

.dex-input-verify .dex-input-verify-input.input-sm {
  border-radius: 6px;
  font-size: 20px;
  height: 40px;
  margin-right: 10px;
  width: 40px
}

.dex-input-verify .dex-input-verify-input.input-sm.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 40px
}

.dex-input-verify .dex-input-verify-input.input-sm:last-child {
  margin-right: unset
}

.dex-input-verify .dex-input-verify-input.input-md {
  border-radius: 6px;
  font-size: 26px;
  height: 44px;
  margin-right: 8px;
  width: 40px
}

.dex-input-verify .dex-input-verify-input.input-md.auto-size {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 44px
}

.dex-input-verify .dex-input-verify-input.input-md:last-child {
  margin-right: unset
}

.dex-input-verify .dex-input-verify-input.error {
  border-color: var(--dex-okd-input-verify-error-border-color, var(--dex-okd-input-error-border-color))
}

.dex-input-verify .dex-input-verify-input.disabled {
  -webkit-text-fill-color: var(--dex-okd-input-disabled-text-color);
  background: var(--dex-okd-input-disabled-background);
  border: thin solid var(--dex-okd-input-disabled-border-color);
  box-shadow: var(--dex-okd-input-disabled-shadow);
  caret-color: var(--dex-okd-input-disabled-caret-color);
  color: var(--dex-okd-input-disabled-text-color);
  cursor: not-allowed
}

.dex-notification-default {
  height: 100vh;
  position: fixed;
  width: 100vw
}

.dex-notification-default,
.dex-notification-wrap {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  left: 0;
  line-height: 1;
  margin: 0;
  padding: 0;
  pointer-events: none;
  top: 0
}

.dex-notification-wrap {
  height: 100%;
  position: absolute;
  width: 100%
}

.dex-notification * {
  box-sizing: border-box
}

.dex-notification-container.container-remove {
  animation-duration: .55s;
  animation-name: NotificationOutTop
}

.dex-notification-box {
  animation-duration: .3s;
  background: var(--dex-okd-notification-box-background);
  border: thin solid var(--dex-okd-notification-box-border-color);
  border-radius: var(--dex-okd-notification-box-border-radius);
  box-shadow: var(--dex-okd-notification-box-shadow);
  display: inline-flex;
  line-height: 1;
  margin: calc(var(--dex-okd-notification-box-each-margin)/2) 0;
  max-width: var(--dex-okd-notification-box-max-width);
  min-width: var(--dex-okd-notification-box-min-width);
  overflow: hidden;
  padding: var(--dex-okd-notification-box-padding);
  pointer-events: all;
  position: relative
}

.dex-notification-box.auto-width {
  min-width: var(--dex-okd-notification-box-auto-width-min-width)
}

.dex-notification-box .dex-notification-icon-circle-container {
  display: inline-block;
  height: 20px;
  margin-right: var(--dex-okd-notification-box-icon-text-margin);
  position: relative;
  vertical-align: top;
  width: 20px
}

.dex-notification-box .dex-notification-icon-new {
  font-size: 20px;
  height: 100%;
  width: 100%
}

.dex-notification-box .dex-notification-content {
  display: inline-flex;
  flex: 1 1;
  flex-direction: column;
  flex-wrap: wrap;
  word-break: break-word
}

.dex-notification-box .dex-notification-inline {
  flex-direction: unset
}

.dex-notification-box .dex-notification-inline .dex-notification-action {
  margin-top: 0;
  width: auto
}

.dex-notification-box .dex-notification-title-box {
  display: inline-flex;
  flex: 1 1;
  flex-direction: column;
  flex-wrap: wrap
}

.dex-notification-box .dex-notification-title {
  color: var(--dex-okd-notification-title-color);
  flex: 1 1;
  flex-shrink: 0;
  font-size: var(--dex-okd-notification-title-font-size);
  font-weight: 500;
  line-height: var(--dex-okd-notification-title-line-height);
  text-align: left
}

.dex-notification-box .dex-notification-desc,
.dex-notification-box .dex-notification-text {
  color: var(--dex-okd-notification-text-color);
  font-size: var(--dex-okd-notification-text-font-size);
  line-height: var(--dex-okd-notification-text-line-height)
}

.dex-notification-box .dex-notification-desc {
  margin-top: 4px;
  text-align: left;
  width: 100%
}

.dex-notification-box .dex-notification-action {
  display: inline-block;
  margin-top: 12px;
  pointer-events: auto;
  text-align: left;
  width: 100%
}

.dex-notification-box .dex-notification-action .action-undo {
  color: var(--dex-okd-notification-action-confirm-btn-color)
}

.dex-notification-box .dex-notification-action .action-dismiss,
.dex-notification-box .dex-notification-action .action-undo {
  cursor: pointer;
  font-size: var(--dex-okd-notification-action-font-size);
  font-weight: 500;
  line-height: var(--dex-okd-notification-action-line-height)
}

.dex-notification-box .dex-notification-action .action-dismiss {
  color: var(--dex-okd-notification-action-cancel-btn-color)
}

.dex-notification-box .dex-notification-action .action-undo+.action-dismiss {
  margin-left: 16px
}

.dex-notification-box .dex-notification-close {
  -webkit-tap-highlight-color: transparent;
  color: var(--dex-okd-notification-box-close-icon-color);
  cursor: pointer;
  font-size: 22px;
  height: 22px;
  margin-left: 15px;
  pointer-events: auto;
  position: relative;
  top: -2px;
  width: 22px
}

.dex-notification-box.success .dex-notification-icon-new {
  color: var(--dex-okd-notification-success-icon-color)
}

.dex-notification-box.info .dex-notification-icon-new {
  color: var(--dex-okd-notification-info-icon-color)
}

.dex-notification-box.warn .dex-notification-icon-new {
  color: var(--dex-okd-notification-warn-icon-color)
}

.dex-notification-box.error .dex-notification-icon-new {
  color: var(--dex-okd-notification-error-icon-color)
}

.dex-notification-box.pending .dex-notification-icon-new {
  color: var(--dex-okd-notification-pending-icon-color)
}

.dex-notification.dex-notification-bottom,
.dex-notification.dex-notification-bottom-left,
.dex-notification.dex-notification-bottom-right {
  justify-content: flex-end
}

.dex-notification.dex-notification-bottom .container-remove,
.dex-notification.dex-notification-bottom-left .container-remove,
.dex-notification.dex-notification-bottom-right .container-remove {
  animation-name: NotificationOutBottom
}

.dex-notification.dex-notification-bottom-right .dex-notification-container,
.dex-notification.dex-notification-top-right .dex-notification-container {
  text-align: right
}

.dex-notification.dex-notification-bottom .dex-notification-container,
.dex-notification.dex-notification-top .dex-notification-container {
  text-align: center
}

.dex-notification.dex-notification-bottom-left .dex-notification-box,
.dex-notification.dex-notification-top-left .dex-notification-box {
  animation-name: NotificationInLeft
}

.dex-notification.dex-notification-bottom-right .dex-notification-box,
.dex-notification.dex-notification-top-right .dex-notification-box {
  animation-name: NotificationInRight
}

.dex-notification.dex-notification-top .dex-notification-box {
  animation-name: NotificationInTop
}

.dex-notification.dex-notification-bottom .dex-notification-box {
  animation-name: NotificationInBottom
}

@media (max-width:767px) {

  .dex-notification.dex-notification-bottom-left .dex-notification-container,
  .dex-notification.dex-notification-bottom-right .dex-notification-container,
  .dex-notification.dex-notification-top-left .dex-notification-container,
  .dex-notification.dex-notification-top-right .dex-notification-container {
    text-align: center
  }

  .dex-notification-box {
    min-width: unset;
    width: 100%
  }

  .dex-notification-box.auto-width {
    width: auto
  }
}

.dex-notification-box .dex-notification-icon-pending-poster,
.dex-notification-box .dex-notification-icon-success-poster {
  color: var(--dex-okd-notification-success-icon-color);
  color: var(--dex-okd-color-surface-success-default, var(--dex-okd-notification-success-icon-color));
  font-size: 20px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%)
}

.dex-notification-box .dex-notification-icon-error-poster {
  color: var(--dex-okd-notification-error-icon-color);
  color: var(--dex-okd-color-surface-danger-default, var(--dex-okd-notification-error-icon-color));
  font-size: 20px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%)
}

@keyframes NotificationInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-30px, 0, 0)
  }

  to {
    opacity: 1;
    transform: translateZ(0)
  }
}

@keyframes NotificationInRight {
  0% {
    opacity: 0;
    transform: translate3d(30px, 0, 0)
  }

  to {
    opacity: 1;
    transform: translateZ(0)
  }
}

@keyframes NotificationInTop {
  0% {
    opacity: 0;
    transform: translate3d(0, -30px, 0)
  }

  to {
    opacity: 1;
    transform: translateZ(0)
  }
}

@keyframes NotificationInBottom {
  0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0)
  }

  to {
    opacity: 1;
    transform: translateZ(0)
  }
}

@keyframes NotificationOutBottom {
  0% {
    max-height: 150px;
    opacity: 1;
    transform: translateZ(0)
  }

  to {
    max-height: 0;
    opacity: 0;
    transform: translate3d(0, 30px, 0)
  }
}

@keyframes NotificationOutTop {
  0% {
    max-height: 150px;
    opacity: 1;
    transform: translateZ(0)
  }

  to {
    max-height: 0;
    opacity: 0;
    transform: translate3d(0, -30px, 0)
  }
}

.dex-overflow {
  overflow: hidden
}

.dex-overflow-hidden {
  height: 0;
  opacity: 0;
  overflow-y: hidden;
  pointer-events: none;
  position: absolute
}

.dex-overflow_scroll {
  --dex-okd-inner-overflowscroll-nav-button-bg-color: var(--dex-okd-overflowscroll-icon-bg-start-color, #fff);
  position: relative;
  width: 100%
}

.dex-overflow_scroll-scroll {
  overflow-x: scroll;
  scroll-behavior: smooth;
  scrollbar-width: none;
  white-space: nowrap;
  width: 100%
}

.dex-overflow_scroll-scroll::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0
}

.dex-overflow_scroll-scroll-children {
  display: flex;
  white-space: nowrap;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content
}

.dex-overflow_scroll-nav {
  cursor: pointer
}

.dex-overflow_scroll-nav-icon {
  align-items: center;
  background-image: linear-gradient(270deg, var(--dex-okd-inner-overflowscroll-nav-button-bg-color) 72.22%, hsla(0, 0%, 100%, 0) 100%);
  background-image: linear-gradient(270deg, var(--dex-okd-inner-overflowscroll-nav-button-bg-color) 72.22%, var(--dex-okd-overflowscroll-icon-bg-end-color, hsla(0, 0%, 100%, 0)) 100%);
  color: #929292;
  color: var(--dex-okd-overflowscroll-icon-color, #929292);
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  top: 0;
  visibility: visible;
  width: 36px;
  z-index: 9
}

.dex-overflow_scroll-nav-icon:hover {
  color: #3d3d3d;
  color: var(--dex-okd-overflowscroll-icon-hover-color, #3d3d3d)
}

.dex-overflow_scroll-nav .icon-left {
  background-image: linear-gradient(-270deg, var(--dex-okd-inner-overflowscroll-nav-button-bg-color) 72.22%, hsla(0, 0%, 100%, 0) 100%);
  background-image: linear-gradient(-270deg, var(--dex-okd-inner-overflowscroll-nav-button-bg-color) 72.22%, var(--dex-okd-overflowscroll-icon-bg-end-color, hsla(0, 0%, 100%, 0)) 100%);
  left: 0
}

.dex-overflow_scroll-nav .icon-left-inner {
  transform: rotate(180deg)
}

.dex-overflow_scroll-nav .icon-right {
  right: 0
}

.dex-overflow_scroll-nav .icon-hide {
  visibility: hidden
}

.dex-overflow_scroll-right-alpha {
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff);
  background-image: linear-gradient(90deg, var(--dex-okd-overflowscroll-icon-bg-end-color, hsla(0, 0%, 100%, 0)), var(--dex-okd-overflowscroll-icon-bg-start-color, #fff));
  height: 100%;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  z-index: 9
}

.dex-pagination {
  align-items: center;
  display: flex;
  font-size: var(--dex-okd-pagination-default-font-size);
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.dex-pagination-left {
  display: flex;
  justify-content: flex-start
}

.dex-pagination-center {
  display: flex;
  justify-content: center
}

.dex-pagination-right {
  display: flex;
  justify-content: flex-end
}

@media (max-width:767px) {
  .dex-pagination-hide {
    display: none
  }
}

.dex-pagination>li {
  list-style: none;
  outline: none
}

.dex-pagination>li+li {
  margin-left: var(--dex-okd-pagination-default-margin-horizontal-size)
}

.dex-pagination:after {
  clear: both;
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden
}

.dex-pagination-item {
  align-items: center;
  background: var(--dex-okd-pagination-normal-background-color);
  border-bottom: unset;
  border-radius: var(--dex-okd-pagination-default-border-radius);
  box-sizing: border-box;
  color: var(--dex-okd-pagination-normal-text-new-color);
  cursor: pointer;
  display: flex;
  float: left;
  height: var(--dex-okd-pagination-default-height-size);
  justify-content: center;
  line-height: var(--dex-okd-pagination-default-height-size);
  list-style: none;
  min-width: var(--dex-okd-pagination-default-min-width-size);
  outline: none;
  padding: var(--dex-okd-pagination-default-padding-vertical-size) var(--dex-okd-pagination-default-padding-horizontal-size);
  text-align: center
}

.dex-pagination-item:focus-visible {
  border-radius: var(--dex-okd-pagination-default-border-radius);
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-pagination-item.hover-status,
.dex-pagination-item:hover:not(.dex-pagination-item-active) {
  background: var(--dex-okd-pagination-hover-background-color);
  color: var(--dex-okd-pagination-hover-text-new-color)
}

.dex-pagination-item-active {
  background: var(--dex-okd-pagination-active-background-color);
  color: var(--dex-okd-pagination-active-text-new-color)
}

.dex-pagination-item-link {
  text-decoration: none
}

.dex-pagination-item+.dex-pagination-item {
  margin-left: var(--dex-okd-pagination-default-margin-horizontal-size)
}

.dex-pagination-jump-next,
.dex-pagination-jump-prev {
  margin: 0 var(--dex-okd-pagination-default-margin-horizontal-size);
  outline: none
}

.dex-pagination-jump-next .jump-icon,
.dex-pagination-jump-prev .jump-icon {
  font-size: 18px;
  margin-top: 1px
}

.dex-pagination-jump-next.hover-status .jump-icon,
.dex-pagination-jump-next:hover .jump-icon,
.dex-pagination-jump-prev.hover-status .jump-icon,
.dex-pagination-jump-prev:hover .jump-icon {
  color: var(--dex-okd-pagination-icon-jump-hover-text-color)
}

.dex-pagination-jump-next-no-spacing {
  margin-right: 0
}

.dex-pagination-jump-next,
.dex-pagination-jump-prev,
.dex-pagination-next,
.dex-pagination-prev {
  cursor: pointer;
  float: left;
  height: var(--dex-okd-pagination-default-height-size);
  line-height: var(--dex-okd-pagination-default-height-size);
  list-style: none;
  min-width: var(--dex-okd-pagination-default-min-width-size);
  text-align: center
}

.dex-pagination-jump-next,
.dex-pagination-jump-prev {
  color: var(--dex-okd-pagination-icon-jump-text-color)
}

.dex-pagination-jump-next:focus-visible,
.dex-pagination-jump-prev:focus-visible {
  border-radius: 100px;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-pagination-next:focus-visible,
.dex-pagination-prev:focus-visible {
  border-radius: 100px;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-pagination-next .iconfont,
.dex-pagination-prev .iconfont {
  font-size: var(--dex-okd-pagination-icon-font-size)
}

.dex-pagination-next.hover-status,
.dex-pagination-next:not(.dex-pagination-disabled),
.dex-pagination-prev.hover-status,
.dex-pagination-prev:not(.dex-pagination-disabled) {
  background: var(--dex-okd-pagination-normal-background-color);
  border-radius: var(--dex-okd-pagination-default-border-radius);
  color: var(--dex-okd-pagination-normal-text-new-color)
}

.dex-pagination-next.hover-status:hover,
.dex-pagination-next:not(.dex-pagination-disabled):hover,
.dex-pagination-prev.hover-status:hover,
.dex-pagination-prev:not(.dex-pagination-disabled):hover {
  background: var(--dex-okd-pagination-hover-background-color);
  color: var(--dex-okd-pagination-hover-text-new-color)
}

.dex-pagination-prev {
  margin-right: var(--dex-okd-pagination-default-margin-horizontal-size)
}

.dex-pagination-next {
  margin-left: var(--dex-okd-pagination-default-margin-horizontal-size)
}

.dex-pagination-prev+.dex-pagination-next {
  margin-left: 0
}

.dex-pagination-disabled {
  color: var(--dex-okd-pagination-disabled-text-new-color);
  cursor: not-allowed
}

.dex-pagination-simple-icon {
  margin: 0
}

.dex-pagination-simple-pager {
  color: var(--dex-okd-pagination-simple-default-text-color);
  float: left;
  line-height: var(--dex-okd-pagination-simple-default-line-height);
  list-style: none
}

.dex-pagination-simple-pager-inner {
  margin: var(--dex-okd-pagination-simple-slash-margin-vertical) var(--dex-okd-pagination-simple-slash-margin-horizontal-size)
}

.dex-pagination.dex-pagination-load {
  background: var(--dex-okd-pagination-load-background);
  color: var(--dex-okd-pagination-load-text-color);
  display: none;
  margin: 24px auto
}

@media (max-width:767px) {

  .dex-pagination.dex-pagination-load,
  .dex-pagination.dex-pagination-loading {
    display: flex
  }
}

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

  .dex-pagination-item-after-jump-prev,
  .dex-pagination-item-before-jump-next {
    display: none
  }
}

.dex-overflow_scroll-reversed .dex-overflow_scroll-nav-icon {
  background-image: linear-gradient(270deg, var(--dex-okd-color-gray-900) 72.22%, var(--dex-okd-color-gray-900) 100%);
  background-image: linear-gradient(270deg, var(--dex-okd-overflowscroll-reversed-icon-bg-start-color, var(--dex-okd-color-gray-900)) 72.22%, var(--dex-okd-overflowscroll-reversed-icon-bg-end-color, var(--dex-okd-color-gray-900)) 100%);
  color: #929292;
  color: var(--dex-okd-overflowscroll-reversed-icon-color, #929292)
}

.dex-overflow_scroll-reversed .dex-overflow_scroll-nav-icon:hover {
  color: #e4e2e2;
  color: var(--dex-okd-overflowscroll-reversed-icon-hover-color, #e4e2e2)
}

.dex-overflow_scroll-reversed .icon-left {
  background-image: linear-gradient(-270deg, var(--dex-okd-color-gray-900) 72.22%, var(--dex-okd-color-gray-900) 100%);
  background-image: linear-gradient(-270deg, var(--dex-okd-overflowscroll-reversed-icon-bg-start-color, var(--dex-okd-color-gray-900)) 72.22%, var(--dex-okd-overflowscroll-reversed-icon-bg-end-color, var(--dex-okd-color-gray-900)) 100%)
}

.dex-picker-view {
  box-sizing: border-box;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%
}

.dex-picker-view-button {
  box-sizing: border-box;
  height: 56px;
  padding-right: 23px;
  padding-top: 12px;
  text-align: right
}

.dex-picker-view-wheel-column {
  flex: 1 1;
  height: 100%;
  overflow-y: scroll;
  scrollbar-width: none
}

.dex-picker-view-wheel-column::-webkit-scrollbar {
  display: none
}

.dex-picker-view-wheel-column .column-item-container {
  height: 100%
}

.dex-picker-view-wheel-column-item {
  color: #929292;
  color: var(--dex-okd-pickerview-item-default-font-color, #929292);
  cursor: pointer;
  font-size: 14px;
  font-size: var(--dex-okd-pickerview-item-default-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-pickerview-item-default-font-weight, 400);
  height: 36px;
  height: var(--dex-okd-pickerview-item-default-height, 36px);
  line-height: 36px;
  line-height: var(--dex-okd-pickerview-item-default-height, 36px);
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%
}

.dex-picker-view-wheel-column-item-active {
  color: #000;
  color: var(--dex-okd-pickerview-item-active-font-color, #000);
  font-weight: 500;
  font-weight: var(--dex-okd-pickerview-item-active-font-weight, 500)
}

@media (max-width:767px) {
  .dex-picker-view-wheel-column-item {
    font-size: 16px;
    font-size: var(--dex-okd-pickerview-sm-item-default-font-size, 16px)
  }
}

.dex-picker-view-wheel-column-empty {
  height: calc(50% - 18px);
  height: calc(50% - var(--dex-okd-pickerview-item-default-height, 36px)/2)
}

.dex-picker-view-mask {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1000
}

.dex-picker-view-mask-middle {
  border-bottom: 1px solid #ebebeb;
  border-bottom: 1px solid var(--dex-okd-pickerview-item-active-border-color, #ebebeb);
  border-top: 1px solid #ebebeb;
  border-top: 1px solid var(--dex-okd-pickerview-item-active-border-color, #ebebeb);
  box-sizing: border-box;
  flex: none;
  height: 36px;
  height: var(--dex-okd-pickerview-item-default-height, 36px)
}

.dex-negativebutton-xxs {
  font-size: 12px;
  font-size: var(--dex-okd-negativebutton-xxs-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-negativebutton-xxs-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-negativebutton-xxs-line-height, 16px);
  min-width: 63px;
  min-width: var(--dex-okd-negativebutton-xxs-min-width, 63px);
  padding: 4px 12px;
  padding: var(--dex-okd-negativebutton-xxs-padding-vertical, 4px) var(--dex-okd-negativebutton-xxs-padding-horizontal, 12px)
}

.dex-negativebutton-xxs .dex-negativebutton-loader-circle {
  height: 14px;
  height: var(--dex-okd-negativebutton-xxs-loader-width, 14px);
  width: 14px;
  width: var(--dex-okd-negativebutton-xxs-loader-width, 14px)
}

.dex-negativebutton-xxs .dex-negativebutton-icon {
  font-size: 14px;
  font-size: var(--dex-okd-negativebutton-xxs-icon-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-negativebutton-xxs-font-weight, 400)
}

.dex-negativebutton-xxs .dex-negativebutton-icon-leading {
  margin-right: 6px;
  margin-right: var(--dex-okd-negativebutton-xxs-icon-margin-right, 6px)
}

.dex-negativebutton-xxs .dex-negativebutton-icon-tailing {
  margin-left: 6px;
  margin-left: var(--dex-okd-negativebutton-xxs-icon-margin-right, 6px)
}

.dex-negativebutton-loading-text .dex-negativebutton-loader {
  margin-right: var(--dex-okd-negativebutton-xxs-loader-margin-right, 6px)
}

.dex-negativebutton-xs {
  font-size: 12px;
  font-size: var(--dex-okd-negativebutton-xs-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-negativebutton-xs-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-negativebutton-xs-line-height, 16px);
  min-width: 63px;
  min-width: var(--dex-okd-negativebutton-xs-min-width, 63px);
  padding: 6px 12px;
  padding: var(--dex-okd-negativebutton-xs-padding-vertical, 6px) var(--dex-okd-negativebutton-xs-padding-horizontal, 12px)
}

.dex-negativebutton-xs .dex-negativebutton-loader-circle {
  height: 14px;
  height: var(--dex-okd-negativebutton-xs-loader-width, 14px);
  width: 14px;
  width: var(--dex-okd-negativebutton-xs-loader-width, 14px)
}

.dex-negativebutton-xs .dex-negativebutton-icon {
  font-size: 14px;
  font-size: var(--dex-okd-negativebutton-xs-icon-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-negativebutton-xs-font-weight, 400)
}

.dex-negativebutton-xs .dex-negativebutton-icon-leading {
  margin-right: 6px;
  margin-right: var(--dex-okd-negativebutton-xs-icon-margin-right, 6px)
}

.dex-negativebutton-xs .dex-negativebutton-icon-tailing {
  margin-left: 6px;
  margin-left: var(--dex-okd-negativebutton-xs-icon-margin-right, 6px)
}

.dex-negativebutton-loading-text .dex-negativebutton-loader {
  margin-right: var(--dex-okd-negativebutton-xs-loader-margin-right, 6px)
}

.dex-negativebutton-s {
  font-size: 14px;
  font-size: var(--dex-okd-negativebutton-s-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-negativebutton-s-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-negativebutton-s-line-height, 16px);
  min-width: 72px;
  min-width: var(--dex-okd-negativebutton-s-min-width, 72px);
  padding: 8px 12px;
  padding: var(--dex-okd-negativebutton-s-padding-vertical, 8px) var(--dex-okd-negativebutton-s-padding-horizontal, 12px)
}

.dex-negativebutton-s .dex-negativebutton-loader-circle {
  height: 14px;
  height: var(--dex-okd-negativebutton-s-loader-width, 14px);
  width: 14px;
  width: var(--dex-okd-negativebutton-s-loader-width, 14px)
}

.dex-negativebutton-s .dex-negativebutton-icon {
  font-size: 14px;
  font-size: var(--dex-okd-negativebutton-s-icon-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-negativebutton-s-font-weight, 400)
}

.dex-negativebutton-s .dex-negativebutton-icon-leading {
  margin-right: 6px;
  margin-right: var(--dex-okd-negativebutton-s-icon-margin-right, 6px)
}

.dex-negativebutton-s .dex-negativebutton-icon-tailing {
  margin-left: 6px;
  margin-left: var(--dex-okd-negativebutton-s-icon-margin-right, 6px)
}

.dex-negativebutton-loading-text .dex-negativebutton-loader {
  margin-right: var(--dex-okd-negativebutton-s-loader-margin-right, 6px)
}

.dex-negativebutton-sm {
  font-size: 14px;
  font-size: var(--dex-okd-negativebutton-sm-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-negativebutton-sm-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-negativebutton-sm-line-height, 16px);
  min-width: 81px;
  min-width: var(--dex-okd-negativebutton-sm-min-width, 81px);
  padding: 10px 16px;
  padding: var(--dex-okd-negativebutton-sm-padding-vertical, 10px) var(--dex-okd-negativebutton-sm-padding-horizontal, 16px)
}

.dex-negativebutton-sm .dex-negativebutton-loader-circle {
  height: 16px;
  height: var(--dex-okd-negativebutton-sm-loader-width, 16px);
  width: 16px;
  width: var(--dex-okd-negativebutton-sm-loader-width, 16px)
}

.dex-negativebutton-sm .dex-negativebutton-icon {
  font-size: 16px;
  font-size: var(--dex-okd-negativebutton-sm-icon-size, 16px);
  font-weight: 400;
  font-weight: var(--dex-okd-negativebutton-sm-font-weight, 400)
}

.dex-negativebutton-sm .dex-negativebutton-icon-leading {
  margin-right: 6px;
  margin-right: var(--dex-okd-negativebutton-sm-icon-margin-right, 6px)
}

.dex-negativebutton-sm .dex-negativebutton-icon-tailing {
  margin-left: 6px;
  margin-left: var(--dex-okd-negativebutton-sm-icon-margin-right, 6px)
}

.dex-negativebutton-loading-text .dex-negativebutton-loader {
  margin-right: var(--dex-okd-negativebutton-sm-loader-margin-right, 6px)
}

.dex-negativebutton-md {
  font-size: 14px;
  font-size: var(--dex-okd-negativebutton-md-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-negativebutton-md-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-negativebutton-md-line-height, 16px);
  min-width: 90px;
  min-width: var(--dex-okd-negativebutton-md-min-width, 90px);
  padding: 12px 16px;
  padding: var(--dex-okd-negativebutton-md-padding-vertical, 12px) var(--dex-okd-negativebutton-md-padding-horizontal, 16px)
}

.dex-negativebutton-md .dex-negativebutton-loader-circle {
  height: 16px;
  height: var(--dex-okd-negativebutton-md-loader-width, 16px);
  width: 16px;
  width: var(--dex-okd-negativebutton-md-loader-width, 16px)
}

.dex-negativebutton-md .dex-negativebutton-icon {
  font-size: 16px;
  font-size: var(--dex-okd-negativebutton-md-icon-size, 16px);
  font-weight: 400;
  font-weight: var(--dex-okd-negativebutton-md-font-weight, 400)
}

.dex-negativebutton-md .dex-negativebutton-icon-leading {
  margin-right: 6px;
  margin-right: var(--dex-okd-negativebutton-md-icon-margin-right, 6px)
}

.dex-negativebutton-md .dex-negativebutton-icon-tailing {
  margin-left: 6px;
  margin-left: var(--dex-okd-negativebutton-md-icon-margin-right, 6px)
}

.dex-negativebutton-loading-text .dex-negativebutton-loader {
  margin-right: 6px;
  margin-right: var(--dex-okd-negativebutton-md-loader-margin-right, 6px)
}

.dex-negativebutton-lg {
  font-size: 16px;
  font-size: var(--dex-okd-negativebutton-lg-font-size, 16px);
  font-weight: 500;
  font-weight: var(--dex-okd-negativebutton-lg-font-weight, 500);
  line-height: 20px;
  line-height: var(--dex-okd-negativebutton-lg-line-height, 20px);
  min-width: 108px;
  min-width: var(--dex-okd-negativebutton-lg-min-width, 108px);
  padding: 14px 24px;
  padding: var(--dex-okd-negativebutton-lg-padding-vertical, 14px) var(--dex-okd-negativebutton-lg-padding-horizontal, 24px)
}

.dex-negativebutton-lg .dex-negativebutton-loader-circle {
  height: 20px;
  height: var(--dex-okd-negativebutton-lg-loader-width, 20px);
  width: 20px;
  width: var(--dex-okd-negativebutton-lg-loader-width, 20px)
}

.dex-negativebutton-lg .dex-negativebutton-icon {
  font-size: 20px;
  font-size: var(--dex-okd-negativebutton-lg-icon-size, 20px);
  font-weight: 500;
  font-weight: var(--dex-okd-negativebutton-lg-font-weight, 500)
}

.dex-negativebutton-lg .dex-negativebutton-icon-leading {
  margin-right: 8px;
  margin-right: var(--dex-okd-negativebutton-lg-icon-margin-right, 8px)
}

.dex-negativebutton-lg .dex-negativebutton-icon-tailing {
  margin-left: 8px;
  margin-left: var(--dex-okd-negativebutton-lg-icon-margin-right, 8px)
}

.dex-negativebutton-loading-text .dex-negativebutton-loader {
  margin-right: var(--dex-okd-negativebutton-lg-loader-margin-right, 8px)
}

.dex-negativebutton-xl {
  font-size: 18px;
  font-size: var(--dex-okd-negativebutton-xl-font-size, 18px);
  font-weight: 500;
  font-weight: var(--dex-okd-negativebutton-xl-font-weight, 500);
  line-height: 24px;
  line-height: var(--dex-okd-negativebutton-xl-line-height, 24px);
  min-width: 126px;
  min-width: var(--dex-okd-negativebutton-xl-min-width, 126px);
  padding: 16px 44px;
  padding: var(--dex-okd-negativebutton-xl-padding-vertical, 16px) var(--dex-okd-negativebutton-xl-padding-horizontal, 44px)
}

.dex-negativebutton-xl .dex-negativebutton-loader-circle {
  height: 20px;
  height: var(--dex-okd-negativebutton-xl-loader-width, 20px);
  width: 20px;
  width: var(--dex-okd-negativebutton-xl-loader-width, 20px)
}

.dex-negativebutton-xl .dex-negativebutton-icon {
  font-size: 20px;
  font-size: var(--dex-okd-negativebutton-xl-icon-size, 20px);
  font-weight: 500;
  font-weight: var(--dex-okd-negativebutton-xl-font-weight, 500)
}

.dex-negativebutton-xl .dex-negativebutton-icon-leading {
  margin-right: 8px;
  margin-right: var(--dex-okd-negativebutton-xl-icon-margin-right, 8px)
}

.dex-negativebutton-xl .dex-negativebutton-icon-tailing {
  margin-left: 8px;
  margin-left: var(--dex-okd-negativebutton-xl-icon-margin-right, 8px)
}

.dex-negativebutton-loading-text .dex-negativebutton-loader {
  margin-right: 8px;
  margin-right: var(--dex-okd-negativebutton-xl-loader-margin-right, 8px)
}

.dex-negativebutton {
  align-items: center;
  background-color: var(--dex-okd-color-surface-pnl-loss-default);
  background-color: var(--dex-okd-negativebutton-default-background, var(--dex-okd-color-surface-pnl-loss-default));
  border-radius: 50px;
  border-radius: var(--dex-okd-negativebutton-border-radius, 50px);
  box-sizing: border-box;
  color: var(--dex-okd-color-content-pnl-loss-oncolor);
  color: var(--dex-okd-negativebutton-default-color, var(--dex-okd-color-content-pnl-loss-oncolor));
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  outline: none;
  position: relative;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.dex-negativebutton:focus-visible {
  border-radius: 50px;
  border-radius: var(--dex-okd-negativebutton-border-radius, 50px);
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-negativebutton.hover,
.dex-negativebutton:not(.dex-negativebutton-disabled):not(.dex-negativebutton-loading):hover {
  background-color: var(--dex-okd-color-surface-pnl-loss-hovered);
  background-color: var(--dex-okd-negativebutton-hover-background, var(--dex-okd-color-surface-pnl-loss-hovered))
}

.dex-negativebutton.active,
.dex-negativebutton:not(.dex-negativebutton-disabled):not(.dex-negativebutton-loading):active {
  background-color: var(--dex-okd-color-surface-pnl-loss-pressed);
  background-color: var(--dex-okd-negativebutton-active-background, var(--dex-okd-color-surface-pnl-loss-pressed))
}

.dex-negativebutton-disabled,
.dex-negativebutton.disabled {
  background-color: var(--dex-okd-color-surface-interactive-disabled);
  background-color: var(--dex-okd-negativebutton-disabled-background, var(--dex-okd-color-surface-interactive-disabled));
  color: var(--dex-okd-color-content-interactive-disabled);
  color: var(--dex-okd-negativebutton-disabled-color, var(--dex-okd-color-content-interactive-disabled));
  cursor: not-allowed
}

.dex-negativebutton-loading,
.dex-negativebutton.loading {
  background-color: var(--dex-okd-color-surface-pnl-loss-pressed);
  background-color: var(--dex-okd-negativebutton-loading-background, var(--dex-okd-color-surface-pnl-loss-pressed));
  color: transparent
}

.dex-negativebutton-loading .dex-negativebutton-loader,
.dex-negativebutton.loading .dex-negativebutton-loader {
  display: flex;
  position: absolute
}

.dex-negativebutton-loading-text {
  background-color: var(--dex-okd-color-surface-pnl-loss-pressed);
  background-color: var(--dex-okd-negativebutton-loading-background, var(--dex-okd-color-surface-pnl-loss-pressed));
  display: flex
}

.dex-negativebutton-block,
.dex-negativebutton.block {
  display: flex;
  width: 100%
}

.dex-negativebutton-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-negativebutton-loader-circle {
  border-color: var(--dex-okd-negativebutton-loader-track-color, var(--dex-okd-color-border-interactive-oncolor));
  border-top-color: var(--dex-okd-negativebutton-loader-mark-color, var(--dex-okd-color-content-static-inverse));
  border-width: 2px;
  border-width: var(--dex-okd-negativebutton-loader-border-width, 2px)
}

.dex-powerLink {
  color: inherit;
  text-decoration: none
}

.dex-powerLink-a11y:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-picture {
  display: inline-block
}

.dex-picture-font {
  font-size: 0;
  line-height: 1
}

.dex-picture-cover {
  object-fit: cover
}

.dex-picture-contain {
  object-fit: contain
}

.dex-plain-button {
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: unset
}

.dex-plain-button:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-plain-button[disabled] {
  cursor: not-allowed
}

.dex-plain-button-as-div {
  display: block;
  line-height: inherit;
  width: 100%
}

.dex-popup {
  display: inline-flex;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content
}

.dex-popup-layer {
  display: none;
  opacity: 0;
  outline: none;
  position: absolute;
  transition: opacity .3s
}

.dex-popup-layer-visible {
  display: block;
  opacity: 1
}

.dex-popup-layer-arrow-inner {
  border: 1px solid transparent;
  border-radius: 2px;
  box-sizing: border-box;
  display: block;
  height: 100%;
  transform: rotate(45deg);
  transform-origin: center;
  width: 100%
}

.dex-popup-layer.dex-popup-overflow[data-popper-reference-hidden] {
  pointer-events: none;
  visibility: hidden
}

.dex-popup-white-board .dex-popup-layer-arrow-inner,
.dex-popup-white-board-content {
  background-color: var(--dex-okd-popup-white-board-background);
  border: 1px solid rgba(0, 0, 0, .05)
}

.dex-popup-white-board-content {
  border-radius: 4px;
  box-shadow: var(--dex-okd-popup-white-board-shadow)
}

.dex-popup-placement-lg-top {
  padding-bottom: 9px
}

.dex-popup-placement-lg-bottom {
  padding-top: 9px
}

.dex-popup-placement-lg-left {
  padding-right: 9px
}

.dex-popup-placement-lg-right {
  padding-left: 9px
}

.dex-popup-arrow-lg .dex-popup-layer-arrow {
  height: 14px;
  width: 14px
}

.dex-popup-arrow-lg[data-popper-placement*=top] {
  padding: 0 0 9px
}

.dex-popup-arrow-lg[data-popper-placement*=bottom] {
  padding: 9px 0 0
}

.dex-popup-arrow-lg[data-popper-placement*=left] {
  padding: 0 9px 0 0
}

.dex-popup-arrow-lg[data-popper-placement*=right] {
  padding: 0 0 0 9px
}

.dex-popup-arrow-lg[data-popper-placement*=top] .dex-popup-layer-arrow {
  margin-top: -17px;
  top: 100%
}

.dex-popup-arrow-lg[data-popper-placement*=top] .dex-popup-layer-arrow-inner {
  border-left-color: transparent !important;
  border-top-color: transparent !important
}

.dex-popup-arrow-lg[data-popper-placement*=right] .dex-popup-layer-arrow {
  margin-right: -17px;
  right: 100%
}

.dex-popup-arrow-lg[data-popper-placement*=right] .dex-popup-layer-arrow-inner {
  border-right-color: transparent !important;
  border-top-color: transparent !important
}

.dex-popup-arrow-lg[data-popper-placement*=bottom] .dex-popup-layer-arrow {
  bottom: 100%;
  margin-bottom: -17px
}

.dex-popup-arrow-lg[data-popper-placement*=bottom] .dex-popup-layer-arrow-inner {
  border-bottom-color: transparent !important;
  border-right-color: transparent !important
}

.dex-popup-arrow-lg[data-popper-placement*=left] .dex-popup-layer-arrow {
  left: 100%;
  margin-left: -17px
}

.dex-popup-arrow-lg[data-popper-placement*=left] .dex-popup-layer-arrow-inner {
  border-bottom-color: transparent !important;
  border-left-color: transparent !important
}

.dex-popup-placement-md-top {
  padding-bottom: 7px
}

.dex-popup-placement-md-bottom {
  padding-top: 7px
}

.dex-popup-placement-md-left {
  padding-right: 7px
}

.dex-popup-placement-md-right {
  padding-left: 7px
}

.dex-popup-arrow-md .dex-popup-layer-arrow {
  height: 10px;
  width: 10px
}

.dex-popup-arrow-md[data-popper-placement*=top] {
  padding: 0 0 7px
}

.dex-popup-arrow-md[data-popper-placement*=bottom] {
  padding: 7px 0 0
}

.dex-popup-arrow-md[data-popper-placement*=left] {
  padding: 0 7px 0 0
}

.dex-popup-arrow-md[data-popper-placement*=right] {
  padding: 0 0 0 7px
}

.dex-popup-arrow-md[data-popper-placement*=top] .dex-popup-layer-arrow {
  margin-top: -13px;
  top: 100%
}

.dex-popup-arrow-md[data-popper-placement*=top] .dex-popup-layer-arrow-inner {
  border-left-color: transparent !important;
  border-top-color: transparent !important
}

.dex-popup-arrow-md[data-popper-placement*=right] .dex-popup-layer-arrow {
  margin-right: -13px;
  right: 100%
}

.dex-popup-arrow-md[data-popper-placement*=right] .dex-popup-layer-arrow-inner {
  border-right-color: transparent !important;
  border-top-color: transparent !important
}

.dex-popup-arrow-md[data-popper-placement*=bottom] .dex-popup-layer-arrow {
  bottom: 100%;
  margin-bottom: -13px
}

.dex-popup-arrow-md[data-popper-placement*=bottom] .dex-popup-layer-arrow-inner {
  border-bottom-color: transparent !important;
  border-right-color: transparent !important
}

.dex-popup-arrow-md[data-popper-placement*=left] .dex-popup-layer-arrow {
  left: 100%;
  margin-left: -13px
}

.dex-popup-arrow-md[data-popper-placement*=left] .dex-popup-layer-arrow-inner {
  border-bottom-color: transparent !important;
  border-left-color: transparent !important
}

.dex-popover .dex-popup-layer-content {
  padding: 0
}

.dex-popover .dex-popup-layer-arrow-inner {
  background-color: var(--dex-okd-popover-layer-background);
  border-color: var(--dex-okd-popover-layer-border-color)
}

.dex-popover-arrow-special .dex-popup-layer-arrow[change-color] .dex-popup-layer-arrow-inner {
  background-color: var(--dex-okd-popover-title-background)
}

.dex-popover-arrow-special[data-popper-placement*=bottom] .dex-popup-layer-arrow-inner {
  background-color: var(--dex-okd-popover-title-background) !important
}

.dex-popover-content {
  background-color: var(--dex-okd-popover-layer-background);
  border: 1px solid var(--dex-okd-popover-layer-border-color);
  border-radius: 4px;
  box-shadow: var(--dex-okd-popover-common-layer-shadow);
  max-width: var(--dex-okd-popover-common-layer-width)
}

.dex-popover-content-title {
  background-color: var(--dex-okd-popover-title-background);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  color: var(--dex-okd-popover-title-color);
  font-weight: 500;
  line-height: 20px;
  padding: 8px 12px;
  position: relative
}

.dex-popover-content-desc {
  background-color: var(--dex-okd-popover-desc-background);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  color: var(--dex-okd-popover-desc-color);
  overflow: hidden;
  padding: var(--dex-okd-popover-common-padding)
}

.dex-popover-content-desc .dex-popover-content-desc-link {
  color: var(--dex-okd-popover-link-color);
  cursor: pointer;
  font-weight: 500;
  padding-left: 4px;
  text-decoration: underline
}

.dex-popover-content-desc-button {
  color: var(--dex-okd-popover-action-color);
  cursor: pointer;
  float: right;
  font-weight: 500;
  margin-top: 20px;
  overflow: hidden;
  padding: 0 10px;
  text-align: right
}

.dex-popover-content-desc-radius {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px
}

.dex-popover-md .dex-popover-content {
  font-size: var(--dex-okd-popover-md-font-size);
  line-height: var(--dex-okd-popover-md-line-height)
}

.dex-popover-md .dex-popover-content-title {
  font-size: var(--dex-okd-popover-md-title-font-size)
}

.dex-popover-sm .dex-popover-content {
  font-size: var(--dex-okd-popover-sm-font-size);
  line-height: var(--dex-okd-popover-sm-line-height)
}

.dex-popover-sm .dex-popover-content-title {
  font-size: var(--dex-okd-popover-sm-title-font-size)
}

.dex-positivebutton-xxs {
  font-size: 12px;
  font-size: var(--dex-okd-positivebutton-xxs-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-xxs-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-positivebutton-xxs-line-height, 16px);
  min-width: 63px;
  min-width: var(--dex-okd-positivebutton-xxs-min-width, 63px);
  padding: 4px 12px;
  padding: var(--dex-okd-positivebutton-xxs-padding-vertical, 4px) var(--dex-okd-positivebutton-xxs-padding-horizontal, 12px)
}

.dex-positivebutton-xxs .dex-positivebutton-loader-circle {
  height: 14px;
  height: var(--dex-okd-positivebutton-xxs-loader-width, 14px);
  width: 14px;
  width: var(--dex-okd-positivebutton-xxs-loader-width, 14px)
}

.dex-positivebutton-xxs .dex-positivebutton-icon {
  font-size: 14px;
  font-size: var(--dex-okd-positivebutton-xxs-icon-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-xxs-font-weight, 400)
}

.dex-positivebutton-xxs .dex-positivebutton-icon-leading {
  margin-right: 6px;
  margin-right: var(--dex-okd-positivebutton-xxs-icon-margin-right, 6px)
}

.dex-positivebutton-xxs .dex-positivebutton-icon-tailing {
  margin-left: 6px;
  margin-left: var(--dex-okd-positivebutton-xxs-icon-margin-right, 6px)
}

.dex-positivebutton-loading-text .dex-positivebutton-loader {
  margin-right: var(--dex-okd-positivebutton-xxs-loader-margin-right, 6px)
}

.dex-positivebutton-xs {
  font-size: 12px;
  font-size: var(--dex-okd-positivebutton-xs-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-xs-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-positivebutton-xs-line-height, 16px);
  min-width: 63px;
  min-width: var(--dex-okd-positivebutton-xs-min-width, 63px);
  padding: 6px 12px;
  padding: var(--dex-okd-positivebutton-xs-padding-vertical, 6px) var(--dex-okd-positivebutton-xs-padding-horizontal, 12px)
}

.dex-positivebutton-xs .dex-positivebutton-loader-circle {
  height: 14px;
  height: var(--dex-okd-positivebutton-xs-loader-width, 14px);
  width: 14px;
  width: var(--dex-okd-positivebutton-xs-loader-width, 14px)
}

.dex-positivebutton-xs .dex-positivebutton-icon {
  font-size: 14px;
  font-size: var(--dex-okd-positivebutton-xs-icon-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-xs-font-weight, 400)
}

.dex-positivebutton-xs .dex-positivebutton-icon-leading {
  margin-right: 6px;
  margin-right: var(--dex-okd-positivebutton-xs-icon-margin-right, 6px)
}

.dex-positivebutton-xs .dex-positivebutton-icon-tailing {
  margin-left: 6px;
  margin-left: var(--dex-okd-positivebutton-xs-icon-margin-right, 6px)
}

.dex-positivebutton-loading-text .dex-positivebutton-loader {
  margin-right: var(--dex-okd-positivebutton-xs-loader-margin-right, 6px)
}

.dex-positivebutton-s {
  font-size: 14px;
  font-size: var(--dex-okd-positivebutton-s-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-s-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-positivebutton-s-line-height, 16px);
  min-width: 72px;
  min-width: var(--dex-okd-positivebutton-s-min-width, 72px);
  padding: 8px 12px;
  padding: var(--dex-okd-positivebutton-s-padding-vertical, 8px) var(--dex-okd-positivebutton-s-padding-horizontal, 12px)
}

.dex-positivebutton-s .dex-positivebutton-loader-circle {
  height: 14px;
  height: var(--dex-okd-positivebutton-s-loader-width, 14px);
  width: 14px;
  width: var(--dex-okd-positivebutton-s-loader-width, 14px)
}

.dex-positivebutton-s .dex-positivebutton-icon {
  font-size: 14px;
  font-size: var(--dex-okd-positivebutton-s-icon-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-s-font-weight, 400)
}

.dex-positivebutton-s .dex-positivebutton-icon-leading {
  margin-right: 6px;
  margin-right: var(--dex-okd-positivebutton-s-icon-margin-right, 6px)
}

.dex-positivebutton-s .dex-positivebutton-icon-tailing {
  margin-left: 6px;
  margin-left: var(--dex-okd-positivebutton-s-icon-margin-right, 6px)
}

.dex-positivebutton-loading-text .dex-positivebutton-loader {
  margin-right: var(--dex-okd-positivebutton-s-loader-margin-right, 6px)
}

.dex-positivebutton-sm {
  font-size: 14px;
  font-size: var(--dex-okd-positivebutton-sm-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-sm-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-positivebutton-sm-line-height, 16px);
  min-width: 81px;
  min-width: var(--dex-okd-positivebutton-sm-min-width, 81px);
  padding: 10px 16px;
  padding: var(--dex-okd-positivebutton-sm-padding-vertical, 10px) var(--dex-okd-positivebutton-sm-padding-horizontal, 16px)
}

.dex-positivebutton-sm .dex-positivebutton-loader-circle {
  height: 16px;
  height: var(--dex-okd-positivebutton-sm-loader-width, 16px);
  width: 16px;
  width: var(--dex-okd-positivebutton-sm-loader-width, 16px)
}

.dex-positivebutton-sm .dex-positivebutton-icon {
  font-size: 16px;
  font-size: var(--dex-okd-positivebutton-sm-icon-size, 16px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-sm-font-weight, 400)
}

.dex-positivebutton-sm .dex-positivebutton-icon-leading {
  margin-right: 6px;
  margin-right: var(--dex-okd-positivebutton-sm-icon-margin-right, 6px)
}

.dex-positivebutton-sm .dex-positivebutton-icon-tailing {
  margin-left: 6px;
  margin-left: var(--dex-okd-positivebutton-sm-icon-margin-right, 6px)
}

.dex-positivebutton-loading-text .dex-positivebutton-loader {
  margin-right: var(--dex-okd-positivebutton-sm-loader-margin-right, 6px)
}

.dex-positivebutton-md {
  font-size: 14px;
  font-size: var(--dex-okd-positivebutton-md-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-md-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-positivebutton-md-line-height, 16px);
  min-width: 90px;
  min-width: var(--dex-okd-positivebutton-md-min-width, 90px);
  padding: 12px 16px;
  padding: var(--dex-okd-positivebutton-md-padding-vertical, 12px) var(--dex-okd-positivebutton-md-padding-horizontal, 16px)
}

.dex-positivebutton-md .dex-positivebutton-loader-circle {
  height: 16px;
  height: var(--dex-okd-positivebutton-md-loader-width, 16px);
  width: 16px;
  width: var(--dex-okd-positivebutton-md-loader-width, 16px)
}

.dex-positivebutton-md .dex-positivebutton-icon {
  font-size: 16px;
  font-size: var(--dex-okd-positivebutton-md-icon-size, 16px);
  font-weight: 400;
  font-weight: var(--dex-okd-positivebutton-md-font-weight, 400)
}

.dex-positivebutton-md .dex-positivebutton-icon-leading {
  margin-right: 6px;
  margin-right: var(--dex-okd-positivebutton-md-icon-margin-right, 6px)
}

.dex-positivebutton-md .dex-positivebutton-icon-tailing {
  margin-left: 6px;
  margin-left: var(--dex-okd-positivebutton-md-icon-margin-right, 6px)
}

.dex-positivebutton-loading-text .dex-positivebutton-loader {
  margin-right: 6px;
  margin-right: var(--dex-okd-positivebutton-md-loader-margin-right, 6px)
}

.dex-positivebutton-lg {
  font-size: 16px;
  font-size: var(--dex-okd-positivebutton-lg-font-size, 16px);
  font-weight: 500;
  font-weight: var(--dex-okd-positivebutton-lg-font-weight, 500);
  line-height: 20px;
  line-height: var(--dex-okd-positivebutton-lg-line-height, 20px);
  min-width: 108px;
  min-width: var(--dex-okd-positivebutton-lg-min-width, 108px);
  padding: 14px 24px;
  padding: var(--dex-okd-positivebutton-lg-padding-vertical, 14px) var(--dex-okd-positivebutton-lg-padding-horizontal, 24px)
}

.dex-positivebutton-lg .dex-positivebutton-loader-circle {
  height: 20px;
  height: var(--dex-okd-positivebutton-lg-loader-width, 20px);
  width: 20px;
  width: var(--dex-okd-positivebutton-lg-loader-width, 20px)
}

.dex-positivebutton-lg .dex-positivebutton-icon {
  font-size: 20px;
  font-size: var(--dex-okd-positivebutton-lg-icon-size, 20px);
  font-weight: 500;
  font-weight: var(--dex-okd-positivebutton-lg-font-weight, 500)
}

.dex-positivebutton-lg .dex-positivebutton-icon-leading {
  margin-right: 8px;
  margin-right: var(--dex-okd-positivebutton-lg-icon-margin-right, 8px)
}

.dex-positivebutton-lg .dex-positivebutton-icon-tailing {
  margin-left: 8px;
  margin-left: var(--dex-okd-positivebutton-lg-icon-margin-right, 8px)
}

.dex-positivebutton-loading-text .dex-positivebutton-loader {
  margin-right: var(--dex-okd-positivebutton-lg-loader-margin-right, 8px)
}

.dex-positivebutton-xl {
  font-size: 18px;
  font-size: var(--dex-okd-positivebutton-xl-font-size, 18px);
  font-weight: 500;
  font-weight: var(--dex-okd-positivebutton-xl-font-weight, 500);
  line-height: 24px;
  line-height: var(--dex-okd-positivebutton-xl-line-height, 24px);
  min-width: 126px;
  min-width: var(--dex-okd-positivebutton-xl-min-width, 126px);
  padding: 16px 44px;
  padding: var(--dex-okd-positivebutton-xl-padding-vertical, 16px) var(--dex-okd-positivebutton-xl-padding-horizontal, 44px)
}

.dex-positivebutton-xl .dex-positivebutton-loader-circle {
  height: 20px;
  height: var(--dex-okd-positivebutton-xl-loader-width, 20px);
  width: 20px;
  width: var(--dex-okd-positivebutton-xl-loader-width, 20px)
}

.dex-positivebutton-xl .dex-positivebutton-icon {
  font-size: 20px;
  font-size: var(--dex-okd-positivebutton-xl-icon-size, 20px);
  font-weight: 500;
  font-weight: var(--dex-okd-positivebutton-xl-font-weight, 500)
}

.dex-positivebutton-xl .dex-positivebutton-icon-leading {
  margin-right: 8px;
  margin-right: var(--dex-okd-positivebutton-xl-icon-margin-right, 8px)
}

.dex-positivebutton-xl .dex-positivebutton-icon-tailing {
  margin-left: 8px;
  margin-left: var(--dex-okd-positivebutton-xl-icon-margin-right, 8px)
}

.dex-positivebutton-loading-text .dex-positivebutton-loader {
  margin-right: 8px;
  margin-right: var(--dex-okd-positivebutton-xl-loader-margin-right, 8px)
}

.dex-positivebutton {
  align-items: center;
  background-color: var(--dex-okd-color-surface-pnl-profit-default);
  background-color: var(--dex-okd-positivebutton-default-background, var(--dex-okd-color-surface-pnl-profit-default));
  border-radius: 50px;
  border-radius: var(--dex-okd-positivebutton-border-radius, 50px);
  box-sizing: border-box;
  color: var(--dex-okd-color-content-pnl-profit-oncolor);
  color: var(--dex-okd-positivebutton-default-color, var(--dex-okd-color-content-pnl-profit-oncolor));
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  outline: none;
  position: relative;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.dex-positivebutton:focus-visible {
  border-radius: 50px;
  border-radius: var(--dex-okd-positivebutton-border-radius, 50px);
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-positivebutton.hover,
.dex-positivebutton:not(.dex-positivebutton-disabled):not(.dex-positivebutton-loading):hover {
  background-color: var(--dex-okd-color-surface-pnl-profit-hovered);
  background-color: var(--dex-okd-positivebutton-hover-background, var(--dex-okd-color-surface-pnl-profit-hovered))
}

.dex-positivebutton.active,
.dex-positivebutton:not(.dex-positivebutton-disabled):not(.dex-positivebutton-loading):active {
  background-color: var(--dex-okd-color-surface-pnl-profit-pressed);
  background-color: var(--dex-okd-positivebutton-active-background, var(--dex-okd-color-surface-pnl-profit-pressed))
}

.dex-positivebutton-disabled,
.dex-positivebutton.disabled {
  background-color: var(--dex-okd-color-surface-interactive-disabled);
  background-color: var(--dex-okd-positivebutton-disabled-background, var(--dex-okd-color-surface-interactive-disabled));
  color: var(--dex-okd-color-content-interactive-disabled);
  color: var(--dex-okd-positivebutton-disabled-color, var(--dex-okd-color-content-interactive-disabled));
  cursor: not-allowed
}

.dex-positivebutton-loading,
.dex-positivebutton.loading {
  background-color: var(--dex-okd-color-surface-pnl-profit-pressed);
  background-color: var(--dex-okd-positivebutton-loading-background, var(--dex-okd-color-surface-pnl-profit-pressed));
  color: transparent
}

.dex-positivebutton-loading .dex-positivebutton-loader,
.dex-positivebutton.loading .dex-positivebutton-loader {
  display: flex;
  position: absolute
}

.dex-positivebutton-loading-text {
  background-color: var(--dex-okd-color-surface-pnl-profit-pressed);
  background-color: var(--dex-okd-positivebutton-loading-background, var(--dex-okd-color-surface-pnl-profit-pressed));
  display: flex
}

.dex-positivebutton-block,
.dex-positivebutton.block {
  display: flex;
  width: 100%
}

.dex-positivebutton-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.dex-positivebutton-loader-circle {
  border-color: var(--dex-okd-positivebutton-loader-track-color, var(--dex-okd-color-content-pnl-profit-oncolor));
  border-top-color: var(--dex-okd-positivebutton-loader-mark-color, var(--dex-okd-color-border-pnl-profit-default));
  border-width: 2px;
  border-width: var(--dex-okd-positivebutton-loader-border-width, 2px)
}

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

  to {
    transform: rotate(1turn)
  }
}

.dex-switch {
  background: var(--dex-okd-switch-off-default-track-color);
  border: 0;
  border-radius: calc(var(--dex-okd-switch-md-height)/2);
  box-sizing: border-box;
  cursor: pointer;
  height: var(--dex-okd-switch-md-height);
  outline: none;
  position: relative;
  transition: left .36s;
  vertical-align: middle;
  width: var(--dex-okd-switch-md-width)
}

.dex-switch:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-switch-handler {
  align-items: center;
  background: var(--dex-okd-switch-off-default-handler-color);
  border-radius: 100%;
  box-shadow: var(--dex-okd-switch-off-default-handler-shadow);
  display: flex;
  height: var(--dex-okd-switch-md-handler-size);
  justify-content: center;
  left: calc((var(--dex-okd-switch-md-height) - var(--dex-okd-switch-md-handler-size))/2);
  position: absolute;
  top: calc((var(--dex-okd-switch-md-height) - var(--dex-okd-switch-md-handler-size))/2);
  transition: left .36s;
  width: var(--dex-okd-switch-md-handler-size)
}

.dex-switch .switch-handler-loader {
  height: calc(var(--dex-okd-switch-md-handler-size) - 6px);
  width: calc(var(--dex-okd-switch-md-handler-size) - 6px)
}

.dex-switch .switch-on-loader {
  border-color: var(--dex-okd-switch-on-loading-handler-color);
  border-top-color: var(--dex-okd-switch-on-loading-mark-color)
}

.dex-switch .switch-off-loader {
  border-color: var(--dex-okd-switch-off-loading-handler-color);
  border-top-color: var(--dex-okd-switch-off-loading-mark-color)
}

.dex-switch-label {
  color: var(--dex-okd-switch-label-font-color);
  font-family: inherit;
  font-size: var(--dex-okd-switch-md-label-size);
  font-weight: 500;
  margin-left: 18px;
  vertical-align: middle
}

.dex-switch-small {
  height: var(--dex-okd-switch-sm-height);
  width: var(--dex-okd-switch-sm-width)
}

.dex-switch.dex-switch-small .dex-switch-handler {
  height: var(--dex-okd-switch-sm-handler-size);
  width: var(--dex-okd-switch-sm-handler-size)
}

.dex-switch.dex-switch-small .switch-handler-loader {
  height: calc(var(--dex-okd-switch-sm-handler-size) - 2px);
  width: calc(var(--dex-okd-switch-sm-handler-size) - 2px)
}

.dex-switch-small+.dex-switch-label {
  font-size: var(--dex-okd-switch-sm-label-size)
}

.dex-switch.dex-switch-loading {
  background-color: var(--dex-okd-switch-off-loading-track-color);
  cursor: not-allowed
}

.dex-switch.dex-switch-select {
  background-color: var(--dex-okd-switch-on-default-track-color)
}

.dex-switch.dex-switch-select .dex-switch-handler {
  background: var(--dex-okd-switch-on-default-handler-color);
  box-shadow: var(--dex-okd-switch-on-default-handler-shadow);
  left: calc((var(--dex-okd-switch-md-height) - var(--dex-okd-switch-md-handler-size))/2 + var(--dex-okd-switch-md-width) - (var(--dex-okd-switch-md-height) - var(--dex-okd-switch-md-handler-size))/2*2 - var(--dex-okd-switch-md-handler-size))
}

.dex-switch.dex-switch-select.dex-switch-small .dex-switch-handler {
  left: calc((var(--dex-okd-switch-md-height) - var(--dex-okd-switch-md-handler-size))/2 + var(--dex-okd-switch-sm-width) - (var(--dex-okd-switch-sm-height) - var(--dex-okd-switch-sm-handler-size))/2*2 - var(--dex-okd-switch-sm-handler-size))
}

.dex-switch.dex-switch-select.dex-switch-loading {
  background-color: var(--dex-okd-switch-on-loading-track-color)
}

.dex-switch.dex-switch-disabled {
  background-color: var(--dex-okd-switch-off-disabled-track-color);
  cursor: not-allowed
}

.dex-switch.dex-switch-disabled .dex-switch-handler {
  background: var(--dex-okd-switch-off-disabled-handler-color);
  box-shadow: var(--dex-okd-switch-off-disabled-handler-shadow)
}

.dex-switch.dex-switch-select.dex-switch-disabled {
  background-color: var(--dex-okd-switch-on-disabled-track-color)
}

.dex-switch.dex-switch-select.dex-switch-disabled .dex-switch-handler {
  background: var(--dex-okd-switch-on-disabled-handler-color);
  box-shadow: var(--dex-okd-switch-on-disabled-handler-shadow)
}

.dex-switch-theme-icon.add-weight {
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-switch-theme-icon-color, var(--dex-okd-color-content-primary));
  font-size: 12px
}

.dex-steps {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  box-sizing: border-box;
  cursor: inherit;
  display: flex;
  font-family: inherit;
  font-weight: 500;
  justify-content: center;
  margin-bottom: 0;
  outline: none;
  position: relative;
  text-decoration: none;
  touch-action: manipulation;
  transition: all .3s cubic-bezier(.165, .84, .44, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%
}

.dex-steps-item {
  display: inline-block;
  flex: 1 1;
  overflow: hidden;
  position: relative;
  vertical-align: top
}

.dex-steps-item-button {
  width: 100%
}

.dex-steps-item-container {
  outline: none
}

.dex-steps-item:last-child {
  flex: none
}

.dex-steps-item:last-child>.dex-steps-item-content:after,
.dex-steps-item:last-child>.dex-steps-item-tail {
  display: none
}

.dex-steps-item-content,
.dex-steps-item-icon {
  display: inline-block;
  vertical-align: top
}

.dex-steps-item-content {
  margin-left: var(--dex-okd-steps-horizontal-content-margin-left);
  position: relative
}

.dex-steps-item-content:after {
  background-image: linear-gradient(270deg, transparent 0, transparent 50%, #dbdbdb 0, #dbdbdb);
  background-image: linear-gradient(to left, transparent 0, transparent 50%, var(--dex-okd-steps-process-tail-color, #dbdbdb) 50%, var(--dex-okd-steps-process-tail-color, #dbdbdb) 100%);
  background-repeat: repeat-x;
  background-size: 4px 1px;
  background-size: var(--dex-okd-steps-common-waiting-border-width, 4px) 1px;
  content: "";
  display: block;
  height: 1px;
  left: 100%;
  position: absolute;
  top: 10px;
  width: 9999px
}

.dex-steps-item-content-no-left {
  margin-left: 0
}

.dex-steps-item-icon {
  align-items: center;
  border: 1px solid;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-flex;
  font-size: var(--dex-okd-steps-common-icon-font-size);
  height: var(--dex-okd-steps-common-icon-size);
  justify-content: center;
  line-height: var(--dex-okd-steps-common-icon-size);
  text-align: center;
  transition: background-color .3s, border-color .3s;
  width: var(--dex-okd-steps-common-icon-size)
}

.dex-steps-item-icon .dex-steps-item-icon-num {
  font-weight: 500;
  line-height: 1;
  position: relative
}

.dex-steps-item-icon .dex-steps-item-icon-num,
.dex-steps-item-icon .dex-steps-item-icon-num .dex-steps-item-checkmark {
  font-size: var(--dex-okd-steps-common-icon-font-size)
}

.dex-steps-item-tail {
  height: 1px;
  line-height: 0;
  position: absolute;
  top: calc(var(--dex-okd-steps-common-icon-size)/2);
  width: 100%
}

.dex-steps-item-tail:after {
  background-image: linear-gradient(270deg, transparent 0, transparent 50%, #dbdbdb 0, #dbdbdb);
  background-image: linear-gradient(to left, transparent 0, transparent 50%, var(--dex-okd-steps-process-tail-color, #dbdbdb) 50%, var(--dex-okd-steps-process-tail-color, #dbdbdb) 100%);
  background-repeat: repeat-x;
  background-size: 4px 1px;
  background-size: var(--dex-okd-steps-common-waiting-border-width, 4px) 1px;
  border-radius: 1px;
  content: "";
  display: inline-block;
  height: 1px;
  position: absolute;
  top: 0;
  width: 100%
}

.dex-steps-item-title {
  display: inline-block;
  font-size: var(--dex-okd-steps-common-title-font-size);
  line-height: 20px;
  line-height: var(--dex-okd-steps-common-title-line-height, 20px);
  padding-right: 12px;
  position: relative
}

.dex-steps-item-description {
  font-size: var(--dex-okd-steps-common-description-font-size);
  line-height: 16px;
  line-height: var(--dex-okd-steps-common-description-line-height, 16px);
  margin-top: 2px
}

.dex-steps-item.dex-steps-item-finish .dex-steps-item-content:after,
.dex-steps-item.dex-steps-item-finish .dex-steps-item-tail:after {
  background-color: #000;
  background-color: var(--dex-okd-steps-finish-tail-color, #000);
  background-image: none
}

.dex-steps-item-process .dex-steps-item-icon {
  background: var(--dex-okd-steps-process-background);
  border: 1px solid #000;
  border: 1px solid var(--dex-okd-steps-process-icon-border-color, #000)
}

.dex-steps-item-process .dex-steps-item-icon-num {
  color: var(--dex-okd-steps-process-icon-color)
}

.dex-steps-item-process .dex-steps-item-title {
  color: var(--dex-okd-steps-process-title-color)
}

.dex-steps-item-process .dex-steps-item-description {
  color: var(--dex-okd-steps-process-description-color);
  font-weight: 400
}

.dex-steps-item-waiting .dex-steps-item-icon {
  background: var(--dex-okd-steps-waiting-background);
  border: 1px solid #dbdbdb;
  border: 1px solid var(--dex-okd-steps-waiting-icon-border-color, #dbdbdb)
}

.dex-steps-item-waiting .dex-steps-item-icon-num {
  color: var(--dex-okd-steps-waiting-icon-color)
}

.dex-steps-item-waiting .dex-steps-item-title {
  color: var(--dex-okd-steps-waiting-title-color)
}

.dex-steps-item-waiting .dex-steps-item-description {
  color: var(--dex-okd-steps-waiting-description-color);
  font-weight: 400
}

.dex-steps-item-finish .dex-steps-item-icon {
  background: var(--dex-okd-steps-finish-background);
  border: 1px solid #1a1a1a;
  border: 1px solid var(--dex-okd-steps-finish-icon-border-color, #1a1a1a)
}

.dex-steps-item-finish .dex-steps-item-icon-num {
  color: var(--dex-okd-steps-finish-icon-color)
}

.dex-steps-item-finish .dex-steps-item-title {
  color: var(--dex-okd-steps-finish-title-color)
}

.dex-steps-item-finish .dex-steps-item-description {
  color: var(--dex-okd-steps-finish-description-color);
  font-weight: 400
}

.dex-steps-horizontal:not(.dex-steps-label-vertical):not(.dex-steps-label-vertical-left) .dex-steps-item {
  margin-right: 16px;
  white-space: nowrap
}

.dex-steps-horizontal:not(.dex-steps-label-vertical):not(.dex-steps-label-vertical-left) .dex-steps-item-container {
  display: flex
}

.dex-steps-horizontal:not(.dex-steps-label-vertical):not(.dex-steps-label-vertical-left) .dex-steps-item:last-child {
  margin-right: 0
}

.dex-steps-horizontal:not(.dex-steps-label-vertical):not(.dex-steps-label-vertical-left) .dex-steps-item:last-child .dex-steps-item-title {
  padding-right: 0
}

.dex-steps-horizontal:not(.dex-steps-label-vertical):not(.dex-steps-label-vertical-left) .dex-steps-item-tail {
  display: none
}

.dex-steps-horizontal:not(.dex-steps-label-vertical):not(.dex-steps-label-vertical-left) .dex-steps-item-description {
  max-width: var(--dex-okd-steps-label-vertical-description-max-width);
  white-space: normal
}

.dex-steps-vertical {
  display: flex;
  flex-direction: column
}

.dex-steps-vertical .dex-steps-item {
  display: block;
  flex: 1 0 auto;
  overflow: visible
}

.dex-steps-vertical .dex-steps-item-container {
  min-height: 72px
}

.dex-steps-vertical .dex-steps-item-container:last-child {
  min-height: unset
}

.dex-steps-vertical .dex-steps-item-icon {
  float: left;
  margin-right: var(--dex-okd-steps-vertical-icon-margin-right)
}

.dex-steps-vertical .dex-steps-item-content {
  display: block;
  margin-left: var(--dex-okd-steps-vertical-content-margin-left)
}

.dex-steps-vertical .dex-steps-item-content:after {
  display: none
}

.dex-steps-vertical .dex-steps-item-title {
  margin-top: 1px
}

.dex-steps-vertical .dex-steps-item-description {
  padding-bottom: var(--dex-okd-steps-vertical-description-padding-bottom)
}

.dex-steps-vertical .dex-steps-item-tail {
  bottom: 12px;
  height: calc(100% - var(--dex-okd-steps-common-icon-size));
  left: calc(var(--dex-okd-steps-common-icon-size)/2);
  padding: 0;
  position: absolute;
  top: var(--dex-okd-steps-common-icon-size);
  width: 1px
}

.dex-steps-vertical .dex-steps-item-tail:after {
  background-image: linear-gradient(180deg, transparent 0, transparent 50%, #dbdbdb 0, #dbdbdb);
  background-image: linear-gradient(to bottom, transparent 0, transparent 50%, var(--dex-okd-steps-process-tail-color, #dbdbdb) 50%, var(--dex-okd-steps-process-tail-color, #dbdbdb) 100%);
  background-repeat: repeat-y;
  background-size: 1px 4px;
  background-size: 1px var(--dex-okd-steps-common-waiting-border-width, 4px);
  height: 100%;
  width: 1px
}

.dex-steps-vertical .dex-steps-item:not(:last-child) .dex-steps-item-tail {
  display: block
}

.dex-steps-vertical .dex-steps-item .dex-steps-item-content:after {
  display: none
}

.dex-steps-vertical .dex-steps-item-finish .dex-steps-item-tail:after {
  background-color: #000;
  background-color: var(--dex-okd-steps-finish-tail-color, #000);
  background-image: none
}

.dex-steps-label-vertical .dex-steps-item {
  overflow: visible
}

.dex-steps-label-vertical .dex-steps-item-tail {
  margin-left: calc(var(--dex-okd-steps-common-icon-size) + var(--dex-okd-steps-style-margin-left, 42px));
  padding: 0
}

.dex-steps-label-vertical .dex-steps-item-tail:after {
  width: calc(100% - var(--dex-okd-steps-common-icon-size))
}

.dex-steps-label-vertical .dex-steps-item-content {
  display: block;
  margin-left: unset;
  margin-top: var(--dex-okd-steps-label-vertical-content-margin-top);
  text-align: center;
  width: calc(var(--dex-okd-steps-common-icon-size)/2*2 + 84px);
  width: calc((var(--dex-okd-steps-common-icon-size)/2 + var(--dex-okd-steps-style-margin-left, 42px))*2)
}

.dex-steps-label-vertical .dex-steps-item-content:after {
  display: none
}

.dex-steps-label-vertical .dex-steps-item-icon {
  display: inline-flex;
  margin-left: 42px;
  margin-left: var(--dex-okd-steps-style-margin-left, 42px)
}

.dex-steps-label-vertical .dex-steps-item-title {
  padding-left: 0;
  padding-right: 0
}

.dex-steps-label-vertical-left .dex-steps-item {
  overflow: visible
}

.dex-steps-label-vertical-left .dex-steps-item-tail {
  margin-left: unset;
  padding: 0
}

.dex-steps-label-vertical-left .dex-steps-item-tail:after {
  left: var(--dex-okd-steps-common-icon-size);
  width: calc(100% - var(--dex-okd-steps-common-icon-size))
}

.dex-steps-label-vertical-left .dex-steps-item-content {
  display: block;
  margin-left: unset;
  margin-top: var(--dex-okd-steps-label-vertical-content-margin-top);
  text-align: left;
  width: calc(var(--dex-okd-steps-common-icon-size)/2*2 + 84px);
  width: calc((var(--dex-okd-steps-common-icon-size)/2 + var(--dex-okd-steps-style-margin-left, 42px))*2)
}

.dex-steps-label-vertical-left .dex-steps-item-content:after {
  display: none
}

.dex-steps-label-vertical-left .dex-steps-item-icon {
  display: inline-flex;
  margin-left: unset
}

.dex-steps-label-vertical-left .dex-steps-item-title {
  padding-left: 0;
  padding-right: 0
}

.dex-steps-circle .dex-steps-item-icon {
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-flex;
  height: 8px;
  height: var(--dex-okd-steps-circle-icon-size, 8px);
  line-height: 8px;
  line-height: var(--dex-okd-steps-circle-icon-size, 8px);
  text-align: center;
  transition: background-color .3s, border-color .3s;
  width: 8px;
  width: var(--dex-okd-steps-circle-icon-size, 8px)
}

.dex-steps-circle .dex-steps-item-icon .dex-steps-item-icon-num {
  display: none
}

.dex-steps-circle .dex-steps-item-process .dex-steps-item-icon {
  background: #000;
  background: var(--dex-okd-steps-circle-process-bg-color, #000);
  border: 0 solid #000;
  border: 0 solid var(--dex-okd-steps-circle-process-bg-color, #000)
}

.dex-steps-circle .dex-steps-item-waiting .dex-steps-item-icon {
  background: #dbdbdb;
  background: var(--dex-okd-steps-circle-waiting-bg-color, #dbdbdb);
  border: 0 solid #dbdbdb;
  border: 0 solid var(--dex-okd-steps-circle-waiting-bg-color, #dbdbdb)
}

.dex-steps-circle .dex-steps-item-finish .dex-steps-item-icon {
  background: #000;
  background: var(--dex-okd-steps-circle-finish-bg-color, #000);
  border: 0 solid #000;
  border: 0 solid var(--dex-okd-steps-circle-finish-bg-color, #000)
}

.dex-steps-circle.dex-steps-horizontal .dex-steps-item-tail {
  margin-left: calc(var(--dex-okd-steps-common-icon-size) + var(--dex-okd-steps-style-margin-left, 42px))
}

.dex-steps-circle.dex-steps-horizontal .dex-steps-item-tail:after {
  width: calc(100% - var(--dex-okd-steps-common-icon-size))
}

.dex-steps-circle.dex-steps-horizontal .dex-steps-item-content {
  width: calc(var(--dex-okd-steps-common-icon-size)/2*2 + 84px);
  width: calc((var(--dex-okd-steps-common-icon-size)/2 + var(--dex-okd-steps-style-margin-left, 42px))*2)
}

.dex-steps-circle.dex-steps-horizontal .dex-steps-item-icon {
  display: inline-flex;
  margin-left: 42px;
  margin-left: var(--dex-okd-steps-style-margin-left, 42px)
}

.dex-steps-circle.dex-steps-horizontal .dex-steps-item {
  overflow: visible
}

.dex-steps-circle.dex-steps-horizontal .dex-steps-item-tail {
  margin-left: 50px;
  margin-left: calc(var(--dex-okd-steps-circle-icon-size, 8px) + var(--dex-okd-steps-style-margin-left, 42px));
  padding: 0;
  top: 4px;
  top: calc(var(--dex-okd-steps-circle-icon-size, 8px)/2)
}

.dex-steps-circle.dex-steps-horizontal .dex-steps-item-tail:after {
  width: calc(100% - 8px);
  width: calc(100% - var(--dex-okd-steps-circle-icon-size, 8px))
}

.dex-steps-circle.dex-steps-horizontal .dex-steps-item-content {
  display: block;
  margin-left: unset;
  margin-top: var(--dex-okd-steps-label-vertical-content-margin-top);
  text-align: center;
  width: 92px;
  width: calc((var(--dex-okd-steps-circle-icon-size, 8px)/2 + var(--dex-okd-steps-style-margin-left, 42px))*2)
}

.dex-steps-circle.dex-steps-horizontal .dex-steps-item-content:after {
  display: none
}

.dex-steps-circle.dex-steps-horizontal .dex-steps-item-title {
  padding-left: 0;
  padding-right: 0
}

.dex-steps-circle.dex-steps-vertical .dex-steps-item-tail {
  bottom: 12px;
  height: calc(100% - 8px);
  height: calc(100% - var(--dex-okd-steps-circle-icon-size, 8px));
  left: 4px;
  left: calc(var(--dex-okd-steps-circle-icon-size, 8px)/2);
  padding: 0;
  position: absolute;
  top: 14px;
  top: calc(var(--dex-okd-steps-circle-icon-size, 8px) + var(--dex-okd-steps-circle-icon-margin-top, 6px));
  width: 1px
}

.dex-steps-circle.dex-steps-vertical .dex-steps-item-tail:after {
  background-image: linear-gradient(180deg, transparent 0, transparent 50%, #dbdbdb 0, #dbdbdb);
  background-image: linear-gradient(to bottom, transparent 0, transparent 50%, var(--dex-okd-steps-process-tail-color, #dbdbdb) 50%, var(--dex-okd-steps-process-tail-color, #dbdbdb) 100%);
  background-repeat: repeat-y;
  background-size: 1px 4px;
  background-size: 1px var(--dex-okd-steps-common-waiting-border-width, 4px);
  height: 100%;
  top: 0;
  width: 1px
}

.dex-steps-circle.dex-steps-vertical .dex-steps-item .dex-steps-item-icon {
  margin-top: 6px;
  margin-top: var(--dex-okd-steps-circle-icon-margin-top, 6px)
}

.dex-steps-circle.dex-steps-vertical .dex-steps-item:not(:last-child) .dex-steps-item-tail {
  display: block
}

.dex-steps-circle.dex-steps-vertical .dex-steps-item-finish .dex-steps-item-tail:after {
  background-color: #000;
  background-color: var(--dex-okd-steps-finish-tail-color, #000);
  background-image: none
}

.dex-steps .dex-steps-item-icon.dex-steps-item-custom-icon {
  background: transparent;
  border: none
}

.dex-table-thead {
  background-color: var(--dex-okd-table-thead-bg-color);
  background-color: var(--dex-okd-inner-table-background, var(--dex-okd-table-thead-bg-color))
}

.dex-table-thead .dex-table-row-slide .dex-table-cell:first-child {
  padding-left: 0
}

.dex-table-thead .dex-table-row-slide .dex-table-cell:last-child {
  padding-right: 0
}

.dex-table-thead .dex-table-cell {
  background-color: var(--dex-okd-table-thead-cell-bg-color);
  background-color: var(--dex-okd-inner-table-background, var(--dex-okd-table-thead-cell-bg-color));
  color: #959dad;
  color: var(--dex-okd-table-thead-cell-font-color, #959dad);
  font-size: 12px;
  font-size: var(--dex-okd-table-thead-cell-font-size, 12px);
  font-weight: 400;
  padding: 12px;
  padding: var(--dex-okd-table-thead-cell-padding-vertical, 12px) var(--dex-okd-table-thead-cell-padding-horizontal, 12px);
  position: relative;
  text-align: left
}

.dex-table-thead .dex-table-cell.dex-table-column-has-sorters {
  cursor: pointer;
  padding: 0 12px;
  transition: padding .3s
}

.dex-table-thead .dex-table-cell-sorters {
  align-items: center;
  display: inline-flex
}

.dex-table-thead .dex-table-cell-sorters-between {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%
}

.dex-table-thead .dex-table-cell-sorters-between .dex-table-cell-title {
  flex: 1 1;
  width: calc(100% - 15px);
  width: calc(100% - var(--dex-okd-table-cell-sorter-icon-font-size, 12px) - 3px)
}

.dex-table-thead .dex-table-cell-sorter {
  font: 12px;
  line-height: 12px;
  margin-left: 3px
}

.dex-table-thead .dex-table-cell-sorter-inner {
  display: inline-flex;
  flex-direction: column;
  transform: scale(.5);
  transform: scale(var(--dex-okd-table-cell-sorter-inner-scale, .5))
}

.dex-table-thead .dex-table-cell-sorter-inner .dex-table-cell-filled-down,
.dex-table-thead .dex-table-cell-sorter-inner .dex-table-cell-filled-up {
  color: #ced3de;
  color: var(--dex-okd-table-cell-sorter-icon-color, #ced3de);
  font-size: 12px;
  font-size: var(--dex-okd-table-cell-sorter-icon-font-size, 12px)
}

.dex-table-thead .dex-table-cell-sorter-inner .dex-table-cell-filled-down.active,
.dex-table-thead .dex-table-cell-sorter-inner .dex-table-cell-filled-up.active {
  color: #000;
  color: var(--dex-okd-table-cell-sorter-icon-active-color, #000)
}

.dex-table-thead-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3
}

.dex-table-tbody {
  position: relative
}

.dex-table-tbody .dex-table-row {
  background-color: var(--dex-okd-table-tbody-cell-bg-color);
  background-color: var(--dex-okd-inner-table-background, var(--dex-okd-table-tbody-cell-bg-color))
}

.dex-table-tbody .dex-table-row-vir {
  display: grid;
  grid-template-columns: var(--dex-okd-inner-table-grid-template-columns)
}

.dex-table-tbody .dex-table-row-hover:hover {
  background-color: #000;
  background-color: var(--dex-okd-table-tbody-row-bg-hover-color, #000)
}

.dex-table-tbody .dex-table-row-slide .dex-table-cell:first-child {
  padding-left: 0
}

.dex-table-tbody .dex-table-row-slide .dex-table-cell:last-child {
  padding-right: 0
}

.dex-table-tbody .dex-table-cell {
  background-color: inherit;
  color: #3f475a;
  color: var(--dex-okd-table-tbody-cell-font-color, #3f475a);
  font-size: 12px;
  font-size: var(--dex-okd-table-tbody-cell-font-size, 12px);
  font-weight: 400;
  padding: 12px;
  padding: var(--dex-okd-table-tbody-cell-padding-vertical, 12px) var(--dex-okd-table-tbody-cell-padding-horizontal, 12px);
  text-align: left
}

.dex-table-tbody .dex-table-expanded-row .dex-table-cell {
  padding: 0
}

.dex-table-tbody .dex-table-placeholder-row-fixed {
  margin: -12px;
  margin: calc(var(--dex-okd-table-tbody-cell-padding-vertical, 12px)*-1) calc(var(--dex-okd-table-tbody-cell-padding-horizontal, 12px)*-1);
  padding: 12px;
  padding: var(--dex-okd-table-tbody-cell-padding-vertical, 12px) var(--dex-okd-table-tbody-cell-padding-horizontal, 12px)
}

.dex-table-wrapper {
  position: relative;
  width: 100%
}

.dex-table-wrapper * {
  box-sizing: border-box
}

.dex-table-wrapper .dex-table table {
  border-collapse: initial;
  border-spacing: 0;
  width: 100%
}

.dex-table-wrapper .dex-table-bordered {
  border: 1px solid #f0f0f0;
  border: 1px solid var(--dex-okd-table-cell-bordered-color, #f0f0f0);
  border-bottom: 0
}

.dex-table-wrapper .dex-table-bordered .dex-table-tbody tr,
.dex-table-wrapper .dex-table-bordered .dex-table-thead tr {
  position: relative
}

.dex-table-wrapper .dex-table .dex-table-sticky-holder {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3
}

.dex-table-wrapper .dex-table-pagination {
  margin-top: 10px;
  margin-top: var(--dex-okd-table-pagination-margin-top, 10px)
}

.dex-table-wrapper .dex-table-fixed-column-box-shadow.dex-table-ping-left .dex-table-cell-fix-left,
.dex-table-wrapper .dex-table-ping-left .dex-table-cell-fix-left-last,
.dex-table-wrapper .dex-table-ping-left .dex-table-cell-fix-right-first,
.dex-table-wrapper .dex-table-ping-right .dex-table-cell-fix-left-last,
.dex-table-wrapper .dex-table-ping-right .dex-table-cell-fix-right-first {
  z-index: 2
}

.dex-table-wrapper .dex-table-fixed-column-box-shadow.dex-table-ping-left .dex-table-cell-fix-left.dex-table-cell-fix-left-first:after,
.dex-table-wrapper .dex-table-fixed-column-box-shadow.dex-table-ping-left .dex-table-cell-fix-left.dex-table-cell-fix-left-last:after {
  bottom: 0;
  box-shadow: inset 10px 0 8px -8px #00000026;
  box-shadow: inset var(--dex-okd-table-fix-left-box-shadow, 10px 0 8px -8px #00000026);
  content: "";
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(100%);
  transition: box-shadow .3s;
  width: 30px;
  width: var(--dex-okd-table-fix-left-box-inner-width, 30px)
}

.dex-table-wrapper .dex-table-fixed-column-box-shadow.dex-table-ping-right .dex-table-cell-fix-right {
  z-index: 2
}

.dex-table-wrapper .dex-table-fixed-column-box-shadow.dex-table-ping-right .dex-table-cell-fix-right.dex-table-cell-fix-right-first:after,
.dex-table-wrapper .dex-table-fixed-column-box-shadow.dex-table-ping-right .dex-table-cell-fix-right.dex-table-cell-fix-right-last:after {
  bottom: 0;
  box-shadow: inset -10px 0 8px -8px #00000026;
  box-shadow: inset var(--dex-okd-table-fix-right-box-shadow, -10px 0 8px -8px #00000026);
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate(-100%);
  transition: box-shadow .3s;
  width: 30px;
  width: var(--dex-okd-table-fix-right-box-inner-width, 30px)
}

.dex-table-full-height {
  height: 100%
}

.dex-table-scroll-style ::-webkit-scrollbar {
  border-radius: 8px;
  height: 6px
}

.dex-table-virtual-scroll-style ::-webkit-scrollbar {
  width: 0
}

.dex-table-scroll-style ::-webkit-scrollbar-thumb,
.dex-table-scroll-style ::-webkit-scrollbar-track {
  border-radius: 8px
}

.dex-table-scroll-style ::-webkit-scrollbar-button {
  display: none
}

.dex-table-scroll-style ::-webkit-scrollbar-corner {
  background-color: initial
}

.dex-table-placeholder {
  display: flex;
  justify-content: center;
  padding: 100px 0;
  padding: var(--dex-okd-table-placeholder-padding-vertical, 100px) var(--dex-okd-table-placeholder-padding-horizontal, 0)
}

.dex-table-cell {
  word-wrap: break-word;
  position: relative
}

.dex-table-cell .dex-table-cell-ellipsis,
.dex-table-cell .dex-table-cell-ellipsis>* {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.dex-table-cell .dex-table-cell-ellipsis-tooltip {
  display: inline-block;
  max-width: 100%
}

.dex-table-cell-border-bottom {
  border-bottom: 1px solid #f0f0f0;
  border-bottom: 1px solid var(--dex-okd-table-cell-bordered-color, #f0f0f0)
}

.dex-table-cell-border-right {
  border-right: 1px solid #f0f0f0;
  border-right: 1px solid var(--dex-okd-table-cell-bordered-color, #f0f0f0)
}

.dex-table-cell-border-right:last-child {
  border-right: 0
}

.dex-suggestion-chips {
  align-items: center;
  border: 1px solid transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  text-align: center
}

.dex-suggestion-chips.dex-suggestion-chips-sm {
  border-radius: 8px;
  border-radius: var(--dex-okd-suggestionchips-sm-border-radius, 8px);
  font-size: 12px;
  font-size: var(--dex-okd-suggestionchips-sm-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-suggestionchips-sm-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-suggestionchips-sm-line-height, 16px);
  min-height: 28px;
  min-height: var(--dex-okd-suggestionchips-sm-min-height, 28px);
  min-width: 32px;
  min-width: var(--dex-okd-suggestionchips-sm-min-width, 32px);
  padding: 0 8px;
  padding: var(--dex-okd-suggestionchips-sm-padding-vertical, 0) var(--dex-okd-suggestionchips-sm-padding-horizontal, 8px)
}

.dex-suggestion-chips.dex-suggestion-chips-md {
  border-radius: 8px;
  border-radius: var(--dex-okd-suggestionchips-md-border-radius, 8px);
  font-size: 14px;
  font-size: var(--dex-okd-suggestionchips-md-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-suggestionchips-md-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-suggestionchips-md-line-height, 16px);
  min-height: 32px;
  min-height: var(--dex-okd-suggestionchips-md-min-height, 32px);
  min-width: 32px;
  min-width: var(--dex-okd-suggestionchips-md-min-width, 32px);
  padding: 0 8px;
  padding: var(--dex-okd-suggestionchips-md-padding-vertical, 0) var(--dex-okd-suggestionchips-md-padding-horizontal, 8px)
}

.dex-suggestion-chips-truncate {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden
}

.dex-suggestion-chips-primary {
  background: var(--dex-okd-color-background-surface-primary);
  background: var(--dex-okd-suggestionchips-primary-default-background, var(--dex-okd-color-background-surface-primary));
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-suggestionchips-primary-default-font-color, var(--dex-okd-color-content-primary))
}

.dex-suggestion-chips-primary.hover,
.dex-suggestion-chips-primary:not(.dex-suggestion-chips-primary-disabled):not(.dex-suggestion-chips-primary-focus):hover {
  background: var(--dex-okd-color-background-surface-pressed);
  background: var(--dex-okd-suggestionchips-primary-hover-background, var(--dex-okd-color-background-surface-pressed));
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-suggestionchips-primary-hover-font-color, var(--dex-okd-color-content-primary))
}

.dex-suggestion-chips-primary.active,
.dex-suggestion-chips-primary:not(.dex-suggestion-chips-primary-disabled):active {
  background: var(--dex-okd-color-background-surface-pressed);
  background: var(--dex-okd-suggestionchips-primary-active-background, var(--dex-okd-color-background-surface-pressed));
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-suggestionchips-primary-active-font-color, var(--dex-okd-color-content-primary))
}

.dex-suggestion-chips-primary.dex-suggestion-chips-primary-disabled,
.dex-suggestion-chips-primary.disabled {
  background: var(--dex-okd-color-background-surface-disable);
  background: var(--dex-okd-suggestionchips-primary-disabled-background, var(--dex-okd-color-background-surface-disable));
  color: var(--dex-okd-color-content-disabled);
  color: var(--dex-okd-suggestionchips-primary-disabled-font-color, var(--dex-okd-color-content-disabled));
  cursor: not-allowed
}

.dex-suggestion-chips-secondary {
  background: transparent;
  background: var(--dex-okd-suggestionchips-secondary-default-background, transparent);
  border-color: var(--dex-okd-suggestionchips-secondary-default-border-color, var(--dex-okd-color-border-primary));
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-suggestionchips-secondary-default-font-color, var(--dex-okd-color-content-primary))
}

.dex-suggestion-chips-secondary.hover,
.dex-suggestion-chips-secondary:not(.dex-suggestion-chips-secondary-disabled):not(.dex-suggestion-chips-secondary-focus):hover {
  background: var(--dex-okd-color-background-surface-pressed);
  background: var(--dex-okd-suggestionchips-secondary-hover-background, var(--dex-okd-color-background-surface-pressed));
  border-color: transparent;
  border-color: var(--dex-okd-suggestionchips-secondary-hover-border-color, transparent);
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-suggestionchips-secondary-hover-font-color, var(--dex-okd-color-content-primary))
}

.dex-suggestion-chips-secondary.active,
.dex-suggestion-chips-secondary:not(.dex-suggestion-chips-secondary-disabled):active {
  background: var(--dex-okd-color-background-surface-pressed);
  background: var(--dex-okd-suggestionchips-secondary-active-background, var(--dex-okd-color-background-surface-pressed));
  border-color: transparent;
  border-color: var(--dex-okd-suggestionchips-secondary-active-border-color, transparent);
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-suggestionchips-secondary-active-font-color, var(--dex-okd-color-content-primary))
}

.dex-suggestion-chips-secondary.dex-suggestion-chips-secondary-disabled,
.dex-suggestion-chips-secondary.disabled {
  background: transparent;
  background: var(--dex-okd-suggestionchips-secondary-disabled-background, transparent);
  border-color: var(--dex-okd-suggestionchips-secondary-disabled-border-color, var(--dex-okd-color-border-primary));
  color: var(--dex-okd-color-content-disabled);
  color: var(--dex-okd-suggestionchips-secondary-disabled-font-color, var(--dex-okd-color-content-disabled));
  cursor: not-allowed
}

.dex-suggestion-chips-tertiary {
  background: transparent;
  background: var(--dex-okd-suggestionchips-tertiary-default-background, transparent);
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-suggestionchips-tertiary-default-font-color, var(--dex-okd-color-content-primary))
}

.dex-suggestion-chips-tertiary.hover,
.dex-suggestion-chips-tertiary:not(.dex-suggestion-chips-tertiary-disabled):not(.dex-suggestion-chips-tertiary-focus):hover {
  background: var(--dex-okd-color-background-surface-pressed);
  background: var(--dex-okd-suggestionchips-tertiary-hover-background, var(--dex-okd-color-background-surface-pressed));
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-suggestionchips-tertiary-hover-font-color, var(--dex-okd-color-content-primary))
}

.dex-suggestion-chips-tertiary.active,
.dex-suggestion-chips-tertiary:not(.dex-suggestion-chips-tertiary-disabled):active {
  background: var(--dex-okd-color-background-surface-pressed);
  background: var(--dex-okd-suggestionchips-tertiary-active-background, var(--dex-okd-color-background-surface-pressed));
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-suggestionchips-tertiary-active-font-color, var(--dex-okd-color-content-primary))
}

.dex-suggestion-chips-tertiary.dex-suggestion-chips-tertiary-disabled,
.dex-suggestion-chips-tertiary.disabled {
  background: var(--dex-okd-color-background-surface-disable);
  background: var(--dex-okd-suggestionchips-tertiary-disabled-background, var(--dex-okd-color-background-surface-disable));
  color: var(--dex-okd-color-content-disabled);
  color: var(--dex-okd-suggestionchips-tertiary-disabled-font-color, var(--dex-okd-color-content-disabled));
  cursor: not-allowed
}

.dex-tabs-pane.dex-tabs-pane-outline-highlight {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-highlight-default-background-color, transparent);
  border-color: #dbdbdb;
  border-color: var(--dex-okd-tabs-pane-outline-highlight-default-border-color, #dbdbdb);
  border-style: solid;
  color: #929292;
  color: var(--dex-okd-tabs-pane-outline-highlight-default-text-color, #929292)
}

.dex-tabs-pane.dex-tabs-pane-outline-highlight.dex-tabs-active {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-highlight-active-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-outline-highlight-active-border-color, #000);
  color: #000;
  color: var(--dex-okd-tabs-pane-outline-highlight-active-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-outline-highlight.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #000;
  outline-color: var(--dex-okd-tabs-pane-outline-highlight-active-text-color, #000);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-outline-highlight:hover:not(.dex-tabs-active) {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-highlight-hover-background-color, transparent);
  border-color: #dbdbdb;
  border-color: var(--dex-okd-tabs-pane-outline-highlight-hover-border-color, #dbdbdb);
  color: #000;
  color: var(--dex-okd-tabs-pane-outline-highlight-hover-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-outline-primary {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-primary-default-background-color, transparent);
  border-color: transparent;
  border-color: var(--dex-okd-tabs-pane-outline-primary-default-border-color, transparent);
  border-style: solid;
  color: #929292;
  color: var(--dex-okd-tabs-pane-outline-primary-default-text-color, #929292)
}

.dex-tabs-pane.dex-tabs-pane-outline-primary.dex-tabs-active {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-primary-active-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-outline-primary-active-border-color, #000);
  color: #000;
  color: var(--dex-okd-tabs-pane-outline-primary-active-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-outline-primary.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #000;
  outline-color: var(--dex-okd-tabs-pane-outline-primary-active-text-color, #000);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-outline-primary:hover:not(.dex-tabs-active) {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-primary-hover-background-color, transparent);
  border-color: transparent;
  border-color: var(--dex-okd-tabs-pane-outline-primary-hover-border-color, transparent);
  color: #000;
  color: var(--dex-okd-tabs-pane-outline-primary-hover-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-outline-secondary {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-secondary-default-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-outline-secondary-default-border-color, #000);
  border-style: solid;
  color: #fff;
  color: var(--dex-okd-tabs-pane-outline-secondary-default-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-outline-secondary.dex-tabs-active {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-secondary-active-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-outline-secondary-active-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-outline-secondary-active-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-outline-secondary.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-outline-secondary-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-outline-secondary:hover:not(.dex-tabs-active) {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-outline-secondary-hover-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-outline-secondary-hover-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-outline-secondary-hover-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-outline-reversed {
  background-color: #f7f7f7;
  background-color: var(--dex-okd-tabs-pane-outline-reversed-default-background-color, #f7f7f7);
  border-color: #f7f7f7;
  border-color: var(--dex-okd-tabs-pane-outline-reversed-default-border-color, #f7f7f7);
  border-style: solid;
  color: #3d3d3d;
  color: var(--dex-okd-tabs-pane-outline-reversed-default-text-color, #3d3d3d)
}

.dex-tabs-pane.dex-tabs-pane-outline-reversed:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-outline-reversed-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-outline-reversed.dex-tabs-active {
  background-color: #000;
  background-color: var(--dex-okd-tabs-pane-outline-reversed-active-background-color, #000);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-outline-reversed-active-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-outline-reversed-active-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-outline-reversed.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-outline-reversed-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-outline-reversed:hover:not(.dex-tabs-active) {
  background-color: #ebebeb;
  background-color: var(--dex-okd-tabs-pane-outline-reversed-hover-background-color, #ebebeb);
  border-color: #ebebeb;
  border-color: var(--dex-okd-tabs-pane-outline-reversed-hover-border-color, #ebebeb);
  color: #3d3d3d;
  color: var(--dex-okd-tabs-pane-outline-reversed-hover-text-color, #3d3d3d)
}

.dex-tabs-pane.dex-tabs-pane-fill-highlight {
  background-color: #f7f7f7;
  background-color: var(--dex-okd-tabs-pane-fill-highlight-default-background-color, #f7f7f7);
  border-color: #f7f7f7;
  border-color: var(--dex-okd-tabs-pane-fill-highlight-default-border-color, #f7f7f7);
  border-style: solid;
  color: #3d3d3d;
  color: var(--dex-okd-tabs-pane-fill-highlight-default-text-color, #3d3d3d)
}

.dex-tabs-pane.dex-tabs-pane-fill-highlight.dex-tabs-active {
  background-color: #000;
  background-color: var(--dex-okd-tabs-pane-fill-highlight-active-background-color, #000);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-fill-highlight-active-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-fill-highlight-active-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-fill-highlight.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-fill-highlight-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-fill-highlight:hover:not(.dex-tabs-active) {
  background-color: #ebebeb;
  background-color: var(--dex-okd-tabs-pane-fill-highlight-hover-background-color, #ebebeb);
  border-color: #ebebeb;
  border-color: var(--dex-okd-tabs-pane-fill-highlight-hover-border-color, #ebebeb);
  color: #3d3d3d;
  color: var(--dex-okd-tabs-pane-fill-highlight-hover-text-color, #3d3d3d)
}

.dex-tabs-pane.dex-tabs-pane-fill-primary {
  background-color: #f7f7f7;
  background-color: var(--dex-okd-tabs-pane-fill-primary-default-background-color, #f7f7f7);
  border-color: #f7f7f7;
  border-color: var(--dex-okd-tabs-pane-fill-primary-default-border-color, #f7f7f7);
  border-style: solid;
  color: #929292;
  color: var(--dex-okd-tabs-pane-fill-primary-default-text-color, #929292)
}

.dex-tabs-pane.dex-tabs-pane-fill-primary.dex-tabs-active {
  background-color: #f7f7f7;
  background-color: var(--dex-okd-tabs-pane-fill-primary-active-background-color, #f7f7f7);
  border-color: #f7f7f7;
  border-color: var(--dex-okd-tabs-pane-fill-primary-active-border-color, #f7f7f7);
  color: #000;
  color: var(--dex-okd-tabs-pane-fill-primary-active-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-fill-primary.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #000;
  outline-color: var(--dex-okd-tabs-pane-fill-primary-active-text-color, #000);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-fill-primary:hover:not(.dex-tabs-active) {
  background-color: #ebebeb;
  background-color: var(--dex-okd-tabs-pane-fill-primary-hover-background-color, #ebebeb);
  border-color: #ebebeb;
  border-color: var(--dex-okd-tabs-pane-fill-primary-hover-border-color, #ebebeb);
  color: #000;
  color: var(--dex-okd-tabs-pane-fill-primary-hover-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-fill-secondary {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-fill-secondary-default-background-color, transparent);
  border-color: transparent;
  border-color: var(--dex-okd-tabs-pane-fill-secondary-default-border-color, transparent);
  border-style: solid;
  color: #929292;
  color: var(--dex-okd-tabs-pane-fill-secondary-default-text-color, #929292)
}

.dex-tabs-pane.dex-tabs-pane-fill-secondary.dex-tabs-active {
  background-color: #f7f7f7;
  background-color: var(--dex-okd-tabs-pane-fill-secondary-active-background-color, #f7f7f7);
  border-color: #f7f7f7;
  border-color: var(--dex-okd-tabs-pane-fill-secondary-active-border-color, #f7f7f7);
  color: #000;
  color: var(--dex-okd-tabs-pane-fill-secondary-active-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-fill-secondary.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #000;
  outline-color: var(--dex-okd-tabs-pane-fill-secondary-active-text-color, #000);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-fill-secondary:hover:not(.dex-tabs-active) {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-fill-secondary-hover-background-color, transparent);
  border-color: transparent;
  border-color: var(--dex-okd-tabs-pane-fill-secondary-hover-border-color, transparent);
  color: #000;
  color: var(--dex-okd-tabs-pane-fill-secondary-hover-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-fill-reversed {
  background-color: #f7f7f7;
  background-color: var(--dex-okd-tabs-pane-fill-reversed-default-background-color, #f7f7f7);
  border-color: #f7f7f7;
  border-color: var(--dex-okd-tabs-pane-fill-reversed-default-border-color, #f7f7f7);
  border-style: solid;
  color: #3d3d3d;
  color: var(--dex-okd-tabs-pane-fill-reversed-default-text-color, #3d3d3d)
}

.dex-tabs-pane.dex-tabs-pane-fill-reversed:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-fill-reversed-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-fill-reversed.dex-tabs-active {
  background-color: #000;
  background-color: var(--dex-okd-tabs-pane-fill-reversed-active-background-color, #000);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-fill-reversed-active-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-fill-reversed-active-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-fill-reversed.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-fill-reversed-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-fill-reversed:hover:not(.dex-tabs-active) {
  background-color: #ebebeb;
  background-color: var(--dex-okd-tabs-pane-fill-reversed-hover-background-color, #ebebeb);
  border-color: #ebebeb;
  border-color: var(--dex-okd-tabs-pane-fill-reversed-hover-border-color, #ebebeb);
  color: #3d3d3d;
  color: var(--dex-okd-tabs-pane-fill-reversed-hover-text-color, #3d3d3d)
}

.dex-tabs-pane.dex-tabs-pane-text-highlight {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-highlight-default-background-color, transparent);
  border-color: transparent;
  border-color: var(--dex-okd-tabs-pane-text-highlight-default-border-color, transparent);
  border-style: solid;
  color: #929292;
  color: var(--dex-okd-tabs-pane-text-highlight-default-text-color, #929292)
}

.dex-tabs-pane.dex-tabs-pane-text-highlight.dex-tabs-active {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-highlight-active-background-color, transparent);
  border-color: transparent;
  border-color: var(--dex-okd-tabs-pane-text-highlight-active-border-color, transparent);
  color: #000;
  color: var(--dex-okd-tabs-pane-text-highlight-active-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-text-highlight.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #000;
  outline-color: var(--dex-okd-tabs-pane-text-highlight-active-text-color, #000);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-text-highlight:hover:not(.dex-tabs-active) {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-highlight-hover-background-color, transparent);
  border-color: transparent;
  border-color: var(--dex-okd-tabs-pane-text-highlight-hover-border-color, transparent);
  color: #000;
  color: var(--dex-okd-tabs-pane-text-highlight-hover-text-color, #000)
}

.dex-tabs-pane.dex-tabs-pane-text-primary {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-primary-default-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-text-primary-default-border-color, #000);
  border-style: solid;
  color: #fff;
  color: var(--dex-okd-tabs-pane-text-primary-default-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-text-primary.dex-tabs-active {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-primary-active-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-text-primary-active-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-text-primary-active-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-text-primary.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-text-primary-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-text-primary:hover:not(.dex-tabs-active) {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-primary-hover-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-text-primary-hover-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-text-primary-hover-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-text-secondary {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-secondary-default-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-text-secondary-default-border-color, #000);
  border-style: solid;
  color: #fff;
  color: var(--dex-okd-tabs-pane-text-secondary-default-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-text-secondary.dex-tabs-active {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-secondary-active-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-text-secondary-active-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-text-secondary-active-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-text-secondary.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-text-secondary-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-text-secondary:hover:not(.dex-tabs-active) {
  background-color: initial;
  background-color: var(--dex-okd-tabs-pane-text-secondary-hover-background-color, transparent);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-text-secondary-hover-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-text-secondary-hover-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-text-reversed {
  background-color: #f7f7f7;
  background-color: var(--dex-okd-tabs-pane-text-reversed-default-background-color, #f7f7f7);
  border-color: #f7f7f7;
  border-color: var(--dex-okd-tabs-pane-text-reversed-default-border-color, #f7f7f7);
  border-style: solid;
  color: #3d3d3d;
  color: var(--dex-okd-tabs-pane-text-reversed-default-text-color, #3d3d3d)
}

.dex-tabs-pane.dex-tabs-pane-text-reversed:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-text-reversed-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-text-reversed.dex-tabs-active {
  background-color: #000;
  background-color: var(--dex-okd-tabs-pane-text-reversed-active-background-color, #000);
  border-color: #000;
  border-color: var(--dex-okd-tabs-pane-text-reversed-active-border-color, #000);
  color: #fff;
  color: var(--dex-okd-tabs-pane-text-reversed-active-text-color, #fff)
}

.dex-tabs-pane.dex-tabs-pane-text-reversed.dex-tabs-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: #fff;
  outline-color: var(--dex-okd-tabs-pane-text-reversed-active-text-color, #fff);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane.dex-tabs-pane-text-reversed:hover:not(.dex-tabs-active) {
  background-color: #ebebeb;
  background-color: var(--dex-okd-tabs-pane-text-reversed-hover-background-color, #ebebeb);
  border-color: #ebebeb;
  border-color: var(--dex-okd-tabs-pane-text-reversed-hover-border-color, #ebebeb);
  color: #3d3d3d;
  color: var(--dex-okd-tabs-pane-text-reversed-hover-text-color, #3d3d3d)
}

.dex-tabs-pane-xxs.category-size {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-pane-xxs-border-radius, 4px);
  border-width: 1px;
  border-width: var(--dex-okd-tabs-pane-xxs-border-width, 1px);
  font-size: 12px;
  font-size: var(--dex-okd-tabs-pane-xxs-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-pane-xxs-font-weight, 400);
  height: 24px;
  height: var(--dex-okd-tabs-pane-xxs-height, 24px);
  margin-right: 8px;
  margin-right: var(--dex-okd-tabs-pane-xxs-margin-right, 8px);
  padding: 0 8px;
  padding: 0 var(--dex-okd-tabs-pane-xxs-padding-vertical, 8px)
}

.dex-tabs-pane-xxs.category-size:last-child {
  margin-right: 0
}

.dex-tabs-pane-xxs.category-size.dex-tabs-active {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xxs-active-font-weight, 500)
}

.dex-tabs-pane-xxs.category-size:hover:not(.dex-tabs-active) {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xxs-hover-font-weight, 500)
}

.dex-tabs-pane-xxs.category-size.dex-tabs-pane-circle {
  border-radius: 12px;
  border-radius: calc(var(--dex-okd-tabs-pane-xxs-height, 24px)/2)
}

.dex-tabs-pane-xs.category-size {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-pane-xs-border-radius, 4px);
  border-width: 1px;
  border-width: var(--dex-okd-tabs-pane-xs-border-width, 1px);
  font-size: 12px;
  font-size: var(--dex-okd-tabs-pane-xs-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-pane-xs-font-weight, 400);
  height: 24px;
  height: var(--dex-okd-tabs-pane-xs-height, 24px);
  margin-right: 8px;
  margin-right: var(--dex-okd-tabs-pane-xs-margin-right, 8px);
  padding: 0 8px;
  padding: 0 var(--dex-okd-tabs-pane-xs-padding-vertical, 8px)
}

.dex-tabs-pane-xs.category-size:last-child {
  margin-right: 0
}

.dex-tabs-pane-xs.category-size.dex-tabs-active {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xs-active-font-weight, 500)
}

.dex-tabs-pane-xs.category-size:hover:not(.dex-tabs-active) {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xs-hover-font-weight, 500)
}

.dex-tabs-pane-xs.category-size.dex-tabs-pane-circle {
  border-radius: 12px;
  border-radius: calc(var(--dex-okd-tabs-pane-xs-height, 24px)/2)
}

.dex-tabs-pane-sm.category-size {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-pane-sm-border-radius, 4px);
  border-width: 1px;
  border-width: var(--dex-okd-tabs-pane-sm-border-width, 1px);
  font-size: 12px;
  font-size: var(--dex-okd-tabs-pane-sm-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-pane-sm-font-weight, 400);
  height: 28px;
  height: var(--dex-okd-tabs-pane-sm-height, 28px);
  margin-right: 8px;
  margin-right: var(--dex-okd-tabs-pane-sm-margin-right, 8px);
  padding: 0 8px;
  padding: 0 var(--dex-okd-tabs-pane-sm-padding-vertical, 8px)
}

.dex-tabs-pane-sm.category-size:last-child {
  margin-right: 0
}

.dex-tabs-pane-sm.category-size.dex-tabs-active {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-sm-active-font-weight, 500)
}

.dex-tabs-pane-sm.category-size:hover:not(.dex-tabs-active) {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-sm-hover-font-weight, 500)
}

.dex-tabs-pane-sm.category-size.dex-tabs-pane-circle {
  border-radius: 14px;
  border-radius: calc(var(--dex-okd-tabs-pane-sm-height, 28px)/2)
}

.dex-tabs-pane-md.category-size {
  border-radius: 6px;
  border-radius: var(--dex-okd-tabs-pane-md-border-radius, 6px);
  border-width: 1px;
  border-width: var(--dex-okd-tabs-pane-md-border-width, 1px);
  font-size: 14px;
  font-size: var(--dex-okd-tabs-pane-md-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-pane-md-font-weight, 400);
  height: 32px;
  height: var(--dex-okd-tabs-pane-md-height, 32px);
  margin-right: 8px;
  margin-right: var(--dex-okd-tabs-pane-md-margin-right, 8px);
  padding: 0 8px;
  padding: 0 var(--dex-okd-tabs-pane-md-padding-vertical, 8px)
}

.dex-tabs-pane-md.category-size:last-child {
  margin-right: 0
}

.dex-tabs-pane-md.category-size.dex-tabs-active {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-md-active-font-weight, 500)
}

.dex-tabs-pane-md.category-size:hover:not(.dex-tabs-active) {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-md-hover-font-weight, 500)
}

.dex-tabs-pane-md.category-size.dex-tabs-pane-circle {
  border-radius: 16px;
  border-radius: calc(var(--dex-okd-tabs-pane-md-height, 32px)/2)
}

.dex-tabs-pane-lg.category-size {
  border-radius: 6px;
  border-radius: var(--dex-okd-tabs-pane-lg-border-radius, 6px);
  border-width: 1px;
  border-width: var(--dex-okd-tabs-pane-lg-border-width, 1px);
  font-size: 14px;
  font-size: var(--dex-okd-tabs-pane-lg-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-pane-lg-font-weight, 400);
  height: 36px;
  height: var(--dex-okd-tabs-pane-lg-height, 36px);
  margin-right: 8px;
  margin-right: var(--dex-okd-tabs-pane-lg-margin-right, 8px);
  padding: 0 12px;
  padding: 0 var(--dex-okd-tabs-pane-lg-padding-vertical, 12px)
}

.dex-tabs-pane-lg.category-size:last-child {
  margin-right: 0
}

.dex-tabs-pane-lg.category-size.dex-tabs-active {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-lg-active-font-weight, 500)
}

.dex-tabs-pane-lg.category-size:hover:not(.dex-tabs-active) {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-lg-hover-font-weight, 500)
}

.dex-tabs-pane-lg.category-size.dex-tabs-pane-circle {
  border-radius: 18px;
  border-radius: calc(var(--dex-okd-tabs-pane-lg-height, 36px)/2)
}

.dex-tabs-pane-xl.category-size {
  border-radius: 8px;
  border-radius: var(--dex-okd-tabs-pane-xl-border-radius, 8px);
  border-width: 1px;
  border-width: var(--dex-okd-tabs-pane-xl-border-width, 1px);
  font-size: 14px;
  font-size: var(--dex-okd-tabs-pane-xl-font-size, 14px);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-pane-xl-font-weight, 400);
  height: 40px;
  height: var(--dex-okd-tabs-pane-xl-height, 40px);
  margin-right: 8px;
  margin-right: var(--dex-okd-tabs-pane-xl-margin-right, 8px);
  padding: 0 16px;
  padding: 0 var(--dex-okd-tabs-pane-xl-padding-vertical, 16px)
}

.dex-tabs-pane-xl.category-size:last-child {
  margin-right: 0
}

.dex-tabs-pane-xl.category-size.dex-tabs-active {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xl-active-font-weight, 500)
}

.dex-tabs-pane-xl.category-size:hover:not(.dex-tabs-active) {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xl-hover-font-weight, 500)
}

.dex-tabs-pane-xl.category-size.dex-tabs-pane-circle {
  border-radius: 20px;
  border-radius: calc(var(--dex-okd-tabs-pane-xl-height, 40px)/2)
}

.dex-tabs-pane-xxl.category-size {
  border-radius: 8px;
  border-radius: var(--dex-okd-tabs-pane-xxl-border-radius, 8px);
  border-width: 1px;
  border-width: var(--dex-okd-tabs-pane-xxl-border-width, 1px);
  font-size: 16px;
  font-size: var(--dex-okd-tabs-pane-xxl-font-size, 16px);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-pane-xxl-font-weight, 400);
  height: 44px;
  height: var(--dex-okd-tabs-pane-xxl-height, 44px);
  margin-right: 8px;
  margin-right: var(--dex-okd-tabs-pane-xxl-margin-right, 8px);
  padding: 0 16px;
  padding: 0 var(--dex-okd-tabs-pane-xxl-padding-vertical, 16px)
}

.dex-tabs-pane-xxl.category-size:last-child {
  margin-right: 0
}

.dex-tabs-pane-xxl.category-size.dex-tabs-active {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xxl-active-font-weight, 500)
}

.dex-tabs-pane-xxl.category-size:hover:not(.dex-tabs-active) {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xxl-hover-font-weight, 500)
}

.dex-tabs-pane-xxl.category-size.dex-tabs-pane-circle {
  border-radius: 22px;
  border-radius: calc(var(--dex-okd-tabs-pane-xxl-height, 44px)/2)
}

.dex-tabs-pane-xxxl.category-size {
  border-radius: 10px;
  border-radius: var(--dex-okd-tabs-pane-xxxl-border-radius, 10px);
  border-width: 1px;
  border-width: var(--dex-okd-tabs-pane-xxxl-border-width, 1px);
  font-size: 18px;
  font-size: var(--dex-okd-tabs-pane-xxxl-font-size, 18px);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-pane-xxxl-font-weight, 400);
  height: 50px;
  height: var(--dex-okd-tabs-pane-xxxl-height, 50px);
  margin-right: 8px;
  margin-right: var(--dex-okd-tabs-pane-xxxl-margin-right, 8px);
  padding: 0 16px;
  padding: 0 var(--dex-okd-tabs-pane-xxxl-padding-vertical, 16px)
}

.dex-tabs-pane-xxxl.category-size:last-child {
  margin-right: 0
}

.dex-tabs-pane-xxxl.category-size.dex-tabs-active {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xxxl-active-font-weight, 500)
}

.dex-tabs-pane-xxxl.category-size:hover:not(.dex-tabs-active) {
  font-weight: 500;
  font-weight: var(--dex-okd-tabs-pane-xxxl-hover-font-weight, 500)
}

.dex-tabs-pane-xxxl.category-size.dex-tabs-pane-circle {
  border-radius: 25px;
  border-radius: calc(var(--dex-okd-tabs-pane-xxxl-height, 50px)/2)
}

.dex-tabs-pane-xxs:last-child {
  margin-right: 0 !important
}

.dex-tabs-pane-xxs.dex-tabs-pane-underline {
  font-size: var(--dex-okd-tabs-xxs-underline-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxs-underline-font-weight, 400);
  margin-right: var(--dex-okd-tabs-xxs-underline-spacing);
  padding: 0 var(--dex-okd-tabs-xxs-underline-label-padding)
}

.dex-tabs-pane-xxs.dex-tabs-pane-underline.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxs-underline-height)/2)
}

.dex-tabs-pane-xxs.dex-tabs-pane-underline-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxs-underline-active-font-weight, 400)
}

.dex-tabs-pane-xxs.dex-tabs-pane-button {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxs-button-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxs-button-font-size);
  font-weight: var(--dex-okd-tabs-xxs-button-font-weight);
  margin-right: var(--dex-okd-tabs-xxs-button-spacing);
  padding: 0 var(--dex-okd-tabs-xxs-button-label-padding)
}

.dex-tabs-pane-xxs.dex-tabs-pane-button.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxs-button-height)/2)
}

.dex-tabs-pane-xxs.dex-tabs-pane-button-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxs-button-active-font-weight, 400)
}

.dex-tabs-pane-xxs.dex-tabs-pane-muted {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxs-muted-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxs-muted-font-size);
  font-weight: var(--dex-okd-tabs-xxs-muted-font-weight);
  margin-right: var(--dex-okd-tabs-xxs-muted-spacing);
  padding: 0 var(--dex-okd-tabs-xxs-muted-label-padding)
}

.dex-tabs-pane-xxs.dex-tabs-pane-muted.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxs-muted-height)/2)
}

.dex-tabs-pane-xxs.dex-tabs-pane-muted-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxs-muted-active-font-weight, 400)
}

.dex-tabs-pane-xxs.dex-tabs-pane-segmented {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxs-segmented-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxs-segmented-font-size);
  font-weight: var(--dex-okd-tabs-xxs-segmented-font-weight);
  margin-right: var(--dex-okd-tabs-xxs-segmented-spacing);
  padding: 0 var(--dex-okd-tabs-xxs-segmented-label-padding)
}

.dex-tabs-pane-xxs.dex-tabs-pane-segmented-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxs-segmented-active-font-weight, 400)
}

.dex-tabs-pane-xxs.dex-tabs-pane-segmented.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxs-segmented-height)/2)
}

.dex-tabs-pane-list-xxs .dex-tabs-pane-list-nav-icon .icon {
  font-size: var(--dex-okd-tabs-xxs-common-icon-size)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-underline {
  font-size: var(--dex-okd-tabs-xxs-underline-font-size);
  height: var(--dex-okd-tabs-xxs-underline-height)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-underline .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxs-underline-height)/2)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-button {
  font-size: var(--dex-okd-tabs-xxs-button-font-size);
  height: var(--dex-okd-tabs-xxs-button-height);
  line-height: var(--dex-okd-tabs-xxs-button-height)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-button .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxs-button-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-button .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxs-button-height)/2)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-muted {
  font-size: var(--dex-okd-tabs-xxs-muted-font-size);
  height: var(--dex-okd-tabs-xxs-muted-height);
  line-height: var(--dex-okd-tabs-xxs-muted-height)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-muted .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxs-muted-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-muted .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxs-muted-height)/2)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-segmented {
  font-size: var(--dex-okd-tabs-xxs-segmented-font-size);
  height: var(--dex-okd-tabs-xxs-segmented-height);
  line-height: var(--dex-okd-tabs-xxs-segmented-height)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxs-segmented-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-segmented .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxs-segmented-height)/2)
}

.dex-tabs-pane-list-xxs.dex-tabs-pane-list-segmented .dex-tabs-pane-list-flex {
  padding: var(--dex-okd-tabs-xxs-segmented-container-padding)
}

.dex-tabs-pane-xs:last-child {
  margin-right: 0 !important
}

.dex-tabs-pane-xs.dex-tabs-pane-underline {
  font-size: var(--dex-okd-tabs-xs-underline-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xs-underline-font-weight, 400);
  margin-right: var(--dex-okd-tabs-xs-underline-spacing);
  padding: 0 var(--dex-okd-tabs-xs-underline-label-padding)
}

.dex-tabs-pane-xs.dex-tabs-pane-underline.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xs-underline-height)/2)
}

.dex-tabs-pane-xs.dex-tabs-pane-underline-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xs-underline-active-font-weight, 400)
}

.dex-tabs-pane-xs.dex-tabs-pane-button {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xs-button-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xs-button-font-size);
  font-weight: var(--dex-okd-tabs-xs-button-font-weight);
  margin-right: var(--dex-okd-tabs-xs-button-spacing);
  padding: 0 var(--dex-okd-tabs-xs-button-label-padding)
}

.dex-tabs-pane-xs.dex-tabs-pane-button.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xs-button-height)/2)
}

.dex-tabs-pane-xs.dex-tabs-pane-button-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xs-button-active-font-weight, 400)
}

.dex-tabs-pane-xs.dex-tabs-pane-muted {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xs-muted-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xs-muted-font-size);
  font-weight: var(--dex-okd-tabs-xs-muted-font-weight);
  margin-right: var(--dex-okd-tabs-xs-muted-spacing);
  padding: 0 var(--dex-okd-tabs-xs-muted-label-padding)
}

.dex-tabs-pane-xs.dex-tabs-pane-muted.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xs-muted-height)/2)
}

.dex-tabs-pane-xs.dex-tabs-pane-muted-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xs-muted-active-font-weight, 400)
}

.dex-tabs-pane-xs.dex-tabs-pane-segmented {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xs-segmented-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xs-segmented-font-size);
  font-weight: var(--dex-okd-tabs-xs-segmented-font-weight);
  margin-right: var(--dex-okd-tabs-xs-segmented-spacing);
  padding: 0 var(--dex-okd-tabs-xs-segmented-label-padding)
}

.dex-tabs-pane-xs.dex-tabs-pane-segmented-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xs-segmented-active-font-weight, 400)
}

.dex-tabs-pane-xs.dex-tabs-pane-segmented.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xs-segmented-height)/2)
}

.dex-tabs-pane-list-xs .dex-tabs-pane-list-nav-icon .icon {
  font-size: var(--dex-okd-tabs-xs-common-icon-size)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-underline {
  font-size: var(--dex-okd-tabs-xs-underline-font-size);
  height: var(--dex-okd-tabs-xs-underline-height)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-underline .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xs-underline-height)/2)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-button {
  font-size: var(--dex-okd-tabs-xs-button-font-size);
  height: var(--dex-okd-tabs-xs-button-height);
  line-height: var(--dex-okd-tabs-xs-button-height)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-button .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xs-button-container-border-radius, 4px)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-button .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xs-button-height)/2)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-muted {
  font-size: var(--dex-okd-tabs-xs-muted-font-size);
  height: var(--dex-okd-tabs-xs-muted-height);
  line-height: var(--dex-okd-tabs-xs-muted-height)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-muted .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xs-muted-container-border-radius, 4px)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-muted .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xs-muted-height)/2)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-segmented {
  font-size: var(--dex-okd-tabs-xs-segmented-font-size);
  height: var(--dex-okd-tabs-xs-segmented-height);
  line-height: var(--dex-okd-tabs-xs-segmented-height)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xs-segmented-container-border-radius, 4px)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-segmented .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xs-segmented-height)/2)
}

.dex-tabs-pane-list-xs.dex-tabs-pane-list-segmented .dex-tabs-pane-list-flex {
  padding: var(--dex-okd-tabs-xs-segmented-container-padding)
}

.dex-tabs-pane-sm:last-child {
  margin-right: 0 !important
}

.dex-tabs-pane-sm.dex-tabs-pane-underline {
  font-size: var(--dex-okd-tabs-sm-underline-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-sm-underline-font-weight, 400);
  margin-right: var(--dex-okd-tabs-sm-underline-spacing);
  padding: 0 var(--dex-okd-tabs-sm-underline-label-padding)
}

.dex-tabs-pane-sm.dex-tabs-pane-underline.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-sm-underline-height)/2)
}

.dex-tabs-pane-sm.dex-tabs-pane-underline-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-sm-underline-active-font-weight, 400)
}

.dex-tabs-pane-sm.dex-tabs-pane-button {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-sm-button-border-radius, 4px);
  font-size: var(--dex-okd-tabs-sm-button-font-size);
  font-weight: var(--dex-okd-tabs-sm-button-font-weight);
  margin-right: var(--dex-okd-tabs-sm-button-spacing);
  padding: 0 var(--dex-okd-tabs-sm-button-label-padding)
}

.dex-tabs-pane-sm.dex-tabs-pane-button.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-sm-button-height)/2)
}

.dex-tabs-pane-sm.dex-tabs-pane-button-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-sm-button-active-font-weight, 400)
}

.dex-tabs-pane-sm.dex-tabs-pane-muted {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-sm-muted-border-radius, 4px);
  font-size: var(--dex-okd-tabs-sm-muted-font-size);
  font-weight: var(--dex-okd-tabs-sm-muted-font-weight);
  margin-right: var(--dex-okd-tabs-sm-muted-spacing);
  padding: 0 var(--dex-okd-tabs-sm-muted-label-padding)
}

.dex-tabs-pane-sm.dex-tabs-pane-muted.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-sm-muted-height)/2)
}

.dex-tabs-pane-sm.dex-tabs-pane-muted-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-sm-muted-active-font-weight, 400)
}

.dex-tabs-pane-sm.dex-tabs-pane-segmented {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-sm-segmented-border-radius, 4px);
  font-size: var(--dex-okd-tabs-sm-segmented-font-size);
  font-weight: var(--dex-okd-tabs-sm-segmented-font-weight);
  margin-right: var(--dex-okd-tabs-sm-segmented-spacing);
  padding: 0 var(--dex-okd-tabs-sm-segmented-label-padding)
}

.dex-tabs-pane-sm.dex-tabs-pane-segmented-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-sm-segmented-active-font-weight, 400)
}

.dex-tabs-pane-sm.dex-tabs-pane-segmented.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-sm-segmented-height)/2)
}

.dex-tabs-pane-list-sm .dex-tabs-pane-list-nav-icon .icon {
  font-size: var(--dex-okd-tabs-sm-common-icon-size)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-underline {
  font-size: var(--dex-okd-tabs-sm-underline-font-size);
  height: var(--dex-okd-tabs-sm-underline-height)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-underline .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-sm-underline-height)/2)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-button {
  font-size: var(--dex-okd-tabs-sm-button-font-size);
  height: var(--dex-okd-tabs-sm-button-height);
  line-height: var(--dex-okd-tabs-sm-button-height)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-button .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-sm-button-container-border-radius, 4px)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-button .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-sm-button-height)/2)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-muted {
  font-size: var(--dex-okd-tabs-sm-muted-font-size);
  height: var(--dex-okd-tabs-sm-muted-height);
  line-height: var(--dex-okd-tabs-sm-muted-height)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-muted .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-sm-muted-container-border-radius, 4px)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-muted .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-sm-muted-height)/2)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-segmented {
  font-size: var(--dex-okd-tabs-sm-segmented-font-size);
  height: var(--dex-okd-tabs-sm-segmented-height);
  line-height: var(--dex-okd-tabs-sm-segmented-height)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-sm-segmented-container-border-radius, 4px)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-segmented .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-sm-segmented-height)/2)
}

.dex-tabs-pane-list-sm.dex-tabs-pane-list-segmented .dex-tabs-pane-list-flex {
  padding: var(--dex-okd-tabs-sm-segmented-container-padding)
}

.dex-tabs-pane-md:last-child {
  margin-right: 0 !important
}

.dex-tabs-pane-md.dex-tabs-pane-underline {
  font-size: var(--dex-okd-tabs-md-underline-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-md-underline-font-weight, 400);
  margin-right: var(--dex-okd-tabs-md-underline-spacing);
  padding: 0 var(--dex-okd-tabs-md-underline-label-padding)
}

.dex-tabs-pane-md.dex-tabs-pane-underline.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-md-underline-height)/2)
}

.dex-tabs-pane-md.dex-tabs-pane-underline-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-md-underline-active-font-weight, 400)
}

.dex-tabs-pane-md.dex-tabs-pane-button {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-md-button-border-radius, 4px);
  font-size: var(--dex-okd-tabs-md-button-font-size);
  font-weight: var(--dex-okd-tabs-md-button-font-weight);
  margin-right: var(--dex-okd-tabs-md-button-spacing);
  padding: 0 var(--dex-okd-tabs-md-button-label-padding)
}

.dex-tabs-pane-md.dex-tabs-pane-button.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-md-button-height)/2)
}

.dex-tabs-pane-md.dex-tabs-pane-button-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-md-button-active-font-weight, 400)
}

.dex-tabs-pane-md.dex-tabs-pane-muted {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-md-muted-border-radius, 4px);
  font-size: var(--dex-okd-tabs-md-muted-font-size);
  font-weight: var(--dex-okd-tabs-md-muted-font-weight);
  margin-right: var(--dex-okd-tabs-md-muted-spacing);
  padding: 0 var(--dex-okd-tabs-md-muted-label-padding)
}

.dex-tabs-pane-md.dex-tabs-pane-muted.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-md-muted-height)/2)
}

.dex-tabs-pane-md.dex-tabs-pane-muted-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-md-muted-active-font-weight, 400)
}

.dex-tabs-pane-md.dex-tabs-pane-segmented {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-md-segmented-border-radius, 4px);
  font-size: var(--dex-okd-tabs-md-segmented-font-size);
  font-weight: var(--dex-okd-tabs-md-segmented-font-weight);
  margin-right: var(--dex-okd-tabs-md-segmented-spacing);
  padding: 0 var(--dex-okd-tabs-md-segmented-label-padding)
}

.dex-tabs-pane-md.dex-tabs-pane-segmented-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-md-segmented-active-font-weight, 400)
}

.dex-tabs-pane-md.dex-tabs-pane-segmented.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-md-segmented-height)/2)
}

.dex-tabs-pane-list-md .dex-tabs-pane-list-nav-icon .icon {
  font-size: var(--dex-okd-tabs-md-common-icon-size)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-underline {
  font-size: var(--dex-okd-tabs-md-underline-font-size);
  height: var(--dex-okd-tabs-md-underline-height)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-underline .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-md-underline-height)/2)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-button {
  font-size: var(--dex-okd-tabs-md-button-font-size);
  height: var(--dex-okd-tabs-md-button-height);
  line-height: var(--dex-okd-tabs-md-button-height)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-button .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-md-button-container-border-radius, 4px)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-button .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-md-button-height)/2)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-muted {
  font-size: var(--dex-okd-tabs-md-muted-font-size);
  height: var(--dex-okd-tabs-md-muted-height);
  line-height: var(--dex-okd-tabs-md-muted-height)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-muted .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-md-muted-container-border-radius, 4px)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-muted .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-md-muted-height)/2)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-segmented {
  font-size: var(--dex-okd-tabs-md-segmented-font-size);
  height: var(--dex-okd-tabs-md-segmented-height);
  line-height: var(--dex-okd-tabs-md-segmented-height)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-md-segmented-container-border-radius, 4px)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-segmented .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-md-segmented-height)/2)
}

.dex-tabs-pane-list-md.dex-tabs-pane-list-segmented .dex-tabs-pane-list-flex {
  padding: var(--dex-okd-tabs-md-segmented-container-padding)
}

.dex-tabs-pane-lg:last-child {
  margin-right: 0 !important
}

.dex-tabs-pane-lg.dex-tabs-pane-underline {
  font-size: var(--dex-okd-tabs-lg-underline-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-lg-underline-font-weight, 400);
  margin-right: var(--dex-okd-tabs-lg-underline-spacing);
  padding: 0 var(--dex-okd-tabs-lg-underline-label-padding)
}

.dex-tabs-pane-lg.dex-tabs-pane-underline.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-lg-underline-height)/2)
}

.dex-tabs-pane-lg.dex-tabs-pane-underline-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-lg-underline-active-font-weight, 400)
}

.dex-tabs-pane-lg.dex-tabs-pane-button {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-lg-button-border-radius, 4px);
  font-size: var(--dex-okd-tabs-lg-button-font-size);
  font-weight: var(--dex-okd-tabs-lg-button-font-weight);
  margin-right: var(--dex-okd-tabs-lg-button-spacing);
  padding: 0 var(--dex-okd-tabs-lg-button-label-padding)
}

.dex-tabs-pane-lg.dex-tabs-pane-button.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-lg-button-height)/2)
}

.dex-tabs-pane-lg.dex-tabs-pane-button-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-lg-button-active-font-weight, 400)
}

.dex-tabs-pane-lg.dex-tabs-pane-muted {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-lg-muted-border-radius, 4px);
  font-size: var(--dex-okd-tabs-lg-muted-font-size);
  font-weight: var(--dex-okd-tabs-lg-muted-font-weight);
  margin-right: var(--dex-okd-tabs-lg-muted-spacing);
  padding: 0 var(--dex-okd-tabs-lg-muted-label-padding)
}

.dex-tabs-pane-lg.dex-tabs-pane-muted.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-lg-muted-height)/2)
}

.dex-tabs-pane-lg.dex-tabs-pane-muted-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-lg-muted-active-font-weight, 400)
}

.dex-tabs-pane-lg.dex-tabs-pane-segmented {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-lg-segmented-border-radius, 4px);
  font-size: var(--dex-okd-tabs-lg-segmented-font-size);
  font-weight: var(--dex-okd-tabs-lg-segmented-font-weight);
  margin-right: var(--dex-okd-tabs-lg-segmented-spacing);
  padding: 0 var(--dex-okd-tabs-lg-segmented-label-padding)
}

.dex-tabs-pane-lg.dex-tabs-pane-segmented-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-lg-segmented-active-font-weight, 400)
}

.dex-tabs-pane-lg.dex-tabs-pane-segmented.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-lg-segmented-height)/2)
}

.dex-tabs-pane-list-lg .dex-tabs-pane-list-nav-icon .icon {
  font-size: var(--dex-okd-tabs-lg-common-icon-size)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-underline {
  font-size: var(--dex-okd-tabs-lg-underline-font-size);
  height: var(--dex-okd-tabs-lg-underline-height)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-underline .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-lg-underline-height)/2)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-button {
  font-size: var(--dex-okd-tabs-lg-button-font-size);
  height: var(--dex-okd-tabs-lg-button-height);
  line-height: var(--dex-okd-tabs-lg-button-height)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-button .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-lg-button-container-border-radius, 4px)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-button .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-lg-button-height)/2)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-muted {
  font-size: var(--dex-okd-tabs-lg-muted-font-size);
  height: var(--dex-okd-tabs-lg-muted-height);
  line-height: var(--dex-okd-tabs-lg-muted-height)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-muted .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-lg-muted-container-border-radius, 4px)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-muted .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-lg-muted-height)/2)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-segmented {
  font-size: var(--dex-okd-tabs-lg-segmented-font-size);
  height: var(--dex-okd-tabs-lg-segmented-height);
  line-height: var(--dex-okd-tabs-lg-segmented-height)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-lg-segmented-container-border-radius, 4px)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-segmented .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-lg-segmented-height)/2)
}

.dex-tabs-pane-list-lg.dex-tabs-pane-list-segmented .dex-tabs-pane-list-flex {
  padding: var(--dex-okd-tabs-lg-segmented-container-padding)
}

.dex-tabs-pane-xl:last-child {
  margin-right: 0 !important
}

.dex-tabs-pane-xl.dex-tabs-pane-underline {
  font-size: var(--dex-okd-tabs-xl-underline-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xl-underline-font-weight, 400);
  margin-right: var(--dex-okd-tabs-xl-underline-spacing);
  padding: 0 var(--dex-okd-tabs-xl-underline-label-padding)
}

.dex-tabs-pane-xl.dex-tabs-pane-underline.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xl-underline-height)/2)
}

.dex-tabs-pane-xl.dex-tabs-pane-underline-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xl-underline-active-font-weight, 400)
}

.dex-tabs-pane-xl.dex-tabs-pane-button {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xl-button-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xl-button-font-size);
  font-weight: var(--dex-okd-tabs-xl-button-font-weight);
  margin-right: var(--dex-okd-tabs-xl-button-spacing);
  padding: 0 var(--dex-okd-tabs-xl-button-label-padding)
}

.dex-tabs-pane-xl.dex-tabs-pane-button.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xl-button-height)/2)
}

.dex-tabs-pane-xl.dex-tabs-pane-button-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xl-button-active-font-weight, 400)
}

.dex-tabs-pane-xl.dex-tabs-pane-muted {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xl-muted-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xl-muted-font-size);
  font-weight: var(--dex-okd-tabs-xl-muted-font-weight);
  margin-right: var(--dex-okd-tabs-xl-muted-spacing);
  padding: 0 var(--dex-okd-tabs-xl-muted-label-padding)
}

.dex-tabs-pane-xl.dex-tabs-pane-muted.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xl-muted-height)/2)
}

.dex-tabs-pane-xl.dex-tabs-pane-muted-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xl-muted-active-font-weight, 400)
}

.dex-tabs-pane-xl.dex-tabs-pane-segmented {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xl-segmented-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xl-segmented-font-size);
  font-weight: var(--dex-okd-tabs-xl-segmented-font-weight);
  margin-right: var(--dex-okd-tabs-xl-segmented-spacing);
  padding: 0 var(--dex-okd-tabs-xl-segmented-label-padding)
}

.dex-tabs-pane-xl.dex-tabs-pane-segmented-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xl-segmented-active-font-weight, 400)
}

.dex-tabs-pane-xl.dex-tabs-pane-segmented.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xl-segmented-height)/2)
}

.dex-tabs-pane-list-xl .dex-tabs-pane-list-nav-icon .icon {
  font-size: var(--dex-okd-tabs-xl-common-icon-size)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-underline {
  font-size: var(--dex-okd-tabs-xl-underline-font-size);
  height: var(--dex-okd-tabs-xl-underline-height)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-underline .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xl-underline-height)/2)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-button {
  font-size: var(--dex-okd-tabs-xl-button-font-size);
  height: var(--dex-okd-tabs-xl-button-height);
  line-height: var(--dex-okd-tabs-xl-button-height)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-button .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xl-button-container-border-radius, 4px)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-button .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xl-button-height)/2)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-muted {
  font-size: var(--dex-okd-tabs-xl-muted-font-size);
  height: var(--dex-okd-tabs-xl-muted-height);
  line-height: var(--dex-okd-tabs-xl-muted-height)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-muted .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xl-muted-container-border-radius, 4px)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-muted .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xl-muted-height)/2)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-segmented {
  font-size: var(--dex-okd-tabs-xl-segmented-font-size);
  height: var(--dex-okd-tabs-xl-segmented-height);
  line-height: var(--dex-okd-tabs-xl-segmented-height)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xl-segmented-container-border-radius, 4px)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xl-segmented-height)/2)
}

.dex-tabs-pane-list-xl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-flex {
  padding: var(--dex-okd-tabs-xl-segmented-container-padding)
}

.dex-tabs-pane-xxl:last-child {
  margin-right: 0 !important
}

.dex-tabs-pane-xxl.dex-tabs-pane-underline {
  font-size: var(--dex-okd-tabs-xxl-underline-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxl-underline-font-weight, 400);
  margin-right: var(--dex-okd-tabs-xxl-underline-spacing);
  padding: 0 var(--dex-okd-tabs-xxl-underline-label-padding)
}

.dex-tabs-pane-xxl.dex-tabs-pane-underline.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxl-underline-height)/2)
}

.dex-tabs-pane-xxl.dex-tabs-pane-underline-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxl-underline-active-font-weight, 400)
}

.dex-tabs-pane-xxl.dex-tabs-pane-button {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxl-button-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxl-button-font-size);
  font-weight: var(--dex-okd-tabs-xxl-button-font-weight);
  margin-right: var(--dex-okd-tabs-xxl-button-spacing);
  padding: 0 var(--dex-okd-tabs-xxl-button-label-padding)
}

.dex-tabs-pane-xxl.dex-tabs-pane-button.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxl-button-height)/2)
}

.dex-tabs-pane-xxl.dex-tabs-pane-button-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxl-button-active-font-weight, 400)
}

.dex-tabs-pane-xxl.dex-tabs-pane-muted {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxl-muted-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxl-muted-font-size);
  font-weight: var(--dex-okd-tabs-xxl-muted-font-weight);
  margin-right: var(--dex-okd-tabs-xxl-muted-spacing);
  padding: 0 var(--dex-okd-tabs-xxl-muted-label-padding)
}

.dex-tabs-pane-xxl.dex-tabs-pane-muted.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxl-muted-height)/2)
}

.dex-tabs-pane-xxl.dex-tabs-pane-muted-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxl-muted-active-font-weight, 400)
}

.dex-tabs-pane-xxl.dex-tabs-pane-segmented {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxl-segmented-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxl-segmented-font-size);
  font-weight: var(--dex-okd-tabs-xxl-segmented-font-weight);
  margin-right: var(--dex-okd-tabs-xxl-segmented-spacing);
  padding: 0 var(--dex-okd-tabs-xxl-segmented-label-padding)
}

.dex-tabs-pane-xxl.dex-tabs-pane-segmented-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxl-segmented-active-font-weight, 400)
}

.dex-tabs-pane-xxl.dex-tabs-pane-segmented.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxl-segmented-height)/2)
}

.dex-tabs-pane-list-xxl .dex-tabs-pane-list-nav-icon .icon {
  font-size: var(--dex-okd-tabs-xxl-common-icon-size)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-underline {
  font-size: var(--dex-okd-tabs-xxl-underline-font-size);
  height: var(--dex-okd-tabs-xxl-underline-height)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-underline .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxl-underline-height)/2)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-button {
  font-size: var(--dex-okd-tabs-xxl-button-font-size);
  height: var(--dex-okd-tabs-xxl-button-height);
  line-height: var(--dex-okd-tabs-xxl-button-height)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-button .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxl-button-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-button .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxl-button-height)/2)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-muted {
  font-size: var(--dex-okd-tabs-xxl-muted-font-size);
  height: var(--dex-okd-tabs-xxl-muted-height);
  line-height: var(--dex-okd-tabs-xxl-muted-height)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-muted .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxl-muted-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-muted .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxl-muted-height)/2)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-segmented {
  font-size: var(--dex-okd-tabs-xxl-segmented-font-size);
  height: var(--dex-okd-tabs-xxl-segmented-height);
  line-height: var(--dex-okd-tabs-xxl-segmented-height)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxl-segmented-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxl-segmented-height)/2)
}

.dex-tabs-pane-list-xxl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-flex {
  padding: var(--dex-okd-tabs-xxl-segmented-container-padding)
}

.dex-tabs-pane-xxxl:last-child {
  margin-right: 0 !important
}

.dex-tabs-pane-xxxl.dex-tabs-pane-underline {
  font-size: var(--dex-okd-tabs-xxxl-underline-font-size);
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxxl-underline-font-weight, 400);
  margin-right: var(--dex-okd-tabs-xxxl-underline-spacing);
  padding: 0 var(--dex-okd-tabs-xxxl-underline-label-padding)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-underline.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxxl-underline-height)/2)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-underline-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxxl-underline-active-font-weight, 400)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-button {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxxl-button-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxxl-button-font-size);
  font-weight: var(--dex-okd-tabs-xxxl-button-font-weight);
  margin-right: var(--dex-okd-tabs-xxxl-button-spacing);
  padding: 0 var(--dex-okd-tabs-xxxl-button-label-padding)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-button.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxxl-button-height)/2)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-button-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxxl-button-active-font-weight, 400)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-muted {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxxl-muted-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxxl-muted-font-size);
  font-weight: var(--dex-okd-tabs-xxxl-muted-font-weight);
  margin-right: var(--dex-okd-tabs-xxxl-muted-spacing);
  padding: 0 var(--dex-okd-tabs-xxxl-muted-label-padding)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-muted.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxxl-muted-height)/2)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-muted-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxxl-muted-active-font-weight, 400)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-segmented {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxxl-segmented-border-radius, 4px);
  font-size: var(--dex-okd-tabs-xxxl-segmented-font-size);
  font-weight: var(--dex-okd-tabs-xxxl-segmented-font-weight);
  margin-right: var(--dex-okd-tabs-xxxl-segmented-spacing);
  padding: 0 var(--dex-okd-tabs-xxxl-segmented-label-padding)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-segmented-active {
  font-weight: 400;
  font-weight: var(--dex-okd-tabs-xxxl-segmented-active-font-weight, 400)
}

.dex-tabs-pane-xxxl.dex-tabs-pane-segmented.dex-tabs-pane-circle {
  border-radius: calc(var(--dex-okd-tabs-xxxl-segmented-height)/2)
}

.dex-tabs-pane-list-xxxl .dex-tabs-pane-list-nav-icon .icon {
  font-size: var(--dex-okd-tabs-xxxl-common-icon-size)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-underline {
  font-size: var(--dex-okd-tabs-xxxl-underline-font-size);
  height: var(--dex-okd-tabs-xxxl-underline-height)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-underline .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxxl-underline-height)/2)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-button {
  font-size: var(--dex-okd-tabs-xxxl-button-font-size);
  height: var(--dex-okd-tabs-xxxl-button-height);
  line-height: var(--dex-okd-tabs-xxxl-button-height)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-button .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxxl-button-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-button .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxxl-button-height)/2)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-muted {
  font-size: var(--dex-okd-tabs-xxxl-muted-font-size);
  height: var(--dex-okd-tabs-xxxl-muted-height);
  line-height: var(--dex-okd-tabs-xxxl-muted-height)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-muted .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxxl-muted-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-muted .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxxl-muted-height)/2)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-segmented {
  font-size: var(--dex-okd-tabs-xxxl-segmented-font-size);
  height: var(--dex-okd-tabs-xxxl-segmented-height);
  line-height: var(--dex-okd-tabs-xxxl-segmented-height)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  border-radius: 4px;
  border-radius: var(--dex-okd-tabs-xxxl-segmented-container-border-radius, 4px)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-circle {
  border-radius: calc(var(--dex-okd-tabs-xxxl-segmented-height)/2)
}

.dex-tabs-pane-list-xxxl.dex-tabs-pane-list-segmented .dex-tabs-pane-list-flex {
  padding: var(--dex-okd-tabs-xxxl-segmented-container-padding)
}

.dex-tabs-pane.dex-tabs-pane-blue-no-border.dex-tabs-pane-underline-active {
  border-bottom-color: transparent
}

.dex-tabs-pane-blue.dex-tabs-pane-underline {
  color: var(--dex-okd-tabs-underline-pane-common-label-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-underline:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: -2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-blue.dex-tabs-pane-underline-active {
  border-bottom-color: var(--dex-okd-tabs-underline-pane-blue-border-active-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-underline-active,
.dex-tabs-pane-blue.dex-tabs-pane-underline:hover:not(.is-mobile) {
  color: var(--dex-okd-tabs-underline-pane-blue-label-active-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-button {
  color: var(--dex-okd-tabs-button-pane-common-label-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-button-active {
  background-color: var(--dex-okd-tabs-button-pane-blue-bg-active-color);
  border-color: transparent;
  color: var(--dex-okd-tabs-button-pane-blue-label-active-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-button:hover:not(.is-mobile) {
  border-color: var(--dex-okd-tabs-button-pane-blue-bg-active-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-muted {
  color: var(--dex-okd-tabs-muted-pane-common-label-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-muted-active {
  border-color: var(--dex-okd-tabs-muted-pane-blue-border-active-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-muted-active,
.dex-tabs-pane-blue.dex-tabs-pane-muted:hover:not(.is-mobile) {
  color: var(--dex-okd-tabs-muted-pane-blue-label-active-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-segmented {
  color: var(--dex-okd-tabs-segmented-pane-common-label-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-segmented-active {
  background-color: var(--dex-okd-tabs-segmented-pane-blue-bg-active-color);
  color: var(--dex-okd-tabs-segmented-pane-blue-label-active-color)
}

.dex-tabs-pane-blue.dex-tabs-pane-segmented-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-tabs-segmented-pane-blue-label-active-color);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-list-blue .dex-tabs-transitions-underline {
  background-color: var(--dex-okd-tabs-underline-pane-blue-border-active-color)
}

.dex-tabs-pane.dex-tabs-pane-grey-no-border.dex-tabs-pane-underline-active {
  border-bottom-color: transparent
}

.dex-tabs-pane-grey.dex-tabs-pane-underline {
  color: var(--dex-okd-tabs-underline-pane-common-label-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-underline:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: -2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-grey.dex-tabs-pane-underline-active {
  border-bottom-color: var(--dex-okd-tabs-underline-pane-grey-border-active-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-underline-active,
.dex-tabs-pane-grey.dex-tabs-pane-underline:hover:not(.is-mobile) {
  color: var(--dex-okd-tabs-underline-pane-grey-label-active-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-button {
  color: var(--dex-okd-tabs-button-pane-common-label-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-button-active {
  background-color: var(--dex-okd-tabs-button-pane-grey-bg-active-color);
  border-color: transparent;
  color: var(--dex-okd-tabs-button-pane-grey-label-active-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-button:hover:not(.is-mobile) {
  border-color: var(--dex-okd-tabs-button-pane-grey-bg-active-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-muted {
  color: var(--dex-okd-tabs-muted-pane-common-label-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-muted-active {
  border-color: var(--dex-okd-tabs-muted-pane-grey-border-active-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-muted-active,
.dex-tabs-pane-grey.dex-tabs-pane-muted:hover:not(.is-mobile) {
  color: var(--dex-okd-tabs-muted-pane-grey-label-active-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-segmented {
  color: var(--dex-okd-tabs-segmented-pane-common-label-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-segmented-active {
  background-color: var(--dex-okd-tabs-segmented-pane-grey-bg-active-color);
  color: var(--dex-okd-tabs-segmented-pane-grey-label-active-color)
}

.dex-tabs-pane-grey.dex-tabs-pane-segmented-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-tabs-segmented-pane-grey-label-active-color);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-list-grey .dex-tabs-transitions-underline {
  background-color: var(--dex-okd-tabs-underline-pane-grey-border-active-color)
}

.dex-tabs-pane.dex-tabs-pane-green-no-border.dex-tabs-pane-underline-active {
  border-bottom-color: transparent
}

.dex-tabs-pane-green.dex-tabs-pane-underline {
  color: var(--dex-okd-tabs-underline-pane-common-label-color)
}

.dex-tabs-pane-green.dex-tabs-pane-underline:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: -2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-green.dex-tabs-pane-underline-active {
  border-bottom-color: var(--dex-okd-tabs-underline-pane-green-border-active-color)
}

.dex-tabs-pane-green.dex-tabs-pane-underline-active,
.dex-tabs-pane-green.dex-tabs-pane-underline:hover:not(.is-mobile) {
  color: var(--dex-okd-tabs-underline-pane-green-label-active-color)
}

.dex-tabs-pane-green.dex-tabs-pane-button {
  color: var(--dex-okd-tabs-button-pane-common-label-color)
}

.dex-tabs-pane-green.dex-tabs-pane-button-active {
  background-color: var(--dex-okd-tabs-button-pane-green-bg-active-color);
  border-color: transparent;
  color: var(--dex-okd-tabs-button-pane-green-label-active-color)
}

.dex-tabs-pane-green.dex-tabs-pane-button:hover:not(.is-mobile) {
  border-color: var(--dex-okd-tabs-button-pane-green-bg-active-color)
}

.dex-tabs-pane-green.dex-tabs-pane-muted {
  color: var(--dex-okd-tabs-muted-pane-common-label-color)
}

.dex-tabs-pane-green.dex-tabs-pane-muted-active {
  border-color: var(--dex-okd-tabs-muted-pane-green-border-active-color)
}

.dex-tabs-pane-green.dex-tabs-pane-muted-active,
.dex-tabs-pane-green.dex-tabs-pane-muted:hover:not(.is-mobile) {
  color: var(--dex-okd-tabs-muted-pane-green-label-active-color)
}

.dex-tabs-pane-green.dex-tabs-pane-segmented {
  color: var(--dex-okd-tabs-segmented-pane-common-label-color)
}

.dex-tabs-pane-green.dex-tabs-pane-segmented-active {
  background-color: var(--dex-okd-tabs-segmented-pane-green-bg-active-color);
  color: var(--dex-okd-tabs-segmented-pane-green-label-active-color)
}

.dex-tabs-pane-green.dex-tabs-pane-segmented-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-tabs-segmented-pane-green-label-active-color);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-list-green .dex-tabs-transitions-underline {
  background-color: var(--dex-okd-tabs-underline-pane-green-border-active-color)
}

.dex-tabs-pane.dex-tabs-pane-red-no-border.dex-tabs-pane-underline-active {
  border-bottom-color: transparent
}

.dex-tabs-pane-red.dex-tabs-pane-underline {
  color: var(--dex-okd-tabs-underline-pane-common-label-color)
}

.dex-tabs-pane-red.dex-tabs-pane-underline:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: -2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-red.dex-tabs-pane-underline-active {
  border-bottom-color: var(--dex-okd-tabs-underline-pane-red-border-active-color)
}

.dex-tabs-pane-red.dex-tabs-pane-underline-active,
.dex-tabs-pane-red.dex-tabs-pane-underline:hover:not(.is-mobile) {
  color: var(--dex-okd-tabs-underline-pane-red-label-active-color)
}

.dex-tabs-pane-red.dex-tabs-pane-button {
  color: var(--dex-okd-tabs-button-pane-common-label-color)
}

.dex-tabs-pane-red.dex-tabs-pane-button-active {
  background-color: var(--dex-okd-tabs-button-pane-red-bg-active-color);
  border-color: transparent;
  color: var(--dex-okd-tabs-button-pane-red-label-active-color)
}

.dex-tabs-pane-red.dex-tabs-pane-button:hover:not(.is-mobile) {
  border-color: var(--dex-okd-tabs-button-pane-red-bg-active-color)
}

.dex-tabs-pane-red.dex-tabs-pane-muted {
  color: var(--dex-okd-tabs-muted-pane-common-label-color)
}

.dex-tabs-pane-red.dex-tabs-pane-muted-active {
  border-color: var(--dex-okd-tabs-muted-pane-red-border-active-color)
}

.dex-tabs-pane-red.dex-tabs-pane-muted-active,
.dex-tabs-pane-red.dex-tabs-pane-muted:hover:not(.is-mobile) {
  color: var(--dex-okd-tabs-muted-pane-red-label-active-color)
}

.dex-tabs-pane-red.dex-tabs-pane-segmented {
  color: var(--dex-okd-tabs-segmented-pane-common-label-color)
}

.dex-tabs-pane-red.dex-tabs-pane-segmented-active {
  background-color: var(--dex-okd-tabs-segmented-pane-red-bg-active-color);
  color: var(--dex-okd-tabs-segmented-pane-red-label-active-color)
}

.dex-tabs-pane-red.dex-tabs-pane-segmented-active:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-tabs-segmented-pane-red-label-active-color);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-list-red .dex-tabs-transitions-underline {
  background-color: var(--dex-okd-tabs-underline-pane-red-border-active-color)
}

.dex-tabs-pane {
  align-items: center;
  box-sizing: border-box;
  color: var(--dex-okd-tabs-common-pane-label-color);
  cursor: pointer;
  display: flex;
  font-weight: 500;
  height: 100%;
  justify-content: center;
  text-align: center;
  white-space: nowrap
}

.dex-tabs-pane:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px
}

.dex-tabs-pane-underline {
  border-bottom: 2px solid transparent;
  padding-top: 2px
}

.dex-tabs-pane.no-active-border {
  border-bottom: none;
  padding-top: 0
}

.dex-tabs-pane-button {
  border: 1px solid var(--dex-okd-tabs-button-pane-common-border-color);
  border-radius: var(--dex-okd-tabs-button-pane-common-border-radius)
}

.dex-tabs-pane-button.dex-tabs-pane-button-no-border {
  border: none
}

.dex-tabs-pane-muted {
  border: 1px solid var(--dex-okd-tabs-muted-pane-common-border-color);
  border-radius: var(--dex-okd-tabs-muted-pane-common-border-radius)
}

.dex-tabs-pane-segmented {
  border-radius: var(--dex-okd-tabs-segmented-pane-common-border-radius);
  line-height: 1
}

.dex-tabs-pane-segmented-active {
  box-shadow: var(--dex-okd-tabs-segmented-pane-common-shadow)
}

.dex-tabs-pane-no-padding {
  padding: 0 !important
}

.dex-tabs .dex-tabs-pane.dex-tabs-pane-spacing {
  margin-right: var(--dex-okd-inner-tabs-spacing)
}

a.dex-tabs-pane {
  text-decoration: none
}

.dex-tabs-panel {
  display: none;
  width: 100%
}

.dex-tabs-panel:focus-visible {
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: -2px;
  outline-style: solid;
  outline-width: 1px
}

.dex-tabs-panel-show {
  display: block
}

.dex-tabs-pane-list {
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  position: relative;
  width: 100%
}

.dex-tabs-pane-list-wrapper {
  display: flex;
  flex: 1 1;
  overflow: hidden;
  position: relative
}

.dex-tabs-pane-list-center {
  justify-content: center
}

.dex-tabs-pane-list-slot {
  height: 100%
}

.dex-tabs-pane-list-container {
  box-sizing: border-box;
  display: flex;
  overflow: scroll;
  position: relative;
  scroll-behavior: smooth;
  scrollbar-width: none
}

.dex-tabs-pane-list-container::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0
}

.dex-tabs-pane-list-nav {
  --dex-okd-inner-tabs-nav-button-bg-color: var(--dex-okd-tabs-common-pane-nav-icon-bg-color-1);
  cursor: pointer
}

.dex-tabs-pane-list-nav-icon {
  align-items: center;
  background-image: linear-gradient(270deg, var(--dex-okd-inner-tabs-nav-button-bg-color) 72.22%, var(--dex-okd-tabs-common-pane-nav-icon-bg-color-2) 100%);
  color: var(--dex-okd-tabs-common-pane-icon-color);
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 36px;
  z-index: 9
}

.dex-tabs-pane-list-nav-icon:hover {
  color: var(--dex-okd-tabs-common-pane-icon-active-color)
}

.dex-tabs-pane-list-nav .icon-left {
  background-image: linear-gradient(-270deg, var(--dex-okd-inner-tabs-nav-button-bg-color) 72.22%, var(--dex-okd-tabs-common-pane-nav-icon-bg-color-2) 100%);
  left: 0
}

.dex-tabs-pane-list-nav .icon-left-inner {
  transform: rotate(180deg)
}

.dex-tabs-pane-list-nav .icon-right {
  right: 0
}

.dex-tabs-pane-list-flex-shrink {
  display: flex;
  flex-shrink: 0;
  position: relative;
  transition: transform .2s
}

.dex-tabs-pane-list-flex {
  flex: 1 1
}

.dex-tabs-pane-list-overflow {
  overflow: unset
}

.dex-tabs-pane-list-average,
.dex-tabs-pane-list-average .dex-tabs-pane {
  flex: 1 1
}

.dex-tabs-pane-list-right-alpha {
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, var(--dex-okd-tabs-common-pane-icon-bg-color) 100%);
  height: 100%;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  z-index: 9
}

.dex-tabs-pane-list-underline {
  border-bottom: 1px solid var(--dex-okd-tabs-underline-pane-common-border-color)
}

.dex-tabs-pane-list-underline-no-line {
  border-bottom: none
}

.dex-tabs-pane-list-segmented .dex-tabs-pane-list-container {
  background-color: var(--dex-okd-tabs-segmented-pane-common-list-bg-color);
  border-radius: 4px
}

.dex-tabs-panel-list {
  display: flex;
  flex: auto;
  width: 100%
}

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

.dex-tabs-transitions-underline {
  bottom: 0;
  height: 2px;
  left: 0;
  position: absolute;
  transition: all .3s
}

.dex-tag-fill-grey {
  background-color: var(--dex-okd-tag-fill-grey-background-color);
  border-color: var(--dex-okd-tag-fill-grey-border-color);
  color: var(--dex-okd-tag-fill-grey-font-color)
}

.dex-tag-fill-lightgrey {
  background-color: hsla(0, 0%, 100%, 0);
  background-color: var(--dex-okd-tag-fill-lightgrey-background-color, hsla(0, 0%, 100%, 0));
  border-color: hsla(0, 0%, 100%, 0);
  border-color: var(--dex-okd-tag-fill-lightgrey-border-color, hsla(0, 0%, 100%, 0));
  color: hsla(0, 0%, 100%, 0);
  color: var(--dex-okd-tag-fill-lightgrey-font-color, hsla(0, 0%, 100%, 0))
}

.dex-tag-fill-tangerine {
  background-color: hsla(0, 0%, 100%, 0);
  background-color: var(--dex-okd-tag-fill-tangerine-background-color, hsla(0, 0%, 100%, 0));
  border-color: hsla(0, 0%, 100%, 0);
  border-color: var(--dex-okd-tag-fill-tangerine-border-color, hsla(0, 0%, 100%, 0));
  color: hsla(0, 0%, 100%, 0);
  color: var(--dex-okd-tag-fill-tangerine-font-color, hsla(0, 0%, 100%, 0))
}

.dex-tag-fill-lime {
  background-color: var(--dex-okd-tag-fill-lime-background-color);
  border-color: var(--dex-okd-tag-fill-lime-border-color);
  color: var(--dex-okd-tag-fill-lime-font-color)
}

.dex-tag-outline-grey {
  background-color: var(--dex-okd-tag-outline-grey-background-color);
  border-color: var(--dex-okd-tag-outline-grey-border-color);
  color: var(--dex-okd-tag-outline-grey-font-color)
}

.dex-tag-outline-lightgrey {
  background-color: var(--dex-okd-tag-outline-lightgrey-background-color);
  border-color: var(--dex-okd-tag-outline-lightgrey-border-color);
  color: var(--dex-okd-tag-outline-lightgrey-font-color)
}

.dex-tag-outline-green {
  background-color: var(--dex-okd-tag-outline-green-background-color);
  border-color: var(--dex-okd-tag-outline-green-border-color);
  color: var(--dex-okd-tag-outline-green-font-color)
}

.dex-tag-outline-red {
  background-color: var(--dex-okd-tag-outline-red-background-color);
  border-color: var(--dex-okd-tag-outline-red-border-color);
  color: var(--dex-okd-tag-outline-red-font-color)
}

.dex-tag-outline-tangerine {
  background-color: var(--dex-okd-tag-outline-tangerine-background-color);
  border-color: var(--dex-okd-tag-outline-tangerine-border-color);
  color: var(--dex-okd-tag-outline-tangerine-font-color)
}

.dex-tag-outline-lime {
  background-color: hsla(0, 0%, 100%, 0);
  background-color: var(--dex-okd-tag-outline-lime-background-color, hsla(0, 0%, 100%, 0));
  border-color: hsla(0, 0%, 100%, 0);
  border-color: var(--dex-okd-tag-outline-lime-border-color, hsla(0, 0%, 100%, 0));
  color: hsla(0, 0%, 100%, 0);
  color: var(--dex-okd-tag-outline-lime-font-color, hsla(0, 0%, 100%, 0))
}

.dex-tag.dex-tag-fill-lime {
  font-weight: 700
}

.dex-tag-fill-green {
  background-color: var(--dex-okd-tag-fill-green-background-color);
  border-color: var(--dex-okd-tag-fill-green-border-color);
  color: var(--dex-okd-tag-fill-green-font-color)
}

.dex-tag-sm {
  --dex-okd-tag-inner-height: var(--dex-okd-tag-sm-height, 16px);
  border-radius: 4px;
  border-radius: var(--dex-okd-tag-sm-border-radius, 4px);
  border-width: 1px;
  border-width: var(--dex-okd-tag-sm-border-width, 1px);
  font-size: 12px;
  font-size: var(--dex-okd-tag-sm-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-tag-sm-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-tag-sm-line-height, 16px);
  padding: 2px 4px;
  padding: var(--dex-okd-tag-sm-padding-vertical, 2px) var(--dex-okd-tag-sm-padding-horizontal, 4px)
}

.dex-tag-sm .dex-tag-icon {
  font-size: 12px;
  font-size: var(--dex-okd-tag-sm-icon-size, 12px)
}

.dex-tag-md {
  --dex-okd-tag-inner-height: var(--dex-okd-tag-md-height, 20px);
  border-radius: 4px;
  border-radius: var(--dex-okd-tag-md-border-radius, 4px);
  border-width: 1px;
  border-width: var(--dex-okd-tag-md-border-width, 1px);
  font-size: 12px;
  font-size: var(--dex-okd-tag-md-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-tag-md-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-tag-md-line-height, 16px);
  padding: 2px 4px;
  padding: var(--dex-okd-tag-md-padding-vertical, 2px) var(--dex-okd-tag-md-padding-horizontal, 4px)
}

.dex-tag-md .dex-tag-icon {
  font-size: 16px;
  font-size: var(--dex-okd-tag-md-icon-size, 16px)
}

.dex-tag-lg {
  --dex-okd-tag-inner-height: var(--dex-okd-tag-lg-height, 24px);
  border-radius: 4px;
  border-radius: var(--dex-okd-tag-lg-border-radius, 4px);
  border-width: 1px;
  border-width: var(--dex-okd-tag-lg-border-width, 1px);
  font-size: 12px;
  font-size: var(--dex-okd-tag-lg-font-size, 12px);
  font-weight: 400;
  font-weight: var(--dex-okd-tag-lg-font-weight, 400);
  line-height: 16px;
  line-height: var(--dex-okd-tag-lg-line-height, 16px);
  padding: 2px 4px;
  padding: var(--dex-okd-tag-lg-padding-vertical, 2px) var(--dex-okd-tag-lg-padding-horizontal, 4px)
}

.dex-tag-lg .dex-tag-icon {
  font-size: 16px;
  font-size: var(--dex-okd-tag-lg-icon-size, 16px)
}

.dex-tag-fixed-height {
  height: var(--dex-okd-tag-inner-height);
  padding-bottom: 0;
  padding-top: 0
}

.dex-tag {
  align-items: center;
  border-style: solid;
  box-sizing: border-box;
  display: inline-flex
}

.dex-tag-ellipsis {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.dex-tag-icon {
  padding-right: 2px
}

.dex-tag-fill-red {
  background-color: var(--dex-okd-tag-fill-red-background-color);
  border-color: var(--dex-okd-tag-fill-red-border-color);
  color: var(--dex-okd-tag-fill-red-font-color)
}

.dex-textbutton {
  align-items: center;
  box-sizing: border-box;
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-textbutton-default-color, var(--dex-okd-color-content-primary));
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  text-decoration: none
}

.dex-textbutton-leading-icon {
  font-weight: 400;
  margin-right: 4px;
  margin-right: var(--dex-okd-textbutton-leading-icon-margin-right, 4px)
}

.dex-textbutton-trailing-icon {
  font-weight: 400;
  margin-left: 4px;
  margin-left: var(--dex-okd-textbutton-trailing-icon-margin-left, 4px)
}

.dex-textbutton-padding {
  border-radius: 50px;
  border-radius: var(--dex-okd-textbutton-border-radius, 50px)
}

.dex-textbutton-sm {
  font-size: 12px;
  font-size: var(--dex-okd-textbutton-sm-font-size, 12px);
  line-height: 16px;
  line-height: var(--dex-okd-textbutton-sm-line-height, 16px)
}

.dex-textbutton-padding.dex-textbutton-sm {
  min-height: 32px;
  min-height: var(--dex-okd-textbutton-sm-min-height, 32px);
  min-width: 40px;
  min-width: var(--dex-okd-textbutton-sm-min-width, 40px);
  padding: 8px 12px;
  padding: var(--dex-okd-textbutton-sm-padding-vertical, 8px) var(--dex-okd-textbutton-sm-padding-horizontal, 12px)
}

.dex-textbutton .dex-textbutton-icon-sm {
  font-size: 16px;
  font-size: var(--dex-okd-textbutton-icon-sm-font-size, 16px)
}

.dex-textbutton-md {
  font-size: 14px;
  font-size: var(--dex-okd-textbutton-md-font-size, 14px);
  line-height: 16px;
  line-height: var(--dex-okd-textbutton-md-line-height, 16px)
}

.dex-textbutton-padding.dex-textbutton-md {
  min-height: 36px;
  min-height: var(--dex-okd-textbutton-md-min-height, 36px);
  min-width: 48px;
  min-width: var(--dex-okd-textbutton-md-min-width, 48px);
  padding: 8px 12px;
  padding: var(--dex-okd-textbutton-md-padding-vertical, 8px) var(--dex-okd-textbutton-md-padding-horizontal, 12px)
}

.dex-textbutton .dex-textbutton-icon-md {
  font-size: 16px;
  font-size: var(--dex-okd-textbutton-icon-md-font-size, 16px)
}

.dex-textbutton-lg {
  font-size: 16px;
  font-size: var(--dex-okd-textbutton-lg-font-size, 16px);
  line-height: 20px;
  line-height: var(--dex-okd-textbutton-lg-line-height, 20px)
}

.dex-textbutton-padding.dex-textbutton-lg {
  min-height: 40px;
  min-height: var(--dex-okd-textbutton-lg-min-height, 40px);
  min-width: 56px;
  min-width: var(--dex-okd-textbutton-lg-min-width, 56px);
  padding: 8px 16px;
  padding: var(--dex-okd-textbutton-lg-padding-vertical, 8px) var(--dex-okd-textbutton-lg-padding-horizontal, 16px)
}

.dex-textbutton .dex-textbutton-icon-lg {
  font-size: 18px;
  font-size: var(--dex-okd-textbutton-icon-lg-font-size, 18px)
}

.dex-textbutton-regular {
  font-weight: 400;
  font-weight: var(--dex-okd-textbutton-regular-font-weight, 400)
}

.dex-textbutton-medium {
  font-weight: 500;
  font-weight: var(--dex-okd-textbutton-medium-font-weight, 500)
}

.dex-textbutton-bold {
  font-weight: 700;
  font-weight: var(--dex-okd-textbutton-bold-font-weight, 700)
}

.dex-textbutton.hover,
.dex-textbutton:not(.dex-textbutton-disabled):hover {
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-textbutton-hover-color, var(--dex-okd-color-content-primary))
}

.dex-textbutton.hover.dex-textbutton-padding,
.dex-textbutton:not(.dex-textbutton-disabled):hover.dex-textbutton-padding {
  background-color: var(--dex-okd-color-background-surface-pressed);
  background-color: var(--dex-okd-textbutton-hover-background, var(--dex-okd-color-background-surface-pressed))
}

.dex-textbutton.active,
.dex-textbutton:not(.dex-textbutton-disabled):active {
  color: var(--dex-okd-color-content-primary);
  color: var(--dex-okd-textbutton-active-color, var(--dex-okd-color-content-primary))
}

.dex-textbutton.active.dex-textbutton-padding,
.dex-textbutton:not(.dex-textbutton-disabled):active.dex-textbutton-padding {
  background-color: var(--dex-okd-color-background-surface-pressed);
  background-color: var(--dex-okd-textbutton-active-background, var(--dex-okd-color-background-surface-pressed))
}

.dex-textbutton-disabled,
.dex-textbutton.disabled {
  color: var(--dex-okd-color-content-disabled);
  color: var(--dex-okd-textbutton-disabled-color, var(--dex-okd-color-content-disabled));
  cursor: not-allowed
}

.dex-typo-h1 {
  font-size: var(--dex-okd-typography-h1-font-size);
  line-height: var(--dex-okd-typography-h1-line-height)
}

.dex-typo-h2 {
  font-size: var(--dex-okd-typography-h2-font-size);
  line-height: var(--dex-okd-typography-h2-line-height)
}

.dex-typo-h3 {
  font-size: var(--dex-okd-typography-h3-font-size);
  line-height: var(--dex-okd-typography-h3-line-height)
}

.dex-typo-h4 {
  font-size: var(--dex-okd-typography-h4-font-size);
  line-height: var(--dex-okd-typography-h4-line-height)
}

.dex-typo-h5 {
  font-size: var(--dex-okd-typography-h5-font-size);
  line-height: var(--dex-okd-typography-h5-line-height)
}

.dex-typo-h6 {
  font-size: var(--dex-okd-typography-h6-font-size);
  line-height: var(--dex-okd-typography-h6-line-height)
}

.dex-typo-text-base {
  font-size: var(--dex-okd-typography-text-base-font-size);
  line-height: var(--dex-okd-typography-text-base-line-height)
}

.dex-typo-text-md {
  font-size: var(--dex-okd-typography-text-md-font-size);
  line-height: var(--dex-okd-typography-text-md-line-height)
}

.dex-typo-text-xs {
  font-size: var(--dex-okd-typography-text-xs-font-size);
  line-height: var(--dex-okd-typography-text-xs-line-height)
}

.header-weight-medium {
  font-weight: var(--dex-okd-typography-header-medium-font-weight)
}

.header-weight-amplified {
  font-weight: var(--dex-okd-typography-header-amplified-font-weight)
}

.text-weight-medium {
  font-weight: var(--dex-okd-typography-text-medium-font-weight)
}

.text-weight-amplified {
  font-weight: var(--dex-okd-typography-text-amplified-font-weight)
}

.header-color-muted {
  color: var(--dex-okd-typography-header-muted-color)
}

.header-color-medium {
  color: var(--dex-okd-typography-header-medium-color)
}

.header-color-amplified {
  color: var(--dex-okd-typography-header-amplified-color)
}

.text-color-muted {
  color: var(--dex-okd-typography-text-muted-color)
}

.text-color-medium {
  color: var(--dex-okd-typography-text-medium-color)
}

.text-color-amplified {
  color: var(--dex-okd-typography-text-amplified-color)
}

.dex-tooltip .dex-popup-layer-content {
  word-wrap: break-word;
  border-radius: 2px;
  color: var(--dex-okd-tooltip-default-font-color);
  font-size: 12px;
  line-height: 16px;
  max-width: 160px;
  padding: 8px
}

.dex-tooltip .dex-popup-layer-arrow-inner,
.dex-tooltip .dex-popup-layer-content {
  background-color: var(--dex-okd-tooltip-neutral-background)
}

.dex-tooltip-negative .dex-popup-layer-arrow-inner,
.dex-tooltip-negative .dex-popup-layer-content {
  background-color: var(--dex-okd-tooltip-negative-background)
}

.dex-tooltip-positive .dex-popup-layer-arrow-inner,
.dex-tooltip-positive .dex-popup-layer-content {
  background-color: var(--dex-okd-tooltip-positive-background)
}

.dex-tooltip-informative .dex-popup-layer-arrow-inner,
.dex-tooltip-informative .dex-popup-layer-content {
  background-color: var(--dex-okd-tooltip-informative-background)
}

.dex-dropzone-patch-dialog {
  padding-top: 0
}

.dex-dropzone-patch-dialog-top {
  height: 0
}

.dex-dropzone-patch-preview {
  display: block;
  margin: 0 auto;
  max-height: 80vh;
  max-width: 70vw
}

.dex-transition-fade {
  transition: opacity .3s linear
}

.dex-transition-fade-active {
  will-change: opacity
}

.dex-transition-fade-ease-out {
  transition-timing-function: cubic-bezier(.5, 0, .52, 1)
}

.dex-transition-fade-entered,
.dex-transition-fade-entering {
  opacity: 1
}

.dex-transition-fade-exited,
.dex-transition-fade-exiting {
  opacity: 0
}

.dex-transition-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  position: fixed;
  transform: translateY(100%);
  transform-style: preserve-3d;
  transition: transform .3s linear, opacity .3s linear
}

.dex-transition-slide-active {
  will-change: transform, opacity
}

.dex-transition-slide-cubic {
  transition-timing-function: ease
}

.dex-transition-slide-top {
  left: 0;
  top: 0;
  width: 100%
}

.dex-transition-slide-bottom {
  bottom: 0;
  left: 0;
  width: 100%
}

.dex-transition-slide-left {
  height: 100%;
  left: 0;
  top: 0
}

.dex-transition-slide-right {
  height: 100%;
  right: 0;
  top: 0
}

.dex-transition-slide-entered,
.dex-transition-slide-entering {
  opacity: 1;
  transform: none
}

.dex-transition-slide-exited,
.dex-transition-slide-exiting {
  opacity: 0
}

.dex-transition-slide-exited.dex-transition-slide-top,
.dex-transition-slide-exiting.dex-transition-slide-top {
  transform: translateY(-100%)
}

.dex-transition-slide-exited.dex-transition-slide-bottom,
.dex-transition-slide-exiting.dex-transition-slide-bottom {
  transform: translateY(100%)
}

.dex-transition-slide-exited.dex-transition-slide-left,
.dex-transition-slide-exiting.dex-transition-slide-left {
  transform: translateX(-100%)
}

.dex-transition-slide-exited.dex-transition-slide-right,
.dex-transition-slide-exiting.dex-transition-slide-right {
  transform: translateX(100%)
}

@media (hover:none) and (pointer:coarse) {
  .dex-transition-slide {
    transition-duration: .2s
  }
}

.dex-dropzone-preview-dialog {
  padding-top: 0
}

.dex-dropzone:hover .dex-dropzone-preview-mask {
  background: rgba(0, 0, 0, .4);
  opacity: 1
}

.dex-dropzone:focus-within .preview-focus {
  background: rgba(0, 0, 0, .4);
  opacity: 1
}

.dex-dropzone-status-box {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%
}

.dex-dropzone-text-btn {
  color: var(--dex-okd-upload-text-btn-color);
  text-decoration: underline
}

.dex-dropzone-logo {
  color: #dbdbdb;
  color: var(--dex-okd-upload-default-logo-color, #dbdbdb)
}

.dex-dropzone-icon-url {
  margin-bottom: 12px;
  width: 64px
}

.dex-dropzone-loader {
  margin-bottom: 12px
}

.dex-dropzone-preview {
  align-items: center;
  box-sizing: border-box;
  cursor: auto;
  display: flex;
  justify-content: center;
  padding: 8px
}

.dex-dropzone-preview,
.dex-dropzone-preview-img {
  height: 100%;
  width: 100%
}

.dex-dropzone-preview-mask {
  bottom: 8px;
  left: 8px;
  opacity: 0;
  position: absolute;
  right: 8px;
  text-align: center;
  top: 8px;
  transition: all .3s;
  visibility: visible
}

.dex-dropzone-preview-icon {
  display: flex;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%)
}

.dex-dropzone-preview-mask .icon-box+.icon-box {
  margin-left: 40px
}

.dex-dropzone-preview-mask .icon-box {
  color: #fff;
  color: var(--dex-okd-upload-default-icon-color, #fff);
  cursor: pointer;
  font-size: 30px
}

.dex-dropzone-title {
  color: #929292;
  color: var(--dex-okd-upload-default-label-color, #929292);
  font-size: var(--dex-okd-upload-pc-label-font-size);
  font-weight: 500;
  line-height: var(--dex-okd-upload-pc-label-line-height);
  margin-bottom: 8px;
  padding: 0 10px;
  text-align: center
}

.dex-dropzone-label {
  padding-left: 8px
}

.dex-dropzone-desc {
  box-sizing: border-box;
  color: #929292;
  color: var(--dex-okd-upload-default-desc-color, #929292);
  font-size: var(--dex-okd-upload-pc-desc-font-size);
  font-weight: 400;
  line-height: var(--dex-okd-upload-pc-desc-line-height);
  max-width: 100%;
  overflow: hidden;
  padding: 0 1em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: break-spaces
}

.dex-dropzone-active .dex-dropzone-area {
  background-color: var(--dex-okd-upload-active-background-color);
  border-color: var(--dex-okd-upload-active-border-color)
}

.dex-dropzone-active .dex-dropzone-title {
  color: var(--dex-okd-upload-active-label-color)
}

.dex-dropzone-active .dex-dropzone-desc {
  display: none
}

.dex-dropzone-area .dex-dropzone-logo {
  font-size: 48px
}

.dex-dropzone-active .dex-dropzone-logo {
  color: var(--dex-okd-upload-active-logo-color)
}

.dex-dropzone-error .dex-dropzone-area {
  background-color: var(--dex-okd-upload-error-background-color);
  border-color: var(--dex-okd-upload-error-border-color)
}

.dex-dropzone-error .dex-dropzone-title {
  color: var(--dex-okd-upload-error-label-color)
}

.dex-dropzone-error .dex-dropzone-logo {
  color: var(--dex-okd-upload-error-logo-color)
}

.dex-dropzone-error .dex-dropzone-retry {
  color: var(--dex-okd-upload-error-retry-text-color);
  cursor: pointer
}

.dex-dropzone-success .dex-dropzone-area {
  border-color: var(--dex-okd-upload-success-border-color);
  border-style: solid
}

.dex-dropzone-success .dex-dropzone-logo {
  color: var(--dex-okd-upload-success-logo-color)
}

.dex-dropzone-uploading .dex-dropzone-area {
  border-style: solid
}

.dex-dropzone-disabled {
  cursor: not-allowed
}

.dex-dropzone-disabled .dex-dropzone-logo {
  color: var(--dex-okd-upload-default-logo-color);
  color: var(--dex-okd-upload-disabled-logo-color, var(--dex-okd-upload-default-logo-color))
}

.dex-dropzone-disabled .dex-dropzone-title {
  color: var(--dex-okd-upload-default-label-color);
  color: var(--dex-okd-upload-disabled-label-color, var(--dex-okd-upload-default-label-color))
}

.dex-dropzone-disabled .dex-dropzone-desc {
  color: var(--dex-okd-upload-default-desc-color);
  color: var(--dex-okd-upload-disabled-desc-color, var(--dex-okd-upload-default-desc-color))
}

.dex-dropzone-disabled .dex-dropzone-area {
  background-color: #f9f9f9;
  background-color: var(--dex-okd-upload-disabled-background, #f9f9f9);
  border-color: #ced3de;
  border-color: var(--dex-okd-upload-disabled-border-color, #ced3de);
  border-style: solid
}

@media (max-width:767px) {
  .dex-dropzone-title {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: var(--dex-okd-upload-mobile-label-font-size);
    line-height: var(--dex-okd-upload-mobile-label-line-height);
    margin-bottom: 0
  }

  .dex-dropzone-title .dex-dropzone-label {
    display: none
  }

  .dex-dropzone-desc {
    font-size: var(--dex-okd-upload-mobile-desc-font-size);
    line-height: var(--dex-okd-upload-mobile-desc-line-height);
    white-space: nowrap
  }

  .dex-dropzone-area .dex-dropzone-logo {
    font-size: 32px
  }

  .dex-dropzone-logo.dex-dropzone-logo-xl {
    display: none
  }

  .dex-dropzone-logo.dex-dropzone-logo-md {
    display: unset
  }
}

.dex-dropzone-preview-picture {
  display: block;
  margin: 0 auto;
  max-height: 80vh;
  max-width: 70vw
}

.dex-dropzone-preview-picture-sm {
  height: 100%;
  object-fit: contain;
  width: 100%
}

.dex-dropzone {
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  width: 100%
}

.dex-dropzone-focus {
  border-radius: 4px;
  outline: 2px solid var(--dex-okd-color-border-focus);
  outline-color: var(--dex-okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px
}

.dex-dropzone-contents {
  display: contents
}

.dex-dropzone-area {
  align-items: center;
  background-color: initial;
  background-color: var(--dex-okd-upload-default-background-color, transparent);
  border: 2px dashed #dbdbdb;
  border: 2px dashed var(--dex-okd-upload-default-border-color, #dbdbdb);
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  justify-content: center;
  position: relative;
  transition: all .3s;
  width: 100%
}

.dex-dropzone-status-area {
  display: contents
}

.dex-dropzone-input-file {
  display: block
}

.dex-dropzone-patch-mobile {
  display: flex;
  flex-wrap: wrap;
  margin-right: -8px
}

.dex-dropzone-patch-mobile-entry {
  height: 100px;
  margin-right: 8px;
  width: 100px
}

.dex-dropzone-patch-mobile-entry .dex-dropzone-patch-mobile-entry-icon {
  font-size: 32px
}

.dex-dropzone-patch-mobile-entry-disabled {
  cursor: not-allowed
}

.dex-dropzone-patch-mobile-block {
  align-items: center;
  background: #f9f9f9;
  background: var(--dex-okd-upload-patch-item-background, #f9f9f9);
  border: 1px solid #ebebeb;
  border: 1px solid var(--dex-okd-upload-patch-item-mobile-default-border-color, #ebebeb);
  border-radius: 4px;
  box-sizing: border-box;
  color: #929292;
  color: var(--dex-okd-upload-patch-item-desc-color, #929292);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  height: 100px;
  justify-content: center;
  margin-bottom: 8px;
  margin-right: 8px;
  padding: 4px;
  position: relative;
  width: 100px
}

.dex-dropzone-patch-mobile-uploading {
  border-color: #ebebeb;
  border-color: var(--dex-okd-upload-patch-item-mobile-active-border-color, #ebebeb)
}

.dex-dropzone-patch-mobile-success {
  border-color: #ebebeb;
  border-color: var(--dex-okd-upload-patch-item-mobile-success-border-color, #ebebeb)
}

.dex-dropzone-patch-mobile-error {
  border-color: #ebebeb;
  border-color: var(--dex-okd-upload-patch-item-mobile-error-border-color, #ebebeb)
}

.dex-dropzone-patch-mobile-img {
  cursor: pointer;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%
}

.dex-dropzone-patch-mobile-img .placeholder-icon {
  color: #dbdbdb;
  color: var(--dex-okd-upload-patch-item-placeholder-icon-color, #dbdbdb);
  font-size: 36px
}

.dex-dropzone-patch-mobile-content {
  display: flex;
  flex-direction: column
}

.dex-dropzone-patch-mobile-gap {
  margin-bottom: 4px
}

.dex-dropzone-patch-mobile-loader {
  height: 16px;
  width: 16px
}

.dex-dropzone-patch-mobile .dex-dropzone-patch-mobile-icon-success {
  color: #05c28c;
  color: var(--dex-okd-upload-patch-item-success-icon-color, #05c28c);
  font-size: 24px
}

.dex-dropzone-patch-mobile .dex-dropzone-patch-mobile-icon-error {
  color: #e3493f;
  color: var(--dex-okd-upload-patch-item-error-icon-color, #e3493f);
  font-size: 24px
}

.dex-dropzone-patch-mobile-retry {
  color: #0569ff;
  color: var(--dex-okd-upload-patch-item-retry-text-color, #0569ff);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px
}

.dex-dropzone-patch-mobile .dex-dropzone-patch-mobile-remove {
  color: #000;
  color: var(--dex-okd-upload-patch-item-mobile-remove-icon-color, #000);
  cursor: pointer;
  font-size: 16px;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%)
}

.dex-dropzone-patch-item {
  align-items: center;
  background: #f9f9f9;
  background: var(--dex-okd-upload-patch-item-background, #f9f9f9);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin-top: 8px;
  padding: 8px
}

.dex-dropzone-patch-item-block {
  display: flex
}

.dex-dropzone-patch-item-img {
  cursor: pointer;
  height: 36px;
  margin-right: 12px;
  width: 36px
}

.dex-dropzone-patch-item-img .placeholder-icon {
  color: #dbdbdb;
  color: var(--dex-okd-upload-patch-item-placeholder-icon-color, #dbdbdb);
  font-size: 36px
}

.dex-dropzone-patch-item-content {
  display: flex;
  flex-direction: column
}

.dex-dropzone-patch-item-title {
  color: #3d3d3d;
  color: var(--dex-okd-upload-patch-item-title-color, #3d3d3d);
  font-size: 14px;
  line-height: 16px
}

.dex-dropzone-patch-item-desc {
  align-items: center;
  color: #929292;
  color: var(--dex-okd-upload-patch-item-desc-color, #929292);
  display: flex;
  font-size: 12px;
  margin-top: 4px
}

.dex-dropzone-patch-item-gap {
  margin-right: 4px
}

.dex-dropzone-patch-item-loader {
  height: 16px;
  width: 16px
}

.dex-dropzone-patch-item-icon-success {
  color: #05c28c;
  color: var(--dex-okd-upload-patch-item-success-icon-color, #05c28c);
  font-size: 12px
}

.dex-dropzone-patch-item-icon-error {
  color: #e3493f;
  color: var(--dex-okd-upload-patch-item-error-icon-color, #e3493f);
  font-size: 12px
}

.dex-dropzone-patch-item-error-text {
  color: #e3493f;
  color: var(--dex-okd-upload-patch-item-error-text-color, #e3493f)
}

.dex-dropzone-patch-item-retry {
  color: #0569ff;
  color: var(--dex-okd-upload-patch-item-retry-text-color, #0569ff);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px
}

.dex-dropzone-patch-item .remove-icon {
  color: #bdbdbd;
  color: var(--dex-okd-upload-patch-item-remove-icon-color, #bdbdbd);
  cursor: pointer;
  font-size: 20px
}

.dex-dropzone-patch-item-dot {
  background-color: #929292;
  background-color: var(--dex-okd-upload-patch-item-desc-color, #929292);
  border-radius: 50%;
  height: 3px;
  margin: 0 6px;
  width: 3px
}

.dex-dropzone-patch {
  width: 100%
}

.dex-dropzone-patch-file-number {
  color: #000;
  color: var(--dex-okd-upload-patch-tip-color, #000);
  margin-top: 12px
}

.dex-dropzone-patch-entry {
  width: 100%
}

.dex-dropzone-patch-entry .dex-dropzone-patch-entry-icon {
  font-size: 48px
}

.dex-dropzone-patch-entry-disabled {
  cursor: not-allowed
}

@media (max-width:767px) {
  .dex-dropzone-patch-file-number {
    display: none
  }
}

.dex-dropzone-simple-weight.dex-dropzone-simple {
  height: 100px;
  width: 100px
}

.dex-dropzone-simple-weight.dex-dropzone-simple .dex-dropzone-desc,
.dex-dropzone-simple-weight.dex-dropzone-simple .dex-dropzone-title {
  display: none
}

.dex-dropzone-simple-weight.dex-dropzone-simple .dex-dropzone-loader {
  margin-bottom: 0
}

.dex-dropzone-simple-weight.dex-dropzone-simple .dex-dropzone-area .dex-dropzone-logo {
  font-size: 40px
}

.dex-dropzone-simple-weight.dex-dropzone-simple .dex-dropzone-preview-mask .dex-dropzone-icon-delete {
  font-size: 24px
}

.dex-dropzone-simple-weight.dex-dropzone-simple .dex-dropzone-preview-mask .icon-box+.icon-box {
  margin-left: 12px
}

.dex-dropzone-simple-weight.dex-dropzone-simple .dex-dropzone-preview-mask .dex-dropzone-icon-zoomin {
  font-size: 24px
}

.dex-dropzone-simple-weight.dex-dropzone-simple .simple-container {
  width: 100%
}

.dex-dropzone-simple-error {
  color: var(--dex-okd-upload-error-label-color);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  margin-top: 4px;
  max-width: 100px
}

.dex-dropzone-simple-try-again {
  color: var(--dex-okd-upload-error-retry-text-color);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  margin-left: 4px
}

.dex-virtual-list-empty {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center
}

.dex-video-animation-box {
  position: relative
}

.dex-video-animation-pic {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.dex-okds-link {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-link:before {
  content: "\e053";
  font-family: dex-ok-b983c4766d
}

.dex-okds-mail {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-mail:before {
  content: "\e058";
  font-family: dex-ok-b983c4766d
}

.dex-okds-computer-outline {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-computer-outline:before {
  content: "\e0a9";
  font-family: dex-ok-b983c4766d
}

.dex-okds-fire-flame_filled {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-fire-flame_filled:before {
  content: "\e0a8";
  font-family: dex-ok-b983c4766d
}

.dex-okds-trash {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-trash:before {
  content: "\e089";
  font-family: dex-ok-b983c4766d
}

.dex-okds-locked {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-locked:before {
  content: "\e056";
  font-family: dex-ok-b983c4766d
}

.dex-okds-unlocked {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-unlocked:before {
  content: "\e08a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-verified-filled {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-verified-filled:before {
  content: "\e0a7";
  font-family: dex-ok-b983c4766d
}

.dex-okds-trending-up {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-trending-up:before {
  content: "\e0a6";
  font-family: dex-ok-b983c4766d
}

.dex-okds-toggle-units {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-toggle-units:before {
  content: "\e0a5";
  font-family: dex-ok-b983c4766d
}

.dex-okds-chevron-right-text-button {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-chevron-right-text-button:before {
  content: "\e0a4";
  font-family: dex-ok-b983c4766d
}

.dex-okds-calendar {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-calendar:before {
  content: "\e01e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-p2p {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-p2p:before {
  content: "\e0a3";
  font-family: dex-ok-b983c4766d
}

.dex-okds-express-buy {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-express-buy:before {
  content: "\e0a2";
  font-family: dex-ok-b983c4766d
}

.dex-okds-cash-fiat {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-cash-fiat:before {
  content: "\e0a1";
  font-family: dex-ok-b983c4766d
}

.dex-okds-chevron-down {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-chevron-down:before {
  content: "\e0a0";
  font-family: dex-ok-b983c4766d
}

.dex-okds-chevron-up {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-chevron-up:before {
  content: "\e09f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-xbtc {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-xbtc:before {
  content: "\e09e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-selected {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-selected:before {
  content: "\e09c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-unselected {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-unselected:before {
  content: "\e09d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-checkmark {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-checkmark:before {
  content: "\e022";
  font-family: dex-ok-b983c4766d
}

.dex-okds-refresh {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-refresh:before {
  content: "\e09b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-draw {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-draw:before {
  content: "\e09a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-sun {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-sun:before {
  content: "\e099";
  font-family: dex-ok-b983c4766d
}

.dex-okds-moon {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-moon:before {
  content: "\e098";
  font-family: dex-ok-b983c4766d
}

.dex-okds-clear {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-clear:before {
  content: "\e097";
  font-family: dex-ok-b983c4766d
}

.dex-okds-thumb_up {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-thumb_up:before {
  content: "\e096";
  font-family: dex-ok-b983c4766d
}

.dex-okds-thumb_down {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-thumb_down:before {
  content: "\e095";
  font-family: dex-ok-b983c4766d
}

.dex-okds-zoom-out {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-zoom-out:before {
  content: "\e094";
  font-family: dex-ok-b983c4766d
}

.dex-okds-zoom-in {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-zoom-in:before {
  content: "\e093";
  font-family: dex-ok-b983c4766d
}

.dex-okds-information-circle {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-information-circle:before {
  content: "\e055";
  font-family: dex-ok-b983c4766d
}

.dex-okds-warning-circle-fill {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-warning-circle-fill:before {
  content: "\e07d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-success-circle-fill {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-success-circle-fill:before {
  content: "\e084";
  font-family: dex-ok-b983c4766d
}

.dex-okds-information-circle-fill {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-information-circle-fill:before {
  content: "\e052";
  font-family: dex-ok-b983c4766d
}

.dex-okds-fail-circle-fill {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-fail-circle-fill:before {
  content: "\e02f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-right-centered-xs {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-right-centered-xs:before {
  content: "\e092";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-right-centered-sm {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-right-centered-sm:before {
  content: "\e015";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-right-centered-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-right-centered-md:before {
  content: "\e014";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-right-xs {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-right-xs:before {
  content: "\e091";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-right-sm {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-right-sm:before {
  content: "\e00e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-right-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-right-md:before {
  content: "\e00d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-user {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-user:before {
  content: "\e07b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-plus-circle-filled {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-plus-circle-filled:before {
  content: "\e065";
  font-family: dex-ok-b983c4766d
}

.dex-okds-intermediate {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-intermediate:before {
  content: "\e090";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-left-centered-sm {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-left-centered-sm:before {
  content: "\e013";
  font-family: dex-ok-b983c4766d
}

.dex-okds-eye-hide {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-eye-hide:before {
  content: "\e03d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-eye-show {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-eye-show:before {
  content: "\e03f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-copy {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-copy:before {
  content: "\e033";
  font-family: dex-ok-b983c4766d
}

.dex-okds-history {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-history:before {
  content: "\e04f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-back-to-top {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-back-to-top:before {
  content: "\e08f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-clock {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-clock:before {
  content: "\e028";
  font-family: dex-ok-b983c4766d
}

.dex-okds-hamburger-setting {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-hamburger-setting:before {
  content: "\e04c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-fees {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-fees:before {
  content: "\e040";
  font-family: dex-ok-b983c4766d
}

.dex-okds-open-link {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-open-link:before {
  content: "\e05d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-setting {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-setting:before {
  content: "\e074";
  font-family: dex-ok-b983c4766d
}

.dex-okds-crown {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-crown:before {
  content: "\e08e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-share {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-share:before {
  content: "\e078";
  font-family: dex-ok-b983c4766d
}

.dex-okds-support {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-support:before {
  content: "\e086";
  font-family: dex-ok-b983c4766d
}

.dex-okds-analysis {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-analysis:before {
  content: "\e003";
  font-family: dex-ok-b983c4766d
}

.dex-okds-academy {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-academy:before {
  content: "\e000";
  font-family: dex-ok-b983c4766d
}

.dex-okds-action-reverse {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-action-reverse:before {
  content: "\e001";
  font-family: dex-ok-b983c4766d
}

.dex-okds-aed {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-aed:before {
  content: "\e002";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-cheveron-alignleft-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-cheveron-alignleft-md:before {
  content: "\e004";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-cheveron-first-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-cheveron-first-md:before {
  content: "\e005";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-cheveron-last-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-cheveron-last-md:before {
  content: "\e006";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-down-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-down-md:before {
  content: "\e007";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-down-sm {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-down-sm:before {
  content: "\e008";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-down-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-down-md:before {
  content: "\e009";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-down-sm {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-down-sm:before {
  content: "\e00a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-left-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-left-md:before {
  content: "\e00b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-left-sm {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-left-sm:before {
  content: "\e00c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-up-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-up-md:before {
  content: "\e00f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-pointer-up-sm {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-pointer-up-sm:before {
  content: "\e010";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-up-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-up-md:before {
  content: "\e011";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-left-centered-md {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-left-centered-md:before {
  content: "\e012";
  font-family: dex-ok-b983c4766d
}

.dex-okds-arrow-chevron-up-sm {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-arrow-chevron-up-sm:before {
  content: "\e016";
  font-family: dex-ok-b983c4766d
}

.dex-okds-bell {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-bell:before {
  content: "\e017";
  font-family: dex-ok-b983c4766d
}

.dex-okds-authenticator {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-authenticator:before {
  content: "\e018";
  font-family: dex-ok-b983c4766d
}

.dex-okds-borrow {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-borrow:before {
  content: "\e019";
  font-family: dex-ok-b983c4766d
}

.dex-okds-brl {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-brl:before {
  content: "\e01a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-brush {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-brush:before {
  content: "\e01b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-cancel-order {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-cancel-order:before {
  content: "\e01c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-candlestick {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-candlestick:before {
  content: "\e01d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-carets-filled-down {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-carets-filled-down:before {
  content: "\e01f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-chat-bubble {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-chat-bubble:before {
  content: "\e020";
  font-family: dex-ok-b983c4766d
}

.dex-okds-carets-filled-up {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-carets-filled-up:before {
  content: "\e021";
  font-family: dex-ok-b983c4766d
}

.dex-okds-clear-fill {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-clear-fill:before {
  content: "\e023";
  font-family: dex-ok-b983c4766d
}

.dex-okds-assets {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-assets:before {
  content: "\e024";
  font-family: dex-ok-b983c4766d
}

.dex-okds-bank {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-bank:before {
  content: "\e025";
  font-family: dex-ok-b983c4766d
}

.dex-okds-clock-filled {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-clock-filled:before {
  content: "\e026";
  font-family: dex-ok-b983c4766d
}

.dex-okds-clock-outline {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-clock-outline:before {
  content: "\e027";
  font-family: dex-ok-b983c4766d
}

.dex-okds-close {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-close:before {
  content: "\e029";
  font-family: dex-ok-b983c4766d
}

.dex-okds-communication-call {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-communication-call:before {
  content: "\e02a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-communication-idcard {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-communication-idcard:before {
  content: "\e02b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-communication-img-failed {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-communication-img-failed:before {
  content: "\e02c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-communications-faceid {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-communications-faceid:before {
  content: "\e02d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-eye-show-filled {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-eye-show-filled:before {
  content: "\e02e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-communication-img {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-communication-img:before {
  content: "\e030";
  font-family: dex-ok-b983c4766d
}

.dex-okds-convertokb {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-convertokb:before {
  content: "\e031";
  font-family: dex-ok-b983c4766d
}

.dex-okds-cursor-drag {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-cursor-drag:before {
  content: "\e032";
  font-family: dex-ok-b983c4766d
}

.dex-okds-data-line-chart {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-data-line-chart:before {
  content: "\e034";
  font-family: dex-ok-b983c4766d
}

.dex-okds-deposit {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-deposit:before {
  content: "\e035";
  font-family: dex-ok-b983c4766d
}

.dex-okds-cursor-zoom {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-cursor-zoom:before {
  content: "\e036";
  font-family: dex-ok-b983c4766d
}

.dex-okds-download {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-download:before {
  content: "\e037";
  font-family: dex-ok-b983c4766d
}

.dex-okds-exchange {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-exchange:before {
  content: "\e038";
  font-family: dex-ok-b983c4766d
}

.dex-okds-developers {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-developers:before {
  content: "\e039";
  font-family: dex-ok-b983c4766d
}

.dex-okds-eur {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-eur:before {
  content: "\e03a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-edit {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-edit:before {
  content: "\e03b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-expand {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-expand:before {
  content: "\e03c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-eye-hide-filled {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-eye-hide-filled:before {
  content: "\e03e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-fail-circle {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-fail-circle:before {
  content: "\e041";
  font-family: dex-ok-b983c4766d
}

.dex-okds-filter {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-filter:before {
  content: "\e042";
  font-family: dex-ok-b983c4766d
}

.dex-okds-finance-bank {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-finance-bank:before {
  content: "\e043";
  font-family: dex-ok-b983c4766d
}

.dex-okds-finance-seagull {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-finance-seagull:before {
  content: "\e044";
  font-family: dex-ok-b983c4766d
}

.dex-okds-finance-earn {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-finance-earn:before {
  content: "\e045";
  font-family: dex-ok-b983c4766d
}

.dex-okds-futures {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-futures:before {
  content: "\e046";
  font-family: dex-ok-b983c4766d
}

.dex-okds-funding-rates {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-funding-rates:before {
  content: "\e047";
  font-family: dex-ok-b983c4766d
}

.dex-okds-gbp {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-gbp:before {
  content: "\e048";
  font-family: dex-ok-b983c4766d
}

.dex-okds-guide {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-guide:before {
  content: "\e049";
  font-family: dex-ok-b983c4766d
}

.dex-okds-hamburger-edit {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-hamburger-edit:before {
  content: "\e04a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-hamburger-search {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-hamburger-search:before {
  content: "\e04b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-hamburger {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-hamburger:before {
  content: "\e04d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-hierachy {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-hierachy:before {
  content: "\e04e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-id-card {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-id-card:before {
  content: "\e050";
  font-family: dex-ok-b983c4766d
}

.dex-okds-img {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-img:before {
  content: "\e051";
  font-family: dex-ok-b983c4766d
}

.dex-okds-insurance-fund {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-insurance-fund:before {
  content: "\e054";
  font-family: dex-ok-b983c4766d
}

.dex-okds-language {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-language:before {
  content: "\e057";
  font-family: dex-ok-b983c4766d
}

.dex-okds-margin {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-margin:before {
  content: "\e059";
  font-family: dex-ok-b983c4766d
}

.dex-okds-logout {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-logout:before {
  content: "\e05a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-minus {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-minus:before {
  content: "\e05b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-more {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-more:before {
  content: "\e05c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-network-fee-standard {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-network-fee-standard:before {
  content: "\e05e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-option {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-option:before {
  content: "\e05f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-orders {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-orders:before {
  content: "\e060";
  font-family: dex-ok-b983c4766d
}

.dex-okds-pending-circle {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-pending-circle:before {
  content: "\e061";
  font-family: dex-ok-b983c4766d
}

.dex-okds-pie-chart {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-pie-chart:before {
  content: "\e062";
  font-family: dex-ok-b983c4766d
}

.dex-okds-place-order {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-place-order:before {
  content: "\e063";
  font-family: dex-ok-b983c4766d
}

.dex-okds-play {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-play:before {
  content: "\e064";
  font-family: dex-ok-b983c4766d
}

.dex-okds-plus-circle {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-plus-circle:before {
  content: "\e066";
  font-family: dex-ok-b983c4766d
}

.dex-okds-plus {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-plus:before {
  content: "\e067";
  font-family: dex-ok-b983c4766d
}

.dex-okds-profile {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-profile:before {
  content: "\e068";
  font-family: dex-ok-b983c4766d
}

.dex-okds-qrcode {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-qrcode:before {
  content: "\e069";
  font-family: dex-ok-b983c4766d
}

.dex-okds-question-mark-circle-fill {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-question-mark-circle-fill:before {
  content: "\e06a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-question-mark-circle {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-question-mark-circle:before {
  content: "\e06b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-sort-up-center-aligned {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-sort-up-center-aligned:before {
  content: "\e06c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-records {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-records:before {
  content: "\e06d";
  font-family: dex-ok-b983c4766d
}

.dex-okds-red-packe {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-red-packe:before {
  content: "\e06e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-scan {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-scan:before {
  content: "\e06f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-report-centre {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-report-centre:before {
  content: "\e070";
  font-family: dex-ok-b983c4766d
}

.dex-okds-security-fill {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-security-fill:before {
  content: "\e071";
  font-family: dex-ok-b983c4766d
}

.dex-okds-search {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-search:before {
  content: "\e072";
  font-family: dex-ok-b983c4766d
}

.dex-okds-security {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-security:before {
  content: "\e073";
  font-family: dex-ok-b983c4766d
}

.dex-okds-transfer {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-transfer:before {
  content: "\e075";
  font-family: dex-ok-b983c4766d
}

.dex-okds-settlement-history {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-settlement-history:before {
  content: "\e076";
  font-family: dex-ok-b983c4766d
}

.dex-okds-trends {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-trends:before {
  content: "\e077";
  font-family: dex-ok-b983c4766d
}

.dex-okds-sort-default-center-aligned {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-sort-default-center-aligned:before {
  content: "\e079";
  font-family: dex-ok-b983c4766d
}

.dex-okds-sort-default {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-sort-default:before {
  content: "\e07a";
  font-family: dex-ok-b983c4766d
}

.dex-okds-sort-down-center-aligned-svg {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-sort-down-center-aligned-svg:before {
  content: "\e07c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-withdraw {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-withdraw:before {
  content: "\e07e";
  font-family: dex-ok-b983c4766d
}

.dex-okds-sort-down {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-sort-down:before {
  content: "\e07f";
  font-family: dex-ok-b983c4766d
}

.dex-okds-sort-up {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-sort-up:before {
  content: "\e080";
  font-family: dex-ok-b983c4766d
}

.dex-okds-star-filled {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-star-filled:before {
  content: "\e081";
  font-family: dex-ok-b983c4766d
}

.dex-okds-star {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-star:before {
  content: "\e082";
  font-family: dex-ok-b983c4766d
}

.dex-okds-strong-alert {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-strong-alert:before {
  content: "\e083";
  font-family: dex-ok-b983c4766d
}

.dex-okds-success-circle {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-success-circle:before {
  content: "\e085";
  font-family: dex-ok-b983c4766d
}

.dex-okds-trade-1 {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-trade-1:before {
  content: "\e087";
  font-family: dex-ok-b983c4766d
}

.dex-okds-transfer-circle {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-transfer-circle:before {
  content: "\e088";
  font-family: dex-ok-b983c4766d
}

.dex-okds-unlink {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-unlink:before {
  content: "\e08b";
  font-family: dex-ok-b983c4766d
}

.dex-okds-usd {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-usd:before {
  content: "\e08c";
  font-family: dex-ok-b983c4766d
}

.dex-okds-warning-circle {
  --ok-icon-font-family: "dex-ok-b983c4766d"
}

.dex-okds-warning-circle:before {
  content: "\e08d";
  font-family: dex-ok-b983c4766d
}

.iconfont {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  font-style: normal
}

.iconfont:before {
  display: inline-block
}

@font-face {
  font-display: block;
  font-family: dex-ok-b983c4766d;
  font-style: normal;
  src: url(../7037698b1d9e17ea03b4.woff2) format("woff2")
}

[dir=rtl] .dex-okds-arrow-cheveron-alignleft-md:before,
[dir=rtl] .dex-okds-arrow-cheveron-first-md:before,
[dir=rtl] .dex-okds-arrow-cheveron-last-md:before,
[dir=rtl] .dex-okds-arrow-chevron-left-centered-md:before,
[dir=rtl] .dex-okds-arrow-chevron-left-centered-sm:before,
[dir=rtl] .dex-okds-arrow-chevron-right-centered-md:before,
[dir=rtl] .dex-okds-arrow-chevron-right-centered-sm:before,
[dir=rtl] .dex-okds-arrow-chevron-right-centered-xs:before,
[dir=rtl] .dex-okds-arrow-pointer-left-md:before,
[dir=rtl] .dex-okds-arrow-pointer-left-sm:before,
[dir=rtl] .dex-okds-arrow-pointer-right-md:before,
[dir=rtl] .dex-okds-arrow-pointer-right-sm:before,
[dir=rtl] .dex-okds-arrow-pointer-right-xs:before,
[dir=rtl] .dex-okds-communication-idcard:before,
[dir=rtl] .dex-okds-copy:before,
[dir=rtl] .dex-okds-eye-hide-filled:before,
[dir=rtl] .dex-okds-eye-hide:before,
[dir=rtl] .dex-okds-guide:before,
[dir=rtl] .dex-okds-logout:before,
[dir=rtl] .dex-okds-network-fee-standard:before,
[dir=rtl] .dex-okds-open-link:before,
[dir=rtl] .dex-okds-orders:before,
[dir=rtl] .dex-okds-question-mark-circle-fill:before,
[dir=rtl] .dex-okds-question-mark-circle:before,
[dir=rtl] .dex-okds-report-centre:before {
  transform: scaleX(-1)
}

@media (max-width:767px) {
  .HPEBUW__dex {
    margin: 50px 0
  }
}

.s61HiD__dex {
  color: var(--dex-okd-color-content-primary);
  font-size: 22px;
  font-weight: 500
}

@media (min-width:768px) {
  .s61HiD__dex {
    font-size: 50px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 48px
  }
}

.OkoiQX__dex {
  color: var(--dex-okd-color-content-primary)
}

@media (min-width:768px) {
  .OkoiQX__dex {
    font-size: 24px;
    font-weight: 400
  }
}

.h66FLG__dex {
  color: var(--dex-okd-color-content-tertiary);
  font-size: 12px;
  font-weight: 400;
  line-height: 120%
}

@media (min-width:768px) {
  .h66FLG__dex {
    font-size: 20px
  }
}

.theme-light .dex-accordion-var,
.theme-light.dex-accordion-var {
  --dex-okd-accordion-header-padding-vertical: 32px;
  --dex-okd-accordion-header-padding-horizontal: 0;
  --dex-okd-accordion-main-border-color: var(--dex-okd-color-border-primary);
  --dex-okd-accordion-header-icon-color: var(--dex-okd-color-content-tertiary);
  --dex-okd-accordion-header-icon-size: 20px;
  --dex-okd-accordion-header-icon-sm-size: 16px;
  --dex-okd-accordion-header-title-color: var(--dex-okd-color-content-primary);
  --dex-okd-accordion-header-title-line-height: 24px;
  --dex-okd-accordion-header-title-font-weight: 500;
  --dex-okd-accordion-header-title-font-size: 18px;
  --dex-okd-accordion-header-title-sm-line-height: 16px;
  --dex-okd-accordion-header-title-sm-font-weight: 500;
  --dex-okd-accordion-header-title-sm-font-size: 14px;
  --dex-okd-accordion-header-margin-bottom: 16px;
  --dex-okd-accordion-header-sm-margin-bottom: 8px;
  --dex-okd-accordion-content-font-size: 14px;
  --dex-okd-accordion-content-line-height: 1.58;
  --dex-okd-accordion-content-font-weight: 400;
  --dex-okd-accordion-content-sm-font-size: 12px;
  --dex-okd-accordion-content-sm-line-height: 1.58;
  --dex-okd-accordion-content-sm-font-weight: 400;
  --dex-okd-accordion-content-color: var(--dex-okd-color-content-tertiary)
}

.theme-dark .dex-accordion-var,
.theme-dark.dex-accordion-var {
  --dex-okd-accordion-header-icon-color: var(--dex-okd-color-content-tertiary);
  --dex-okd-accordion-header-icon-size: 20px;
  --dex-okd-accordion-header-title-color: var(--dex-okd-color-content-primary);
  --dex-okd-accordion-main-border-color: var(--dex-okd-color-border-primary);
  --dex-okd-accordion-header-title-font-size: 18px;
  --dex-okd-accordion-header-title-line-height: 24 px;
  --dex-okd-accordion-content-font-size: 14px;
  --dex-okd-accordion-content-sm-font-size: 12px;
  --dex-okd-accordion-content-sm-line-height: 1.58;
  --dex-okd-accordion-content-line-height: 1.58;
  --dex-okd-accordion-content-font-weight: 400;
  --dex-okd-accordion-content-sm-font-weight: 400;
  --dex-okd-accordion-header-padding-vertical: 32px;
  --dex-okd-accordion-header-padding-horizontal: 0;
  --dex-okd-accordion-header-icon-sm-size: 16px;
  --dex-okd-accordion-header-title-font-weight: 500;
  --dex-okd-accordion-header-title-sm-line-height: 16px;
  --dex-okd-accordion-header-title-sm-font-weight: 500;
  --dex-okd-accordion-header-title-sm-font-size: 16px;
  --dex-okd-accordion-header-margin-bottom: 14px;
  --dex-okd-accordion-header-sm-margin-bottom: 8px;
  --dex-okd-accordion-content-color: var(--dex-okd-color-content-tertiary)
}

.XiDchE__dex {
  background: linear-gradient(180deg, transparent, #000 106.73%), #272727;
  border-radius: 10px;
  box-sizing: border-box;
  height: 140px;
  padding: 18px 24px;
  width: 100%
}

@media (max-width:767px) {
  .XiDchE__dex {
    color: var(--dex-okd-color-content-primary)
  }
}

@media (min-width:768px) {
  .XiDchE__dex {
    background: linear-gradient(180deg, transparent, #000 106.73%), #3d3d3d;
    border-radius: 16px;
    box-shadow: 0 50px 20px 0 rgba(0, 0, 0, .2);
    cursor: pointer;
    gap: 54px;
    height: 130px;
    padding: 24px
  }

  .XiDchE__dex.wOAdWN__dex {
    background: linear-gradient(180deg, transparent, #000 106.73%), #1d1d1d;
    position: relative;
    transform: translateY(-6px);
    transition: transform .3s ease
  }

  .XiDchE__dex.wOAdWN__dex .SH3C6z__dex {
    color: #fff
  }

  .XiDchE__dex.wOAdWN__dex .lu4ucG__dex {
    color: #fff;
    display: block
  }
}

@media (min-width:1270px) {
  .XiDchE__dex {
    height: 200px;
    width: 370px
  }
}

.SH3C6z__dex {
  color: #fff;
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 500
}

@media (max-width:767px) {
  .SH3C6z__dex {
    flex-basis: 100px
  }
}

@media (min-width:768px) {
  .SH3C6z__dex {
    font-size: 28px
  }
}

.lu4ucG__dex {
  color: #fff;
  font-size: 12px
}

@media (min-width:768px) {
  .lu4ucG__dex {
    display: none;
    font-weight: 400;
    line-height: 110%
  }
}

.ICtknv__dex {
  margin-bottom: 30px;
  margin-top: 50px
}

@media (min-width:768px) {
  .ICtknv__dex {
    display: flex;
    margin-bottom: 120px;
    margin-top: 100px
  }
}

.kS1vrI__dex {
  color: var(--dex-okd-color-content-primary)
}

@media (max-width:767px) {
  .kS1vrI__dex {
    margin-bottom: 50px
  }
}

@media (min-width:768px) {
  .kS1vrI__dex {
    flex: 1 1;
    margin-right: 25px
  }
}

@media (min-width:1270px) {
  .kS1vrI__dex {
    flex: 5 1;
    margin-right: 18px
  }
}

.kS1vrI__dex .y1Lc9m__dex {
  font-size: 30px;
  font-weight: 600;
  line-height: 110%;
  margin-bottom: 30px
}

@media (min-width:768px) {
  .kS1vrI__dex .y1Lc9m__dex {
    font-size: 50px
  }
}

.kS1vrI__dex .RT5JcF__dex {
  font-size: 16px;
  font-weight: 500;
  line-height: 110%
}

@media (min-width:768px) {
  .kS1vrI__dex .RT5JcF__dex {
    font-size: 20px;
    font-weight: 400;
    line-height: 120%
  }
}

.z4DHqT__dex {
  height: 640px;
  position: relative
}

@media (min-width:768px) {
  .z4DHqT__dex {
    flex: 1 1
  }
}

@media (min-width:1270px) {
  .z4DHqT__dex {
    flex: 13 1;
    height: 700px
  }
}

.jONEbL__dex .wNVOgE__dex {
  color: #000
}

.kAKDFu__dex .wNVOgE__dex {
  color: #fff
}

.xgjBV___dex {
  display: flex;
  flex-direction: column;
  flex-flow: column-reverse;
  margin: 0 45px 35px
}

@media (min-width:768px) {
  .xgjBV___dex {
    flex-direction: row;
    flex-flow: initial;
    gap: 30px;
    margin: 0 auto;
    width: 85%
  }

  .xgjBV___dex.E_imei__dex {
    flex-flow: row-reverse
  }
}

@media (min-width:1270px) {
  .xgjBV___dex {
    gap: 130px;
    width: 1126px
  }
}

.P57G3J__dex {
  display: flex;
  min-height: 300px;
  position: relative
}

@media (min-width:768px) {
  .P57G3J__dex {
    flex: 5 1;
    flex-shrink: 0;
    min-height: 510px
  }
}

@media (min-width:1270px) {
  .P57G3J__dex {
    min-height: 550px;
    width: 520px
  }
}

.P57G3J__dex.E_imei__dex {
  display: flex;
  justify-content: flex-end
}

.P57G3J__dex ._dzxxP__dex {
  border-radius: 18px;
  left: 130px;
  position: absolute;
  top: -2px;
  z-index: 2
}

.P57G3J__dex ._dzxxP__dex.E_imei__dex {
  left: 0
}

@media (max-width:767px) {
  .P57G3J__dex ._dzxxP__dex.E_imei__dex {
    left: auto;
    right: 130px
  }
}

@media (min-width:1024px) {
  .P57G3J__dex ._dzxxP__dex.E_imei__dex {
    left: 35px
  }
}

@media (min-width:768px) {
  .P57G3J__dex ._dzxxP__dex {
    border-radius: 22px;
    left: 80px;
    width: 262px
  }
}

@media (min-width:1024px) {
  .P57G3J__dex ._dzxxP__dex {
    left: 200px
  }
}

.P57G3J__dex .Xktqr4__dex {
  border-radius: 22px;
  z-index: 1
}

.m8nR3o__dex {
  align-items: center;
  color: var(--dex-okd-color-content-primary);
  display: flex
}

@media (min-width:768px) {
  .m8nR3o__dex {
    flex: 4 1
  }
}

.xXmpae__dex {
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: space-around
}

.m8nR3o__dex .dsJq_q__dex {
  flex-shrink: 0;
  font-size: 30px;
  font-weight: 600
}

.m8nR3o__dex .dsJq_q__dex:before {
  content: "/";
  font-size: 30px
}

@media (min-width:768px) {
  .m8nR3o__dex .dsJq_q__dex {
    font-size: 50px;
    font-weight: 500
  }

  .m8nR3o__dex .dsJq_q__dex:before {
    font-size: 50px
  }
}

.m8nR3o__dex .x9qFs2__dex {
  font-size: 16px;
  font-weight: 500;
  line-height: 110%
}

@media (min-width:768px) {
  .m8nR3o__dex .x9qFs2__dex {
    font-size: 20px;
    font-weight: 400
  }
}

@media (min-width:1270px) {
  .m8nR3o__dex .x9qFs2__dex {
    line-height: 120%
  }
}

.m8nR3o__dex .bjEWJ2__dex {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 35px
}

.nA8WBB__dex {
  background-color: #333;
  border-radius: 100%
}

.YlNSWY__dex {
  margin: 0 auto;
  padding-bottom: 40px;
  padding-top: 50px
}

@media (min-width:768px) {
  .YlNSWY__dex {
    padding-bottom: 150px;
    padding-top: 140px
  }
}

.sbuh7a__dex {
  height: 40px
}

@media (max-width:767px) {
  .sbuh7a__dex {
    margin: 35px 45px 0;
    text-align: right
  }
}

@media (min-width:768px) {
  .sbuh7a__dex {
    margin: 0 auto;
    position: relative;
    width: 650px
  }
}

@media (min-width:1024px) {
  .sbuh7a__dex {
    width: 85%
  }
}

@media (min-width:1270px) {
  .sbuh7a__dex {
    width: 1125px
  }
}

.OCWFk6__dex {
  color: var(--dex-okd-color-background-base-primary)
}

@media (min-width:768px) {
  .OCWFk6__dex {
    position: absolute;
    right: 0;
    top: 60px
  }

  .B_eS4s__dex {
    background: #121212;
    border-radius: 9px;
    height: 86px;
    margin: 0;
    padding: 16px 16px 24px;
    width: 94px
  }
}

.nWjWQM__dex {
  width: 32px
}

.avPN9c__dex {
  color: #fff;
  font-size: 11px
}

@media (min-width:768px) {
  .avPN9c__dex .gMcWEy__dex {
    font-style: normal;
    font-weight: 600;
    line-height: 130%
  }
}

.avPN9c__dex .s5FOea__dex {
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px
}

.avPN9c__dex .s5FOea__dex.Yw10xF__dex {
  opacity: .3;
  text-decoration: none
}

.HSG5dO__dex.B_eS4s__dex {
  background: #121212;
  border-radius: 8px;
  margin: 0 auto;
  padding: 20px 28px;
  width: 328px
}

.HSG5dO__dex .avPN9c__dex {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  gap: 15px
}

.pVLdeZ__dex {
  color: var(--dex-okd-color-content-primary);
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  margin: 0 16px 24px;
  padding-top: 50px
}

@media (min-width:768px) {
  .pVLdeZ__dex {
    font-size: 60px;
    margin: 0 0 20px;
    width: 100%
  }
}

@media (min-width:1270px) {
  .pVLdeZ__dex {
    line-height: 110%;
    width: 70%
  }
}

.eETUPc__dex {
  border-style: none;
  width: 395px
}

.AHGlTX__dex,
.eETUPc__dex {
  background: var(--dex-okd-color-background-base-primary);
  border-radius: 18px
}

.AHGlTX__dex {
  padding: 12px
}

.AHGlTX__dex.UOqdLK__dex {
  box-shadow: 0 5px 54px 1px var(--dex-okd-color-content-primary)
}

.r2VNAs__dex {
  background: var(--dex-okd-color-background-base-primary);
  display: flex;
  gap: 8px
}

.UixF5p__dex {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 75px auto 50px
}

.BKqQ3V__dex {
  margin: 30px 45px 40px
}

@media (max-width:767px) {
  .axHgU3__dex {
    margin-bottom: 12px;
    width: 100%
  }
}

@media (min-width:768px) {
  .axHgU3__dex {
    margin-right: 10px;
    padding: 16px 50px
  }
}

@media (min-width:1270px) {
  .fGfbKu__dex {
    padding-left: 26px;
    padding-right: 26px
  }
}

@media (max-width:767px) {
  .o1UOlT__dex {
    width: 100%
  }
}

.sPzOAP__dex {
  min-height: 44vw;
  position: relative;
  width: 100%
}

@media (max-width:767px) {
  .sPzOAP__dex {
    margin: 0 auto
  }
}

@media (min-width:768px) {
  .sPzOAP__dex {
    min-height: 35vw
  }
}

@media (min-width:1270px) {
  .sPzOAP__dex {
    min-height: 500px
  }
}

.NBCiJJ__dex {
  text-align: center
}

.C7gW0h__dex,
.NBCiJJ__dex {
  border-radius: 16px
}

@media (max-width:767px) {
  .C7gW0h__dex {
    margin: 0 auto
  }

  .dDw4MJ__dex {
    padding: 100px 45px 50px
  }
}

.kvubmE__dex {
  color: var(--dex-okd-color-content-primary);
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 30px
}

@media (min-width:768px) {
  .kvubmE__dex {
    font-size: 60px;
    font-weight: 500;
    line-height: 100%;
    margin: 80px auto 40px;
    text-align: center;
    width: 640px
  }
}

@media (min-width:1270px) {
  .kvubmE__dex {
    width: 850px
  }
}

.DIII2w__dex {
  gap: 12px
}

@media (max-width:767px) {
  .DIII2w__dex {
    flex-direction: column;
    padding-bottom: 50px
  }
}

@media (min-width:768px) {
  .DIII2w__dex {
    padding-bottom: 60px
  }
}

.nqsRkm__dex {
  color: var(--dex-okd-color-content-primary)
}

@media (max-width:767px) {
  .nqsRkm__dex {
    padding: 50px 0
  }
}

@media (min-width:768px) {
  .nqsRkm__dex {
    padding-top: 100px
  }
}

.VJFeaz__dex {
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 30px;
  text-align: left
}

@media (min-width:768px) {
  .VJFeaz__dex {
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center
  }
}

.cXwfzv__dex {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 50px;
  text-align: left
}

@media (min-width:768px) {
  .cXwfzv__dex {
    font-size: 50px;
    font-weight: 600;
    margin: 0 auto 100px;
    max-width: 900px;
    text-align: center
  }
}

@media (min-width:1270px) {
  .cXwfzv__dex {
    margin-bottom: 68px
  }
}

.PnG84p__dex {
  flex-direction: column;
  flex-flow: column-reverse
}

@media (min-width:768px) {
  .PnG84p__dex {
    margin: 50px auto 0;
    width: 70%
  }
}

@media (min-width:1024px) {
  .PnG84p__dex {
    flex-direction: row;
    flex-flow: row;
    margin: auto;
    width: 100%
  }
}

@media (min-width:1270px) {
  .PnG84p__dex {
    gap: 70px
  }
}

.PnG84p__dex .sHlxpG__dex {
  margin-top: 50px
}

@media (min-width:1024px) {
  .PnG84p__dex .sHlxpG__dex {
    flex-shrink: 0;
    margin-top: 0;
    width: 400px
  }

  .PnG84p__dex .ICGJpc__dex {
    margin-top: 32px
  }
}

.X0DdUM__dex {
  color: var(--dex-okd-color-content-primary)
}

.uw_EFU__dex {
  font-size: 28px;
  font-weight: 500;
  line-height: 100%;
  margin-bottom: 8px
}

@media (min-width:1024px) {
  .uw_EFU__dex {
    font-size: 32px
  }
}

.cLCcBg__dex {
  font-size: 16px;
  font-weight: 400
}

@media (min-width:1024px) {
  .cLCcBg__dex {
    font-size: 20px
  }
}

.QEyGSq__dex {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 50px
}

.PVGkW2__dex {
  background-color: var(--dex-okd-color-container-contrast);
  border-radius: 16px;
  height: 16px;
  width: 16px
}

.PVGkW2__dex._2HFQN__dex {
  background: var(--dex-okd-color-content-primary)
}

.Lp4blR__dex {
  border-style: none
}

.sHXbg5__dex {
  align-items: center;
  color: var(--dex-okd-color-content-primary);
  display: flex
}

.sHXbg5__dex .fgoaCV__dex {
  display: none
}

.XlgTPg__dex {
  border-style: none;
  color: var(--dex-okd-color-content-primary);
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 0;
  margin-left: 64px
}

.BXuDpu__dex {
  font-size: 32px;
  font-weight: 500;
  margin-left: 20px
}

.wqQBvo__dex {
  margin: 50px 0
}

@media (min-width:768px) {
  .wqQBvo__dex {
    margin: 120px auto;
    text-align: center
  }
}

.aWI7kK__dex {
  margin-bottom: 30px
}

@media (max-width:767px) {
  .aWI7kK__dex {
    flex-direction: column;
    gap: 30px
  }
}

@media (min-width:768px) {
  .aWI7kK__dex {
    margin-bottom: 10px
  }
}

.aWI7kK__dex .jDF_dn__dex {
  color: var(--dex-okd-color-content-primary);
  font-size: 28px;
  font-weight: 600
}

@media (min-width:768px) {
  .aWI7kK__dex .jDF_dn__dex {
    font-size: 32px
  }
}

.TawOWl__dex,
.vRepSD__dex {
  border-radius: 20px
}

.TawOWl__dex {
  background: var(--dex-okd-color-background-surface-brand);
  padding: 16px 38px
}

@media (min-width:768px) {
  .TawOWl__dex {
    padding: 40px 95px
  }
}

.H3ku1v__dex {
  background-color: var(--dex-okd-color-background-base-primary)
}

.a7qnz2__dex {
  margin: 0 auto;
  width: 285px
}

@media (min-width:768px) {
  .a7qnz2__dex {
    width: 80%
  }
}

@media (min-width:1270px) {
  .a7qnz2__dex {
    width: 1126px
  }
}

@media (max-width:767px) {
  .a7qnz2__dex.hACoh6__dex {
    margin: 0 8px;
    width: calc(100% - 16px)
  }
}