@charset "UTF-8";
@import url("../libs/fastadmin-layer/dist/theme/default/layer.css");
* {
  margin: 0;
  padding: 0;
  outline: none;
}

body {
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  font-family: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input {
  background: none;
  border: none;
  outline: 0;
  border-radius: 0;
}

textarea {
  -webkit-appearance: none;
}

input[type=button], input[type=submit], input[type=file], button {
  cursor: pointer;
}

input[type=button], input[type=submit], input[type=reset] {
  -webkit-appearance: none;
}

em {
  font-style: normal;
}

a {
  text-decoration: none;
}

body {
  background-color: #f6f7f9;
}

a.link {
  color: #1677ff;
}
a.link:hover {
  color: #4096ff;
}

.x-container {
  width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

.hide {
  display: none !important;
}

:root {
  --ui-input-height: var(--ui-component-height, 40px);
  --ui-input-line-height: var(--ui-line-height, 40px);
  --ui-input-search-img: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M638.72 638.72a256 256 0 1 0-361.984-361.984A256 256 0 0 0 638.72 638.72zm58.71 119.04a384 384 0 1 1 85.418-95.573l202.24 202.24a64.256 64.256 0 0 1 .597 91.136 63.744 63.744 0 0 1-91.05-.598l-197.206-197.12z' fill='%23b6bbc6'/%3E%3C/svg%3E") no-repeat;
}

/* reset [type=search] ui */
[type=search] {
  -webkit-appearance: none;
}

[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-right: -2px;
  background: var(--ui-dark-gray, #b6bbc6) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkYiIGQ9Ik0wIDB2MjAwaDIwMFYwSDB6bTE1MS42MzYgMTM2LjQ4MmE3LjM3NCA3LjM3NCAwIDAgMSAwIDEwLjQyN2wtNS4yMTIgNS4yMWE3LjM3MiA3LjM3MiAwIDAgMS0xMC40MjYgMGwtMzYuNDgzLTM2LjQ4NUw2My4wMyAxNTIuMTJhNy4zNyA3LjM3IDAgMCAxLTEwLjQyNCAwbC01LjIxLTUuMjFhNy4zNyA3LjM3IDAgMCAxIDAtMTAuNDI4TDgzLjg4IDEwMCA0Ny4zOTYgNjMuNTE0YTcuMzY4IDcuMzY4IDAgMCAxIDAtMTAuNDI1bDUuMjEtNS4yMWE3LjM2OCA3LjM2OCAwIDAgMSAxMC40MjYgMEw5OS41MTYgODQuMzYgMTM2IDQ3Ljg4YTcuMzcgNy4zNyAwIDAgMSAxMC40MjUgMGw1LjIxMiA1LjIxYTcuMzcgNy4zNyAwIDAgMSAwIDEwLjQyNUwxMTUuMTUzIDEwMGwzNi40ODMgMzYuNDgyeiIvPjwvc3ZnPg==) no-repeat center;
  background-size: 20px 20px;
  transition: background-color var(--ui-animate-time, 0.2s);
  cursor: pointer;
}

[type=search]::-webkit-search-cancel-button:hover {
  background-color: var(--ui-dark, #4c5161);
}

input[type=search]::-webkit-search-results-decoration {
  display: none;
}

input:disabled,
input:read-only {
  cursor: default;
}

input.ui-input,
.ui-input > input,
[is=ui-input] {
  height: var(--ui-input-height);
  line-height: var(--ui-input-line-height);
  padding: calc((var(--ui-input-height) - var(--ui-input-line-height) - 2px) / 2) 16px;
  border: 1px solid var(--ui-border, #d0d0d5);
  border-radius: var(--ui-radius, 4px);
  background-color: var(--ui-white, #fff);
  box-sizing: border-box;
  font-size: var(--ui-font, 14px);
  outline: none;
  color: var(--ui-dark, #4c5161);
  transition: border-color var(--ui-animate-time, 0.2s), background-color var(--ui-animate-time, 0.2s);
}

.ui-input:hover,
.ui-input:hover > input,
[is=ui-input]:hover {
  border-color: var(--ui-dark-border, #ababaf);
}

.ui-input:focus,
.ui-input > input:focus,
[is=ui-input]:focus {
  border-color: var(--ui-blue, #1677ff);
}

span.ui-input {
  display: inline-block;
}

div.ui-input > input,
input[width="100%"] {
  width: 100%;
}

/* input with count */
.ui-input-x {
  position: relative;
}

span.ui-input-x {
  display: inline-block;
}

.ui-input-x > input {
  display: block;
  width: 100%;
  padding-right: 56px;
}

input ~ .ui-input-count {
  line-height: 38px;
  padding: 0 2px;
  color: var(--ui-gray, #a2a9b6);
  font-size: calc(var(--ui-font, 14px) - 2px);
  white-space: nowrap;
  position: absolute;
  font-family: sans-serif;
  right: 8px;
  top: 1px;
  pointer-events: none;
}

.ui-input-count slash {
  margin: 0 1px;
}

/* type=[search] with icon */
.ui-input-search:not(input) {
  position: relative;
}

.ui-input-search > input:not(.ui-icon-search) {
  padding-left: 40px;
}

.ui-input-search[align=end] > :not(.ui-icon-search) {
  padding-right: 40px;
  padding-left: 9px;
}

.ui-icon-search {
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 20px;
  height: 20px;
  color: var(--ui-dark-gray, #b6bbc6);
  background-color: transparent;
  border: solid transparent;
  border-width: 9px 8px;
  box-sizing: content-box;
  transition: color var(--ui-animate-time, 0.2s);
  padding: 0;
  text-indent: -99px;
  font-size: 0;
  cursor: pointer;
  outline: 0 none;
  overflow: hidden;
}

[align=end] > .ui-icon-search {
  left: auto;
  right: 3px;
}

.ui-input-search:hover .ui-icon-search {
  color: var(--ui-gray, #a2a9b6);
}

.ui-input-search > :disabled ~ .ui-icon-search {
  color: var(--ui-disabled, #ccd0d7);
  cursor: default;
}

.ui-input-search > :focus ~ .ui-icon-search {
  color: var(--ui-blue, #1677ff);
}

.ui-input-search > [is-error] ~ .ui-icon-search {
  color: var(--ui-red, #eb4646);
}

/**
 * 改成CSS绘制
 */
.ui-icon-search::before,
.ui-icon-search::after {
  content: "";
  position: absolute;
  box-sizing: content-box;
}

.ui-icon-search::before {
  width: 9px;
  height: 9px;
  border: 2px solid;
  border-radius: 50%;
  left: 2px;
  top: 2px;
}

.ui-icon-search::after {
  width: 6px;
  border-top: 2px solid;
  transform-origin: left;
  transform: scaleY(1.25) rotate(30deg);
  left: 13px;
  top: 11px;
}

/**
 * <input>按钮不支持伪元素，我们使用背景图片代替
 * 不建议使用<input>标签按钮，
 */
input.ui-icon-search {
  border: 0;
  margin: auto 6px;
  width: 18px;
  height: 18px;
  -webkit-mask: var(--ui-input-search-img);
  mask: var(--ui-input-search-img);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: var(--ui-dark-gray, #b6bbc6);
  cursor: pointer;
}

:focus ~ input.ui-icon-search {
  background-color: var(--ui-blue, #2a80eb);
}

[is-error] ~ input.ui-icon-search {
  background-color: var(--ui-red, #eb4646);
}

input.ui-input:disabled,
[is=ui-input]:disabled,
.ui-input > input:disabled,
.ui-input-x > :disabled ~ .ui-input {
  background-color: var(--ui-light, #f7f9fa);
}

input.ui-input:disabled,
[is=ui-input]:disabled,
.ui-input > input:disabled,
.ui-input-x > input:disabled {
  color: var(--ui-gray, #a2a9b6);
}

.ui-input:disabled:hover,
[is=ui-input]:disabled:hover,
.ui-input > input:disabled:hover,
.ui-input:hover > input:disabled {
  border-color: var(--ui-border, #d0d0d5);
}

.ui-input:read-only:hover,
.ui-input:read-only:focus,
[is=ui-input]:read-only:hover,
[is=ui-input]:read-only:focus,
.ui-input > input:read-only:hover,
.ui-input > input:read-only:focus {
  border-color: var(--ui-border, #d0d0d5);
}

/* firefox */
.ui-input:-moz-read-only:hover,
[is=ui-input]:-moz-read-only:hover,
.ui-input > input:-moz-read-only:hover,
.ui-input:-moz-read-only:focus,
[is=ui-input]:-moz-read-only:focus,
.ui-input > input:-moz-read-only:focus {
  border-color: var(--ui-border, #d0d0d5);
}

/* error */
.ui-input[is-error],
[is=ui-input][is-error],
.ui-input > [is-error] {
  border-color: var(--ui-red, #eb4646) !important;
}

.ui-input-count > [is-error],
.ui-input-count[is-error] {
  color: var(--ui-red, #eb4646);
}

@media (prefers-reduced-motion: reduce) {
  [type=search]::-webkit-search-cancel-button,
  input.ui-input,
  .ui-input > input,
  [is=ui-input],
  .ui-icon-search {
    transition: none;
  }
}
.ui-input-number {
  display: flex;
  height: var(--ui-input-height);
  padding: calc((var(--ui-input-height) - var(--ui-input-line-height) - 2px) / 2) 0;
  border: 1px solid var(--ui-border, #d0d0d5);
  border-radius: var(--ui-radius, 4px);
  background-color: var(--ui-white, #fff);
  box-sizing: border-box;
  font-size: var(--ui-font, 14px);
  outline: none;
  color: var(--ui-dark, #4c5161);
  transition: border-color var(--ui-animate-time, 0.2s), background-color var(--ui-animate-time, 0.2s);
}
.ui-input-number input {
  display: block;
  height: 100%;
  width: 100%;
  padding: 4px 11px;
  box-sizing: border-box;
  font-size: 14px;
  text-align: center;
}
.ui-input-number:focus-within {
  border-color: var(--ui-blue, #1677ff) !important;
}
.ui-input-number:hover {
  border-color: var(--ui-dark-border, #ababaf);
}

.ui-input-number-action {
  display: inline-flex;
  align-items: center;
  padding-inline: 14px;
  height: calc(var(--ui-input-height) - 2px);
  user-select: none;
  cursor: pointer;
}
.ui-input-number-action.up {
  border-inline-end: solid 1px var(--ui-border, #d0d0d5);
}
.ui-input-number-action.down {
  border-inline-start: solid 1px var(--ui-border, #d0d0d5);
}
.ui-input-number-action:hover {
  color: #1677ff;
}

:root {
  --ui-textarea-line-height: var(--ui-line-height, 20px);
}

textarea {
  font-family: inherit;
}

textarea.ui-textarea,
[is=ui-textarea],
.ui-textarea > textarea,
textarea ~ .ui-textarea-count {
  line-height: var(--ui-textarea-line-height);
  padding: 9px 16px;
  border: 1px solid var(--ui-border, #d0d0d5);
  border-radius: var(--ui-radius, 4px);
  background-color: var(--ui-white, #ffffff);
  outline: none;
  color: var(--ui-dark, #4c5161);
  font-size: var(--ui-font, 14px);
  transition: border-color var(--ui-animate-time, 0.2s), background-color var(--ui-animate-time, 0.2s);
  word-break: break-all;
  vertical-align: top;
  box-sizing: border-box;
  max-width: 100%;
  resize: none;
  overflow: auto;
}

textarea[resize] {
  resize: both;
}

textarea[resize=vertical] {
  resize: vertical;
}

textarea[resize=horizontal] {
  resize: horizontal;
}

div.ui-textarea > textarea,
textarea[width="100%"] {
  width: 100%;
}

/* hover */
.ui-textarea:hover,
.ui-textarea > textarea:hover,
[is=ui-textarea]:hover,
:hover > .ui-textarea-count {
  border-color: var(--ui-dark-border, #ababaf);
}

/* focus */
.ui-textarea:focus,
.ui-textarea > textarea:focus,
[is=ui-textarea]:focus,
:focus ~ .ui-textarea-count {
  border-color: var(--ui-blue, #1677ff);
}

/* textarea with count */
.ui-textarea-x {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

span.ui-textarea-x {
  display: inline-block;
}

.ui-textarea-x > textarea:only-child {
  padding-bottom: 32px;
}

.ui-textarea-x > textarea:not(:only-child) {
  padding-bottom: 0;
  margin: 1px 1px 33px;
  width: calc(100% - 2px);
  border: 0;
  background: none;
}

.ui-textarea-x > textarea {
  display: block;
  width: 100%;
  /* for Firefox */
  margin: 0;
}

textarea ~ .ui-textarea-count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  padding-bottom: 5px;
  color: var(--ui-gray, #a2a9b6);
  font-size: calc(var(--ui-font, 14px) - 2px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: -1;
}

.ui-textarea-count slash {
  margin: 0 1px;
}

.ui-textarea:read-only,
[is=ui-textarea]:read-only,
.ui-textarea > textarea:read-only,
:read-only ~ .ui-textarea-count {
  background-color: var(--ui-white, #ffffff);
}

.ui-textarea:disabled:hover,
[is=ui-textarea]:disabled:hover,
.ui-textarea > textarea:disabled:hover,
.ui-textarea-x:hover :disabled ~ .ui-textarea-count {
  border-color: var(--ui-border, #d0d0d5);
}

.ui-textarea:read-only:hover,
.ui-textarea:read-only:focus,
[is=ui-textarea]:read-only:hover,
[is=ui-textarea]:read-only:focus,
.ui-textarea > textarea:read-only:hover,
.ui-textarea > textarea:read-only:focus,
:read-only ~ .ui-textarea-count:hover,
:read-only ~ .ui-textarea-count:focus {
  border-color: var(--ui-border, #d0d0d5);
}

/* disabled */
.ui-textarea:disabled,
[is=ui-textarea]:disabled,
.ui-textarea > textarea:disabled,
:disabled ~ .ui-textarea-count {
  background-color: var(--ui-light, #f7f9fa);
  color: var(--ui-gray, #a2a9b6);
}

textarea:read-only,
textarea:disabled {
  resize: none;
}

/* error */
.ui-textarea[is-error],
[is=ui-textarea][is-error],
.ui-textarea > [is-error],
[is-error] ~ .ui-textarea-count {
  border-color: var(--ui-red, #eb4646) !important;
}

.ui-textarea-count > [is-error],
.ui-textarea-count[is-error] {
  color: var(--ui-red, #eb4646);
}

@media (prefers-reduced-motion: reduce) {
  textarea.ui-textarea,
  [is=ui-textarea],
  .ui-textarea > textarea,
  textarea ~ .ui-textarea-count {
    transition: none;
  }
}
/* button基础变量 */
:root {
  --ui-button-height: var(--ui-component-height, 40px);
  --ui-button-line-height: var(--ui-line-height, 20px);
  --ui-button-color: var(--ui-dark, #171717);
  --ui-button-loading-img: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M512 1024q-104 0-199-40-92-39-163-110T40 711Q0 616 0 512q0-15 10.5-25.5T36 476t25.5 10.5T72 512q0 90 35 171 33 79 94 140t140 95q81 34 171 34t171-35q79-33 140-94t95-140q34-81 34-171t-35-171q-33-79-94-140t-140-95q-81-34-171-34-15 0-25.5-10.5T476 36t10.5-25.5T512 0q104 0 199 40 92 39 163 110t110 163q40 95 40 199t-40 199q-39 92-110 163T711 984q-95 40-199 40z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat;
}

.ui-button,
[is=ui-button] {
  display: inline-flex;
  line-height: var(--ui-button-line-height);
  font-size: var(--ui-font, 14px);
  text-align: center;
  justify-content: center;
  align-items: center;
  color: var(--ui-white, #fff);
  border-radius: var(--ui-radius, 6px);
  border: 1px solid var(--ui-button-color);
  padding: calc((var(--ui-button-height) - var(--ui-button-line-height) - 2px) / 2) calc(var(--ui-button-height) / 2.5);
  min-width: calc(var(--ui-button-height) * 2);
  background: var(--ui-button-color) no-repeat center;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color var(--ui-animate-time, 0.2s), box-shadow var(--ui-animate-time, 0.2s), opacity var(--ui-animate-time, 0.2s);
  fill: currentColor;
  font-family: inherit;
  cursor: pointer;
  overflow: visible;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
}

@media (prefers-reduced-motion: reduce) {
  .ui-button,
  [is=ui-button] {
    transition: none;
  }
}
.ui-button[width="100%"],
[is=ui-button][width="100%"] {
  width: 100%;
}

div.ui-button,
div[is=ui-button] {
  display: block;
}

[type=submit]:not([class]):not([is]) {
  position: absolute;
  clip: rect(0 0 0 0);
}

/* Chrome/Firefox的outline会由Keyboard.js帮忙呈现 */
@supports (-webkit-mask: none) {
  button,
  [type=button],
  [type=submit],
  [tabindex] {
    outline: 0 none;
  }
}
::-moz-focus-inner {
  border: 0;
}

.ui-button:hover,
[is=ui-button]:hover {
  color: var(--ui-white, #fff);
  text-decoration: none;
}

:is(.ui-button, [is=ui-button]):where(:not(.disabled, .loading, :disabled)):hover {
  filter: brightness(var(--ui-brightness, 1.1));
}

:is(.ui-button, [is=ui-button]):where(:not(.disabled, .loading, :disabled)):active {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 0 0 100px rgba(0, 0, 0, 0.1);
}

:is(.ui-button, [is=ui-button]):is([type=normal], [data-type=normal]) {
  --ui-button-color: var(--ui-white, #fff);
  color: rgba(0, 0, 0, 0.88);
  border-color: #d9d9d9;
  --ui-brightness: 0.96;
}

/* primary button */
:is(.ui-button, [is=ui-button]):is([data-type=primary], [type=primary], [data-type=remind], [type=remind]) {
  --ui-button-color: var(--ui-blue, #1677ff);
}

/* success button */
:is(.ui-button, [is=ui-button]):is([data-type=success], [type=success]) {
  --ui-button-color: var(--ui-green, #1cad70);
}

/* warning button */
:is(.ui-button, [is=ui-button]):is([data-type^=warn], [type^=warn]) {
  --ui-button-color: var(--ui-orange, #f59b00);
}

/* danger button */
:is(.ui-button, [is=ui-button]):is([data-type=danger], [type=danger], [data-type=error], [type=error]) {
  --ui-button-color: var(--ui-red, #eb4646);
}

/* hidden button */
:is(.ui-button, [is=ui-button]):is([type=hidden], [data-type=hidden]) {
  display: none;
}

/* disabled status */
:is(.ui-button, [is=ui-button]):is(.disabled, :disabled) {
  opacity: var(--ui-opacity, 0.4);
  cursor: default;
}

/* loading status */
.ui-button.loading,
[is=ui-button].loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
  cursor: default;
}

/* input按钮，三个点 */
input.ui-button.loading,
input[is=ui-button].loading {
  --ui-loading-color: var(--ui-white, #fff);
  --ui-loading-radial: radial-gradient(3px circle, var(--ui-loading-color), var(--ui-loading-color) 2px, transparent 3px);
  background-image: var(--ui-loading-radial), var(--ui-loading-radial), var(--ui-loading-radial);
  background-position-x: calc(50% - 10px), 50%, calc(50% + 10px);
  background-position-y: 50%;
  background-size: 5px 5px;
  animation: bubbling 1s infinite;
}

input[data-type=normal].loading {
  --ui-loading-color: var(--ui-blue, #2a80eb);
}

/* button 按钮 */
:is(.ui-button, [is=ui-button]).loading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(var(--ui-button-height) / 2);
  height: calc(var(--ui-button-height) / 2);
  background-color: var(--ui-white, #fff);
  -webkit-mask: var(--ui-button-loading-img);
  mask: var(--ui-button-loading-img);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  margin: auto;
  animation: spin 1s linear infinite;
}

/* 有底色按钮 */
:is([data-type=normal], [type=normal]).loading::before {
  background-color: var(--ui-blue, #2a80eb);
}

@keyframes bubbling {
  0% {
    background-position-y: 50%, 50%, 50%;
  }
  15% {
    background-position-y: calc(50% - 3px), 50%, 50%;
  }
  30% {
    background-position-y: calc(50% - 1px), calc(50% - 3px), 50%;
  }
  45% {
    background-position-y: 50%, calc(50% - 1px), calc(50% - 3px);
  }
  60% {
    background-position-y: 50%, 50%, calc(50% - 1px);
  }
  75% {
    background-position-y: 50%, 50%, 50%;
  }
}
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
/* error */
.ui-button[is-error],
[is=ui-button][is-error] {
  border-color: var(--ui-red, #eb4646) !important;
}

/* radio基础变量 */
:root {
  --ui-radio-width: 16px;
  --ui-radio-height: 16px;
}

.ui-radio {
  -moz-appearance: none;
  -webkit-appearance: none;
  width: var(--ui-radio-width, 20px);
  height: var(--ui-radio-height, 20px);
  cursor: pointer;
  display: inline-flex;
  outline: none;
  border: solid 1px var(--ui-border, #d0d0d5);
  background-color: var(--ui-white, #ffffff);
  border-radius: 100%;
  box-sizing: border-box;
  vertical-align: -0.5ex;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: border-color var(--ui-animate-time, 0.2s);
}

.ui-radio::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: scale(0);
  opacity: 0;
  border-radius: 100%;
}

.ui-radio:not(:disabled):hover {
  border-color: var(--ui-dark-border, #ababaf);
}

.ui-radio:focus {
  border-color: var(--ui-blue, #1677ff);
}

.ui-radio:checked {
  border: solid 1px #1677ff;
  background-color: #1677ff;
}

.ui-radio:checked::after {
  transform: scale(0.5);
  opacity: 1;
}

.ui-radio:disabled {
  border-color: var(--ui-dark-border, #ababaf);
  opacity: var(--ui-opacity, 0.4);
  cursor: default;
}

.ui-radio[is-error] {
  border-color: var(--ui-red, #eb4646) !important;
}

@media (prefers-reduced-motion: reduce) {
  .ui-radio {
    transition: none;
  }
}
/* checkbox基础变量 */
:root {
  --ui-checkbox-width: 20px;
  --ui-checkbox-height: 20px;
  --ui-checkbox-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M920.185 224.838c-33.782-33.935-88.619-33.935-122.464 0L409.955 614.564 226.231 429.952c-33.782-33.935-88.68-33.935-122.461 0-33.784 33.997-33.784 89.108 0 123.044l244.925 246.118c33.782 33.998 88.68 33.998 122.463 0l449.028-451.201c33.843-33.967 33.843-89.048-.001-123.075z' fill='%23fff'/%3E%3C/svg%3E");
}

[is=ui-checkbox] {
  -webkit-appearance: none;
  width: var(--ui-checkbox-width, 20px);
  height: var(--ui-checkbox-height, 20px);
  display: inline-flex;
  border: solid 1px rgba(0, 0, 0, 0);
  outline: none;
  border-radius: var(--ui-radius, 4px);
  box-sizing: border-box;
  box-shadow: inset 0 1px, inset 1px 0, inset -1px 0, inset 0 -1px;
  background-color: var(--ui-white, #ffffff);
  background-clip: content-box;
  color: var(--ui-border, #d0d0d5);
  transition: color var(--ui-animate-time, 0.2s), background-color var(--ui-animate-time, 0.2s);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: -0.5ex;
}

[is=ui-checkbox]::after {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--ui-checkbox-icon) no-repeat center;
  background-size: var(--ui-checkbox-size-x, 12px) var(--ui-checkbox-size-y, 12px);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--ui-animate-time, 0.2s);
}

[is=ui-checkbox]:not(:disabled):hover,
[is=ui-checkbox]:disabled {
  color: var(--ui-dark-border, #ababaf);
}

[is=ui-checkbox]:focus {
  color: var(--ui-blue, #1677ff);
}

[is=ui-checkbox]:focus:hover {
  color: var(--ui-dark-blue, #1677ff);
}

[is=ui-checkbox]:checked {
  color: var(--ui-blue, #1677ff);
  background-color: var(--ui-blue, #1677ff);
}

[is=ui-checkbox]:not(:disabled):checked:is(:focus, :hover) {
  color: var(--ui-dark-blue, #1677ff);
  background-color: var(--ui-dark-blue, #1677ff);
}

[is=ui-checkbox]:checked::after {
  opacity: 1;
  visibility: visible;
}

[is=ui-checkbox]:is(:indeterminate, [indeterminate]:not(:checked))::after {
  opacity: 1;
  visibility: visible;
  color: var(--ui-blue, #1677ff);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: var(--ui-checkbox-indeterminate-size-x, 8px) var(--ui-checkbox-indeterminate-size-y, 8px);
  border-radius: var(--ui-checkbox-indeterminate-radius, 0);
}

[is=ui-checkbox]:not(:disabled):where(:indeterminate, [indeterminate]:not(:checked)):is(:focus, :hover) {
  color: var(--ui-dark-blue, #1677ff);
}

[is=ui-checkbox]:disabled {
  opacity: var(--ui-opacity, 0.4);
}

/* error */
[is=ui-checkbox][is-error] {
  color: var(--ui-red, #eb4646) !important;
}

@media (prefers-reduced-motion: reduce) {
  [is=ui-checkbox],
  [is=ui-checkbox]::after {
    transition: none;
  }
}
:root {
  --ui-table-cell-height: 50px;
  --ui-table-line-height: var(--ui-line-height, 20px);
}

.ui-table,
[is=ui-table] {
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
  line-height: var(--ui-table-line-height);
  table-layout: fixed;
  border-spacing: 0;
  font-size: var(--ui-font, 14px);
  border: 1px solid var(--ui-border, #d0d0d5);
}

.ui-table[width="100%"],
[is=ui-table][width="100%"] {
  width: 100%;
}

.ui-table thead td,
.ui-table th,
[is=ui-table] thead td,
[is=ui-table] th {
  background-color: var(--ui-light, #f7f9fa);
  border-bottom: 1px solid var(--ui-light-border, #ededef);
  font-weight: normal;
  font-style: normal;
  margin: 0;
}

.ui-table thead td:not([class]):not([align]),
.ui-table th:not([class]):not([align]),
[is=ui-table] thead td:not([class]):not([align]),
[is=ui-table] th:not([class]):not([align]) {
  text-align: left;
}

.ui-table tbody td,
[is=ui-table] tbody td {
  background-color: var(--ui-white, #ffffff);
  border-bottom: 1px solid var(--ui-light-border, #ededef);
}

.ui-table td,
.ui-table th,
[is=ui-table] td,
[is=ui-table] th {
  padding-top: calc((var(--ui-table-cell-height) - var(--ui-table-line-height)) / 2);
  padding-bottom: calc((var(--ui-table-cell-height) - var(--ui-table-line-height)) / 2 - 1px);
  padding-right: 20px;
}

.ui-table td:first-child,
.ui-table th:first-child,
[is=ui-table] td:first-child,
[is=ui-table] th:first-child {
  padding-left: 20px;
}

.ui-table tr,
[is=ui-table] tr {
  cursor: default;
}

.ui-table tr:last-child td,
[is=ui-table] tr:last-child td {
  padding-bottom: calc((var(--ui-table-cell-height) - var(--ui-table-line-height)) / 2);
  border-bottom: 0;
}

.ui-table ~ .ui-loading,
[is=ui-table] ~ .ui-loading {
  height: 300px;
}

.anticon {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.layui-layer-x-dialog {
  border-radius: 8px !important;
  padding: 20px 24px !important;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
}
.layui-layer-x-dialog .layui-layer-content {
  overflow: visible !important;
}

.layui-layer-x-login {
  border-radius: 8px !important;
  padding: 0 !important;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
}
.layui-layer-x-login .layui-layer-content {
  overflow: visible !important;
}
.layui-layer-x-login .x-modal-close {
  top: 12px;
  right: -32px;
  color: #fff;
  background: #c0c0c0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.layui-layer-x-login .x-modal-close:hover {
  color: #fff;
  background: #888;
}

.x-modal-confirm {
  box-sizing: border-box;
  width: 100%;
}

.x-modal-confirm-body {
  display: flex;
  flex-wrap: nowrap;
  align-items: start;
  box-sizing: border-box;
  position: relative;
}
.x-modal-confirm-body .anticon {
  display: inline-flex;
  align-items: center;
  font-size: 22px;
  margin-inline-end: 12px;
}
.x-modal-confirm-body .anticon-info-circle {
  color: #1677ff;
}
.x-modal-confirm-body .anticon-close-circle {
  color: #ff4d4f;
}
.x-modal-confirm-body .anticon-exclamation-circle {
  color: #faad14;
}
.x-modal-confirm-body .anticon-check-circle {
  color: #1677ff;
}

.x-modal-confirm-paragraph {
  display: flex;
  flex-direction: column;
  flex: auto;
  row-gap: 8px;
  max-width: calc(100% - 34px);
}
.x-modal-confirm-paragraph .x-modal-confirm-title {
  color: rgba(0, 0, 0, 0.88);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.x-modal-confirm-paragraph .x-modal-confirm-content {
  font-size: 14px;
  line-height: 1.6;
}
.x-modal-confirm-paragraph .x-modal-confirm-content p {
  margin-bottom: 4px;
}
.x-modal-confirm-paragraph .x-modal-confirm-content a {
  color: #1677ff;
}
.x-modal-confirm-paragraph .x-modal-confirm-content a:hover {
  color: #4096ff;
}

.x-modal-confirm-btns {
  text-align: end;
  margin-top: 20px;
}

.x-modal-close {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 0;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  background: transparent;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  border: 0;
  outline: 0;
  cursor: pointer;
}
.x-modal-close:hover {
  color: rgba(0, 0, 0, 0.88);
  background-color: rgba(0, 0, 0, 0.06);
  text-decoration: none;
}
.x-modal-close .x-modal-close-x {
  display: flex;
  font-size: 16px;
  font-style: normal;
  line-height: 32px;
  justify-content: center;
  text-transform: none;
  text-rendering: auto;
}
.x-modal-close .x-modal-close-x .anticon {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  margin-inline-end: 0;
}
.x-modal-close .x-modal-close-x .anticon svg {
  display: inline-block;
}

.x-modal-btn {
  color: rgba(0, 0, 0, 0.88);
  background-color: #fff;
  border: solid 1px #d9d9d9;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  padding: 0 15px;
  border-radius: 6px;
  margin-left: 14px;
}
.x-modal-btn.primary {
  color: #fff;
  border: solid 1px transparent;
  background-color: #1677ff;
}
.x-modal-btn.primary:hover {
  color: #fff;
  background-color: #4096ff;
  border: solid 1px transparent;
}
.x-modal-btn.disabled {
  color: #fff;
  background-color: #4096ff;
  border: solid 1px transparent;
}
.x-modal-btn:hover {
  color: #1677ff;
  border: solid 1px #1677ff;
}

.x-modal-dialog {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.x-modal-dialog .x-modal-header {
  color: rgba(0, 0, 0, 0.88);
  margin-bottom: 8px;
}
.x-modal-dialog .x-modal-title {
  margin: 0;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
}
.x-modal-dialog .x-modal-body {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.layui-layer-x-notice {
  background-color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
  min-width: 30px !important;
  border: solid 1px transparent !important;
}
.layui-layer-x-notice .layui-layer-content {
  padding: 9px 12px !important;
}

.x-message-notice {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5;
}
.x-message-notice .anticon {
  margin-inline-end: 8px;
  font-size: 16px;
}
.x-message-notice .anticon-check-circle {
  color: #52c41a;
}
.x-message-notice .anticon-info-circle {
  color: #1677ff;
}
.x-message-notice .anticon-close-circle {
  color: #ff4d4f;
}

.x-modal-form {
  padding-top: 10px;
}
.x-modal-form .form-item {
  margin-top: 20px;
}
.x-modal-form .form-item:first-child {
  margin-top: 0;
}
.x-modal-form .form-item label, .x-modal-form .form-item .label {
  display: block;
  margin-bottom: 6px;
}
.x-modal-form .form-item .helper {
  margin-top: 6px;
  font-size: 13px;
  color: #666;
}
.x-modal-form .form-item-alert {
  display: flex;
  align-items: flex-start;
  word-wrap: break-word;
  border: solid 1px #91caff;
  background-color: #e6f4ff;
  color: rgba(0, 0, 0, 0.88);
  border-radius: 8px;
  padding: 8px 12px;
  line-height: 1.5;
}
.x-modal-form .form-item-alert .anticon-info-circle {
  color: #1677ff;
  margin-inline-end: 8px;
  margin-top: 4px;
}
.x-modal-form .form-item-alert .form-item-alert-content {
  flex: 1 1;
  min-width: 0;
}
.x-modal-form .form-item-alert .form-item-alert-content p {
  margin-bottom: 4px;
}
.x-modal-form .form-item-alert .form-item-alert-content p:last-child {
  margin-bottom: 0;
}
.x-modal-form .form-actions {
  text-align: end;
  margin-top: 20px;
}
.x-modal-form .form-actions .ui-button {
  margin-left: 12px;
  padding-inline: 20px;
}

.layui-layer-x-profile .layui-layer-content {
  border-radius: 8px !important;
  padding: 20px 24px 6px 24px !important;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
  color: rgba(0, 0, 0, 0.88) !important;
  background-color: #fff !important;
}
.layui-layer-x-profile .layui-layer-content > i {
  display: none;
}

.x-profile-tips-user {
  display: flex;
}
.x-profile-tips-user .avatar {
  width: 42px;
  height: 42px;
  margin-right: 14px;
}
.x-profile-tips-user .avatar .avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.x-profile-tips-user .profile .nickname {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 600;
  max-width: 220px;
}
.x-profile-tips-user .profile .attrs {
  margin-top: 2px;
  font-size: 12px;
  color: #666;
}
.x-profile-tips-user .profile .attrs span {
  margin-right: 10px;
}

.x-profile-tips-info {
  display: flex;
  margin-top: 6px;
  padding-bottom: 2px;
  border-radius: 6px;
  width: 310px;
}
.x-profile-tips-info .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  padding: 10px 0;
  text-align: center;
}
.x-profile-tips-info .item .name {
  color: #666;
  font-size: 12px;
}
.x-profile-tips-info .item .value {
  margin-top: 4px;
  font-weight: 600;
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}
.x-profile-tips.loading .loading-avatar {
  position: relative;
}
.x-profile-tips.loading .loading-avatar:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0f0f0 25%, #d9d9d9 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation-name: skeleton-loading;
  animation-duration: 1.4s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
.x-profile-tips.loading .loading-w1 {
  width: 120px;
}
.x-profile-tips.loading .loading-w2 {
  width: 220px;
}
.x-profile-tips.loading .loading-text {
  position: relative;
  height: 22px;
  overflow: hidden;
}
.x-profile-tips.loading .loading-text:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 2px;
  left: 0;
  width: 100%;
  height: 18px;
  background: linear-gradient(90deg, #f0f0f0 25%, #d9d9d9 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation-name: skeleton-loading;
  animation-duration: 1.4s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  border-radius: 6px;
}
.x-profile-tips.loading .loading-body .name {
  width: 60px;
}
.x-profile-tips.loading .loading-body .value {
  width: 30px;
}

.x-file-download .file-icon {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.x-file-download .file-icon img {
  display: block;
  width: 120px;
  height: 120px;
}
.x-file-download .file-attrs {
  padding: 10px 10px;
  margin: 10px 0;
}
.x-file-download .file-attrs .item {
  display: flex;
  padding: 6px 0;
  font-size: 13px;
  color: #666;
}
.x-file-download .file-attrs .item .value {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x-file-download .file-actions {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
}
.x-file-download .file-actions .ui-button {
  width: 100%;
}

.x-avatar-edit-body {
  display: flex;
}
.x-avatar-edit-body .avatar-info {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 30px;
}
.x-avatar-edit-body .avatar-info .name {
  margin-top: 6px;
  text-align: center;
  color: #666;
}
.x-avatar-edit-body .avatar-info .value img {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.x-avatar-edit-body .avatar-list {
  flex: 1 1 auto;
}
.x-avatar-edit-body .avatar-section {
  background-color: #f7f7f7;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.x-avatar-edit-body .avatar-section .values {
  display: flex;
  flex-wrap: wrap;
  height: 260px;
  overflow-y: auto;
  width: 410px;
}
.x-avatar-edit-body .avatar-section .avatar-item {
  display: block;
  padding: 5px;
}
.x-avatar-edit-body .avatar-section .avatar-item img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: solid 3px #dcdcdc;
  cursor: pointer;
}
.x-avatar-edit-body .avatar-section .avatar-item img:hover {
  border: solid 3px #4096ff;
}

.x-avatar-edit-actions {
  margin-top: 10px;
  text-align: right;
}

.x-qrcode-pay {
  padding: 10px 30px;
}
.x-qrcode-pay .qrcode-img img {
  width: 250px;
  height: 250px;
}
.x-qrcode-pay .qrcode-attrs .item {
  display: flex;
  color: #666;
  font-size: 13px;
  padding: 6px 0;
}
.x-qrcode-pay .qrcode-attrs .item .value {
  flex: 1 1 auto;
  text-align: right;
}

.layui-layer-x-iframe {
  border-radius: 8px !important;
  padding: 0 !important;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden;
}
.layui-layer-x-iframe .layui-layer-title {
  color: rgba(0, 0, 0, 0.88);
  padding: 15px 24px 10px 24px !important;
  height: initial !important;
  border-bottom: 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
}
.layui-layer-x-iframe .layui-layer-setwin {
  display: none;
}
.layui-layer-x-iframe .x-modal-close {
  top: 10px;
  right: 14px;
}

.x-points {
  position: relative;
  color: #ff9800;
  padding-left: 16px;
}
.x-points:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 14px;
  height: 14px;
  background-image: url("../img/icon/coin.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}

.x-confirm-per-body {
  padding-top: 16px;
}
.x-confirm-per-body .item {
  display: flex;
  padding: 10px 0;
}
.x-confirm-per-body .item .name {
  flex-shrink: 0;
  width: 80px;
  color: #666;
}
.x-confirm-per-body .item .value {
  flex: 1 1 auto;
}
.x-confirm-per-body .item .value.bold {
  font-weight: 600;
}

.x-confirm-per-actions {
  margin-top: 16px;
  display: flex;
  justify-content: end;
}
.x-confirm-per-actions .ui-button {
  margin-left: 8px;
}

.x-upload-progress__file {
  display: flex;
  width: 100%;
  padding: 8px 0 2px 0;
  box-sizing: border-box;
}
.x-upload-progress__file .file-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}
.x-upload-progress__file .file-icon img {
  width: 100%;
  height: 100%;
}
.x-upload-progress__file .file-attr {
  flex: 1 1 auto;
  padding-top: 4px;
  padding-left: 10px;
}
.x-upload-progress__file .file-progress {
  width: 100%;
  height: 4px;
  background-color: #f0f0f0;
  margin-top: 10px;
}
.x-upload-progress__file .file-progress-bar {
  height: 100%;
  width: 0;
  background-color: #1677ff;
}
.x-upload-progress__file .file-progress-detail {
  font-size: 12px;
  text-align: right;
  margin-top: 6px;
  color: #666;
}

.x-upload-progress__tips {
  font-size: 12px;
  color: #666;
  text-align: right;
}

.layui-layer-x-upload .x-modal-title {
  font-size: 13px;
}
.layui-layer-x-upload .modal-tips {
  font-size: 12px;
  font-weight: normal;
  float: right;
  color: #666;
}

.x-empty {
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  padding: 80px 0;
}

.x-empty-image {
  margin-bottom: 8px;
  height: 100px;
}
.x-empty-image img {
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
}

.x-empty-description {
  color: rgba(0, 0, 0, 0.45);
}

.x-header {
  position: relative;
  height: 60px;
}
.x-header .x-header-inner {
  background-color: #fff;
  height: 60px;
  box-sizing: border-box;
  box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.x-header.floating .x-header-inner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.x-header .x-wrapper {
  display: flex;
  align-items: center;
  height: 60px;
}
.x-header .logo {
  height: 34px;
}
.x-header .logo a {
  display: block;
  height: 100%;
}
.x-header .logo img {
  display: block;
  height: 100%;
}
.x-header .links {
  display: flex;
  gap: 20px;
  padding-left: 30px;
}
.x-header .links .item {
  display: block;
  color: rgba(0, 0, 0, 0.88);
  font-size: 15px;
}
.x-header .links .item:hover {
  color: #1677ff;
}
.x-header .nav {
  margin-left: auto;
  display: flex;
  align-items: center;
}
.x-header .nav .item {
  margin-left: 30px;
}
.x-header .nav .ui-button {
  display: flex;
  --ui-button-height: 32px;
  --ui-button-line-height: 32px;
  align-items: center;
  padding: 0 14px;
}
.x-header .nav .ui-button .icon {
  display: block;
  width: 16px;
  height: 16px;
}
.x-header .nav .ui-button .icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.x-header .nav .ui-button .name {
  display: block;
  margin-left: 4px;
}
.x-header .nav .x-nav-action {
  display: flex;
  gap: 10px;
}
.x-header .nav .publish-button {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: solid 1px #d0d0d5;
  cursor: pointer;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.88);
}
.x-header .nav .publish-button:hover {
  color: #1677ff;
  border: solid 1px #1677ff;
}
.x-header .nav .publish-button .icon {
  display: block;
  width: 16px;
  height: 16px;
}
.x-header .nav .publish-button .icon img {
  width: 100%;
  height: 100%;
}
.x-header .nav .publish-button .name {
  display: block;
  margin-left: 4px;
}
.x-header .nav .sign-link a {
  color: #333;
  margin-left: 20px;
}
.x-header .nav .sign-link a:first-child {
  margin-left: 0;
}
.x-header .nav .sign-link a:hover {
  color: #0958d9;
}
.x-header .nav .user-profile {
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
}
.x-header .nav .user-profile .trigger {
  display: flex;
  align-items: center;
  user-select: none;
  cursor: pointer;
  position: relative;
}
.x-header .nav .user-profile .trigger .avatar {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 34px;
  margin-right: 4px;
}
.x-header .nav .user-profile .trigger .nickname {
  display: block;
  max-width: 80px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(0, 0, 0, 0.88);
}
.x-header .nav .user-profile .trigger.unread:after {
  content: "";
  position: absolute;
  top: 0;
  left: 25px;
  background-color: #f44336;
  display: block;
  color: #fff;
  height: 6px;
  width: 6px;
  border-radius: 8px;
  border: 2px solid #fff;
}
.x-header .nav .user-profile .dropdown {
  display: none;
  position: absolute;
  right: -10px;
  top: 60px;
  z-index: 99;
  background-color: #fff;
  width: 120px;
  padding: 4px;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
}
.x-header .nav .user-profile .dropdown .dropdown-item {
  position: relative;
  display: block;
  height: 36px;
  line-height: 36px;
  text-align: center;
  color: rgba(0, 0, 0, 0.88);
}
.x-header .nav .user-profile .dropdown .dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}
.x-header .nav .user-profile .dropdown .dropdown-item.unread::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 26px;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background-color: #f44336;
}
.x-header .nav .user-profile:hover .dropdown {
  display: block !important;
}
.x-header .x-mobile-search {
  --ui-radius: 8px;
  --ui-input-height: 32px;
  --ui-white: #f7f7f7;
  width: 300px;
}
.x-header .x-mobile-search input {
  padding-left: 14px !important;
}

.x-footer {
  margin-top: 30px;
  background-color: #fff;
  border-top: solid 1px rgba(0, 0, 0, 0.03);
  padding: 30px 0;
}
.x-footer .x-footer-wrapper {
  display: flex;
  font-size: 13px;
}
.x-footer .footer-logo img {
  height: 34px;
}
.x-footer .footer-link {
  margin-top: 16px;
}
.x-footer .footer-link .item {
  color: rgba(0, 0, 0, 0.88);
}
.x-footer .footer-link .item:hover {
  color: #1677ff;
}
.x-footer .footer-link .item, .x-footer .footer-link .text {
  margin-right: 20px;
}
.x-footer .footer-introduce {
  margin-top: 16px;
  color: #666;
}
.x-footer .footer-copy {
  margin-top: 16px;
  color: #666;
}
.x-footer .footer-copy .icp-wb:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background-image: url("../img/icon/ghs.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}
.x-footer .footer-copy .icp, .x-footer .footer-copy .icp-wb {
  color: #666;
  margin-left: 10px;
}
.x-footer .footer-copy .icp:hover, .x-footer .footer-copy .icp-wb:hover {
  color: #1677ff;
}
.x-footer .left {
  flex: 1 1 auto;
}
.x-footer .right {
  display: flex;
}
.x-footer .qrcode-item {
  margin-left: 10px;
}
.x-footer .qrcode-item .qrcode {
  display: block;
  width: 130px;
  height: 130px;
}
.x-footer .qrcode-item .text {
  display: block;
  font-size: 12px;
  width: 130px;
  text-align: center;
  color: #666;
}

.x-floating {
  position: fixed;
  bottom: 80px;
  right: 50px;
  z-index: 99;
}
.x-floating .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  position: relative;
  cursor: pointer;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.07);
  margin-top: 10px;
}
.x-floating .item .item-icon {
  display: flex;
  justify-content: center;
}
.x-floating .item .item-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  color: #666;
}
.x-floating .item .item-name {
  font-size: 12px;
  text-align: center;
  margin-top: 2px;
  color: #666;
}
.x-floating .item:hover .item-name {
  color: #1677ff;
}
.x-floating .item:hover .item-icon svg {
  color: #1677ff;
}
.x-floating .item:hover .x-floating-dropdown {
  display: block;
}

.x-floating-dropdown {
  position: absolute;
  right: 75px;
  top: -80px;
  z-index: 99;
  display: none;
}
.x-floating-dropdown:after {
  content: "";
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-left-color: #ffffff;
  position: absolute;
  top: 90px;
  right: -30px;
}
.x-floating-dropdown .item-dropdown {
  width: 190px;
  background-color: #fff;
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 0 2px 16px #ccc;
  border-radius: 8px;
}
.x-floating-dropdown .item-dropdown .service-qq {
  margin-bottom: 5px;
}
.x-floating-dropdown .item-dropdown .service-qq a {
  display: block;
  color: #333;
  font-weight: bold;
  background: #bde9ff;
  width: 136px;
  height: 26px;
  line-height: 26px;
  border-radius: 5px;
  text-align: center;
  border: 1px solid #58b4e1;
  margin-left: 12px;
}
.x-floating-dropdown .item-dropdown .service-qq a:before {
  content: "";
  width: 14px;
  height: 16px;
  display: inline-block;
  background: url(../img/icon/qq.png) no-repeat;
  margin-right: 5px;
  position: relative;
  top: 2px;
}
.x-floating-dropdown .item-dropdown .service-wx .qrcode {
  width: 160px;
  margin-bottom: 5px;
  display: block;
}
.x-floating-dropdown .item-dropdown .service-wx .text {
  display: block;
  text-align: center;
  color: #666;
}

.x-main-wrapper {
  display: flex;
  box-sizing: border-box;
}
.x-main-wrapper .left-section {
  flex: 1 1 auto;
  margin-top: 20px;
}
.x-main-wrapper .right-section {
  flex: 0 0 320px;
  width: 320px;
  margin-top: 20px;
  margin-left: 20px;
}
.x-main-wrapper .right-section .x-widget-card {
  margin-bottom: 20px;
}

.x-main-breadcrumb {
  margin-top: 15px;
  font-size: 12px;
  color: #666;
}
.x-main-breadcrumb .item-link {
  color: #666;
}
.x-main-breadcrumb .item-link:hover {
  color: #1677ff;
}
.x-main-breadcrumb .item-split {
  margin: 0 2px;
}

.x-main-breadcrumb ~ .x-main-wrapper .left-section, .x-main-breadcrumb ~ .x-main-wrapper .right-section {
  margin-top: 15px;
}

.x-article-card {
  padding: 26px 30px 30px 30px;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}
.x-article-card .card-header {
  display: flex;
  margin-bottom: 25px;
}
.x-article-card .card-header .tabs {
  flex: 1 0 auto;
}
.x-article-card .card-header .tabs .item {
  display: inline-block;
  color: rgba(0, 0, 0, 0.88);
  padding: 0 5px 10px 5px;
  font-size: 16px;
  margin-right: 30px;
  border-bottom: 2px solid #fff;
}
.x-article-card .card-header .tabs .item.active {
  color: #1677ff;
  border-bottom: 2px solid #1677ff;
}
.x-article-card .card-header .tabs .item:hover {
  color: #1677ff;
}
.x-article-card .card-header .tips {
  font-size: 12px;
  color: #999;
  margin-left: auto;
}

.x-articles .item {
  display: flex;
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}
.x-articles .db-icon {
  margin-right: 30px;
  height: 18px;
  width: 18px;
  background: #efefef;
  border: 1px solid #eee;
  border-radius: 30px;
  text-align: center;
  padding: 4px;
}
.x-articles .db-icon img {
  height: 18px;
  width: 18px;
}
.x-articles .meta {
  flex: 1 1 auto;
}
.x-articles .meta-title .status {
  display: inline-block;
  width: 50px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  background-color: #ff5722;
  margin-right: 8px;
  border-radius: 4px;
}
.x-articles .meta-title .status.pending {
  background-color: #607d8b;
}
.x-articles .meta-title .status.success {
  background-color: #4caf50;
}
.x-articles .meta-title .name {
  font-size: 16px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.88);
}
.x-articles .meta-title .name:hover {
  color: #1677ff;
}
.x-articles .meta-title:hover .copy {
  display: inline-block !important;
}
.x-articles .meta-title .copy {
  display: none;
  line-height: 100%;
  color: #1677ff;
  cursor: pointer;
  margin-left: 10px;
}
.x-articles .meta-group {
  display: flex;
  margin-top: 10px;
}
.x-articles .meta-group .left {
  display: flex;
  align-items: center;
}
.x-articles .meta-group .left .user {
  display: flex;
  cursor: pointer;
  margin-right: 10px;
  width: 120px;
}
.x-articles .meta-group .left .user .avatar {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  margin-right: 8px;
}
.x-articles .meta-group .left .user .nickname {
  font-size: 13px;
  max-width: 80px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.x-articles .meta-group .left .time, .x-articles .meta-group .left .coin {
  display: flex;
  align-items: center;
  width: 120px;
}
.x-articles .meta-group .left .time .icon, .x-articles .meta-group .left .coin .icon {
  display: block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
}
.x-articles .meta-group .left .time .name, .x-articles .meta-group .left .coin .name {
  color: #666;
  font-size: 13px;
}
.x-articles .meta-group .right {
  margin-left: auto;
}
.x-articles .meta-group .right .btn {
  padding: 6px 16px;
  text-align: center;
  border-radius: 6px;
  display: block;
  cursor: pointer;
  box-sizing: border-box;
  border: solid 1px #fff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
}
.x-articles .meta-group .right .btn-reply {
  color: #fff;
  background-color: #1677ff;
  border: solid 1px #1677ff;
}
.x-articles .meta-group .right .btn-reply:hover {
  background-color: #4096ff;
}
.x-articles .meta-group .right .btn-download {
  color: rgba(0, 0, 0, 0.88);
  border: solid 1px #d9d9d9;
}
.x-articles .meta-group .right .btn-download:hover {
  color: #4096ff;
  border: solid 1px #4096ff;
}

.x-pagination {
  margin: 20px 0 10px 0;
}
.x-pagination .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}
.x-pagination .pagination li {
  display: block;
}
.x-pagination .pagination .page-button {
  display: block;
  padding: 0 11px;
  color: #888;
  cursor: pointer;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  height: 28px;
  line-height: 27px;
  box-sizing: border-box;
  margin: 0 5px;
}
.x-pagination .pagination .page-button:hover {
  color: #1677ff;
}
.x-pagination .pagination .page-link {
  display: block;
  padding: 0 8px;
  color: #888;
  height: 32px;
  line-height: 32px;
  border: 1px solid #fff;
}
.x-pagination .pagination .page-link:hover {
  color: #1677ff;
}
.x-pagination .pagination li.active .page-button {
  color: #1677ff;
  border: solid 1px #1677ff;
  font-weight: bold;
}

.x-paginator {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.x-paginator .page-item, .x-paginator .page-prev, .x-paginator .page-next, .x-paginator .page-dots {
  display: inline-block;
  height: 32px;
  line-height: 30px;
  min-width: 32px;
  text-align: center;
  vertical-align: middle;
  background-color: #fff;
  border: solid 1px transparent;
  border-radius: 6px;
  outline: 0;
  cursor: pointer;
}
.x-paginator .page-item-link, .x-paginator .page-item-block {
  display: block;
  padding: 0 6px;
  color: rgba(0, 0, 0, 0.88);
}
.x-paginator .page-item-link .anticon, .x-paginator .page-item-block .anticon {
  font-size: 12px;
}
.x-paginator .page-dots {
  box-sizing: border-box;
  cursor: default;
}
.x-paginator .page-dots .page-item-block {
  color: rgba(0, 0, 0, 0.25);
  text-align: center;
  letter-spacing: 0;
}
.x-paginator .page-item {
  margin-inline-end: 8px;
  user-select: none;
  box-sizing: border-box;
}
.x-paginator .page-item:hover {
  transition: all 0.2s;
  background-color: rgba(0, 0, 0, 0.06);
}
.x-paginator .page-item.active {
  font-weight: 600;
  border-color: #1677ff;
  background-color: #fff;
}
.x-paginator .page-item.active .page-item-link, .x-paginator .page-item.active .page-item-block {
  color: #1677ff;
}
.x-paginator .page-prev, .x-paginator .page-dots {
  margin-inline-end: 8px;
}
.x-paginator .page-next, .x-paginator .page-prev {
  box-sizing: border-box;
}
.x-paginator .page-next.disabled, .x-paginator .page-prev.disabled {
  cursor: not-allowed;
}
.x-paginator .page-next.disabled span, .x-paginator .page-prev.disabled span {
  color: rgba(0, 0, 0, 0.25);
}
.x-paginator .page-next.disabled:hover, .x-paginator .page-prev.disabled:hover {
  background-color: #fff;
}
.x-paginator .page-next:hover, .x-paginator .page-prev:hover {
  transition: all 0.2s;
  background-color: rgba(0, 0, 0, 0.06);
}

.x-paginator-mini .page-next, .x-paginator-mini .page-prev, .x-paginator-mini .page-dots {
  min-width: 24px;
  height: 24px;
  margin: 0;
  line-height: 24px;
}
.x-paginator-mini .page-dots {
  font-size: 13px;
}
.x-paginator-mini .page-item {
  min-width: 24px;
  height: 24px;
  margin: 0;
  line-height: 22px;
}

.x-widget-card {
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}
.x-widget-card .card-header {
  padding: 18px 24px 10px 24px;
  font-size: 14px;
  font-weight: 600;
  box-sizing: border-box;
}
.x-widget-card .card-body {
  padding: 0 24px 24px 24px;
}
.x-widget-card .gift-rank .item {
  display: flex;
  align-items: center;
  padding: 8px 0;
}
.x-widget-card .gift-rank .item .icon {
  display: block;
  height: 16px;
  width: 16px;
}
.x-widget-card .gift-rank .item .point {
  display: flex;
  align-items: center;
  height: 18px;
  background-color: #fff5e7;
  color: #ff9800;
  margin: 0 6px;
  border-radius: 4px;
  font-size: 12px;
  padding: 0 6px;
}
.x-widget-card .gift-rank .item .point-icon {
  display: block;
  width: 12px;
  height: 12px;
  margin-right: 2px;
}
.x-widget-card .gift-rank .item .point-value {
  display: block;
}
.x-widget-card .gift-rank .item .name {
  color: rgba(0, 0, 0, 0.88);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.x-widget-card .gift-rank .item:hover .name {
  color: #1677ff;
}
.x-widget-card .report-chart {
  display: flex;
  padding-top: 10px;
}
.x-widget-card .report-chart .chart-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 50%;
}
.x-widget-card .report-chart .chart-item .name, .x-widget-card .report-chart .chart-item .percent {
  display: block;
  text-align: center;
  color: #666;
  font-size: 13px;
}
.x-widget-card .report-chart .chart-item .percent {
  font-size: 12px;
  margin-top: 2px;
}
.x-widget-card .report-chart .chart-item .x-charts {
  width: 100px;
  height: 100px;
}
.x-widget-card .user-rank {
  padding-top: 10px;
  padding-bottom: 4px;
}
.x-widget-card .user-rank .item {
  display: flex;
  margin-bottom: 14px;
  align-items: center;
  user-select: none;
  cursor: pointer;
}
.x-widget-card .user-rank .item:last-child {
  margin-bottom: 0;
}
.x-widget-card .user-rank .item .item-left {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  width: 30px;
  height: 30px;
}
.x-widget-card .user-rank .item .item-left .rank-icon {
  display: block;
  width: 26px;
  height: 26px;
}
.x-widget-card .user-rank .item .item-left .rank-level {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.x-widget-card .user-rank .item .item-center {
  display: flex;
  flex: 1 1 auto;
}
.x-widget-card .user-rank .item .item-center .avatar {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.x-widget-card .user-rank .item .item-center .userinfo {
  margin-left: 10px;
}
.x-widget-card .user-rank .item .item-center .nickname {
  font-size: 14px;
  font-weight: 500;
  max-width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.x-widget-card .user-rank .item .item-center .remark {
  color: #666;
  font-size: 12px;
}
.x-widget-card .user-rank .item:hover .nickname {
  color: #1677ff;
}
.x-widget-card .user-rank .item .item-right .point {
  display: flex;
  align-items: center;
  color: #ff9800;
}
.x-widget-card .user-rank .item .item-right .point .point-icon {
  display: block;
  width: 16px;
  height: 16px;
}
.x-widget-card .user-rank .item .item-right .point .point-value {
  display: block;
  margin-left: 4px;
  font-size: 14px;
}
.x-widget-card .help-tips {
  padding-top: 4px;
}
.x-widget-card .help-tips p {
  display: block;
  margin-bottom: 6px;
  position: relative;
  padding-left: 14px;
}
.x-widget-card .help-tips p:before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 7px;
  background-color: #1677ff;
}

.x-detail-heading {
  padding: 30px 30px 20px;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}
.x-detail-heading .title {
  font-size: 20px;
  font-family: Roboto, Georgia, serif, arial;
  margin: 0 0 15px 0;
}
.x-detail-heading .info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 15px;
}
.x-detail-heading .info .status {
  display: block;
  width: 64px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  background-color: #ff5722;
  margin-right: 20px;
  border-radius: 8px;
}
.x-detail-heading .info .coin {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.x-detail-heading .info .coin .icon {
  display: block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.x-detail-heading .info .coin .name {
  color: #ff9800;
  font-size: 13px;
}
.x-detail-heading .info .source {
  color: #666;
  font-size: 13px;
}
.x-detail-heading .attrs .attr-link a {
  color: #1677ff;
}
.x-detail-heading .attrs .attr-link a:hover {
  color: #69b1ff;
}
.x-detail-heading .attrs .attr-link, .x-detail-heading .attrs .attr-item {
  margin-bottom: 10px;
}
.x-detail-heading .attrs .attr-item .attr-value a {
  color: #1677ff;
}
.x-detail-heading .attrs .attr-item .attr-value a:hover {
  color: #69b1ff;
}
.x-detail-heading .database {
  margin-top: 26px;
  background: #fff;
  border-top: 1px dashed rgb(204, 204, 204);
  padding-top: 14px;
}
.x-detail-heading .database-label {
  display: flex;
  align-items: center;
}
.x-detail-heading .database-label .icon {
  width: 26px;
  height: 26px;
  margin-right: 10px;
}
.x-detail-heading .database-label .name {
  font-size: 13px;
}
.x-detail-heading .abstract {
  padding-top: 10px;
}
.x-detail-heading .abstract a {
  color: #666;
}

.x-detail-assist {
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  margin-top: 20px;
}
.x-detail-assist .card-title {
  display: flex;
  align-items: center;
  padding: 14px 30px 0 30px;
}
.x-detail-assist .card-title .title {
  font-size: 16px;
  font-weight: 600;
  height: 46px;
  line-height: 46px;
}
.x-detail-assist .card-title .pending {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.x-detail-assist .card-title .pending .pending-icon {
  height: 46px;
  margin-left: 10px;
  animation: box 14s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}
.x-detail-assist .card-title .pending .pending-text {
  color: #00bcd4;
}
.x-detail-assist .card-body {
  padding: 24px 30px 30px 30px;
}
.x-detail-assist .upload-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}
.x-detail-assist .upload-file .upload-file-button {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px #1677ff;
  border-radius: 8px;
  padding: 8px 0;
  height: 45px;
  width: 300px;
  box-sizing: border-box;
  font-size: 16px;
  color: #fff;
  background-color: #1677ff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
}
.x-detail-assist .upload-file .upload-file-button:hover {
  background-color: #4096ff;
}
.x-detail-assist .upload-file .upload-file-button.disabled {
  opacity: 0.7;
}
.x-detail-assist .upload-file .upload-file-button.disabled:hover {
  background-color: #1677ff;
}
.x-detail-assist .upload-file .upload-file-button .process {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  color: #fff;
  line-height: 45px;
  background-color: #1677ff;
  text-align: right;
  box-sizing: border-box;
  padding-right: 4px;
  font-size: 14px;
}
.x-detail-assist .upload-file .upload-file-button .icon svg {
  width: 24px;
  height: 24px;
}
.x-detail-assist .upload-file .upload-file-button .text {
  margin-left: 8px;
}
.x-detail-assist .upload-file .upload-file-tips {
  margin-top: 10px;
  color: #666;
  font-size: 12px;
}
.x-detail-assist .assist-item .assist-time {
  font-size: 16px;
  font-weight: bold;
}
.x-detail-assist .assist-item .assist-time:before {
  content: "";
  width: 7px;
  height: 7px;
  display: inline-block;
  background-color: #1677ff;
  border-radius: 7px;
  margin-right: 15px;
  position: relative;
  top: -3px;
}
.x-detail-assist .assist-item .assist-body {
  border-left: 1px solid #e7e7e7;
  margin-left: 3px;
  padding: 15px 0 15px 18px;
}
.x-detail-assist .assist-item .assist-body.no-border {
  border-left: solid 1px #fff;
}
.x-detail-assist .assist-item .assist-owner {
  display: flex;
  align-items: center;
  padding-top: 4px;
}
.x-detail-assist .assist-item .assist-owner .userinfo {
  display: flex;
  align-items: center;
}
.x-detail-assist .assist-item .assist-owner .userinfo .avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.x-detail-assist .assist-item .assist-owner .userinfo .nickname {
  display: block;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 8px;
  color: #666;
}
.x-detail-assist .assist-item .assist-owner .message {
  margin-left: 30px;
  color: #333;
}
.x-detail-assist .assist-item .assist-owner .actions {
  display: flex;
  margin-left: auto;
}
.x-detail-assist .assist-item .assist-owner .actions a {
  display: block;
  margin-left: 20px;
  color: rgba(0, 0, 0, 0.88);
  padding: 2px 0;
  border-bottom: solid 1px #999;
}
.x-detail-assist .assist-item .assist-owner .actions a:hover {
  color: #1677ff;
  border-bottom: solid 1px #1677ff;
}
.x-detail-assist .assist-item .assist-owner ~ .assist-content {
  margin-top: 12px;
}
.x-detail-assist .assist-item .bot-contents {
  padding: 10px 15px;
  background-color: #fafafa;
  border-radius: 8px;
}
.x-detail-assist .assist-item .bot-contents .item {
  padding: 10px 15px;
}
.x-detail-assist .assist-item .bot-contents .item span {
  margin-right: 10px;
}
.x-detail-assist .assist-item .text-contents {
  padding: 14px 15px;
  background-color: #fafafa;
  border-radius: 8px;
}
.x-detail-assist .assist-item .user-contents {
  display: flex;
  padding: 14px 15px;
  background-color: #fafafa;
  border-radius: 8px;
  position: relative;
}
.x-detail-assist .assist-item .reject-contents {
  color: #f44336;
  padding: 10px 15px;
}
.x-detail-assist .assist-item .assist-file {
  display: inline-flex;
  align-items: center;
}
.x-detail-assist .assist-item .assist-file .file-icon {
  display: block;
  height: 24px;
  width: 24px;
  margin-right: 6px;
}
.x-detail-assist .assist-item .assist-file .file-name {
  color: rgba(0, 0, 0, 0.88);
}
.x-detail-assist .assist-item .assist-actions {
  display: flex;
  margin-left: auto;
}
.x-detail-assist .assist-item .assist-actions .btn {
  display: block;
  height: 28px;
  line-height: 28px;
  margin-left: 10px;
  color: rgba(0, 0, 0, 0.88);
  padding: 0 16px;
  background-color: #fff;
  border: solid 1px #dcdcdc;
  border-radius: 6px;
}
.x-detail-assist .assist-item .assist-actions .btn.apply {
  border: solid 1px #07c160;
  color: #07c160;
}
.x-detail-assist .assist-item .assist-actions .btn.reject:hover {
  border: solid 1px #ff4d4f;
  color: #ff4d4f;
}
.x-detail-assist .assist-item .assist-status {
  margin-left: 20px;
  border: solid 1px #fff;
  color: #dcdcdc;
  height: 24px;
  line-height: 22px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 13px;
}
.x-detail-assist .assist-item .assist-status.success {
  color: #fff;
  border: solid 1px #07c160;
  background-color: #07c160;
}
.x-detail-assist .assist-item .assist-status.error {
  color: #c5c5c5;
  border: solid 1px #c5c5c5;
}
.x-detail-assist .assist-over .over-tips {
  display: flex;
  padding: 50px 0;
  width: 380px;
  margin: 0 auto;
}
.x-detail-assist .assist-over .over-tips .over-text {
  font-size: 15px;
}
.x-detail-assist .assist-over .over-tips .over-text h4 {
  display: block;
  font-size: 18px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #434a54;
}
.x-detail-assist .assist-over .over-tips .over-text p {
  text-align: center;
  letter-spacing: 3px;
}
.x-detail-assist .assist-over .over-tips .over-text .over-action {
  margin-top: 10px;
  text-align: center;
}
.x-detail-assist .assist-over .over-tips .over-text .over-action a {
  color: #1677ff;
}
.x-detail-assist .assist-over .over-tips .over-text .over-action a:hover {
  color: #4096ff;
}
.x-detail-assist .assist-over .over-copyright {
  text-align: center;
  margin-top: 30px;
  line-height: 30px;
  background: #f4f4f4;
  padding: 30px;
  color: #888;
  text-shadow: 1px 1px 1px #fff;
  border-radius: 8px;
}
.x-detail-assist .assist-over .over-icon {
  display: block;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

@keyframes box {
  0% {
    transform: rotate(0deg);
  }
  3% {
    transform: rotate(40deg);
  }
  6% {
    transform: rotate(0deg);
  }
  9% {
    transform: rotate(-40deg);
  }
  12% {
    transform: rotateX(0deg);
  }
  15% {
    transform: rotateX(150deg);
  }
  18% {
    transform: rotateX(0deg);
  }
  21% {
    transform: rotateY(0deg);
  }
  24% {
    transform: rotateY(100deg);
  }
  27% {
    transform: rotateY(0deg);
  }
  30% {
    transform: rotateY(300deg);
  }
  33% {
    transform: rotateY(0deg);
  }
}
.x-detail-pager {
  margin-top: 30px;
}
.x-detail-pager .item-prev, .x-detail-pager .item-next {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #666;
}
.x-detail-pager .item-prev .title, .x-detail-pager .item-next .title {
  flex: 0 0 auto;
}
.x-detail-pager .item-prev .db, .x-detail-pager .item-next .db {
  display: flex;
  margin-right: 8px;
  flex: 0 0 auto;
}
.x-detail-pager .item-prev .db .icon, .x-detail-pager .item-next .db .icon {
  height: 20px;
  width: 20px;
  margin-right: 6px;
}
.x-detail-pager .item-prev .db .name, .x-detail-pager .item-next .db .name {
  display: block;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x-detail-pager .item-prev .link, .x-detail-pager .item-next .link {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  width: 0;
}
.x-detail-pager .item-prev .link a, .x-detail-pager .item-next .link a {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1677ff;
}
.x-detail-pager .item-prev .link a:hover, .x-detail-pager .item-next .link a:hover {
  color: #4096ff;
}

.x-login-page {
  padding: 80px 60px 80px 60px;
}
.x-login-page .login-page-wrapper {
  display: flex;
  justify-content: center;
}
.x-login-page .site-intro {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
.x-login-page .login-banner-bg {
  width: 460px;
}
.x-login-page .login-banner-bg img {
  display: block;
  width: 100%;
  height: 100%;
}
.x-login-page .login-card {
  width: 420px;
}

.x-login-card {
  position: relative;
  width: 100%;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
  padding: 46px 50px;
  overflow: hidden;
  height: 478px;
}
.x-login-card .loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 99;
}
.x-login-card .login-title {
  font-size: 20px;
  font-weight: 600;
}
.x-login-card .form-password {
  padding-top: 16px;
}
.x-login-card .form-item {
  position: relative;
  margin-top: 14px;
}
.x-login-card .form-item .ui-input input {
  --ui-input-height: 46px;
  --ui-input-line-height: 46px;
  padding-left: 16px;
  padding-right: 16px;
  background-color: #f3f3f3;
  border: 0;
  border-radius: 6px;
}
.x-login-card .form-item.verify-code {
  margin-top: 25px;
}
.x-login-card .form-item.verify-code .code-img {
  position: absolute;
  top: 5px;
  right: 8px;
  height: 36px;
  cursor: pointer;
  border-radius: 6px;
}
.x-login-card .form-tools {
  display: flex;
  margin-top: 20px;
}
.x-login-card .form-tools .forget-pwd {
  margin-left: auto;
}
.x-login-card .form-submit {
  margin-top: 20px;
}
.x-login-card .form-submit .ui-button {
  display: block;
  width: 100%;
  --ui-button-height: 46px;
}
.x-login-card .form-helper {
  margin-top: 20px;
  text-align: center;
}
.x-login-card .login-switch {
  position: absolute;
  top: -20px;
  right: -26px;
}
.x-login-card .login-switch-wrapper {
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  height: 128px;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 128px;
  background-size: cover;
  border: 64px solid #fff;
  border-bottom-color: transparent;
  cursor: pointer;
  transform: translateZ(0);
  border-left-color: transparent;
  box-sizing: border-box;
}
.x-login-card .login-switch-wrapper .icon {
  position: absolute;
  top: -30px;
  right: -22px;
  color: #1677ff;
  width: 50px;
  height: 50px;
}
.x-login-card .form-qrcode {
  padding: 40px 20px 10px 20px;
}
.x-login-card .wx-qrcode .qrcode {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.x-login-card .wx-qrcode .tips {
  text-align: center;
  font-weight: 600;
  margin-top: 10px;
}
.x-login-card .wx-qrcode .qrcode-mask {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto;
}
.x-login-card .wx-qrcode .qrcode-tips {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: #f3f3f3;
  border-radius: 8px;
}
.x-login-card .wx-qrcode .qrcode-tips-text {
  font-size: 14px;
  padding: 10px 0;
  color: #666;
}
.x-login-card .wx-qrcode .qrcode-tips-reload {
  font-size: 12px;
  color: #1677ff;
}
.x-login-card .wx-qrcode .qrcode-tips-loading {
  width: 8px;
  height: 30px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  background: currentColor;
  color: #cbcbcb;
  animation: animloader61 0.3s 0.3s linear infinite alternate;
}
.x-login-card .wx-qrcode .qrcode-tips-loading::after, .x-login-card .wx-qrcode .qrcode-tips-loading::before {
  content: "";
  width: 8px;
  height: 30px;
  border-radius: 4px;
  background: currentColor;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 18px;
  animation: animloader61 0.3s 0.45s linear infinite alternate;
}
.x-login-card .wx-qrcode .qrcode-tips-loading:before {
  left: -18px;
  animation-delay: 0s;
}
.x-login-card .notice-text {
  margin-top: 40px;
  font-size: 12px;
  color: #666;
}

@keyframes animloader61 {
  0% {
    height: 38px;
  }
  100% {
    height: 4.8px;
  }
}
.x-page {
  margin-top: 40px;
  margin-bottom: 60px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
}

.x-page-header {
  height: 56px;
  line-height: 56px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: solid 1px #f0f0f0;
}

.x-page-body {
  padding: 24px;
}

.x-page-content {
  font-size: 16px;
}
.x-page-content p {
  margin-block-start: 1em;
  margin-block-end: 1em;
}

.x-page-form {
  width: 100%;
  padding: 10px 0 40px 0;
  box-sizing: border-box;
}
.x-page-form.sm {
  padding-top: 20px;
  width: 500px;
  margin: 0 auto;
}
.x-page-form.md {
  padding: 0 0 20px 0;
  max-width: 900px;
  margin: 0 auto;
}
.x-page-form.md .form-md-box {
  padding: 0 40px 0 20px;
}
.x-page-form.md .form-item {
  margin-top: 30px;
}
.x-page-form.md .form-item:first-child {
  margin-top: 20px;
}
.x-page-form .form-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.x-page-form .form-item {
  display: flex;
  margin-top: 25px;
  align-items: start;
}
.x-page-form .form-item .label {
  position: relative;
  width: 90px;
  flex: 0 0 90px;
  text-align: right;
  margin-right: 20px;
  height: 40px;
  line-height: 40px;
}
.x-page-form .form-item.required .label:after {
  content: "*";
  color: red;
  position: absolute;
  top: -2px;
  right: -8px;
}
.x-page-form .form-item .ui-input {
  flex: 1 1 auto;
}
.x-page-form .form-item .ui-textarea {
  flex: 1 1 auto;
}
.x-page-form .form-item .verify-code {
  display: block;
  margin-left: 10px;
  height: 40px;
  cursor: pointer;
}
.x-page-form .form-item .radio-item {
  margin-right: 30px;
  display: inline-flex;
  align-items: center;
}
.x-page-form .form-item .radio-item label {
  padding-left: 6px;
}
.x-page-form .form-item .inline-items {
  display: flex;
  min-height: 40px;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 5px;
}
.x-page-form .form-item .inline-tips {
  color: #666;
}
.x-page-form .form-item .ui-input-number {
  width: 200px;
  margin-right: 30px;
}
.x-page-form .form-actions {
  margin-top: 40px;
  margin-inline: auto;
  width: 300px;
}
.x-page-form .form-actions .ui-button {
  display: block;
  width: 100%;
  margin-bottom: 14px;
}
.x-page-form .form-alert {
  padding: 20px 0;
  color: #666;
  line-height: 1.5;
}
.x-page-form .form-alert.center {
  text-align: center;
}
.x-page-form .form-bottom-tips {
  padding-top: 6px;
  text-align: center;
}

.x-space-page {
  display: flex;
  margin-top: 20px;
}
.x-space-page .space-aside {
  width: 200px;
  flex: 0 0 200px;
}
.x-space-page .aside-menu {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
  overflow: hidden;
  margin-right: 10px;
  padding: 10px 10px;
  height: 100%;
  box-sizing: border-box;
}
.x-space-page .aside-menu .menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
  border-radius: 8px;
  margin-top: 6px;
  margin-bottom: 6px;
  user-select: none;
}
.x-space-page .aside-menu .menu-item .unread:after {
  content: "";
  position: absolute;
  top: 2px;
  right: -4px;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background-color: #f44336;
}
.x-space-page .aside-menu .menu-item .icon {
  margin-right: 6px;
  fill: #666;
}
.x-space-page .aside-menu .menu-item .name {
  position: relative;
  color: rgba(0, 0, 0, 0.88);
}
.x-space-page .aside-menu .menu-item.active {
  background-color: #e6f4ff;
  color: #1677ff;
}
.x-space-page .aside-menu .menu-item.active:hover {
  background-color: #e6f4ff;
}
.x-space-page .aside-menu .menu-item.active .icon {
  fill: #1677ff;
}
.x-space-page .aside-menu .menu-item.active .name {
  color: #1677ff;
}
.x-space-page .aside-menu .menu-item:hover {
  background-color: rgba(0, 0, 0, 0.06);
}
.x-space-page .aside-menu .aside-divider {
  display: block;
  border-bottom: 1px solid #f1f1f1;
  box-sizing: border-box;
  margin: 8px 0;
}
.x-space-page .space-main {
  flex: 1 1 auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
  overflow: hidden;
  min-height: 600px;
}

.x-space-main-header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 56px;
  padding: 0 28px;
  border-bottom: solid 1px #f0f0f0;
}
.x-space-main-header.with-actions {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.x-space-main-header .space-main-title {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.88);
}
.x-space-main-header .space-main-right .ui-button {
  margin-left: 10px;
  --ui-button-height: 32px;
}
.x-space-main-header .space-main-tabs {
  display: flex;
}
.x-space-main-header .space-main-tabs .item {
  display: inline-flex;
  align-items: center;
  height: 56px;
  font-size: 14px;
  margin-right: 30px;
  color: rgba(0, 0, 0, 0.88);
  position: relative;
}
.x-space-main-header .space-main-tabs .item:hover {
  color: #1677ff;
}
.x-space-main-header .space-main-tabs .item.active {
  color: #1677ff;
  font-weight: 600;
}
.x-space-main-header .space-main-tabs .item.active:after {
  content: "";
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #1677ff;
}

.x-space-main-body {
  padding: 28px;
}

.x-space-form {
  width: 500px;
  margin: 0 auto;
}
.x-space-form .form-required .label {
  text-align: right;
}
.x-space-form .form-required .required .label {
  position: relative;
}
.x-space-form .form-required .required .label:after {
  content: "*";
  color: red;
  position: absolute;
  top: -2px;
  right: 0;
}
.x-space-form .form-item {
  display: flex;
  margin-top: 20px;
}
.x-space-form .form-item:first-child {
  margin-top: 0;
}
.x-space-form .form-item .label {
  width: 100px;
  margin-right: 20px;
  height: 40px;
  line-height: 40px;
  color: #666;
}
.x-space-form .form-item .content {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 40px;
}
.x-space-form .form-item .content .ui-input {
  width: 100%;
}
.x-space-form .form-item .profile-avatar {
  width: 80px;
  height: 80px;
  cursor: pointer;
  position: relative;
}
.x-space-form .form-item .profile-avatar:hover:after {
  opacity: 1;
}
.x-space-form .form-item .profile-avatar:after {
  content: "更换头像";
  display: block;
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.36);
  color: #fff;
  opacity: 0;
  transition: all ease-in-out 0.5s;
}
.x-space-form .form-item .profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.x-space-form .form-item .inline-text-value {
  margin-right: 10px;
}
.x-space-form .form-item .user-bind {
  width: 100%;
}
.x-space-form .form-item .user-bind-item {
  display: flex;
  align-items: center;
  border: solid 1px #f0f0f0;
  padding: 10px 20px;
  border-radius: 8px;
  margin-top: 10px;
}
.x-space-form .form-item .user-bind-item:first-child {
  margin-top: 0;
}
.x-space-form .form-item .user-bind-item .intro-name {
  font-size: 14px;
}
.x-space-form .form-item .user-bind-item .intro-name .bind-value {
  color: #1677ff;
  font-size: 12px;
  margin-left: 4px;
}
.x-space-form .form-item .user-bind-item .intro-remark {
  margin-top: 2px;
  font-size: 12px;
  color: #666;
}
.x-space-form .form-item .user-bind-item .icon {
  display: block;
  width: 32px;
  height: 32px;
  margin-right: 10px;
}
.x-space-form .form-item .user-bind-item .actions {
  display: flex;
  align-items: center;
  margin-left: auto;
  --ui-button-height: 32px;
}
.x-space-form .form-item .checkbox-item {
  display: inline-flex;
  margin-right: 20px;
}
.x-space-form .form-item .checkbox-item label {
  margin-left: 4px;
}
.x-space-form .form-actions {
  margin-top: 30px;
}
.x-space-form .form-actions .ui-button {
  display: block;
  width: 230px;
  margin: 0 auto;
}

.x-space-message-body-wrapper {
  padding: 14px 28px 28px 28px;
}

.x-space-message .message-item {
  display: flex;
  padding: 10px 14px;
  box-sizing: border-box;
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
}
.x-space-message .message-item:hover {
  background-color: #fbfbfb;
}
.x-space-message .message-item .icon {
  flex: 0 0 40px;
  width: 40px;
  padding-top: 2px;
}
.x-space-message .message-item .icon .status-icon {
  display: block;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  border: solid 1px #ff4d4f;
  color: #ff4d4f;
  width: 40px;
  text-align: center;
  border-radius: 6px;
  box-sizing: border-box;
}
.x-space-message .message-item.read {
  opacity: 0.6;
}
.x-space-message .message-item.read .status-icon {
  color: #666;
  border: solid 1px #666;
}
.x-space-message .message-item.read .intro-title span {
  color: #666 !important;
}
.x-space-message .message-item .intro {
  padding: 0 20px;
  flex: 1 1 auto;
}
.x-space-message .message-item .intro .intro-title {
  color: rgba(0, 0, 0, 0.88);
  width: 95%;
}
.x-space-message .message-item .intro .intro-title span {
  color: #1677ff;
}
.x-space-message .message-item .intro .intro-attrs {
  color: #666;
  font-size: 12px;
  margin-top: 4px;
}
.x-space-message .message-item .intro .intro-attrs .attr-item {
  margin-right: 8px;
}
.x-space-message .message-item .time {
  color: #666;
  flex-shrink: 0;
}

.x-space-question-body-wrapper {
  padding: 10px 28px 28px 28px;
}

.x-space-question .question-item {
  display: flex;
  padding: 12px 0;
  border-bottom: solid 1px #f0f0f0;
}
.x-space-question .question-checkbox {
  padding-top: 4px;
}
.x-space-question .question-body {
  flex: 1 1 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.x-space-question .question-attrs {
  display: flex;
  flex-wrap: wrap;
  margin-top: 4px;
}
.x-space-question .question-attrs .attr-item {
  color: #666;
  font-size: 12px;
  width: 40%;
  padding-right: 10px;
  box-sizing: border-box;
}
.x-space-question .question-reason {
  margin-top: 8px;
  background-color: #fafafa;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.x-space-question .question-reason .reason-title {
  color: #666;
}
.x-space-question .question-reason.is-admin {
  background-color: #fff9f0;
}
.x-space-question .question-title {
  padding-bottom: 2px;
}
.x-space-question .question-title a {
  color: rgba(0, 0, 0, 0.88);
}
.x-space-question .question-title a:hover {
  color: #1677ff;
}
.x-space-question .question-title .status {
  display: inline-block;
  font-size: 12px;
  padding: 2px 10px;
  background-color: #dcdcdc;
  box-sizing: border-box;
  margin-right: 6px;
  border-radius: 6px;
  color: #fff;
}
.x-space-question .question-actions {
  flex-shrink: 0;
  width: 100px;
  margin-left: 100px;
}
.x-space-question .question-actions .actions-wrapper {
  display: flex;
  justify-content: end;
  flex-direction: column;
}
.x-space-question .question-actions .ui-button {
  display: block;
  font-size: 13px;
  margin-left: 4px;
  margin-bottom: 4px;
  --ui-button-height: 28px;
}
.x-space-question .answer-status {
  color: #666;
  padding: 1px 6px;
  background: #f5f5f5;
}
.x-space-question .answer-status.success {
  color: #47c337;
  background: #ecffea;
}
.x-space-question .answer-status.reject {
  color: #f44336;
  background: #fff4f3;
}
.x-space-question .answer-status.cancel {
  color: #607D8B;
  background: #e3f6ff;
}
.x-space-question .question-file-attr {
  margin-top: 8px;
  display: flex;
}
.x-space-question .question-file {
  display: flex;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
}
.x-space-question .question-file:hover .file-name {
  color: #1677ff;
}
.x-space-question .question-file .file-icon {
  display: block;
  width: 22px;
  height: 22px;
}
.x-space-question .question-file .file-name {
  display: block;
  padding-left: 4px;
  font-size: 12px;
}

.x-space-footer {
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;
}
.x-space-footer.mt-xs {
  margin-top: 10px;
}
.x-space-footer .footer-action {
  display: flex;
  align-items: center;
}
.x-space-footer .footer-action .all-checkbox label {
  margin-left: 2px;
}
.x-space-footer .footer-action .action-buttons {
  margin-left: 20px;
  display: flex;
  min-height: 32px;
}
.x-space-footer .footer-action .action-buttons .ui-button {
  display: block;
  --ui-button-height: 32px;
  margin-left: 10px;
}
.x-space-footer .footer-pager {
  margin-left: auto;
}

.x-space-coin-body-wrapper {
  padding: 20px 28px 28px 28px;
}

.x-space-coin-header {
  display: flex;
  flex-wrap: wrap;
}
.x-space-coin-header .coin-card {
  border-radius: 8px;
  min-width: 200px;
  padding: 10px 10px;
  margin-right: 20px;
  margin-bottom: 10px;
}
.x-space-coin-header .coin-card:last-child {
  margin-right: 0;
}
.x-space-coin-header .coin-card .card-title {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 13px;
  padding-bottom: 4px;
}
.x-space-coin-header .coin-card .card-title .icon {
  width: 18px;
  height: 18px;
  margin-right: 4px;
}
.x-space-coin-header .coin-card .card-body {
  padding: 0 10px;
  display: flex;
  align-items: center;
  height: 46px;
}
.x-space-coin-header .coin-card .card-body .ui-button {
  --ui-button-height: 38px;
  width: 100%;
}
.x-space-coin-header .coin-card .coin-value {
  font-size: 24px;
  font-weight: bold;
}

.x-space-coin-body .coin-table {
  border: 0;
}
.x-space-coin-body .coin-table th {
  padding-top: 10px;
  padding-bottom: 10px;
}
.x-space-coin-body .coin-table tbody td {
  border-bottom: 0;
}
.x-space-coin-body .coin-table .coin-table-remark {
  color: #666;
}
.x-space-coin-body .coin-table .coin-table-value {
  font-size: 14px;
  display: flex;
  font-weight: 600;
}
.x-space-coin-body .coin-table .coin-table-value .op {
  font-size: 12px;
  margin-right: 4px;
  min-width: 9px;
}
.x-space-coin-body .coin-table .coin-table-value.dec {
  color: #f44336;
}

.x-space-reward {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  box-sizing: border-box;
}
.x-space-reward .reward-item {
  display: flex;
  width: calc(50% - 10px);
  padding: 10px 20px;
  border-radius: 8px;
  box-sizing: border-box;
}
.x-space-reward .reward-item .reward-body {
  padding-right: 10px;
  box-sizing: border-box;
}
.x-space-reward .reward-item .reward-header {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.x-space-reward .reward-item .reward-header .icon {
  display: block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.x-space-reward .reward-item .reward-header .name {
  font-size: 16px;
  margin-right: 20px;
}
.x-space-reward .reward-item .reward-header .score {
  display: block;
  height: 22px;
  line-height: 22px;
  border-radius: 22px;
  padding: 0 20px;
  background-color: #faede6;
  color: #ff5b01;
  font-size: 13px;
}
.x-space-reward .reward-item .reward-remark {
  font-size: 13px;
  color: #666;
  height: 40px;
}
.x-space-reward .reward-item .reward-action {
  margin-left: auto;
  flex-shrink: 0;
}
.x-space-reward .reward-item .reward-action .ui-button {
  --ui-button-height: 32px;
  width: 100px;
}

.x-space-recharge {
  max-width: 520px;
  margin: 0 auto;
}
.x-space-recharge .recharge-alert {
  font-size: 13px;
  background-color: #f7fbff;
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.x-space-recharge .recharge-title {
  font-size: 14px;
  padding: 10px 0;
  color: #666;
}
.x-space-recharge .recharge-moneys {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 10px;
}
.x-space-recharge .recharge-money-item {
  padding: 10px 20px;
  box-sizing: border-box;
  border-radius: 8px;
  border: solid 1px #f0f0f0;
  text-align: center;
  min-width: 160px;
  cursor: pointer;
}
.x-space-recharge .recharge-money-item.active {
  border: solid 1px #1677ff;
}
.x-space-recharge .recharge-money-item .money-value {
  font-size: 19px;
  font-weight: bold;
}
.x-space-recharge .recharge-money-item .money-value span {
  font-size: 12px;
  margin-left: 2px;
}
.x-space-recharge .recharge-money-item .coin-value {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}
.x-space-recharge .recharge-types {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.x-space-recharge .recharge-type-item {
  display: flex;
  align-items: center;
  padding: 8px 20px;
  box-sizing: border-box;
  border-radius: 8px;
  border: solid 1px #f0f0f0;
  text-align: center;
  min-width: 160px;
  cursor: pointer;
}
.x-space-recharge .recharge-type-item.active {
  border: solid 1px #1677ff;
}
.x-space-recharge .recharge-type-item .icon {
  width: 30px;
  height: 30px;
}
.x-space-recharge .recharge-type-item .name {
  margin-left: 10px;
}
.x-space-recharge .recharge-actions {
  margin-top: 50px;
  padding-bottom: 30px;
}
.x-space-recharge .recharge-actions .ui-button {
  width: 100%;
}