.mx-affix {
  position: fixed;
  z-index: var(--z-index-affix);
}
body {
  --alert-padding: 14px;
  --alert-border-radius: var(--border-radius-medium);
  --alert-color-bg: var(--bg-color-container);
  --alert-font-size-icon: 24px;
  --alert-font-size-title: 14px;
  --alert-close-btn-top: 16px;
  --alert-close-btn-right: 16px;
  --alert-right-padding: 24px;
  --alert-icon-padding-right: 12px;
  --alert-color-text-title: var(--text-color-primary);
  --alert-color-text-content: var(--text-color-secondary);
  --alert-title-margin-bottom: 8px;
  --alert-font-size-content: 14px;
  --alert-info-color: var(--brand-color);
  --alert-info-bg-color: var(--brand-color-1);
  --alert-success-color: var(--success-color);
  --alert-success-bg-color: var(--success-color-1);
  --alert-warning-color: var(--warning-color);
  --alert-warning-bg-color: var(--warning-color-1);
  --alert-error-color: var(--error-color);
  --alert-error-bg-color: var(--error-color-1);
  --alert-loading-color: var(--text-color-secondary);
  --alert-loading-bg-color: var(--bg-color-container-hover);
}
.mx-alert {
  display: flex;
  position: relative;
  padding: var(--alert-padding);
  border-radius: var(--alert-border-radius);
  background-color: var(--alert-color-bg);
  box-shadow: var(--alert-box-shadow);
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: auto;
  align-items: center;
}
.mx-alert-icon {
  font-size: var(--alert-font-size-icon);
  display: inline-flex;
  align-items: center;
}
.mx-alert-info {
  background-color: var(--alert-info-bg-color);
  color: var(--alert-info-color);
}
.mx-alert-info .mx-alert-icon {
  color: var(--alert-info-color);
}
.mx-alert-success {
  background-color: var(--alert-success-bg-color);
  color: var(--alert-success-color);
}
.mx-alert-success .mx-alert-icon {
  color: var(--alert-success-color);
}
.mx-alert-warning {
  background-color: var(--alert-warning-bg-color);
  color: var(--alert-warning-color);
}
.mx-alert-warning .mx-alert-icon {
  color: var(--alert-warning-color);
}
.mx-alert-error {
  background-color: var(--alert-error-bg-color);
  color: var(--alert-error-color);
}
.mx-alert-error .mx-alert-icon {
  color: var(--alert-error-color);
}
.mx-alert-loading {
  background-color: var(--alert-loading-bg-color);
  color: var(--alert-loading-color);
}
.mx-alert-loading .mx-alert-icon {
  color: var(--alert-loading-color);
}
.mx-alert-left {
  padding-right: var(--alert-icon-padding-right);
  display: flex;
  align-self: start;
}
.mx-alert-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  word-break: break-word;
}
.mx-alert-right_padding {
  padding-right: var(--alert-right-padding);
}
.mx-alert-title {
  font-size: var(--alert-font-size-title);
  font-weight: 500;
  margin-bottom: var(--alert-title-margin-bottom);
  line-height: 18px;
}
.mx-alert-info .mx-alert-title {
  color: var(--alert-info-color);
}
.mx-alert-content {
  font-size: var(--alert-font-size-content);
  line-height: 1;
}
.mx-alert-operation-wrapper {
  margin-left: 12px;
}
.mx-alert .mx-alert-close-btn {
  height: 18px;
  cursor: pointer;
  align-self: start;
  font-size: 12px;
}
.mx-alert .mx-alert-close-btn > svg {
  position: relative;
}
body {
  --anchor-width: 150px;
  --anchor-line-width: 2px;
  --anchor-line-slider-height: 12px;
  --anchor-font-size-title: 13px;
  --anchor-line-height-base: 1.5;
  --anchor-title-padding-vertical: 4px;
  --anchor-color: var(--brand-color);
  --anchor-line-margin-right: 12px;
  --anchor-title-padding-horizontal: 8px;
  --anchor-color-bg-line: var(--bg-color-component);
  --anchor-title-margin-bottom: 2px;
  --anchor-color-title: var(--text-color-secondary);
  --anchor-item-inner-margin-left: 16px;
  --anchor-lineless-color-title_active: var(--color-primary-6);
}
.mx-anchor {
  position: relative;
  width: var(--anchor-width);
  overflow: auto;
}
.mx-anchor-line-slider {
  position: absolute;
  height: var(--anchor-line-slider-height);
  width: var(--anchor-line-width);
  margin-top: calc((var(--anchor-font-size-title) * var(--anchor-line-height-base)) / 2 + var(--anchor-title-padding-vertical) - (var(--anchor-line-slider-height) / 2));
  background-color: var(--anchor-color);
  left: 0;
  top: 0;
  transition: top 0.2 var(--transition-timing-function-standard);
  z-index: 1;
}
.mx-anchor-list {
  margin-left: calc(var(--anchor-line-margin-right) - var(--anchor-title-padding-horizontal) + var(--anchor-line-width));
  position: relative;
}
.mx-anchor-list::before {
  content: '';
  position: absolute;
  height: 100%;
  background-color: var(--anchor-color-bg-line);
  width: var(--anchor-line-width);
  left: calc(var(--anchor-title-padding-horizontal) - var(--anchor-line-margin-right) - var(--anchor-line-width));
}
.mx-anchor-link {
  margin-bottom: var(--anchor-title-margin-bottom);
}
.mx-anchor-link-title {
  color: var(--anchor-color-title);
  line-height: var(--anchor-line-height-base);
  font-size: var(--anchor-font-size-title);
  margin-bottom: var(--anchor-title-margin-bottom);
  padding: var(--anchor-title-padding-vertical) var(--anchor-title-padding-horizontal);
  text-decoration: none;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  border-radius: var(--anchor-border-radius-title-hover);
}
.mx-anchor-link-title:hover {
  color: var(--anchor-color);
}
.mx-anchor-link-active > .mx-anchor-link-title {
  transition: all 0.1s var(--transition-timing-function-linear);
  color: var(--anchor-color);
  font-weight: 500;
}
.mx-anchor-link .mx-anchor-link {
  margin-left: var(--anchor-item-inner-margin-left);
}
.mx-anchor-lineless .mx-anchor-list {
  margin-left: 0;
}
.mx-anchor-lineless .mx-anchor-list::before {
  display: none;
}
.mx-anchor-lineless .mx-anchor-link-active > .mx-anchor-link-title {
  background-color: var(--anchor-lineless-bg-title_active);
  font-weight: 500;
}
body {
  /***** Outline *****/
  --btn-outline-color-text: var(--brand-color);
  --btn-outline-color-text-disabled: var(--brand-color-disabled);
  --btn-outline-color-text-hover: var(--brand-color-hover);
  --btn-outline-color-text-active: var(--brand-color-active);
  --btn-outline-color-bg: transparent;
  --btn-outline-color-bg-disabled: transparent;
  --btn-outline-color-bg-hover: transparent;
  --btn-outline-color-bg-active: transparent;
  --btn-outline-color-border: var(--brand-color);
  --btn-outline-color-border-disabled: var(--brand-color-disabled);
  --btn-outline-color-border-hover: var(--brand-color-hover);
  --btn-outline-color-border-active: var(--brand-color-active);
  --btn-outline-color-text-warning: var(--warning-color);
  --btn-outline-color-text-warning-disabled: var(--warning-color-disabled);
  --btn-outline-color-text-warning-hover: var(--warning-color-hover);
  --btn-outline-color-text-warning-active: var(--warning-color-active);
  --btn-outline-color-bg-warning: transparent;
  --btn-outline-color-bg-warning-disabled: transparent;
  --btn-outline-color-bg-warning-hover: transparent;
  --btn-outline-color-bg-warning-active: transparent;
  --btn-outline-color-border-warning: var(--warning-color);
  --btn-outline-color-border-warning-disabled: var(--warning-color-disabled);
  --btn-outline-color-border-warning-hover: var(--warning-color-hover);
  --btn-outline-color-border-warning-active: var(--warning-color-active);
  --btn-outline-color-text-error: var(--error-color);
  --btn-outline-color-text-error-disabled: var(--error-color-disabled);
  --btn-outline-color-text-error-hover: var(--error-color-hover);
  --btn-outline-color-text-error-active: var(--error-color-active);
  --btn-outline-color-bg-error: transparent;
  --btn-outline-color-bg-error-disabled: transparent;
  --btn-outline-color-bg-error-hover: transparent;
  --btn-outline-color-bg-error-active: transparent;
  --btn-outline-color-border-error: var(--error-6);
  --btn-outline-color-border-error-disabled: var(--error-color-disabled);
  --btn-outline-color-border-error-hover: var(--error-color-hover);
  --btn-outline-color-border-error-active: var(--error-color-active);
  --btn-outline-color-text-success: var(--success-color);
  --btn-outline-color-text-success-disabled: var(--success-color-disabled);
  --btn-outline-color-text-success-hover: var(--success-color-hover);
  --btn-outline-color-text-success-active: var(--success-color-active);
  --btn-outline-color-bg-success: transparent;
  --btn-outline-color-bg-success-disabled: transparent;
  --btn-outline-color-bg-success-hover: transparent;
  --btn-outline-color-bg-success-active: transparent;
  --btn-outline-color-border-success: var(--success-color);
  --btn-outline-color-border-success-disabled: var(--success-color-disabled);
  --btn-outline-color-border-success-hover: var(--success-color-hover);
  --btn-outline-color-border-success-active: var(--success-color-active);
  --btn-outline-color-text-default: var(--text-color-primary);
  --btn-outline-color-text-default-disabled: var(--text-color-placeholder);
  --btn-outline-color-text-default-hover: var(--text-color-secondary);
  --btn-outline-color-text-default-active: var(--text-color-primary);
  --btn-outline-color-bg-default: transparent;
  --btn-outline-color-bg-default-disabled: transparent;
  --btn-outline-color-bg-default-hover: transparent;
  --btn-outline-color-bg-default-active: transparent;
  --btn-outline-color-border-default: var(--text-color-primary);
  --btn-outline-color-border-default-disabled: var(--text-color-placeholder);
  --btn-outline-color-border-default-hover: var(--text-color-secondary);
  --btn-outline-color-border-default-active: var(--text-color-primary);
  /***** brand *****/
  --btn-brand-color-text: #fff;
  --btn-brand-color-text-disabled: #fff;
  --btn-brand-color-text-hover: #fff;
  --btn-brand-color-text-active: #fff;
  --btn-brand-color-bg: var(--brand-color);
  --btn-brand-color-bg-disabled: var(--brand-color-disabled);
  --btn-brand-color-bg-hover: var(--brand-color-hover);
  --btn-brand-color-bg-active: var(--brand-color-active);
  --btn-brand-color-hover-border: transparent;
  --btn-brand-color-border: transparent;
  --btn-brand-color-border-hover: transparent;
  --btn-brand-color-border-disabled: var(--brand-color-disabled);
  --btn-brand-color-border-active: transparent;
  --btn-brand-color-text-warning: #fff;
  --btn-brand-color-text-warning-disabled: #fff;
  --btn-brand-color-text-warning-hover: #fff;
  --btn-brand-color-text-warning-active: #fff;
  --btn-brand-color-bg-warning: var(--warning-color);
  --btn-brand-color-bg-warning-disabled: var(--warning-color-disabled);
  --btn-brand-color-bg-warning-hover: var(--warning-color-hover);
  --btn-brand-color-bg-warning-active: var(--warning-color-active);
  --btn-brand-color-border-warning: transparent;
  --btn-brand-color-border-warning-disabled: transparent;
  --btn-brand-color-border-warning-hover: transparent;
  --btn-brand-color-border-warning-active: transparent;
  --btn-brand-color-text-error: #fff;
  --btn-brand-color-text-error-disabled: #fff;
  --btn-brand-color-text-error-hover: #fff;
  --btn-brand-color-text-error-active: #fff;
  --btn-brand-color-bg-error: var(--error-color);
  --btn-brand-color-bg-error-disabled: var(--error-color-disabled);
  --btn-brand-color-bg-error-hover: var(--error-color-hover);
  --btn-brand-color-bg-error-active: var(--error-color-active);
  --btn-brand-color-border-error: transparent;
  --btn-brand-color-border-error-disabled: transparent;
  --btn-brand-color-border-error-hover: transparent;
  --btn-brand-color-border-error-active: transparent;
  --btn-brand-color-text-success: #fff;
  --btn-brand-color-text-success-disabled: #fff;
  --btn-brand-color-text-success-hover: #fff;
  --btn-brand-color-text-success-active: #fff;
  --btn-brand-color-bg-success: var(--success-color);
  --btn-brand-color-bg-success-disabled: var(--success-color-disabled);
  --btn-brand-color-bg-success-hover: var(--success-color-hover);
  --btn-brand-color-bg-success-active: var(--success-color-active);
  --btn-brand-color-border-success: transparent;
  --btn-brand-color-border-success-disabled: transparent;
  --btn-brand-color-border-success-hover: transparent;
  --btn-brand-color-border-success-active: transparent;
  --btn-brand-color-text-default: var(--text-color-primary);
  --btn-brand-color-text-default-disabled: var(--text-color-disabled);
  --btn-brand-color-text-default-hover: var(--text-color-primary);
  --btn-brand-color-text-default-active: var(--text-color-primary);
  --btn-brand-color-bg-default: var(--bg-color-component);
  --btn-brand-color-bg-default-disabled: var(--bg-color-component-disabled);
  --btn-brand-color-bg-default-hover: var(--bg-color-component-hover);
  --btn-brand-color-bg-default-active: var(--bg-color-component-active);
  --btn-brand-color-border-default: transparent;
  --btn-brand-color-border-default-disabled: transparent;
  --btn-brand-color-border-default-hover: transparent;
  --btn-brand-color-border-default-active: transparent;
  /***** Text *****/
  --btn-text-color-text: var(--brand-color);
  --btn-text-color-text-disabled: var(--brand-color-disabled);
  --btn-text-color-text-hover: var(--brand-color-hover);
  --btn-text-color-text-active: var(--brand-color-active);
  --btn-text-color-bg: transparent;
  --btn-text-color-bg-disabled: transparent;
  --btn-text-color-bg-hover: var(--bg-color-container-hover);
  --btn-text-color-bg-active: var(--bg-color-container-active);
  --btn-text-color-border: transparent;
  --btn-text-color-border-disabled: transparent;
  --btn-text-color-border-hover: transparent;
  --btn-text-color-border-active: transparent;
  --btn-text-color-text-warning: var(--warning-color);
  --btn-text-color-text-warning-disabled: var(--warning-color-disabled);
  --btn-text-color-text-warning-hover: var(--warning-color-hover);
  --btn-text-color-text-warning-active: var(--warning-color-active);
  --btn-text-color-bg-warning: transparent;
  --btn-text-color-bg-warning-disabled: transparent;
  --btn-text-color-bg-warning-hover: var(--bg-color-container-hover);
  --btn-text-color-bg-warning-active: var(--bg-color-container-active);
  --btn-text-color-border-warning: transparent;
  --btn-text-color-border-warning-disabled: transparent;
  --btn-text-color-border-warning-hover: transparent;
  --btn-text-color-border-warning-active: transparent;
  --btn-text-color-text-error: var(--error-color);
  --btn-text-color-text-error-disabled: var(--error-color-disabled);
  --btn-text-color-text-error-hover: var(--error-color-hover);
  --btn-text-color-text-error-active: var(--error-color-active);
  --btn-text-color-bg-error: transparent;
  --btn-text-color-bg-error-disabled: transparent;
  --btn-text-color-bg-error-hover: var(--bg-color-container-hover);
  --btn-text-color-bg-error-active: var(--bg-color-container-active);
  --btn-text-color-border-error: transparent;
  --btn-text-color-border-error-disabled: transparent;
  --btn-text-color-border-error-hover: transparent;
  --btn-text-color-border-error-active: transparent;
  --btn-text-color-text-success: var(--success-color);
  --btn-text-color-text-success-disabled: var(--success-color-disabled);
  --btn-text-color-text-success-hover: var(--success-color-hover);
  --btn-text-color-text-success-active: var(--success-color-active);
  --btn-text-color-bg-success: transparent;
  --btn-text-color-bg-success-disabled: transparent;
  --btn-text-color-bg-success-hover: var(--bg-color-container-hover);
  --btn-text-color-bg-success-active: var(--bg-color-container-active);
  --btn-text-color-border-success: transparent;
  --btn-text-color-border-success-disabled: transparent;
  --btn-text-color-border-success-hover: transparent;
  --btn-text-color-border-success-active: transparent;
  --btn-text-color-text-default: var(--text-color-primary);
  --btn-text-color-text-default-disabled: var(--text-color-disabled);
  --btn-text-color-text-default-hover: var(--text-color-primary);
  --btn-text-color-text-default-active: var(--text-color-primary);
  --btn-text-color-bg-default: transparent;
  --btn-text-color-bg-default-disabled: transparent;
  --btn-text-color-bg-default-hover: var(--bg-color-container-hover);
  --btn-text-color-bg-default-active: var(--bg-color-container-active);
  --btn-text-color-border-default: transparent;
  --btn-text-color-border-default-disabled: transparent;
  --btn-text-color-border-default-hover: transparent;
  --btn-text-color-border-default-active: transparent;
  --btn-radius: var(--border-radius-large);
  --btn-padding: 0 14px;
  --btn-height: 32px;
  --btn-font-size: 14px;
}
.mx-btn {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  outline: none;
  padding: var(--btn-padding);
  height: var(--btn-height);
  font-size: var(--btn-font-size);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-user-select: none;
          user-select: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s var(--transition-timing-function-standard);
  box-sizing: border-box;
  line-height: 1.5715;
  border-radius: var(--btn-radius);
}
.mx-btn > a:only-child {
  /* stylelint-disable-next-line value-keyword-case */
  color: currentColor;
}
.mx-btn:active {
  transition: none;
}
.mx-btn:active:not(.mx-btn-loading):not(.mx-btn-disabled) {
  transition: none;
}
.mx-btn:empty {
  display: inline-block;
  vertical-align: bottom;
}
.mx-btn-long {
  display: block;
  width: 100%;
}
.mx-btn-loading {
  cursor: default;
  position: relative;
}
.mx-btn-loading::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: 1;
  display: block;
  background: #fff;
  border-radius: inherit;
  opacity: 0.4;
  transition: opacity 1s var(--transition-timing-function-linear);
  pointer-events: none;
}
.mx-btn-loading-fixed-width {
  transition: none;
}
.mx-btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  padding: 0;
  width: 32px;
}
.mx-btn > svg + span {
  margin-left: 8px;
}
.mx-btn > span + span {
  margin-left: 8px;
}
.mx-btn-outline:not(.mx-btn-disabled) {
  background-color: var(--btn-outline-color-bg);
  color: var(--btn-outline-color-text);
  border: 1px solid var(--btn-outline-color-border);
}
.mx-btn-outline:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-outline-color-border-hover);
  color: var(--btn-outline-color-text-hover);
  background-color: var(--btn-outline-color-bg-hover);
}
.mx-btn-outline:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-outline-color-border-active);
  color: var(--btn-outline-color-text-active);
  background-color: var(--btn-outline-color-bg-active);
}
.mx-btn-outline:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--brand-color-3);
}
.mx-btn-outline.mx-btn-disabled {
  background-color: var(--btn-outline-color-bg-disabled);
  color: var(--btn-outline-color-text-disabled);
  border: 1px solid var(--btn-outline-color-border-disabled);
  cursor: not-allowed;
}
.mx-btn-outline.mx-btn-status-warning:not(.mx-btn-disabled) {
  background-color: var(--btn-outline-color-bg-warning);
  color: var(--btn-outline-color-text-warning);
  border-color: var(--btn-outline-color-border-warning);
}
.mx-btn-outline.mx-btn-status-warning:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-outline-color-border-warning-hover);
  color: var(--btn-outline-color-text-warning-hover);
  background-color: var(--btn-outline-color-bg-warning-hover);
}
.mx-btn-outline.mx-btn-status-warning:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-outline-color-border-warning-active);
  color: var(--btn-outline-color-text-warning-active);
  background-color: var(--btn-outline-color-bg-warning-active);
}
.mx-btn-outline.mx-btn-status-warning:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--warning-color-3);
}
.mx-btn-outline.mx-btn-status-warning.mx-btn-disabled {
  color: var(--btn-outline-color-text-warning-disabled);
  background-color: var(--btn-outline-color-bg-warning-disabled);
  border: 1px solid var(--btn-outline-color-border-warning-disabled);
}
.mx-btn-outline.mx-btn-status-error:not(.mx-btn-disabled) {
  background-color: var(--btn-outline-color-bg-error);
  color: var(--btn-outline-color-text-error);
  border-color: var(--btn-outline-color-border-error);
}
.mx-btn-outline.mx-btn-status-error:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-outline-color-border-error-hover);
  color: var(--btn-outline-color-text-error-hover);
  background-color: var(--btn-outline-color-bg-error-hover);
}
.mx-btn-outline.mx-btn-status-error:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-outline-color-border-error-active);
  color: var(--btn-outline-color-text-error-active);
  background-color: var(--btn-outline-color-bg-error-active);
}
.mx-btn-outline.mx-btn-status-error:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--error-color-3);
}
.mx-btn-outline.mx-btn-status-error.mx-btn-disabled {
  color: var(--btn-outline-color-text-error-disabled);
  background-color: var(--btn-outline-color-bg-error-disabled);
  border: 1px solid var(--btn-outline-color-border-error-disabled);
}
.mx-btn-outline.mx-btn-status-success:not(.mx-btn-disabled) {
  background-color: var(--btn-outline-color-bg-success);
  color: var(--btn-outline-color-text-success);
  border-color: var(--btn-outline-color-border-success);
}
.mx-btn-outline.mx-btn-status-success:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-outline-color-border-success-hover);
  color: var(--btn-outline-color-text-success-hover);
  background-color: var(--btn-outline-color-bg-success-hover);
}
.mx-btn-outline.mx-btn-status-success:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-outline-color-border-success-active);
  color: var(--btn-outline-color-text-success-active);
  background-color: var(--btn-outline-color-bg-success-active);
}
.mx-btn-outline.mx-btn-status-success:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--success-color-3);
}
.mx-btn-outline.mx-btn-status-success.mx-btn-disabled {
  color: var(--btn-outline-color-text-success-disabled);
  background-color: var(--btn-outline-color-bg-success-disabled);
  border: 1px solid var(--btn-outline-color-border-success-disabled);
}
.mx-btn-outline.mx-btn-status-default:not(.mx-btn-disabled) {
  background-color: var(--btn-outline-color-bg-default);
  color: var(--btn-outline-color-text-default);
  border-color: var(--btn-outline-color-border-default);
}
.mx-btn-outline.mx-btn-status-default:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-outline-color-border-default-hover);
  color: var(--btn-outline-color-text-default-hover);
  background-color: var(--btn-outline-color-bg-default-hover);
}
.mx-btn-outline.mx-btn-status-default:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-outline-color-border-default-active);
  color: var(--btn-outline-color-text-default-active);
  background-color: var(--btn-outline-color-bg-default-active);
}
.mx-btn-outline.mx-btn-status-default:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--gray-color-2);
}
.mx-btn-outline.mx-btn-status-default.mx-btn-disabled {
  color: var(--btn-outline-color-text-default-disabled);
  background-color: var(--btn-outline-color-bg-default-disabled);
  border: 1px solid var(--btn-outline-color-border-default-disabled);
}
.mx-btn-brand:not(.mx-btn-disabled) {
  background-color: var(--btn-brand-color-bg);
  color: var(--btn-brand-color-text);
  border: 1px solid var(--btn-brand-color-hover-border);
}
.mx-btn-brand:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-brand-color-border-hover);
  color: var(--btn-brand-color-text-hover);
  background-color: var(--btn-brand-color-bg-hover);
}
.mx-btn-brand:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-brand-color-border-active);
  color: var(--btn-brand-color-text-active);
  background-color: var(--btn-brand-color-bg-active);
}
.mx-btn-brand:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--brand-color-3);
}
.mx-btn-brand.mx-btn-disabled {
  background-color: var(--btn-brand-color-bg-disabled);
  color: var(--btn-brand-color-text-disabled);
  border: 1px solid var(--btn-brand-color-border-disabled);
  cursor: not-allowed;
}
.mx-btn-brand.mx-btn-status-warning:not(.mx-btn-disabled) {
  background-color: var(--btn-brand-color-bg-warning);
  color: var(--btn-brand-color-text-warning);
  border-color: var(--btn-brand-color-border-warning);
}
.mx-btn-brand.mx-btn-status-warning:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-brand-color-border-warning-hover);
  color: var(--btn-brand-color-text-warning-hover);
  background-color: var(--btn-brand-color-bg-warning-hover);
}
.mx-btn-brand.mx-btn-status-warning:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-brand-color-border-warning-active);
  color: var(--btn-brand-color-text-warning-active);
  background-color: var(--btn-brand-color-bg-warning-active);
}
.mx-btn-brand.mx-btn-status-warning:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--warning-color-3);
}
.mx-btn-brand.mx-btn-status-warning.mx-btn-disabled {
  color: var(--btn-brand-color-text-warning-disabled);
  background-color: var(--btn-brand-color-bg-warning-disabled);
  border: 1px solid var(--btn-brand-color-border-warning-disabled);
}
.mx-btn-brand.mx-btn-status-error:not(.mx-btn-disabled) {
  background-color: var(--btn-brand-color-bg-error);
  color: var(--btn-brand-color-text-error);
  border-color: var(--btn-brand-color-border-error);
}
.mx-btn-brand.mx-btn-status-error:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-brand-color-border-error-hover);
  color: var(--btn-brand-color-text-error-hover);
  background-color: var(--btn-brand-color-bg-error-hover);
}
.mx-btn-brand.mx-btn-status-error:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-brand-color-border-error-active);
  color: var(--btn-brand-color-text-error-active);
  background-color: var(--btn-brand-color-bg-error-active);
}
.mx-btn-brand.mx-btn-status-error:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--error-color-3);
}
.mx-btn-brand.mx-btn-status-error.mx-btn-disabled {
  color: var(--btn-brand-color-text-error-disabled);
  background-color: var(--btn-brand-color-bg-error-disabled);
  border: 1px solid var(--btn-brand-color-border-error-disabled);
}
.mx-btn-brand.mx-btn-status-success:not(.mx-btn-disabled) {
  background-color: var(--btn-brand-color-bg-success);
  color: var(--btn-brand-color-text-success);
  border-color: var(--btn-brand-color-border-success);
}
.mx-btn-brand.mx-btn-status-success:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-brand-color-border-success-hover);
  color: var(--btn-brand-color-text-success-hover);
  background-color: var(--btn-brand-color-bg-success-hover);
}
.mx-btn-brand.mx-btn-status-success:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-brand-color-border-success-active);
  color: var(--btn-brand-color-text-success-active);
  background-color: var(--btn-brand-color-bg-success-active);
}
.mx-btn-brand.mx-btn-status-success:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--success-color-3);
}
.mx-btn-brand.mx-btn-status-success.mx-btn-disabled {
  color: var(--btn-brand-color-text-success-disabled);
  background-color: var(--btn-brand-color-bg-success-disabled);
  border: 1px solid var(--btn-brand-color-border-success-disabled);
}
.mx-btn-brand.mx-btn-status-default:not(.mx-btn-disabled) {
  background-color: var(--btn-brand-color-bg-default);
  color: var(--btn-brand-color-text-default);
  border-color: var(--btn-brand-color-border-default);
}
.mx-btn-brand.mx-btn-status-default:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-brand-color-border-default-hover);
  color: var(--btn-brand-color-text-default-hover);
  background-color: var(--btn-brand-color-bg-default-hover);
}
.mx-btn-brand.mx-btn-status-default:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-brand-color-border-default-active);
  color: var(--btn-brand-color-text-default-active);
  background-color: var(--btn-brand-color-bg-default-active);
}
.mx-btn-brand.mx-btn-status-default:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--gray-color-2);
}
.mx-btn-brand.mx-btn-status-default.mx-btn-disabled {
  color: var(--btn-brand-color-text-default-disabled);
  background-color: var(--btn-brand-color-bg-default-disabled);
  border: 1px solid var(--btn-brand-color-border-default-disabled);
}
.mx-btn-text:not(.mx-btn-disabled) {
  background-color: var(--btn-text-color-bg);
  color: var(--btn-text-color-text);
  border: 1px solid var(--btn-text-color-border);
}
.mx-btn-text:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-text-color-border-hover);
  color: var(--btn-text-color-text-hover);
  background-color: var(--btn-text-color-bg-hover);
}
.mx-btn-text:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-text-color-border-active);
  color: var(--btn-text-color-text-active);
  background-color: var(--btn-text-color-bg-active);
}
.mx-btn-text:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--brand-color-3);
}
.mx-btn-text.mx-btn-disabled {
  background-color: var(--btn-text-color-bg-disabled);
  color: var(--btn-text-color-text-disabled);
  border: 1px solid var(--btn-text-color-border-disabled);
  cursor: not-allowed;
}
.mx-btn-text.mx-btn-status-warning:not(.mx-btn-disabled) {
  background-color: var(--btn-text-color-bg-warning);
  color: var(--btn-text-color-text-warning);
  border-color: var(--btn-text-color-border-warning);
}
.mx-btn-text.mx-btn-status-warning:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-text-color-border-warning-hover);
  color: var(--btn-text-color-text-warning-hover);
  background-color: var(--btn-text-color-bg-warning-hover);
}
.mx-btn-text.mx-btn-status-warning:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-text-color-border-warning-active);
  color: var(--btn-text-color-text-warning-active);
  background-color: var(--btn-text-color-bg-warning-active);
}
.mx-btn-text.mx-btn-status-warning:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--warning-color-3);
}
.mx-btn-text.mx-btn-status-warning.mx-btn-disabled {
  color: var(--btn-text-color-text-warning-disabled);
  background-color: var(--btn-text-color-bg-warning-disabled);
  border: 1px solid var(--btn-text-color-border-warning-disabled);
}
.mx-btn-text.mx-btn-status-error:not(.mx-btn-disabled) {
  background-color: var(--btn-text-color-bg-error);
  color: var(--btn-text-color-text-error);
  border-color: var(--btn-text-color-border-error);
}
.mx-btn-text.mx-btn-status-error:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-text-color-border-error-hover);
  color: var(--btn-text-color-text-error-hover);
  background-color: var(--btn-text-color-bg-error-hover);
}
.mx-btn-text.mx-btn-status-error:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-text-color-border-error-active);
  color: var(--btn-text-color-text-error-active);
  background-color: var(--btn-text-color-bg-error-active);
}
.mx-btn-text.mx-btn-status-error:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--error-color-3);
}
.mx-btn-text.mx-btn-status-error.mx-btn-disabled {
  color: var(--btn-text-color-text-error-disabled);
  background-color: var(--btn-text-color-bg-error-disabled);
  border: 1px solid var(--btn-text-color-border-error-disabled);
}
.mx-btn-text.mx-btn-status-success:not(.mx-btn-disabled) {
  background-color: var(--btn-text-color-bg-success);
  color: var(--btn-text-color-text-success);
  border-color: var(--btn-text-color-border-success);
}
.mx-btn-text.mx-btn-status-success:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-text-color-border-success-hover);
  color: var(--btn-text-color-text-success-hover);
  background-color: var(--btn-text-color-bg-success-hover);
}
.mx-btn-text.mx-btn-status-success:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-text-color-border-success-active);
  color: var(--btn-text-color-text-success-active);
  background-color: var(--btn-text-color-bg-success-active);
}
.mx-btn-text.mx-btn-status-success:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--success-color-3);
}
.mx-btn-text.mx-btn-status-success.mx-btn-disabled {
  color: var(--btn-text-color-text-success-disabled);
  background-color: var(--btn-text-color-bg-success-disabled);
  border: 1px solid var(--btn-text-color-border-success-disabled);
}
.mx-btn-text.mx-btn-status-default:not(.mx-btn-disabled) {
  background-color: var(--btn-text-color-bg-default);
  color: var(--btn-text-color-text-default);
  border-color: var(--btn-text-color-border-default);
}
.mx-btn-text.mx-btn-status-default:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-text-color-border-default-hover);
  color: var(--btn-text-color-text-default-hover);
  background-color: var(--btn-text-color-bg-default-hover);
}
.mx-btn-text.mx-btn-status-default:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-text-color-border-default-active);
  color: var(--btn-text-color-text-default-active);
  background-color: var(--btn-text-color-bg-default-active);
}
.mx-btn-text.mx-btn-status-default:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--gray-color-2);
}
.mx-btn-text.mx-btn-status-default.mx-btn-disabled {
  color: var(--btn-text-color-text-default-disabled);
  background-color: var(--btn-text-color-bg-default-disabled);
  border: 1px solid var(--btn-text-color-border-default-disabled);
}
.mx-btn-group {
  display: inline-block;
}
.mx-btn-group .mx-btn:first-child {
  border-radius: var(--btn-radius) 0 0 var(--btn-radius);
}
.mx-btn-group .mx-btn.mx-btn-outline:first-child:hover {
  border-right-color: transparent;
}
.mx-btn-group .mx-btn:not(:first-child):not(:last-child):hover {
  border-right-color: transparent;
}
.mx-btn-group .mx-btn:last-child {
  border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
}
.mx-btn-group .mx-btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.mx-btn-group .mx-btn:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
body {
  --checkbox-text-mask-spacing: 8px;
  --checkbox-mask-height: 18px;
  --checkbox-mask-border-width: 2px;
  --checkbox-mask-border-radius: var(--border-radius-medium);
  --checkbox-mask-color-border_checked: var(--brand-color);
  --checkbox-mask-color-bg_checked: var(--brand-color);
  --checkbox-mask-color-border_hover: var(--brand-color-hover);
  --checkbox-indeterminate-color-bg: #fff;
  --checkbox-color-indeterminate-icon-height: 2px;
  --checkbox-color-indeterminate-icon-width: 10px;
  --checkbox-color-check-icon: transparent;
  --checkbox-color-checked-icon: #fff;
  --checkbox-size-check-icon: 12px;
  --checkbox-mask-color-border: var(--border-level-2-color);
  --checkbox-mask-color-border_disabled: var(--border-level-2-color);
  --checkbox-mask-color-border_checked_disabled: var(--brand-color-disabled);
  --checkbox-mask-color-bg_checked_disabled: var(--brand-color-disabled);
  --checkbox-mask-color-bg_disabled: var(--bg-color-component-disabled);
  --checkbox-color-text_disabled: var(--text-color-disabled);
  --checkbox-group-spacing: 16px;
  --checkbox-group-size-line-height_vertical: 16px;
}
.mx-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  line-height: unset;
  position: relative;
}
.mx-checkbox > input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
.mx-checkbox:focus::before {
  background-color: var(--gray-color-3);
}
.mx-checkbox-text {
  margin-left: var(--checkbox-text-mask-spacing);
}
.mx-checkbox-mask {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  width: var(--checkbox-mask-height);
  height: var(--checkbox-mask-height);
  border-radius: var(--checkbox-mask-border-radius);
  border: var(--checkbox-mask-border-width) solid var(--checkbox-mask-color-border);
  -webkit-user-select: none;
          user-select: none;
}
.mx-checkbox-mask::before {
  content: '';
  display: block;
  width: var(--checkbox-mask-height);
  height: var(--checkbox-mask-height);
  border-radius: var(--checkbox-mask-border-radius);
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0.8);
  position: absolute;
  transition: all 0.1s linear;
}
.mx-checkbox-mask::after {
  content: '';
  display: block;
  height: var(--checkbox-color-indeterminate-icon-height);
  width: var(--checkbox-color-indeterminate-icon-width);
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0);
  position: absolute;
  border-radius: 0.5px;
}
.mx-checkbox-mask-icon {
  position: relative;
  height: 100%;
  transform: scale(0.8);
  color: var(--checkbox-color-check-icon);
  transform-origin: center 50%;
  margin: 0 auto;
  display: block;
  width: var(--checkbox-size-check-icon);
  transition: transform 0.1s linear;
}
.mx-checkbox:hover .mx-checkbox-mask {
  border-color: var(--checkbox-mask-color-border_hover);
}
.mx-checkbox-checked .mx-checkbox-mask-icon {
  transform: scale(1);
  color: var(--checkbox-color-checked-icon);
}
.mx-checkbox-checked .mx-checkbox-mask::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
  border-color: var(--checkbox-mask-color-border_checked);
  background-color: var(--checkbox-mask-color-bg_checked);
}
.mx-checkbox-indeterminate .mx-checkbox-mask-icon {
  transform: scale(0);
}
.mx-checkbox-indeterminate .mx-checkbox-mask::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
  border-color: var(--checkbox-mask-color-border_checked);
  background-color: var(--checkbox-mask-color-bg_checked);
}
.mx-checkbox-indeterminate .mx-checkbox-mask::after {
  opacity: 1;
  background: var(--checkbox-indeterminate-color-bg);
  transform: translateX(-50%) translateY(-50%) scale(1);
  transition: transform 0.1s var(--transition-timing-function-overshoot);
}
.mx-checkbox.mx-checkbox-disabled {
  cursor: not-allowed;
}
.mx-checkbox.mx-checkbox-disabled:hover .mx-checkbox-mask {
  border-color: var(--checkbox-mask-color-border_disabled);
}
.mx-checkbox-checked:hover .mx-checkbox-mask {
  border-color: var(--checkbox-mask-color-border_checked);
}
.mx-checkbox-disabled .mx-checkbox-mask::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
  border-color: var(--checkbox-mask-color-bg_disabled);
  background-color: var(--checkbox-mask-color-bg_disabled);
}
.mx-checkbox-disabled.mx-checkbox-checked .mx-checkbox-mask::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
  border-color: var(--checkbox-mask-color-border_checked_disabled);
  background-color: var(--checkbox-mask-color-bg_checked_disabled);
}
.mx-checkbox-disabled.mx-checkbox-indeterminate .mx-checkbox-mask::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
  border-color: var(--checkbox-mask-color-border_checked_disabled);
  background-color: var(--checkbox-mask-color-bg_checked_disabled);
}
.mx-checkbox-disabled .mx-checkbox-text {
  color: var(--checkbox-color-text_disabled);
}
.mx-checkbox-group {
  display: flex;
}
.mx-checkbox-group .mx-checkbox {
  margin-right: var(--checkbox-group-spacing);
}
.mx-checkbox-group-direction-vertical {
  display: flex;
  flex-direction: column;
}
.mx-checkbox-group-direction-vertical .mx-checkbox {
  margin-bottom: var(--checkbox-group-spacing);
}
body {
  --drawer-icon-hover-bg: var(--bg-color-container-hover);
  --drawer-icon-hover-size: 24px;
  --drawer-icon-size: 14px;
  --drawer-title-padding: 14px 16px;
  --drawer-content-padding: 14px 16px;
  --drawer-footer-padding: 12px 16px;
  --drawer-mask-bg: var(--mask-active);
  --drawer-bg: var(--bg-color-container);
}
.mx-drawer-scroll {
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.mx-drawer-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--drawer-mask-bg);
}
.mx-drawer-top {
  top: 0;
}
.mx-drawer-right {
  right: 0;
}
.mx-drawer-left {
  left: 0;
}
.mx-drawer-bottom {
  bottom: 0;
}
.mx-drawer {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--drawer-bg);
}
.mx-drawer .mx-icon-hover {
  position: relative;
  display: inline-block;
  cursor: pointer;
  line-height: 0;
}
.mx-drawer .mx-icon-hover .mx-icon {
  position: relative;
}
.mx-drawer .mx-icon-hover::before {
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: transparent;
  box-sizing: border-box;
  transition: background-color 0.1s linear;
}
.mx-drawer .mx-icon-hover:hover::before {
  background-color: var(--drawer-icon-hover-bg);
}
.mx-drawer .mx-icon-hover.mx-icon-hover-disabled::before {
  opacity: 0;
}
.mx-drawer .mx-icon-hover::before {
  top: 50%;
  left: 50%;
  height: var(--drawer-icon-hover-size);
  width: var(--drawer-icon-hover-size);
  transform: translate(-50%, -50%);
}
.mx-drawer-root-wrapper {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: var(--z-index-modal);
}
.mx-drawer-root-wrapper-no-mask {
  pointer-events: none;
}
.mx-drawer-root-wrapper-no-mask .mx-drawer {
  pointer-events: auto;
}
.mx-drawer-root-wrapper-fixed {
  position: fixed;
}
.mx-drawer-root-wrapper-absolute {
  position: absolute;
}
.mx-drawer-header {
  box-sizing: border-box;
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: var(--drawer-title-padding);
  border-bottom: 1px solid var(--border-level-1-color);
}
.mx-drawer-title {
  display: flex;
  align-items: center;
}
.mx-drawer-title-name {
  font-size: 16px;
  font-weight: 600;
}
.mx-drawer-title-icon {
  display: flex;
  align-items: center;
  font-size: var(--drawer-icon-size);
}
.mx-drawer-title-border {
  border-bottom: 1px solid var(--border-level-1-color);
}
.mx-drawer-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mx-drawer-content {
  flex: 1;
  padding: var(--drawer-content-padding);
  height: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: auto;
}
.mx-drawer-footer {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: var(--drawer-footer-padding);
  border-top: 1px solid var(--border-level-1-color);
}
.mx-drawer-footer-align-right {
  justify-content: right;
}
.mx-drawer-footer-align-center {
  justify-content: center;
}
.mx-drawer-footer-align-left {
  justify-content: left;
}
.mx-drawer-btn {
  margin-right: 8px;
}
body {
  --dropdown-bg-color: var(--bg-color-container);
  --dropdown-text-font-size: 14px;
  --dropdown-box-shadow: var(--shadow-2);
  --dropdown-border-radius: var(--border-radius-medium);
  --border-radius-medium: 6px;
  --dropdown-menu-padding: 6px 0;
  --dropdown-item-padding: 0 12px;
  --dropdown-item-divider-margin: 4px 0;
  --dropdown-item-divider-color: var(--border-level-1-color);
  --dropdown-direction-gap: 8px;
}
.mx-dropdown {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--dropdown-text-font-size);
  position: relative;
  box-shadow: var(--dropdown-box-shadow);
  border-radius: var(--dropdown-border-radius);
}
.mx-dropdown-menu {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  padding: var(--dropdown-menu-padding);
  overflow-y: auto;
  overflow-x: hidden;
}
.mx-dropdown-menu-right .mx-dropdown__item-direction {
  margin: 0 0 0 var(--dropdown-direction-gap);
}
.mx-dropdown-divider {
  margin: var(--dropdown-item-divider-margin);
  border-top: 1px solid var(--dropdown-item-divider-color);
}
.mx-dropdown-item {
  box-sizing: border-box;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  outline: none;
  display: flex;
  align-items: center;
  transition: background-color 0.1s var(--transition-timing-function-linear);
  white-space: nowrap;
  padding: var(--dropdown-item-padding);
}
.mx-dropdown-item:hover:not(.mx-dropdown-item-disabled) {
  background-color: var(--bg-color-container-hover);
}
.mx-dropdown-item-disabled {
  cursor: not-allowed;
  color: var(--text-color-disabled);
}
.mx-dropdown-item-content {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
}
.mx-dropdown-item-selected {
  color: var(--brand-color);
  background-color: var(--bg-color-container-hover);
}
.mx-dropdown-item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.mx-dropdown .mx-dropdown-icon-suffix {
  display: flex;
  align-items: center;
  /* stylelint-disable-next-line value-keyword-case */
  color: currentcolor;
  flex-shrink: 0;
  margin-left: 12px;
}
body {
  --empty-wrapper-color: var(--text-color-disabled);
  --empty-description-color: var(--text-color-disabled);
}
.mx-empty {
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
}
.mx-empty .mx-empty-wrapper {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  color: var(--empty-wrapper-color);
}
.mx-empty .mx-empty-wrapper .mx-empty-image {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 4px;
}
.mx-empty .mx-empty-wrapper img {
  height: 80px;
}
.mx-empty .mx-empty-description {
  color: var(--empty-description-color);
}
@keyframes mx-spin-anim {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.mx-icon {
  display: inline-block;
}
.mx-icon-spin {
  animation: mx-spin-anim 1s linear infinite;
}
@keyframes mx-route {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.mx-loading-container {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.mx-loading-container-1 {
  background-color: transparent;
  border-radius: 50%;
  border-style: solid;
  border-color: inherit;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: mx-route 1s ease-in-out infinite;
  box-sizing: border-box;
}
.mx-loading-container-2 {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.5;
  border-style: dotted;
  background-color: transparent;
  border-radius: 50%;
  border-color: inherit;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: mx-route 1s ease-in-out infinite;
  animation-delay: 0.2s;
  box-sizing: border-box;
}
.mx-message-wrapper {
  position: fixed;
  display: flex;
  width: 100%;
  padding: 0 20px;
  flex-direction: column;
  box-sizing: border-box;
  pointer-events: none;
  z-index: var(--z-index-message);
}
.mx-message-wrapper-top {
  top: 20px;
}
.mx-message-wrapper-top-left {
  top: 20px;
}
.mx-message-wrapper-top-right {
  top: 20px;
}
.mx-message-wrapper-bottom {
  bottom: 20px;
}
.mx-message-wrapper-bottom-left {
  bottom: 20px;
}
.mx-message-wrapper-bottom-right {
  bottom: 20px;
}
body {
  --modal-top: 120px;
  --modal-radius: 8px;
  --modal-title-padding: 16px 24px;
  --modal-content-padding: 24px 24px;
  --modal-footer-padding: 12px 24px;
  --modal-bg: var(--bg-color-container);
  --modal-border-color: var(--border-level-1-color);
  --modal-mask-bg: var(--mask-active);
  --modal-icon-size: 24px;
  --modal-icon-hover-bg: var(--bg-color-container-hover);
  --modal-icon-hover-size: 24px;
}
.mx-modal-container {
  position: fixed;
  cursor: auto;
  overflow: auto;
  text-align: center;
  left: 0;
  top: 0;
  width: 100%;
  bottom: 0;
  z-index: var(--z-index-modal);
}
.mx-modal-container-no-mask {
  pointer-events: none;
}
.mx-modal-container-no-mask .mx-modal {
  pointer-events: auto;
}
.mx-modal-mask {
  z-index: var(--z-index-modal);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  bottom: 0;
  background-color: var(--modal-mask-bg);
}
.mx-modal {
  box-sizing: content-box;
  display: inline-block;
  position: relative;
  text-align: left;
  min-width: 520px;
  width: 520px;
  top: var(--modal-top);
  border-radius: var(--modal-radius);
  background-color: var(--modal-bg);
  border: 1px solid var(--modal-border-color);
}
.mx-modal .mx-icon-hover {
  position: relative;
  display: inline-block;
  cursor: pointer;
  line-height: 0;
}
.mx-modal .mx-icon-hover .mx-icon {
  position: relative;
}
.mx-modal .mx-icon-hover::before {
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: transparent;
  box-sizing: border-box;
  transition: background-color 0.1s linear;
}
.mx-modal .mx-icon-hover:hover::before {
  background-color: var(--modal-icon-hover-bg);
}
.mx-modal .mx-icon-hover.mx-icon-hover-disabled::before {
  opacity: 0;
}
.mx-modal .mx-icon-hover::before {
  top: 50%;
  left: 50%;
  height: var(--modal-icon-hover-size);
  width: var(--modal-icon-hover-size);
  transform: translate(-50%, -50%);
}
.mx-modal-title-container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--modal-title-padding);
}
.mx-modal-title {
  display: flex;
  align-items: center;
}
.mx-modal-title-name {
  font-size: 16px;
  font-weight: 600;
}
.mx-modal-title-icon {
  margin-right: 12px;
  display: flex;
  align-items: center;
  font-size: var(--modal-icon-size);
}
.mx-modal-info-title-icon {
  color: var(--brand-color);
}
.mx-modal-warning-title-icon {
  color: var(--warning-color);
}
.mx-modal-error-title-icon {
  color: var(--error-color);
}
.mx-modal-success-title-icon {
  color: var(--success-color);
}
.mx-modal-title-border {
  border-bottom: 1px solid var(--border-level-1-color);
}
.mx-modal-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mx-modal-content {
  font-weight: 400;
  line-height: 22px;
  padding: var(--modal-content-padding);
}
.mx-modal-content-border {
  border-bottom: 1px solid var(--border-level-1-color);
}
.mx-modal-footer {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: var(--modal-footer-padding);
}
.mx-modal-footer-align-right {
  justify-content: right;
}
.mx-modal-footer-align-center {
  justify-content: center;
}
.mx-modal-footer-align-left {
  justify-content: left;
}
.mx-modal-btn {
  margin-right: 8px;
}
body {
  --notification-width: 340px;
  --notification-padding: 20px 20px 20px 20px;
  --notification-border-radius: var(--border-radius-medium);
  --notification-margin-bottom: 20px;
  --notification-color-bg: var(--bg-color-container);
  --notification-font-size-icon: 24px;
  --notification-font-size-title: 16px;
  --notification-color-text-title: var(--text-color-primary);
  --notification-color-text-content: var(--text-color-secondary);
  --notification-title-margin-bottom: 8px;
  --notification-font-size-content: 14px;
  --notification-box-shadow: var(--shadow-2), var(--shadow-inset-top), var(--shadow-inset-right), var(--shadow-inset-bottom), var(--shadow-inset-left);
}
.mx-notification-wrapper {
  position: fixed;
  display: flex;
  width: 100%;
  padding: 0 20px;
  flex-direction: column;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1003;
}
.mx-notification-wrapper-top {
  top: 20px;
}
.mx-notification-wrapper-top-left {
  top: 20px;
}
.mx-notification-wrapper-top-right {
  top: 20px;
}
.mx-notification-wrapper-bottom {
  bottom: 20px;
}
.mx-notification-wrapper-bottom-left {
  bottom: 20px;
}
.mx-notification-wrapper-bottom-right {
  bottom: 20px;
}
.mx-notification {
  display: flex;
  position: relative;
  width: var(--notification-width);
  padding: var(--notification-padding);
  border-radius: var(--notification-border-radius);
  margin-bottom: var(--notification-margin-bottom);
  background-color: var(--notification-color-bg);
  box-shadow: var(--notification-box-shadow);
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: auto;
}
.mx-notification-icon {
  font-size: var(--notification-font-size-icon);
  display: inline-flex;
  align-items: center;
  color: var(--brand-color);
}
.mx-notification-info .mx-notification-icon {
  color: var(--brand-color);
}
.mx-notification-success .mx-notification-icon {
  color: var(--success-color);
}
.mx-notification-warning .mx-notification-icon {
  color: var(--warning-color);
}
.mx-notification-error .mx-notification-icon {
  color: var(--error-color);
}
.mx-notification-left {
  padding-right: 16px;
}
.mx-notification-right {
  flex: 1;
  word-break: break-word;
}
.mx-notification-title {
  font-size: var(--notification-font-size-title);
  font-weight: 500;
  color: var(--notification-color-text-title);
  margin-bottom: var(--notification-title-margin-bottom);
}
.mx-notification-content {
  font-size: var(--notification-font-size-content);
  color: var(--notification-color-text-content);
}
.mx-notification-btn-wrapper {
  margin-top: 16px;
  text-align: right;
}
.mx-notification .mx-notification-close-btn {
  position: absolute;
  cursor: pointer;
  top: 20px;
  right: 16px;
  color: 16px;
  font-size: 12px;
}
.mx-notification .mx-notification-close-btn > svg {
  position: relative;
}
.content-placement-top .mx-popup[data-popper-placement^='top'] .mx-popup__content {
  margin-bottom: var(--popup-content-margin);
}
.content-placement-top .mx-popup[data-popper-placement^='top'] .mx-popup__content--arrow {
  margin-bottom: var(--popup-content-arrow-margin);
}
.content-placement-bottom .mx-popup[data-popper-placement^='bottom'] .mx-popup__content {
  margin-top: var(--popup-content-margin);
}
.content-placement-bottom .mx-popup[data-popper-placement^='bottom'] .mx-popup__content--arrow {
  margin-top: var(--popup-content-arrow-margin);
}
.content-placement-left .mx-popup[data-popper-placement^='left'] .mx-popup__content {
  margin-right: var(--popup-content-margin);
}
.content-placement-left .mx-popup[data-popper-placement^='left'] .mx-popup__content--arrow {
  margin-right: var(--popup-content-arrow-margin);
}
.content-placement-left .mx-popup[data-popper-placement^='left'] .mx-popup__content--text {
  max-width: 480px;
}
.content-placement-right .mx-popup[data-popper-placement^='right'] .mx-popup__content {
  margin-left: var(--popup-content-margin);
}
.content-placement-right .mx-popup[data-popper-placement^='right'] .mx-popup__content--arrow {
  margin-left: var(--popup-content-arrow-margin);
}
.content-placement-right .mx-popup[data-popper-placement^='right'] .mx-popup__content--text {
  max-width: 480px;
}
body {
  --popup-wrapper-color: var(--bg-color-container);
  --popup-border-radius: var(--border-radius-medium);
  --popup-padding: 4px 8px;
  --popup-arrow-bg: var(--bg-color-container);
  --popup-arrow-width: 8px;
  --popup-content-margin: 8px;
  --popup-content-arrow-margin: 12px;
  --popup-top-arrow-shadow: var(--shadow-inset-left), var(--shadow-inset-bottom);
  --popup-left-arrow-shadow: var(--shadow-inset-left), var(--shadow-inset-top);
  --popup-bottom-arrow-shadow: var(--shadow-inset-top), var(--shadow-inset-right);
  --popup-right-arrow-shadow: var(--shadow-inset-right), var(--shadow-inset-bottom);
  --popup-z-index: var(--z-index-popup);
}
.mx-popup {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: var(--text-color-primary);
  display: inline-block;
  z-index: var(--popup-z-index);
}
.mx-popup__content {
  position: relative;
  background: var(--popup-wrapper-color);
  border: 1px solid var(--border-level-1-color);
  border-radius: var(--popup-border-radius);
  padding: var(--popup-padding);
  font-size: 14px;
  line-height: 22px;
  box-sizing: border-box;
  word-break: break-all;
}
.mx-popup__arrow {
  position: absolute;
  z-index: 1;
  background-color: inherit;
}
.mx-popup__arrow::before {
  position: absolute;
  content: '';
  width: var(--popup-arrow-width);
  height: var(--popup-arrow-width);
  transform: rotate(45deg);
  background-color: inherit;
}
.mx-popup[data-popper-placement^='top'] .mx-popup__content {
  margin-bottom: var(--popup-content-margin);
}
.mx-popup[data-popper-placement^='top'] .mx-popup__content--arrow {
  margin-bottom: var(--popup-content-arrow-margin);
}
.mx-popup[data-popper-placement^='bottom'] .mx-popup__content {
  margin-top: var(--popup-content-margin);
}
.mx-popup[data-popper-placement^='bottom'] .mx-popup__content--arrow {
  margin-top: var(--popup-content-arrow-margin);
}
.mx-popup[data-popper-placement^='left'] .mx-popup__content {
  margin-right: var(--popup-content-margin);
}
.mx-popup[data-popper-placement^='left'] .mx-popup__content--arrow {
  margin-right: var(--popup-content-arrow-margin);
}
.mx-popup[data-popper-placement^='left'] .mx-popup__content--text {
  max-width: 480px;
}
.mx-popup[data-popper-placement^='right'] .mx-popup__content {
  margin-left: var(--popup-content-margin);
}
.mx-popup[data-popper-placement^='right'] .mx-popup__content--arrow {
  margin-left: var(--popup-content-arrow-margin);
}
.mx-popup[data-popper-placement^='right'] .mx-popup__content--text {
  max-width: 480px;
}
.mx-popup[data-popper-placement^='top'] .mx-popup__arrow::before {
  border-top-left-radius: 100%;
  border-bottom: 1px solid var(--border-level-1-color);
  border-right: 1px solid var(--border-level-1-color);
}
.mx-popup[data-popper-placement='top-start'] .mx-popup__arrow {
  left: var(--popup-arrow-width);
}
.mx-popup[data-popper-placement='top'] .mx-popup__arrow {
  left: 50%;
  margin-left: calc(-1 * var(--popup-arrow-width) / 2);
}
.mx-popup[data-popper-placement='top-end'] .mx-popup__arrow {
  left: calc(100% - var(--popup-arrow-width) * 2);
}
.mx-popup[data-popper-placement^='bottom'] .mx-popup__arrow {
  top: calc((-1 * var(--popup-arrow-width) / 2) - 1px);
}
.mx-popup[data-popper-placement^='bottom'] .mx-popup__arrow::before {
  border-bottom-right-radius: 100%;
  border-top: 1px solid var(--border-level-1-color);
  border-left: 1px solid var(--border-level-1-color);
}
.mx-popup[data-popper-placement='bottom-start'] .mx-popup__arrow {
  left: var(--popup-arrow-width);
}
.mx-popup[data-popper-placement='bottom'] .mx-popup__arrow {
  left: 50%;
  margin-left: calc(-1 * var(--popup-arrow-width) / 2);
}
.mx-popup[data-popper-placement='bottom-end'] .mx-popup__arrow {
  left: calc(100% - var(--popup-arrow-width) * 2);
}
.mx-popup[data-popper-placement^='left'] .mx-popup__arrow {
  right: calc(1 * var(--popup-arrow-width) / 2);
}
.mx-popup[data-popper-placement^='left'] .mx-popup__arrow::before {
  border-top: 1px solid var(--border-level-1-color);
  border-right: 1px solid var(--border-level-1-color);
}
.mx-popup[data-popper-placement='left-start'] .mx-popup__arrow {
  top: var(--popup-arrow-width);
}
.mx-popup[data-popper-placement='left'] .mx-popup__arrow {
  top: 50%;
  margin-top: calc(-1 * var(--popup-arrow-width) / 2);
}
.mx-popup[data-popper-placement='left-end'] .mx-popup__arrow {
  top: calc(100% - var(--popup-arrow-width) * 2);
}
.mx-popup[data-popper-placement^='right'] .mx-popup__arrow {
  left: calc((-1 * var(--popup-arrow-width) / 2) - 1px);
}
.mx-popup[data-popper-placement^='right'] .mx-popup__arrow::before {
  border-bottom: 1px solid var(--border-level-1-color);
  border-left: 1px solid var(--border-level-1-color);
}
.mx-popup[data-popper-placement='right-start'] .mx-popup__arrow {
  top: var(--popup-arrow-width);
}
.mx-popup[data-popper-placement='right'] .mx-popup__arrow {
  top: 50%;
  margin-top: calc(-1 * var(--popup-arrow-width) / 2);
}
.mx-popup[data-popper-placement='right-end'] .mx-popup__arrow {
  top: calc(100% - var(--popup-arrow-width) * 2);
}
body {
  --radio-margin-text-left: 8px;
  --radio-scale: scale(0.6);
  --radio-border-width: 2px;
  --radio-color-border: var(--border-level-2-color);
  --radio-layout-height: 18px;
  --radio-color-bg: #fff;
  --radio-color-bg_checked: var(--brand-color);
  --radio-border-color_disabled_checked: var(--brand-color-disabled);
  --radio-color-text_disabled: var(--text-color-disabled);
  --radio-color-border_disabled: var(--border-level-2-color);
  --radio-color-bg_disabled: var(--brand-color-disabled);
  --radio-border-color-bg_disabled_checked: var(--brand-color-disabled);
  --radio-color-dot-bg_checked_disabled: var(--brand-color-disabled);
  --radio-group-margin-right: 24px;
  --radio-button-color-text: var(--text-color-secondary);
  --radio-button-color-hover-text: var(--text-color-primary);
  --radio-button-spacing_padding: 2px;
  --radio-button-height: 32px;
  --radio-group-button-color-bg: var(--bg-color-component);
  --radio-button-padding-horizontal: 0 16px;
  --radio-button-border-radius: 4px;
  --radio-button-color-bg_disabled: transparent;
  --radio-button-color-text_disabled: var(--text-color-disabled);
  --radio-button-color-bg_checked_disabled: #fff;
  --radio-button-color-text-color_checked_disabled: var(--brand-color-disabled);
}
.mx-radio > input[type='radio'],
.mx-radio-button > input[type='radio'] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.mx-radio {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: unset;
}
.mx-radio-text {
  margin-left: var(--radio-margin-text-left);
}
.mx-radio:hover .mx-radio-mask {
  border-color: var(--radio-color-bg_checked);
}
.mx-radio-mask {
  border: var(--radio-border-width) solid var(--radio-color-border);
  box-sizing: border-box;
  height: var(--radio-layout-height);
  width: var(--radio-layout-height);
  border-radius: 50%;
  position: relative;
  transition: border 0.1s linear;
}
.mx-radio-mask::after {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  content: '';
  border-radius: 50%;
  width: calc(var(--radio-layout-height) - var(--radio-border-width) * 2);
  height: calc(var(--radio-layout-height) - var(--radio-border-width) * 2);
  top: 0;
  left: 0;
  transform: scale(1);
  transition: transform 0.1s linear;
}
.mx-radio-checked .mx-radio-mask {
  background-color: var(--radio-color-bg_checked);
  border-color: var(--radio-color-bg_checked);
}
.mx-radio-checked .mx-radio-mask::after {
  transform: var(--radio-scale);
  background-color: var(--radio-color-bg);
}
.mx-radio-checked:hover .mx-radio-mask {
  border-color: var(--radio-color-bg_checked);
}
.mx-radio-disabled {
  cursor: not-allowed;
}
.mx-radio-disabled .mx-radio-text {
  color: var(--radio-color-text_disabled);
}
.mx-radio-disabled .mx-radio-mask {
  border-color: var(--radio-color-border_disabled);
}
.mx-radio-disabled:hover .mx-radio-mask {
  border-color: var(--radio-color-border_disabled);
}
.mx-radio-checked.mx-radio-disabled .mx-radio-mask,
.mx-radio-checked.mx-radio-disabled:hover .mx-radio-mask {
  border-color: var(--radio-border-color_disabled_checked);
  background-color: var(--radio-border-color-bg_disabled_checked);
}
.mx-radio-checked.mx-radio-disabled .mx-radio-mask::after {
  transform: var(--radio-scale);
}
.mx-radio-group {
  display: inline-flex;
}
.mx-radio-group .mx-radio {
  margin-right: var(--radio-group-margin-right);
}
.mx-radio-group-type-button {
  position: relative;
  z-index: 0;
  padding: var(--radio-button-spacing_padding);
  background-color: var(--radio-group-button-color-bg);
  display: inline-flex;
  height: var(--radio-button-height);
  border-radius: var(--radio-button-border-radius);
  align-items: center;
  box-sizing: border-box;
}
.mx-radio-button {
  display: inline-flex;
  position: relative;
  font-size: var(--radio-font-text-size);
  color: var(--radio-button-color-text);
  height: 100%;
  align-items: center;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radio-button-border-radius);
  transition: all 0.1s linear;
}
.mx-radio-button-inner {
  padding: var(--radio-button-padding-horizontal);
}
.mx-radio-button:hover {
  color: var(--radio-button-color-hover-text);
}
.mx-radio-button.mx-radio-checked {
  background-color: var(--bg-color-container-select);
  color: var(--radio-button-color-hover-text);
  transition: all 0.1s linear;
}
.mx-radio-button.mx-radio-disabled {
  cursor: not-allowed;
  background-color: var(--radio-button-color-bg_disabled);
  color: var(--radio-button-color-text_disabled);
}
.mx-radio-button.mx-radio-disabled.mx-radio-checked {
  background-color: var(--radio-button-color-bg_checked_disabled);
  color: var(--radio-button-color-text-color_checked_disabled);
}
.mx-radio-group-direction-vertical {
  display: flex;
  flex-direction: column;
}
.mx-radio-group-direction-vertical .mx-radio {
  margin-bottom: 20px;
}
.mx-space {
  display: flex;
}
.mx-space-vertical {
  flex-direction: column;
}
.mx-space-align-baseline {
  align-items: baseline;
}
.mx-space-align-start {
  align-items: flex-start;
}
.mx-space-align-end {
  align-items: flex-end;
}
.mx-space-align-center {
  align-items: center;
}
body {
  --spin-icon-color: var(--brand-color);
}
.mx-spin {
  display: inline-block;
}
.mx-spin-block {
  display: block;
}
.mx-spin-with-tip {
  text-align: center;
}
.mx-spin-icon {
  color: var(--spin-icon-color);
  font-size: 20px;
}
.mx-spin-tip {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--spin-icon-color);
}
.mx-spin-loading-layer {
  text-align: center;
  -webkit-user-select: none;
          user-select: none;
}
.mx-spin-children {
  position: relative;
}
.mx-spin-children::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--mask-layer-bg);
  opacity: 0;
  transition: opacity 0.1s cubic-bezier(0, 0, 1, 1);
  pointer-events: none;
  z-index: 1;
}
.mx-spin-loading {
  position: relative;
  -webkit-user-select: none;
          user-select: none;
}
.mx-spin-loading .mx-spin-loading-layer-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.mx-spin-loading .mx-spin-children::after {
  opacity: 1;
  pointer-events: auto;
}
body {
  --tooltip-max-width: 480px;
  --tooltip-border-radius: 6px;
  --tooltip-bg-color: var(--gray-color-11);
  --tooltip-color: var(--text-color-anti);
  --tooltip-z-index: var(--z-index-tooltip);
}
.mx-tooltip .mx-popup__content {
  display: inline-block;
  border: 0;
  z-index: var(--tooltip-z-index);
  margin-bottom: 1px;
  max-width: var(--tooltip-max-width);
  word-break: break-word;
  box-sizing: border-box;
  border-radius: var(--tooltip-border-radius);
  background-color: var(--tooltip-bg-color);
  color: var(--tooltip-color);
}
.mx-tooltip[data-popper-placement] .mx-popup__arrow::before {
  border: none;
}
body {
  --tag-padding: 0 8px;
  --tag-border-radius: var(--border-radius-medium);
  --tag-text-color: var(--text-color-anti);
  --tag-border-width: 1px;
  --tag-border-color: transparent;
  --tag-font-size: 12px;
  --tag-line-height: 22px;
  --tag-icon-margin-right: 4px;
  --tag-icon-size: 14px;
  --tag-icon-close-size: 10px;
  --tag-close-icon-margin-left: 6px;
}
.mx-tag {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  padding: var(--tag-padding);
  color: var(--tag-text-color);
  border-radius: var(--tag-border-radius);
  border: var(--tag-border-width) solid var(--tag-border-color);
  font-size: var(--tag-font-size);
  line-height: var(--tag-line-height);
  white-space: nowrap;
}
.mx-tag .mx-icon {
  margin-right: var(--tag-icon-margin-right);
  width: var(--tag-icon-size);
  height: var(--tag-icon-size);
  flex-shrink: 0;
}
.mx-tag .mx-tag__icon-close {
  margin-right: 0;
  margin-left: var(--tag-close-icon-margin-left);
  width: var(--tag-icon-close-size);
  height: var(--tag-icon-close-size);
  cursor: pointer;
}
.mx-tag--default.mx-tag--fill {
  color: var(--text-color-primary);
  background-color: var(--bg-color-component);
}
.mx-tag--default .mx-tag__icon-close {
  color: var(--text-color-placeholder);
}
.mx-tag--default .mx-tag__icon-close:hover {
  color: var(--text-color-primary);
}
.mx-tag--default.mx-tag--outline {
  color: var(--text-color-primary);
  border-color: var(--text-color-primary);
}
.mx-tag--default.mx-tag--light {
  color: var(--text-color-primary);
  background-color: var(--bg-color-container-hover);
}
.mx-tag--default.mx-tag--light-outline {
  color: var(--text-color-primary);
  border-color: var(--text-color-primary);
  background-color: var(--bg-color-container-hover);
}
.mx-tag--brand.mx-tag--fill {
  color: var(--brand-color-1);
  background-color: var(--brand-color);
}
.mx-tag--brand.mx-tag--outline {
  color: var(--brand-color);
  border-color: var(--brand-color);
}
.mx-tag--brand.mx-tag--light {
  color: var(--brand-color);
  background-color: var(--brand-color-1);
}
.mx-tag--brand.mx-tag--light-outline {
  color: var(--brand-color);
  border-color: var(--brand-color);
  background-color: var(--brand-color-1);
}
.mx-tag--brand.mx-tag--light .mx-tag__icon-close,
.mx-tag--brand.mx-tag--outline .mx-tag__icon-close,
.mx-tag--brand.mx-tag--light-outline .mx-tag__icon-close {
  color: var(--brand-color-4);
}
.mx-tag--brand.mx-tag--light .mx-tag__icon-close:hover,
.mx-tag--brand.mx-tag--outline .mx-tag__icon-close:hover,
.mx-tag--brand.mx-tag--light-outline .mx-tag__icon-close:hover {
  color: var(--brand-color-5);
}
.mx-tag--brand.mx-tag--fill .mx-tag__icon-close {
  color: var(--brand-color-3);
}
.mx-tag--brand.mx-tag--fill .mx-tag__icon-close:hover {
  color: var(--brand-color-2);
}
.mx-tag--success.mx-tag--fill {
  color: var(--success-color-1);
  background-color: var(--success-color);
}
.mx-tag--success.mx-tag--outline {
  color: var(--success-color);
  border-color: var(--success-color);
}
.mx-tag--success.mx-tag--light {
  color: var(--success-color);
  background-color: var(--success-color-1);
}
.mx-tag--success.mx-tag--light-outline {
  color: var(--success-color);
  border-color: var(--success-color);
  background-color: var(--success-color-1);
}
.mx-tag--success.mx-tag--light .mx-tag__icon-close,
.mx-tag--success.mx-tag--fill .mx-tag__icon-close {
  color: var(--success-color-3);
}
.mx-tag--success.mx-tag--light .mx-tag__icon-close:hover,
.mx-tag--success.mx-tag--fill .mx-tag__icon-close:hover {
  color: var(--success-color-2);
}
.mx-tag--warning.mx-tag--fill {
  color: var(--warning-color-1);
  background-color: var(--warning-color);
}
.mx-tag--warning.mx-tag--outline {
  color: var(--warning-color);
  border-color: var(--warning-color);
}
.mx-tag--warning.mx-tag--light {
  color: var(--warning-color);
  background-color: var(--warning-color-1);
}
.mx-tag--warning.mx-tag--light-outline {
  color: var(--warning-color);
  border-color: var(--warning-color);
  background-color: var(--warning-color-1);
}
.mx-tag--warning.mx-tag--light .mx-tag__icon-close,
.mx-tag--warning.mx-tag--fill .mx-tag__icon-close,
.mx-tag--warning.mx-tag--light-outline .mx-tag__icon-close {
  color: var(--warning-color-3);
}
.mx-tag--warning.mx-tag--light .mx-tag__icon-close:hover,
.mx-tag--warning.mx-tag--fill .mx-tag__icon-close:hover,
.mx-tag--warning.mx-tag--light-outline .mx-tag__icon-close:hover {
  color: var(--warning-color-2);
}
.mx-tag--error.mx-tag--fill {
  color: var(--error-color-1);
  background-color: var(--error-color);
}
.mx-tag--error.mx-tag--outline {
  color: var(--error-color);
  border-color: var(--error-color);
}
.mx-tag--error.mx-tag--light {
  color: var(--error-color);
  background-color: var(--error-color-1);
}
.mx-tag--error.mx-tag--light-outline {
  color: var(--error-color);
  border-color: var(--error-color);
  background-color: var(--error-color-1);
}
.mx-tag--error.mx-tag--light .mx-tag__icon-close,
.mx-tag--error.mx-tag--fill .mx-tag__icon-close,
.mx-tag--error.mx-tag--light-outline .mx-tag__icon-close {
  color: var(--error-color-3);
}
.mx-tag--error.mx-tag--light .mx-tag__icon-close:hover,
.mx-tag--error.mx-tag--fill .mx-tag__icon-close:hover,
.mx-tag--error.mx-tag--light-outline .mx-tag__icon-close:hover {
  color: var(--error-color-2);
}
.mx-tag.mx-tag--outline {
  background: transparent;
}
.mx-tag.mx-tag--ellipsis .mx-tag--text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body {
  --input-padding: 6px 12px;
  --input-line-height: 1;
  --input-color-text: var(--text-color-primary);
  --input-font-size: 14px;
  --input-color-text-placeholder: var(--text-color-placeholder);
  --input-bg-color: transparent;
  --input-border-color: var(--border-level-2-color);
  --input-disabled-bg-color: var(--bg-color-component-disabled);
  --input-disabled-text-color: var(--text-color-disabled);
  --input-disabled-border-color: var(--border-level-2-color);
  --input-font-tip-size: 12px;
  --input-padding-word-limit-left: 8px;
  --input-size-icon-clear: 12px;
  --input-color-icon-clear: var(--text-color-secondary);
  --input-padding-horizontal: 12px;
  --input-size-default-icon-suffix-size: 14px;
  --input-color-prefix-text: var(--text-color-placeholder);
  --input-color-suffix-text: var(--text-color-placeholder);
  --input-border-radius: var(--border-radius-medium);
  --input-color-addon-bg: var(--bg-color-secondary-container);
  --input-color-addon-border_default: transparent;
  --input-size-default-icon-addon-size: 14px;
  --input-color-addon-border: var(--border-level-2-color);
  --input-wrapper-padding: 12px;
  --input-icon-hover-bg: var(--bg-color-container-hover);
  --input-icon-hover-size: 18px;
  --input-error-color: var(--error-color);
  --input-warning-color: var(--warning-color);
}
.mx-input {
  padding: var(--input-padding);
  line-height: var(--input-line-height);
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  color: var(--input-color-text);
  padding-left: var(--input-wrapper-padding);
  padding-right: var(--input-wrapper-padding);
  font-size: var(--input-font-size);
  box-sizing: border-box;
  transition: color 0.1s linear, border-color 0.1s linear, background-color 0.1s linear;
  background-color: var(--input-bg-color);
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
}
.mx-input::placeholder {
  color: var(--input-color-text-placeholder);
}
.mx-input.mx-input-focus {
  border-color: var(--brand-color);
}
.mx-input:hover {
  border-color: var(--brand-color);
}
.mx-input-error {
  border-color: var(--input-error-color);
}
.mx-input-error:hover {
  border-color: var(--input-error-color);
}
.mx-input-error.mx-input-focus,
.mx-input-error.mx-input-focus:hover {
  border-color: var(--input-error-color);
}
.mx-input-warning {
  border-color: var(--input-warning-color);
}
.mx-input-warning:hover {
  border-color: var(--input-warning-color);
}
.mx-input-warning.mx-input-focus,
.mx-input-warning.mx-input-focus:hover {
  border-color: var(--input-warning-color);
}
.mx-input-disabled {
  background-color: var(--input-disabled-bg-color);
  cursor: not-allowed;
  color: var(--input-disabled-text-color);
  -webkit-text-fill-color: var(--input-disabled-text-color);
  border-color: var(--input-disabled-border-color);
}
.mx-input-disabled:hover {
  border-color: var(--input-disabled-border-color);
  background-color: var(--input-disabled-bg-color);
  color: var(--input-disabled-text-color);
}
.mx-input-disabled::placeholder {
  color: var(--input-disabled-text-color);
}
.mx-input input:disabled {
  color: var(--input-disabled-text-color);
}
.mx-input-word-limit {
  font-size: var(--input-font-tip-size);
  padding-left: var(--input-padding-word-limit-left);
}
.mx-input-word-limit-error {
  color: var(--error-color);
}
.mx-input-clear-icon {
  font-size: var(--input-size-icon-clear);
  cursor: pointer;
  color: var(--input-color-icon-clear);
}
.mx-input-clear-icon > svg {
  transition: color 0.1s linear;
  position: relative;
}
.mx-input-inner-wrapper {
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: var(--input-color-text);
  padding-left: var(--input-wrapper-padding);
  padding-right: var(--input-wrapper-padding);
  font-size: var(--input-font-size);
  box-sizing: border-box;
  transition: color 0.1s linear, border-color 0.1s linear, background-color 0.1s linear;
  background-color: var(--input-bg-color);
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  display: inline-flex;
  width: 100%;
  position: relative;
  align-items: center;
}
.mx-input-inner-wrapper::placeholder {
  color: var(--input-color-text-placeholder);
}
.mx-input-inner-wrapper.mx-input-inner-wrapper-focus {
  border-color: var(--brand-color);
}
.mx-input-inner-wrapper:hover {
  border-color: var(--brand-color);
}
.mx-input-inner-wrapper-error {
  border-color: var(--input-error-color);
}
.mx-input-inner-wrapper-error:hover {
  border-color: var(--input-error-color);
}
.mx-input-inner-wrapper-error.mx-input-inner-wrapper-focus,
.mx-input-inner-wrapper-error.mx-input-inner-wrapper-focus:hover {
  border-color: var(--input-error-color);
}
.mx-input-inner-wrapper-warning {
  border-color: var(--input-warning-color);
}
.mx-input-inner-wrapper-warning:hover {
  border-color: var(--input-warning-color);
}
.mx-input-inner-wrapper-warning.mx-input-inner-wrapper-focus,
.mx-input-inner-wrapper-warning.mx-input-inner-wrapper-focus:hover {
  border-color: var(--input-warning-color);
}
.mx-input-inner-wrapper .mx-icon-hover {
  position: relative;
  display: inline-block;
  cursor: pointer;
  line-height: 0;
}
.mx-input-inner-wrapper .mx-icon-hover .mx-icon {
  position: relative;
}
.mx-input-inner-wrapper .mx-icon-hover::before {
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: transparent;
  box-sizing: border-box;
  transition: background-color 0.1s linear;
}
.mx-input-inner-wrapper .mx-icon-hover:hover::before {
  background-color: var(--input-icon-hover-bg);
}
.mx-input-inner-wrapper .mx-icon-hover.mx-icon-hover-disabled::before {
  opacity: 0;
}
.mx-input-inner-wrapper .mx-icon-hover::before {
  top: 50%;
  left: 50%;
  height: var(--input-icon-hover-size);
  width: var(--input-icon-hover-size);
  transform: translate(-50%, -50%);
}
.mx-input-inner-wrapper .mx-input {
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
  border: none;
  background: none;
}
.mx-input-inner-wrapper .mx-input:hover,
.mx-input-inner-wrapper .mx-input:focus {
  background: none;
  box-shadow: none;
}
.mx-input-inner-wrapper-has-prefix > .mx-input-clear-wrapper .mx-input,
.mx-input-inner-wrapper-has-prefix > .mx-input {
  padding-left: var(--input-padding-horizontal);
}
.mx-input-inner-wrapper .mx-input-group-prefix,
.mx-input-inner-wrapper .mx-input-group-suffix {
  -webkit-user-select: none;
          user-select: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.mx-input-inner-wrapper .mx-input-group-prefix > svg,
.mx-input-inner-wrapper .mx-input-group-suffix > svg {
  font-size: var(--input-size-default-icon-suffix-size);
}
.mx-input-inner-wrapper .mx-input-group-prefix {
  color: var(--input-color-prefix-text);
}
.mx-input-inner-wrapper .mx-input-group-suffix {
  color: var(--input-color-suffix-text);
}
.mx-input-inner-wrapper-disabled {
  background-color: var(--input-disabled-bg-color);
  cursor: not-allowed;
  color: var(--input-disabled-text-color);
  -webkit-text-fill-color: var(--input-disabled-text-color);
  border-color: var(--input-disabled-border-color);
}
.mx-input-inner-wrapper-disabled:hover {
  border-color: var(--input-disabled-border-color);
  background-color: var(--input-disabled-bg-color);
  color: var(--input-disabled-text-color);
}
.mx-input-inner-wrapper-disabled::placeholder {
  color: var(--input-disabled-text-color);
}
.mx-input-inner-wrapper-disabled .mx-input-group-prefix,
.mx-input-inner-wrapper-disabled .mx-input-group-suffix {
  color: inherit;
}
.mx-input-inner-wrapper .mx-input-clear-icon {
  visibility: hidden;
}
.mx-input-inner-wrapper:hover .mx-input-clear-icon {
  visibility: visible;
}
.mx-input-inner-wrapper:hover .mx-input-clear-icon ~ .mx-input-group-suffix {
  margin-left: 4px;
}
.mx-input-group {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}
.mx-input-group > .mx-input-inner-wrapper,
.mx-input-group > .mx-input {
  border-radius: 0;
}
.mx-input-group > :first-child {
  border-top-left-radius: var(--input-border-radius);
  border-bottom-left-radius: var(--input-border-radius);
}
.mx-input-group > :last-child {
  border-top-right-radius: var(--input-border-radius);
  border-bottom-right-radius: var(--input-border-radius);
}
.mx-input-group-addbefore,
.mx-input-group-addafter {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  padding: 0 var(--input-padding-horizontal);
  background-color: var(--input-color-addon-bg);
  border: 1px solid var(--input-color-addon-border_default);
}
.mx-input-group-addbefore > svg,
.mx-input-group-addafter > svg {
  font-size: var(--input-size-default-icon-addon-size);
}
.mx-input-group-addafter {
  border: 1px solid var(--input-color-addon-border);
  border-left: none;
  background-color: var(--input-color-addon-bg);
}
.mx-input-group-addbefore {
  border: 1px solid var(--input-color-addon-border);
  border-right: none;
}
.mx-input-group-wrapper {
  width: 100%;
  display: inline-block;
  vertical-align: top;
}
.mx-input-group-wrapper .mx-input-inner-wrapper {
  height: 100%;
}
.mx-input-group-wrapper.mx-input-disabled {
  cursor: not-allowed;
}
.mx-input-password.mx-input-group-wrapper:not(.mx-input-group-wrapper-disabled) .mx-input-group-suffix {
  cursor: pointer;
}
.mx-input-password-icon-wrapper {
  display: flex;
  align-items: center;
}
body {
  --input-search-btn-color: var(--text-color-anti);
  --input-search-disabled-text-color: var(--text-color-disabled);
}
.mx-input-search.mx-input-group-wrapper .mx-input-group-addbefore {
  transition: all 0.1s linear;
}
.mx-input-search.mx-input-group-wrapper .mx-input-group-addafter {
  padding: 0;
  border: none;
}
.mx-input-search.mx-input-group-wrapper:not(.mx-input-disabled) .mx-input-group-addbefore {
  cursor: pointer;
  color: var(--input-search-disabled-text-color);
}
.mx-input-search.mx-input-group-wrapper .mx-input-search-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: var(--input-search-btn-color);
}
.mx-input-search-button .mx-input-inner-wrapper {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
body {
  --table-size-padding-horizontal: 10px;
  --table-size-padding-vertical: 16px;
  --table-size-font-size: 14px;
  --table-size-font-header-size: 14px;
  --table-border-radius: var(--border-radius-medium);
  --table-color-text-header-cell: var(--text-color-secondary);
  --table-color-bg-header-cell: var(--bg-color-secondary-container);
  --table-color-bg-body-cell: var(--bg-color-container);
  --table-color-border: var(--border-level-1-color);
  --table-line-height-base: 1.57;
  --table-font-weight-header-text: 500;
  --table-color-bg-body-stripe-row: var(--bg-color-secondary-container);
  --table-color-bg-body-row_hover: var(--bg-color-secondary-container);
  --table-shadow-left: inset 6px 0 8px -3px rgba(0, 0, 0, 0.15);
  --table-shadow-right: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15);
  --table-border-width: -1px;
  --table-size-shadow-wrapper-width: 10px;
  --filter-active-color: var(--brand-color);
  --sorter-active-color: var(--brand-color);
  --sorter-color: var(--gray-color-5);
  --filter-color: var(--gray-color-5);
  --table-pagination-margin-top: 12px;
  --table-size-expand-button: 14px;
  --table-border-radius-expand-button: 2px;
  --table-font-size-expand-button: 12px;
  --table-color-expand-icon_hover: var(--brand-color);
  --table-bg-expand-button: var(--bg-color-secondary-container);
}
.mx-table-th-item {
  padding: var(--table-size-padding-horizontal) var(--table-size-padding-vertical);
}
.mx-table-cell {
  display: flex;
  align-items: center;
}
.mx-table-td {
  padding: var(--table-size-padding-horizontal) var(--table-size-padding-vertical);
  font-size: var(--table-size-font-size);
}
.mx-table-th {
  font-size: var(--table-size-font-header-size);
}
.mx-table-footer {
  padding: var(--table-size-padding-horizontal) var(--table-size-padding-vertical);
}
.mx-table-expand-fixed-row {
  margin: calc(-1 * var(--table-size-padding-horizontal)) calc(-1 * var(--table-size-padding-vertical));
  padding: var(--table-size-padding-horizontal) var(--table-size-padding-vertical);
}
.mx-table {
  position: relative;
  /* ---- Table sorter, filter, checkbox, radio (End) ---- */
}
.mx-table-scroll-position-right .mx-table-col-fixed-left-last::after,
.mx-table-scroll-position-middle .mx-table-col-fixed-left-last::after {
  box-shadow: var(--table-shadow-left);
}
.mx-table-scroll-position-left .mx-table-col-fixed-right-first::after,
.mx-table-scroll-position-middle .mx-table-col-fixed-right-first::after {
  box-shadow: var(--table-shadow-right);
}
.mx-table:not(.mx-table-has-fixed-col-left).mx-table-scroll-position-right .mx-table-content-scroll::before,
.mx-table:not(.mx-table-has-fixed-col-left).mx-table-scroll-position-middle .mx-table-content-scroll::before {
  box-shadow: var(--table-shadow-left);
}
.mx-table:not(.mx-table-has-fixed-col-right).mx-table-scroll-position-left .mx-table-content-scroll::after,
.mx-table:not(.mx-table-has-fixed-col-right).mx-table-scroll-position-middle .mx-table-content-scroll::after {
  box-shadow: var(--table-shadow-right);
}
.mx-table-layout-fixed .mx-table-content-inner {
  overflow-x: auto;
  overflow-y: hidden;
}
thead > .mx-table-tr > .mx-table-th {
  border-bottom: 1px solid var(--table-color-border);
}
.mx-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  word-break: break-all;
  border-radius: var(--table-border-radius) var(--table-border-radius) 0 0;
}
.mx-table table thead tr:first-child th:first-child {
  border-radius: var(--table-border-radius) 0 0 0;
}
.mx-table table thead tr:first-child th:last-child {
  border-radius: 0 var(--table-border-radius) 0 0;
}
.mx-table-th {
  box-sizing: border-box;
  text-align: left;
  color: var(--table-color-text-header-cell);
  background-color: var(--table-color-bg-header-cell);
  line-height: var(--table-line-height-base);
  font-weight: var(--table-font-weight-header-text);
}
.mx-table-th[colspan] {
  text-align: center;
}
.mx-table-td {
  box-sizing: border-box;
  text-align: left;
  background-color: var(--table-color-bg-body-cell);
  border-bottom: 1px solid var(--table-color-border);
  line-height: var(--table-line-height-base);
}
.mx-table-th-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mx-table-col-fixed-left,
.mx-table-col-fixed-right {
  position: sticky;
  z-index: 1;
}
.mx-table-col-fixed-left-last::after,
.mx-table-col-fixed-right-first::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: var(--table-border-width);
  width: var(--table-size-shadow-wrapper-width);
  pointer-events: none;
  transform: translateX(-100%);
  transition: box-shadow 0.1s linear;
  box-shadow: none;
}
.mx-table-col-fixed-left-last::after {
  left: unset;
  transform: translateX(100%);
  right: 0;
}
.mx-table-expand-icon-cell button {
  width: var(--table-size-expand-button);
  height: var(--table-size-expand-button);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: var(--table-font-size-expand-button);
  border-radius: var(--table-border-radius-expand-button);
  outline: none;
  transition: background-color 0.1s linear;
  padding: 0;
  cursor: pointer;
  border: var(--table-border-expand-button);
  box-sizing: border-box;
}
.mx-table-expand-icon-cell button:hover {
  color: var(--table-color-expand-icon_hover);
  border-color: var(--table-color-expand-icon_hover);
}
.mx-table-cell-expand-icon {
  display: flex;
}
.mx-table-cell-expand-icon button {
  width: var(--table-size-expand-button);
  height: var(--table-size-expand-button);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: var(--table-font-size-expand-button);
  border-radius: var(--table-border-radius-expand-button);
  outline: none;
  transition: background-color 0.1s linear;
  padding: 0;
  cursor: pointer;
  border: var(--table-border-expand-button);
  box-sizing: border-box;
  margin-right: 8px;
}
.mx-table-cell-expand-icon button:hover {
  color: var(--table-color-expand-icon_hover);
  border-color: var(--table-color-expand-icon_hover);
}
.mx-table .mx-table-expand-td {
  padding-left: 15px;
}
.mx-table-expand-fixed-row {
  position: sticky;
  left: 0;
  box-sizing: border-box;
}
.mx-table-th.mx-table-operation .mx-table-th-item,
.mx-table-td.mx-table-operation {
  text-align: center;
  padding: 0;
}
.mx-table-checkbox .mx-checkbox,
.mx-table-radio .mx-radio {
  padding-left: 0;
  justify-content: center;
}
.mx-table-sorter-wrapper {
  display: flex;
  align-items: center;
}
.mx-table-sorter {
  display: flex;
  flex-direction: column;
  margin-left: 6px;
  cursor: pointer;
  color: var(--sorter-color);
}
.mx-table-sorter-active {
  color: var(--sorter-active-color);
}
.mx-table-sorter-top {
  position: relative;
  width: 10px;
  height: 10px;
  top: 1px;
}
.mx-table-sorter-bottom {
  position: relative;
  width: 10px;
  height: 10px;
  top: -1px;
}
.mx-table-filters {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: transparent;
  line-height: 1;
  vertical-align: 0;
  cursor: pointer;
  transition: all 0.1s linear;
  color: var(--filter-color);
}
.mx-table-filters-active {
  color: var(--filter-active-color);
}
.mx-table-container {
  position: relative;
  border-radius: var(--table-border-radius) var(--table-border-radius) 0 0;
}
.mx-table-header {
  border-radius: var(--table-border-radius) var(--table-border-radius) 0 0;
}
.mx-table-content-scroll {
  width: 100%;
  overflow: hidden;
}
.mx-table-content-scroll .mx-table-content-inner {
  width: auto;
}
.mx-table-header {
  scrollbar-color: transparent transparent;
  background-color: var(--table-color-bg-header-cell);
  overflow-x: scroll;
  overflow-y: hidden;
}
.mx-table-header::-webkit-scrollbar {
  background-color: transparent;
}
.mx-table-body {
  position: relative;
  overflow: auto;
  z-index: 1;
}
.mx-table-no-data {
  padding: 20px;
  box-sizing: border-box;
  font-size: 14px;
  text-align: center;
}
.mx-table-border .mx-table-container {
  border-right: 1px solid var(--table-color-border);
  border-top: 1px solid var(--table-color-border);
}
.mx-table-border .mx-table-container::before {
  content: '';
  position: absolute;
  background-color: var(--table-color-border);
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0;
  z-index: 2;
}
.mx-table-border .mx-table-th:first-child,
.mx-table-border .mx-table-td:first-child {
  border-left: 1px solid var(--table-color-border);
}
.mx-table-border .mx-table-expand-fixed-row {
  border-left: 1px solid var(--table-color-border);
}
.mx-table-border .mx-table-footer {
  border: 1px solid var(--table-color-border);
  border-top: 0;
}
.mx-table-border-cell .mx-table-th,
.mx-table-border-cell .mx-table-td {
  border-left: 1px solid var(--table-color-border);
}
.mx-table-border-header-cell .mx-table-th {
  border-left: 1px solid var(--table-color-border);
}
.mx-table-border-body-cell .mx-table-td {
  border-left: 1px solid var(--table-color-border);
}
.mx-table-border-cell:not(.mx-table-border) .mx-table-th:first-child,
.mx-table-border-cell:not(.mx-table-border) .mx-table-td:first-child {
  border-left: 0;
}
.mx-table-stripe .mx-table-tr:nth-child(even) .mx-table-td {
  background-color: var(--table-color-bg-body-stripe-row);
}
.mx-table-hover .mx-table-tr:not(.mx-table-empty-row):hover .mx-table-td:not(.mx-table-col-fixed-left):not(.mx-table-col-fixed-right) {
  background-color: var(--table-color-bg-body-row_hover);
}
.mx-table-hover .mx-table-tr:not(.mx-table-empty-row):hover .mx-table-td.mx-table-col-fixed-left::before,
.mx-table-hover .mx-table-tr:not(.mx-table-empty-row):hover .mx-table-td.mx-table-col-fixed-right::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--table-color-bg-body-row_hover);
  z-index: -1;
}
.mx-table .mx-table-pagination {
  display: flex;
  justify-content: flex-end;
}
.mx-table .mx-table-pagination-left {
  justify-content: flex-start;
}
.mx-table .mx-table-pagination-center {
  justify-content: center;
}
.mx-table .mx-table-pagination .mx-pagination {
  margin-top: var(--table-pagination-margin-top);
}
body {
  --pagination-size: 32px;
  --pagination-size-font-size: 14px;
  --pagination-size-icon-arrow-size: 12px;
  --pagination-option-size: 32px;
  --pagination-item-border-radius: var(--border-radius-large);
  --pagination-item-color-radius: var(--brand-color);
  --pagination-item-border: 0 solid transparent;
  --pagination-item-bg-color: var(--brand-color-1);
  --pagination-margin-total-spacing: 8px;
  --pagination-margin-jumper-spacing: 8px;
  --pagination-item-spacing: 8px;
  --pagination-color-bg-item-disabled: transparent;
  --pagination-color-item-border-disabled: transparent;
  --pagination-color-disabled: var(--text-color-disabled);
  --pagination-color-bg-item-active-disabled: var(--bg-color-component-disabled);
  --pagination-color-item-text-active-disabled: var(--brand-color-disabled);
  --pagination-color-icon-arrow-bg-hover: var(--gray-color-1);
  --pagination-jumper-input-width: 40px;
  --pagination-item-simple-pager-margin: 0 12px 0 4px;
  --pagination-jumper-separator: 0 12px 0 4px;
  --pagination-simple-input-width: 40px;
}
.mx-pagination {
  display: flex;
  align-items: center;
  font-size: var(--pagination-size-font-size);
  /*** 快速跳转 ***/
}
.mx-pagination-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
}
.mx-pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
  outline: 0;
  -webkit-user-select: none;
          user-select: none;
  border-radius: var(--pagination-item-border-radius);
  border: var(--pagination-item-border);
  height: var(--pagination-size);
  min-width: var(--pagination-size);
}
.mx-pagination-item-prev,
.mx-pagination-item-next {
  font-size: var(--pagination-size-icon-arrow-size);
}
.mx-pagination-item:not(.mx-pagination-item-disabled):not(.mx-pagination-item-active):hover {
  background-color: var(--pagination-color-icon-arrow-bg-hover);
}
.mx-pagination-item-active {
  transition: color 0.2s linear, background-color 0.2s linear;
  color: var(--pagination-item-color-radius);
  background-color: var(--pagination-item-bg-color);
}
.mx-pagination-item:not(:last-child) {
  margin-right: var(--pagination-item-spacing);
}
.mx-pagination-item-prev:not(.mx-pagination-item-disabled):hover,
.mx-pagination-item-next:not(.mx-pagination-item-disabled):hover {
  background-color: var(--pagination-color-icon-arrow-bg-hover);
}
.mx-pagination .mx-pagination-item-prev.mx-pagination-item-disabled,
.mx-pagination .mx-pagination-item-next.mx-pagination-item-disabled {
  color: var(--pagination-color-disabled);
  cursor: not-allowed;
}
.mx-pagination-jumper {
  margin-left: var(--pagination-margin-jumper-spacing);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mx-pagination .mx-pagination-jumper-input {
  width: var(--pagination-jumper-input-width);
  text-align: center;
  margin-left: var(--pagination-item-spacing);
  margin-right: var(--pagination-item-spacing);
  padding-left: 2px;
  padding-right: 2px;
}
.mx-pagination-total-text {
  margin-right: var(--pagination-margin-total-spacing);
}
.mx-pagination-item-simple-pager {
  display: flex;
  align-items: center;
  margin: var(--pagination-item-simple-pager-margin);
}
.mx-pagination-item-simple-pager .mx-pagination-jumper-separator {
  padding: var(--pagination-jumper-separator);
}
.mx-pagination-simple .mx-pagination-item {
  margin-right: 0;
}
.mx-pagination-simple .mx-pagination-jumper {
  margin-left: 0;
}
.mx-pagination-simple .mx-pagination-jumper .mx-pagination-jumper-input {
  width: var(--pagination-simple-input-width);
  margin-left: 0;
}
.mx-pagination-disabled {
  cursor: not-allowed;
}
.mx-pagination-disabled .mx-pagination-item,
.mx-pagination-disabled .mx-pagination-item:not(.mx-pagination-item-disabled):not(.mx-pagination-item-active):hover {
  cursor: not-allowed;
  background-color: var(--pagination-color-bg-item-disabled);
  border-color: var(--pagination-color-bg-item-disabled);
  color: var(--pagination-color-disabled);
}
.mx-pagination.mx-pagination-disabled .mx-pagination-item-active {
  background-color: var(--pagination-color-bg-item-active-disabled);
  border-color: var(--pagination-color-bg-item-disabled);
  color: var(--pagination-color-item-text-active-disabled);
}