@charset "UTF-8";
:root, page {
  --pixel-default: 1px;
  --pixel: 1px;
  --font-size: 12px;
  --default-text: var(--font-size);
  --maximum-text: calc(var(--font-size) * 3);
  --bigger-text: calc(var(--font-size) * 2);
  --large-text: calc(var(--font-size) * 1.4);
  --small-text: calc(var(--font-size) * 0.8);
  --tiny-text: calc(var(--font-size) * 0.7);
  --padding-width: calc(var(--pixel) * 10);
  --half-padding-width: calc(var(--pixel) * 5);
  --margin-width: calc(var(--pixel) * 10);
  --half-margin-width: calc(var(--pixel) * 5);
  --border-radius-width: calc(var(--pixel) * 5);
  --background-color: #f9f9f9;
  --background-color-deep: #eeeeee;
  --border-color: #ccc;
  /**
    以下是颜色变量，
   */
  --color-primary: #3880ff;
  --color-primary-primary: #ffffff;
  --color-primary-content: #ffffff;
  --color-primary-active: #2775ff;
  --color-primary-active-content: #ffffff;
  --color-primary-light: #508fff;
  --color-primary-light-content: #d4e3ff;
  --color-primary-light-active: #3880ff;
  --color-primary-light-active-content: #ffffff;
  --color-secondary: #3dc2ff;
  --color-secondary-primary: #ffffff;
  --color-secondary-content: #ffffff;
  --color-secondary-active: #50c8ff;
  --color-secondary-active-content: #ffffff;
  --color-secondary-light: #36abe0;
  --color-secondary-light-content: #ffffff;
  --color-secondary-light-active: #50c8ff;
  --color-secondary-light-active-content: #ffffff;
  --color-danger: #e4393c;
  --color-danger-primary: #ffffff;
  --color-danger-content: #ffffff;
  --color-danger-active: #e75356;
  --color-danger-active-content: #ffffff;
  --color-danger-light: #e4393c;
  --color-danger-light-content: #ffffff;
  --color-danger-light-active: #e75356;
  --color-danger-light-active-content: #ffffff;
  --color-light: #ffffff;
  --color-light-primary: var(--color-primary);
  --color-light-content: #222222;
  --color-light-active: #eeeeee;
  --color-light-active-content: #666666;
  --color-light-light: #ffffff;
  --color-light-light-content: #999999;
  --color-light-light-active: #f9f9f9;
  --color-light-light-active-content: #666666;
  --color-dark: #222222;
  --color-dark-primary: #ffffff;
  --color-dark-content: #ffffff;
  --color-dark-active: #2b2b2b;
  --color-dark-active-content: #ffffff;
  --color-dark-light: #222222;
  --color-dark-light-content: #ffffff;
  --color-dark-light-active: #2b2b2b;
  --color-dark-light-active-content: #ffffff;
  --color-medium: #999999;
  --color-medium-primary: var(--color-primary);
  --color-medium-content: #ffffff;
  --color-medium-active: #aaaaaa;
  --color-medium-active-content: #ffffff;
  --color-medium-light: #999999;
  --color-medium-light-content: #ffffff;
  --color-medium-light-active: #aaaaaa;
  --color-medium-light-active-content: #ffffff;
  --color-gold-deep: #e8ae5d;
  --color-gold-deep-primary: #ffffff;
  --color-gold-deep-content: #ffffff;
  --color-gold-deep-active: #f8dca1;
  --color-gold-deep-active-content: #ffffff;
  --color-gold-deep-light: #f8dca1;
  --color-gold-deep-light-content: #ffffff;
  --color-gold-deep-light-active: #ffe6b0;
  --color-gold-deep-light-active-content: #fff;
  --color-gold: #f8dca1;
  --color-gold-primary: #222222;
  --color-gold-content: #222222;
  --color-gold-active: #ffe6b0;
  --color-gold-active-content: #222222;
  --color-gold-light: #ffe6b0;
  --color-gold-light-content: #666666;
  --color-gold-light-active: #ffeac0;
  --color-gold-light-active-content: #222222;
  --safe-area-inset-left: env(safe-area-inset-left);
  --safe-area-inset-right: env(safe-area-inset-right);
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  --color-base: var(--color-light);
  --color-base-primary: var(--color-light-primary);
  --color-base-content: var(--color-light-content);
  --color-base-active: var(--color-light-active);
  --color-base-active-content: var(--color-light-active-content);
  --color-base-light: var(--color-light-light);
  --color-base-light-content: var(--color-light-light-content);
  --color-base-light-active: var(--color-light-light-active);
  --color-base-light-active-content: var(--color-light-light-active-content);
  --color-wechat: #00C800;
  --color-wechat-primary: #ffffff;
  --color-wechat-content: #ffffff;
  --color-wechat-light: #02ef02;
  --color-wechat-light-content: #ffffff;
  --color-wechat-active: #02ef02;
  --color-wechat-active-content: #ffffff;
  --color-wechat-light-active: #00ff00;
  --color-wechat-light-active-content: #ffffff;
  --color-alipay: #456fff;
  --color-alipay-primary: #ffffff;
  --color-alipay-content: #ffffff;
  --color-alipay-light: #557bff;
  --color-alipay-light-content: #ffffff;
  --color-alipay-active: #557bff;
  --color-alipay-active-content: #ffffff;
  --color-alipay-light-active: #698bff;
  --color-alipay-light-active-content: #ffffff;
  font-size: var(--font-size);
  background-color: var(--background-color);
  --maximum-image-width: calc(var(--pixel) * 120);
  --bigger-image-width: calc(var(--pixel) * 100);
  --large-image-width: calc(var(--pixel) * 80);
  --image-width: calc(var(--pixel) * 60);
  --default-image-width: calc(var(--pixel) * 60);
  --small-image-width: calc(var(--pixel) * 40);
  --tiny-image-width: calc(var(--pixel) * 36);
}

.one-line-text, .ui-tag.preview .text, .ui-list.news-list .desc {
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.fn-flex-justify-center, .ui-icon-button .badge, .ui-icon-menu-buttons .button .badge, .ui-icon-button, .ui-icon-menu-buttons .button, .ui-icon-menu-buttons .ui-icon-button, .ui-tab-buttons .button, .ui-tab .ui-tab-switch .button, .ui-item .thumbnail.icon, .ui-item .thumb.icon, .ui-item .preview.icon, .ui-media-item .thumbnail.icon, .ui-media-item .thumb.icon, .ui-media-item .preview.icon, .ui-item .start, .ui-media-item .start, .ui-search-bar .end, .ui-search-bar .icon {
  display: flex;
  flex-flow: column;
  justify-content: center;
  text-align: center;
}

.fn-inline-flex-justify-center, .ui-tag, .ui-button {
  display: inline-flex;
  flex-flow: column;
  justify-content: center;
  text-align: center;
}

.ui-button {
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  padding: 0 var(--padding-width);
  border-radius: var(--border-radius-width);
  height: calc(var(--pixel) * 36);
  background: var(--color-base-light);
  color: var(--color-base-light-content);
}
.ui-button.outline, .ui-button.clear {
  background: none;
  border: solid var(--pixel) var(--color-base-content);
  color: var(--color-base-content);
}
.ui-button:active {
  background: var(--color-base-active);
  color: var(--color-base-active-content);
}
.ui-button.clear {
  border: none !important;
}
.ui-button.clear:active {
  background: none;
}
.ui-button.slide-background {
  overflow: hidden;
  position: relative;
}
.ui-button.slide-background:before {
  border-radius: var(--border-radius-width);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: -1px;
  content: "";
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
}
.ui-button.slide-background:hover:before {
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
}
.ui-button.slide-background .text {
  position: relative;
}
.ui-button.primary {
  background: var(--color-primary);
  color: var(--color-primary-content);
}
.ui-button.primary:active {
  background: var(--color-primary-active);
  color: var(--color-primary-active-content) !important;
}
.ui-button.primary.slide-background:before {
  background: var(--color-primary-active);
}
.ui-button.primary.slide-background:hover {
  background: var(--color-primary);
}
.ui-button.primary.outline, .ui-button.primary.clear {
  border: solid var(--pixel) var(--color-primary);
  color: var(--color-primary);
  background: var(--color-base-light);
}
.ui-button.primary.outline:active, .ui-button.primary.clear:active {
  background: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
}
.ui-button.primary.clear {
  background: none;
}
.ui-button.primary.clear:active {
  color: var(--color-primary-active) !important;
  background: none !important;
}
.ui-button.secondary {
  background: var(--color-secondary);
  color: var(--color-secondary-content);
}
.ui-button.secondary:active {
  background: var(--color-secondary-active);
  color: var(--color-secondary-active-content) !important;
}
.ui-button.secondary.slide-background:before {
  background: var(--color-secondary-active);
}
.ui-button.secondary.slide-background:hover {
  background: var(--color-secondary);
}
.ui-button.secondary.outline, .ui-button.secondary.clear {
  border: solid var(--pixel) var(--color-secondary);
  color: var(--color-secondary);
  background: var(--color-base-light);
}
.ui-button.secondary.outline:active, .ui-button.secondary.clear:active {
  background: var(--color-secondary) !important;
  color: var(--color-secondary-content) !important;
}
.ui-button.secondary.clear {
  background: none;
}
.ui-button.secondary.clear:active {
  color: var(--color-secondary-active) !important;
  background: none !important;
}
.ui-button.danger {
  background: var(--color-danger);
  color: var(--color-danger-content);
}
.ui-button.danger:active {
  background: var(--color-danger-active);
  color: var(--color-danger-active-content) !important;
}
.ui-button.danger.slide-background:before {
  background: var(--color-danger-active);
}
.ui-button.danger.slide-background:hover {
  background: var(--color-danger);
}
.ui-button.danger.outline, .ui-button.danger.clear {
  border: solid var(--pixel) var(--color-danger);
  color: var(--color-danger);
  background: var(--color-base-light);
}
.ui-button.danger.outline:active, .ui-button.danger.clear:active {
  background: var(--color-danger) !important;
  color: var(--color-danger-content) !important;
}
.ui-button.danger.clear {
  background: none;
}
.ui-button.danger.clear:active {
  color: var(--color-danger-active) !important;
  background: none !important;
}
.ui-button.light {
  background: var(--color-light);
  color: var(--color-light-content);
}
.ui-button.light:active {
  background: var(--color-light-active);
  color: var(--color-light-active-content) !important;
}
.ui-button.light.slide-background:before {
  background: var(--color-light-active);
}
.ui-button.light.slide-background:hover {
  background: var(--color-light);
}
.ui-button.light.outline, .ui-button.light.clear {
  border: solid var(--pixel) var(--color-light);
  color: var(--color-light);
  background: var(--color-base-light);
}
.ui-button.light.outline:active, .ui-button.light.clear:active {
  background: var(--color-light) !important;
  color: var(--color-light-content) !important;
}
.ui-button.light.clear {
  background: none;
}
.ui-button.light.clear:active {
  color: var(--color-light-active) !important;
  background: none !important;
}
.ui-button.dark {
  background: var(--color-dark);
  color: var(--color-dark-content);
}
.ui-button.dark:active {
  background: var(--color-dark-active);
  color: var(--color-dark-active-content) !important;
}
.ui-button.dark.slide-background:before {
  background: var(--color-dark-active);
}
.ui-button.dark.slide-background:hover {
  background: var(--color-dark);
}
.ui-button.dark.outline, .ui-button.dark.clear {
  border: solid var(--pixel) var(--color-dark);
  color: var(--color-dark);
  background: var(--color-base-light);
}
.ui-button.dark.outline:active, .ui-button.dark.clear:active {
  background: var(--color-dark) !important;
  color: var(--color-dark-content) !important;
}
.ui-button.dark.clear {
  background: none;
}
.ui-button.dark.clear:active {
  color: var(--color-dark-active) !important;
  background: none !important;
}
.ui-button.medium {
  background: var(--color-medium);
  color: var(--color-medium-content);
}
.ui-button.medium:active {
  background: var(--color-medium-active);
  color: var(--color-medium-active-content) !important;
}
.ui-button.medium.slide-background:before {
  background: var(--color-medium-active);
}
.ui-button.medium.slide-background:hover {
  background: var(--color-medium);
}
.ui-button.medium.outline, .ui-button.medium.clear {
  border: solid var(--pixel) var(--color-medium);
  color: var(--color-medium);
  background: var(--color-base-light);
}
.ui-button.medium.outline:active, .ui-button.medium.clear:active {
  background: var(--color-medium) !important;
  color: var(--color-medium-content) !important;
}
.ui-button.medium.clear {
  background: none;
}
.ui-button.medium.clear:active {
  color: var(--color-medium-active) !important;
  background: none !important;
}
.ui-button.gold {
  background: var(--color-gold);
  color: var(--color-gold-content);
}
.ui-button.gold:active {
  background: var(--color-gold-active);
  color: var(--color-gold-active-content) !important;
}
.ui-button.gold.slide-background:before {
  background: var(--color-gold-active);
}
.ui-button.gold.slide-background:hover {
  background: var(--color-gold);
}
.ui-button.gold.outline, .ui-button.gold.clear {
  border: solid var(--pixel) var(--color-gold);
  color: var(--color-gold);
  background: var(--color-base-light);
}
.ui-button.gold.outline:active, .ui-button.gold.clear:active {
  background: var(--color-gold) !important;
  color: var(--color-gold-content) !important;
}
.ui-button.gold.clear {
  background: none;
}
.ui-button.gold.clear:active {
  color: var(--color-gold-active) !important;
  background: none !important;
}
.ui-button.gold-deep {
  background: var(--color-gold-deep);
  color: var(--color-gold-deep-content);
}
.ui-button.gold-deep:active {
  background: var(--color-gold-deep-active);
  color: var(--color-gold-deep-active-content) !important;
}
.ui-button.gold-deep.slide-background:before {
  background: var(--color-gold-deep-active);
}
.ui-button.gold-deep.slide-background:hover {
  background: var(--color-gold-deep);
}
.ui-button.gold-deep.outline, .ui-button.gold-deep.clear {
  border: solid var(--pixel) var(--color-gold-deep);
  color: var(--color-gold-deep);
  background: var(--color-base-light);
}
.ui-button.gold-deep.outline:active, .ui-button.gold-deep.clear:active {
  background: var(--color-gold-deep) !important;
  color: var(--color-gold-deep-content) !important;
}
.ui-button.gold-deep.clear {
  background: none;
}
.ui-button.gold-deep.clear:active {
  color: var(--color-gold-deep-active) !important;
  background: none !important;
}
.ui-button.wechat {
  background: var(--color-wechat);
  color: var(--color-wechat-content);
}
.ui-button.wechat:active {
  background: var(--color-wechat-active);
  color: var(--color-wechat-active-content) !important;
}
.ui-button.wechat.slide-background:before {
  background: var(--color-wechat-active);
}
.ui-button.wechat.slide-background:hover {
  background: var(--color-wechat);
}
.ui-button.wechat.outline, .ui-button.wechat.clear {
  border: solid var(--pixel) var(--color-wechat);
  color: var(--color-wechat);
  background: var(--color-base-light);
}
.ui-button.wechat.outline:active, .ui-button.wechat.clear:active {
  background: var(--color-wechat) !important;
  color: var(--color-wechat-content) !important;
}
.ui-button.wechat.clear {
  background: none;
}
.ui-button.wechat.clear:active {
  color: var(--color-wechat-active) !important;
  background: none !important;
}
.ui-button.alipay {
  background: var(--color-alipay);
  color: var(--color-alipay-content);
}
.ui-button.alipay:active {
  background: var(--color-alipay-active);
  color: var(--color-alipay-active-content) !important;
}
.ui-button.alipay.slide-background:before {
  background: var(--color-alipay-active);
}
.ui-button.alipay.slide-background:hover {
  background: var(--color-alipay);
}
.ui-button.alipay.outline, .ui-button.alipay.clear {
  border: solid var(--pixel) var(--color-alipay);
  color: var(--color-alipay);
  background: var(--color-base-light);
}
.ui-button.alipay.outline:active, .ui-button.alipay.clear:active {
  background: var(--color-alipay) !important;
  color: var(--color-alipay-content) !important;
}
.ui-button.alipay.clear {
  background: none;
}
.ui-button.alipay.clear:active {
  color: var(--color-alipay-active) !important;
  background: none !important;
}
.ui-button.round {
  border-radius: calc(var(--pixel) * 36);
  padding-left: calc(var(--padding-width) * 2);
  padding-right: calc(var(--padding-width) * 2);
}
.ui-button.circle {
  border-radius: calc(var(--pixel) * 36);
  width: calc(var(--pixel) * 36);
  height: calc(var(--pixel) * 36);
  overflow: hidden;
  padding: 0 !important;
}
.ui-button.block, .ui-button.full, .ui-button.column {
  display: flex;
}
.ui-button.large {
  height: calc(var(--pixel) * 42);
  font-size: calc(var(--font-size) * 1.2);
}
.ui-button.large.round {
  padding-left: calc(var(--padding-width));
  padding-right: calc(var(--padding-width));
}
.ui-button.large.circle {
  width: calc(var(--pixel) * 42);
}
.ui-button.small {
  height: calc(var(--pixel) * 30);
}
.ui-button.small.round {
  padding-left: calc(var(--padding-width) * 1.5);
  padding-right: calc(var(--padding-width) * 1.5);
}
.ui-button.small.circle {
  width: calc(var(--pixel) * 30);
}
.ui-button.tiny {
  height: calc(var(--pixel) * 22);
  font-size: calc(var(--font-size) * 0.8);
}
.ui-button.tiny.round {
  padding-left: calc(var(--padding-width));
  padding-right: calc(var(--padding-width));
}
.ui-button.tiny.circle {
  width: calc(var(--pixel) * 22);
}
.ui-button.column {
  padding: 0 !important;
}

button.ui-button {
  width: auto;
  font-size: 1em !important;
  font-weight: normal !important;
  flex-flow: column !important;
  border: none;
  user-select: none;
}
button.ui-button.block {
  width: 100%;
}
button.ui-button:active {
  border: none;
}

a.ui-button:hover {
  text-decoration: none !important;
}

.ui-flex-row, .ui-tab-bar {
  padding: calc(var(--padding-width) / 2);
  display: flex;
  flex-flow: row;
}
.ui-flex-row .column, .ui-tab-bar .column {
  display: flex;
  flex-flow: column;
  justify-content: center;
  flex: 1;
  margin: calc(var(--margin-width) / 2);
}
.ui-flex-row.scroll-view, .ui-tab-bar.scroll-view {
  white-space: nowrap;
  display: block;
  min-height: calc(var(--pixel) * 40);
}
.ui-flex-row.scroll-view .column, .ui-tab-bar.scroll-view .column {
  display: inline-flex;
  flex: content;
  padding: var(--padding-width);
  min-height: calc(var(--pixel) * 40);
}
.ui-flex-row.auto-left-align, .ui-tab-bar.auto-left-align {
  display: block;
  overflow: auto;
}
.ui-flex-row.auto-left-align .column, .ui-tab-bar.auto-left-align .column {
  float: left;
}

.ui-tab-bar {
  padding: 0;
}
.ui-tab-bar .column {
  margin: 0;
  padding: var(--padding-width) 0;
  position: relative;
  text-align: center;
  color: var(--color-base-light-content);
}
.ui-tab-bar .column::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 5%;
  left: 30%;
  width: 40%;
  height: calc(var(--pixel) * 2);
}
.ui-tab-bar .column.active {
  color: var(--color-base-primary);
}
.ui-tab-bar .column.active::after {
  background: var(--color-base-primary);
}
.ui-tab-bar .column.split {
  flex: 0;
  position: relative;
  overflow: visible;
}
.ui-tab-bar .column.split:before {
  content: "";
  height: 50%;
  top: 25%;
  border-right: solid var(--pixel) var(--color-base-light-content);
}
.ui-tab-bar.bottom .column::after {
  top: 0;
  bottom: auto;
}

.ui-flex-column {
  display: flex;
  flex-flow: column;
}
.ui-flex-column .flex-container {
  flex: 1;
  display: flex;
  flex-flow: column;
}

.ui-search-bar {
  display: flex;
  flex-flow: row;
  border: solid var(--pixel) var(--color-base-active);
  background: var(--color-base-light);
  color: var(--color-base-light-content);
  height: calc(var(--pixel) * 36);
  border-radius: calc(var(--pixel) * 36);
}
.ui-search-bar .icon {
  padding: 0 calc(var(--pixel) * 10);
}
.ui-search-bar .keywords {
  flex: 1;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.ui-search-bar .keywords ~ .end {
  padding-left: calc(var(--pixel) * 10);
}
.ui-search-bar .end {
  padding-right: calc(var(--pixel) * 10);
}

.ui-item, .ui-media-item {
  display: flex;
  flex-flow: row;
  padding: var(--padding-width);
  min-height: calc(var(--pixel) * 50);
}
.ui-item .start.icon iconfont, .ui-media-item .start.icon iconfont {
  --iconfont-width: calc( var(--font-size) * 1);
  --iconfont-height: calc( var(--font-size) * 1);
}
.ui-item .start ~ .item-label, .ui-media-item .start ~ .item-label {
  padding-left: var(--padding-width);
}
.ui-item .thumbnail, .ui-item .thumb, .ui-item .preview, .ui-media-item .thumbnail, .ui-media-item .thumb, .ui-media-item .preview {
  width: var(--image-width);
  height: var(--image-width);
}
.ui-item .thumbnail image, .ui-item .thumbnail img, .ui-item .thumb image, .ui-item .thumb img, .ui-item .preview image, .ui-item .preview img, .ui-media-item .thumbnail image, .ui-media-item .thumbnail img, .ui-media-item .thumb image, .ui-media-item .thumb img, .ui-media-item .preview image, .ui-media-item .preview img {
  width: 100%;
  height: 100%;
}
.ui-item .thumbnail.radius image, .ui-item .thumbnail.radius img, .ui-item .thumb.radius image, .ui-item .thumb.radius img, .ui-item .preview.radius image, .ui-item .preview.radius img, .ui-media-item .thumbnail.radius image, .ui-media-item .thumbnail.radius img, .ui-media-item .thumb.radius image, .ui-media-item .thumb.radius img, .ui-media-item .preview.radius image, .ui-media-item .preview.radius img {
  border-radius: var(--border-radius-width);
}
.ui-item .thumbnail.round image, .ui-item .thumbnail.round img, .ui-item .thumb.round image, .ui-item .thumb.round img, .ui-item .preview.round image, .ui-item .preview.round img, .ui-media-item .thumbnail.round image, .ui-media-item .thumbnail.round img, .ui-media-item .thumb.round image, .ui-media-item .thumb.round img, .ui-media-item .preview.round image, .ui-media-item .preview.round img {
  border-radius: 50%;
}
.ui-item .thumbnail ~ .item-label, .ui-item .thumb ~ .item-label, .ui-item .preview ~ .item-label, .ui-media-item .thumbnail ~ .item-label, .ui-media-item .thumb ~ .item-label, .ui-media-item .preview ~ .item-label {
  padding-left: var(--padding-width);
}
.ui-item .thumbnail.icon, .ui-item .thumb.icon, .ui-item .preview.icon, .ui-media-item .thumbnail.icon, .ui-media-item .thumb.icon, .ui-media-item .preview.icon {
  width: calc(var(--pixel) * 22);
  height: calc(var(--pixel) * 22);
}
.ui-item .thumbnail.icon image, .ui-item .thumbnail.icon img, .ui-item .thumb.icon image, .ui-item .thumb.icon img, .ui-item .preview.icon image, .ui-item .preview.icon img, .ui-media-item .thumbnail.icon image, .ui-media-item .thumbnail.icon img, .ui-media-item .thumb.icon image, .ui-media-item .thumb.icon img, .ui-media-item .preview.icon image, .ui-media-item .preview.icon img {
  width: calc(var(--pixel) * 22);
  height: calc(var(--pixel) * 22);
}
.ui-item .thumbnail.auto-width, .ui-item .thumb.auto-width, .ui-item .preview.auto-width, .ui-media-item .thumbnail.auto-width, .ui-media-item .thumb.auto-width, .ui-media-item .preview.auto-width {
  width: auto !important;
}
.ui-item .thumbnail.auto-width image, .ui-item .thumbnail.auto-width img, .ui-item .thumb.auto-width image, .ui-item .thumb.auto-width img, .ui-item .preview.auto-width image, .ui-item .preview.auto-width img, .ui-media-item .thumbnail.auto-width image, .ui-media-item .thumbnail.auto-width img, .ui-media-item .thumb.auto-width image, .ui-media-item .thumb.auto-width img, .ui-media-item .preview.auto-width image, .ui-media-item .preview.auto-width img {
  width: auto !important;
}
.ui-item .item-label, .ui-media-item .item-label {
  display: flex;
  flex-flow: column;
  justify-content: center;
  flex: 1;
}
.ui-item .item-label ~ .end, .ui-media-item .item-label ~ .end {
  padding-left: var(--padding-width);
}
.ui-item .item-label.align-top, .ui-media-item .item-label.align-top {
  justify-content: start;
}
.ui-item .end, .ui-media-item .end {
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.ui-item .end .ui-button, .ui-media-item .end .ui-button {
  height: 100%;
  padding: 0 var(--half-padding-width);
}
.ui-item.active, .ui-item:active, .ui-media-item.active, .ui-media-item:active {
  background: var(--color-base-light-active);
}
.ui-item.touch:active, .ui-media-item.touch:active {
  background-color: var(--color-base-light-active) !important;
}
.ui-item.untouch:active, .ui-media-item.untouch:active {
  background-color: transparent !important;
}

.ui-media-item .item-label .title ~ .desc {
  padding-top: var(--half-margin-width);
}
.ui-media-item .item-label .desc {
  font-size: var(--small-text);
}
.ui-media-item .item-label .desc ~ .info {
  padding-top: var(--half-margin-width);
}
.ui-media-item .item-label .info {
  color: var(--color-base-light-content);
  font-size: var(--tiny-text);
}

.ui-list {
  background: var(--color-base-light);
}
.ui-list .ui-item, .ui-list .ui-media-item {
  position: relative;
}
.ui-list .ui-item::before, .ui-list .ui-item::after, .ui-list .ui-media-item::before, .ui-list .ui-media-item::after {
  content: "";
  position: absolute;
  left: var(--margin-width);
  width: calc(100% - var(--margin-width));
  display: block;
  border-top: solid var(--pixel-default) var(--color-base-active);
}
.ui-list .ui-item::after, .ui-list .ui-media-item::after {
  bottom: 0;
  display: none;
}
.ui-list .ui-item::before, .ui-list .ui-media-item::before {
  top: 0;
}
.ui-list .ui-item:first-child::before, .ui-list .ui-media-item:first-child::before {
  left: 0;
  width: 100%;
}
.ui-list .ui-item:last-child::after, .ui-list .ui-media-item:last-child::after {
  left: 0;
  width: 100%;
  display: block;
}
.ui-list .ui-item + .item-divider::before, .ui-list .ui-media-item + .item-divider::before {
  display: block;
}
.ui-list .item-divider {
  position: relative;
  display: flex;
  flex-flow: row;
  padding: var(--padding-width);
  border-bottom: solid var(--pixel-default) var(--color-base-active);
  font-size: var(--small-text);
  color: var(--color-base-light-content);
  min-height: calc(var(--pixel-default) * 42);
}
.ui-list .item-divider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: none;
  border-top: solid var(--pixel-default) var(--color-base-active);
}
.ui-list .item-divider:last-child {
  border-bottom: none;
}
.ui-list .item-divider .item-label {
  display: flex;
  flex-flow: column;
  justify-content: center;
  flex: 1;
}
.ui-list .item-divider .item-label ~ .end {
  padding-left: var(--padding-width);
}
.ui-list .item-divider + .ui-media-item::before, .ui-list .item-divider + .ui-item::before {
  display: none;
}
.ui-list.no-border .ui-item:before, .ui-list.no-border .ui-item:after, .ui-list.no-border .ui-media-item:before, .ui-list.no-border .ui-media-item:after, .ui-list.no-border .item-divider:before, .ui-list.no-border .item-divider:after {
  display: none;
}
.ui-list.border {
  border: solid var(--pixel-default) var(--color-base-active);
}
.ui-list.border .ui-item:first-child:before, .ui-list.border .ui-media-item:first-child:before, .ui-list.border .item-divider:first-child:before {
  display: none;
}
.ui-list.border .ui-item:last-child:after, .ui-list.border .ui-media-item:last-child:after, .ui-list.border .item-divider:last-child:after {
  display: none;
}
.ui-list.touch .ui-item:active, .ui-list.touch .ui-media-item:active {
  background: var(--color-base-light-active) !important;
}
.ui-list.untouch .ui-item:active, .ui-list.untouch .ui-media-item:active {
  background: transparent !important;
}
.ui-list.news-list .title {
  font-weight: bold;
}
.ui-list.news-list .title ~ .desc {
  padding-top: calc(var(--padding-width) * 0.5);
}
.ui-list.news-list .title ~ .info {
  padding-top: calc(var(--padding-width) * 0.5);
}
.ui-list.news-list .desc {
  font-size: var(--small-text);
}
.ui-list.news-list .info {
  padding-top: calc(var(--padding-width) * 0.5);
  font-size: var(--small-text);
  color: var(--color-base-light-content);
}
.ui-list.form .ui-item:active, .ui-list.form .ui-media-item:active {
  background: transparent;
}
.ui-list.form .start {
  display: flex;
  flex-flow: column;
  min-width: calc(60 * var(--pixel));
  justify-content: center;
  font-weight: bold;
  text-align: left;
}
.ui-list.form .start.normal-content {
  justify-content: normal;
}
.ui-list.form .start.attach {
  justify-content: normal;
}
.ui-list.form .start.icon {
  min-width: calc(16 * var(--pixel));
}
.ui-list.form .item-label .title {
  font-weight: normal;
}
.ui-list.form .item-label .title.placeholder {
  color: var(--color-base-light-content);
}
.ui-list.form .item-label textarea {
  width: 100%;
}
.ui-list.form .item-label ion-input, .ui-list.form .item-label ion-textarea {
  overflow: hidden;
  --padding-top: 0!important;
  --padding-start: 0!important;
  --padding-end: 0!important;
  --padding-bottom: 0!important;
}
.ui-list.form .item-label ion-input input, .ui-list.form .item-label ion-input textarea, .ui-list.form .item-label ion-textarea input, .ui-list.form .item-label ion-textarea textarea {
  height: 100%;
}

.ui-message {
  padding: var(--padding-width);
  background: rgba(255, 255, 255, 0.2);
  font-size: var(--small-text);
  color: var(--color-base-light-content);
  border-radius: var(--border-radius-width);
}
.ui-message.dark {
  background: rgba(0, 0, 0, 0.05);
}

.ui-qrcode image {
  width: calc(var(--pixel) * 220);
  height: calc(var(--pixel) * 220);
  margin: 0 auto;
}
.ui-qrcode .text {
  display: flex;
  flex-flow: row;
  margin: 0 auto;
  justify-content: center;
}
.ui-qrcode .text .tip {
  display: flex;
  flex-flow: column;
  justify-content: center;
  line-height: 1em;
}
.ui-qrcode .text .tip text {
  font-size: calc(var(--font-size) * 0.8);
}
.ui-qrcode .text .tip ~ .code {
  padding-left: var(--padding-width);
}
.ui-qrcode .text .code {
  font-size: calc(var(--font-size) * 3.6);
}
.ui-qrcode.auto {
  width: 100%;
}
.ui-qrcode.small image {
  width: calc(var(--pixel) * 150);
  height: calc(var(--pixel) * 150);
}

/* + 号按钮 */
.ui-plus-button {
  width: calc(var(--pixel) * 100);
  height: calc(var(--pixel) * 100);
  position: relative;
  border: solid var(--pixel) var(--color-medium);
  background: rgba(0, 0, 0, 0.08);
}
.ui-plus-button.radius {
  border-radius: var(--border-radius-width);
}
.ui-plus-button::before, .ui-plus-button::after {
  position: absolute;
  background: var(--color-medium);
  content: "";
  display: block;
}
.ui-plus-button::before {
  width: calc(var(--pixel) * 40);
  height: var(--pixel);
  top: 50%;
  margin-top: calc(var(--pixel) / 2);
  left: 50%;
  margin-left: calc(var(--pixel) * -20);
}
.ui-plus-button::after {
  width: var(--pixel);
  height: calc(var(--pixel) * 40);
  top: 50%;
  margin-top: calc(var(--pixel) * -20);
  margin-left: calc(var(--pixel) / 2);
  left: 50%;
}
.ui-plus-button:active {
  opacity: 0.8;
}
.ui-plus-button.light {
  border-color: var(--color-light, #fff);
}
.ui-plus-button.light::before, .ui-plus-button.light::after {
  background: var(--color-light, #fff);
}
.ui-plus-button.dashed {
  border-style: dashed;
}
.ui-plus-button.full {
  width: auto;
}

.ui-center-avatar {
  padding: calc(var(--pixel) * 30);
}
.ui-center-avatar .picture, .ui-center-avatar .avatar {
  width: calc(var(--pixel) * 100);
  margin: 0 auto;
}
.ui-center-avatar .picture image, .ui-center-avatar .picture open-data, .ui-center-avatar .avatar image, .ui-center-avatar .avatar open-data {
  width: calc(var(--pixel) * 100);
  height: calc(var(--pixel) * 100);
  border-radius: var(--border-radius-width);
}
.ui-center-avatar .picture.circle image, .ui-center-avatar .picture.circle open-data, .ui-center-avatar .avatar.circle image, .ui-center-avatar .avatar.circle open-data {
  border-radius: calc(var(--pixel) * 100);
}

.ui-flex-item {
  display: flex;
  flex-flow: row;
}
.ui-flex-item .start ~ .center {
  padding-left: var(--padding-width);
}
.ui-flex-item .center {
  display: flex;
  flex: 1;
}
.ui-flex-item .center ~ .end {
  padding-left: var(--padding-width);
}
.ui-flex-item .center .full {
  width: 100%;
}
.ui-flex-item.flex-column {
  flex-flow: column;
}
.ui-flex-item.flex-column .start ~ .center {
  padding-top: var(--padding-width);
  padding-left: 0;
}
.ui-flex-item.flex-column .center ~ .end {
  padding-left: 0;
  padding-top: var(--padding-width);
}

.ui-tab .ui-tab-switch {
  display: flex;
  flex-flow: row;
}
.ui-tab .ui-tab-switch .button {
  flex: 1;
  border-bottom: solid var(--pixel) var(--color-base-active);
  padding: var(--padding-width);
  border-radius: var(--border-radius-width) var(--border-radius-width) 0 0;
}
.ui-tab .ui-tab-switch .button.active {
  border-left: solid var(--pixel) var(--color-base-active);
  border-right: solid var(--pixel) var(--color-base-active);
  border-top: solid var(--pixel) var(--color-base-active);
  border-bottom-color: transparent;
  background: var(--color-base-light);
  font-weight: bold;
  color: var(--color-base-content);
}
.ui-tab .ui-tab-contents .ui-tab-content {
  background: var(--color-base-light);
  border: solid var(--pixel) var(--color-base-active);
  border-top: none;
  display: none;
}
.ui-tab .ui-tab-contents .ui-tab-content.active {
  display: block;
}

.ui-thumb-list {
  overflow: auto;
  padding: calc(var(--padding-width) / 2);
}
.ui-thumb-list .thumb, .ui-thumb-list .thumbnail {
  float: left;
  position: relative;
  width: calc(20% - var(--padding-width));
  padding-top: calc(20% - var(--padding-width));
  margin: calc(var(--margin-width) / 2);
  overflow: hidden;
}
.ui-thumb-list .thumb image, .ui-thumb-list .thumb .ui-plus-button, .ui-thumb-list .thumb img, .ui-thumb-list .thumbnail image, .ui-thumb-list .thumbnail .ui-plus-button, .ui-thumb-list .thumbnail img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.ui-label-info-list {
  padding: calc(var(--padding-width) / 2);
}
.ui-label-info-list .info-item {
  padding: calc(var(--padding-width) / 2);
  display: flex;
  flex-flow: row;
}
.ui-label-info-list .info-item .start {
  min-width: calc(var(--pixel) * 60);
  color: var(--color-medium);
}
.ui-label-info-list .info-item .start ~ .center {
  padding-left: var(--padding-width);
}
.ui-label-info-list .info-item .center {
  display: flex;
  flex-flow: column;
  flex: 1;
}
.ui-label-info-list .info-item .center ~ .end {
  padding-left: var(--padding-width);
}
.ui-tab-buttons {
  display: flex;
  flex-flow: row;
}
.ui-tab-buttons .button {
  flex: 1;
  height: calc(var(--pixel) * 60);
  color: var(--color-base-light-content);
}
.ui-tab-buttons .button .icon {
  font-size: calc(var(--pixel) * 27.5);
}
.ui-tab-buttons .button .text {
  font-size: var(--small-text);
  line-height: 1em;
}
.ui-tab-buttons .button.active {
  color: var(--color-base-primary);
}

.ui-icon-button, .ui-icon-menu-buttons .button, .ui-icon-menu-buttons .ui-icon-button {
  cursor: pointer;
  position: relative;
  height: calc(60 * var(--pixel));
  border-radius: var(--border-radius-width);
}
.ui-icon-button .badge, .ui-icon-menu-buttons .button .badge {
  position: absolute;
  height: calc(var(--pixel) * 20);
  border-radius: calc(var(--pixel) * 20);
  min-width: calc(var(--pixel) * 20);
  right: calc(var(--pixel) * 5);
  top: 0;
  background: var(--color-danger);
  color: var(--color-danger-content);
  font-size: var(--tiny-text);
}
.ui-icon-button .icon, .ui-icon-menu-buttons .button .icon {
  font-size: calc(27.5 * var(--pixel));
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.ui-icon-button .icon iconfont, .ui-icon-menu-buttons .button .icon iconfont {
  --iconfont-width: calc( 27.5 * var(--pixel) );
  --iconfont-height: calc( 27.5 * var(--pixel) );
  margin: 0 auto;
}
.ui-icon-button .icon image, .ui-icon-menu-buttons .button .icon image, .ui-icon-button .icon img, .ui-icon-menu-buttons .button .icon img {
  width: calc(27.5 * var(--pixel));
  height: calc(27.5 * var(--pixel));
  margin: 0 auto;
}
.ui-icon-button .icon ~ .text, .ui-icon-menu-buttons .button .icon ~ .text {
  margin-top: calc(var(--margin-width) / 2);
}
.ui-icon-button .text, .ui-icon-menu-buttons .button .text {
  font-size: var(--small-text);
  text-align: center;
}
.ui-icon-button:active, .ui-icon-menu-buttons .button:active {
  color: var(--color-base-active-content);
}
.ui-icon-button.auto-height, .ui-icon-menu-buttons .auto-height.button {
  min-height: calc(40 * var(--pixel));
  height: auto;
}
.ui-icon-button.small, .ui-icon-menu-buttons .small.button {
  height: calc(42 * var(--pixel));
}
.ui-icon-button.small .badge, .ui-icon-menu-buttons .small.button .badge {
  height: calc(var(--pixel) * 16);
  min-width: calc(var(--pixel) * 16);
}
.ui-icon-button.small .icon, .ui-icon-menu-buttons .small.button .icon {
  font-size: calc(18 * var(--pixel));
}
.ui-icon-button.small .text, .ui-icon-menu-buttons .small.button .text {
  margin-top: calc(2 * var(--pixel));
  font-size: var(--tiny-text);
}
.ui-icon-button:hover, .ui-icon-menu-buttons .button:hover {
  background: var(--background-color);
}

.ui-icon-menu-buttons {
  overflow: auto;
}
.ui-icon-menu-buttons .button, .ui-icon-menu-buttons .ui-icon-button {
  width: calc(20% - var(--margin-width));
  margin: calc(var(--margin-width) / 2);
  float: left;
}
.ui-icon-menu-buttons.small .button, .ui-icon-menu-buttons.small .ui-icon-button {
  height: calc(42 * var(--pixel));
}
.ui-icon-menu-buttons.small .button .icon, .ui-icon-menu-buttons.small .ui-icon-button .icon {
  font-size: calc(18 * var(--pixel));
}
.ui-icon-menu-buttons.small .button .text, .ui-icon-menu-buttons.small .ui-icon-button .text {
  margin-top: calc(2 * var(--pixel));
  font-size: var(--tiny-text);
}
.ui-icon-menu-buttons.auto .button, .ui-icon-menu-buttons.auto .ui-icon-button {
  width: auto;
  min-width: calc(42 * var(--pixel));
  padding: 0 var(--half-padding-width);
}
.ui-icon-menu-buttons.no-margin .button, .ui-icon-menu-buttons.no-margin .ui-icon-button {
  margin: 0;
}
.ui-icon-menu-buttons.four-columns .button, .ui-icon-menu-buttons.four-columns .ui-icon-button {
  width: calc(25% - var(--margin-width));
}

.ui-tag {
  background: var(--color-base-active);
  color: var(--color-base-active-content);
  float: left;
  padding: 0 var(--half-padding-width);
  height: calc(var(--pixel) * 24);
  font-size: var(--small-text);
  border-radius: calc(var(--pixel) * 24);
  border: solid var(--pixel) rgba(0, 0, 0, 0.03);
  min-width: calc(var(--pixel) * 60);
}
.ui-tag.small {
  height: calc(var(--pixel) * 18);
  font-size: var(--tiny-text);
  padding: 0 var(--half-padding-width);
  min-width: calc(var(--pixel) * 30);
}
.ui-tag.active {
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.ui-tag.preview {
  border-radius: var(--border-radius-width);
  padding: 0;
  height: calc(var(--pixel) * 80);
  width: calc(var(--pixel) * 60);
  overflow: hidden;
  justify-content: normal;
}
.ui-tag.preview .picture {
  width: calc(var(--pixel) * 56);
  height: calc(var(--pixel) * 56);
  margin: var(--pixel) auto;
  border-radius: var(--border-radius-width);
}
.ui-tag.preview .picture image {
  border-radius: var(--border-radius-width);
  width: 100%;
  height: 100%;
}
.ui-tag.preview .text {
  padding: calc(var(--pixel) * 5) 0 0 0;
  text-align: center;
  font-size: var(--tiny-text);
}
.ui-tag.primary {
  background: var(--color-primary);
  color: var(--color-primary-content);
  border-color: var(--color-primary-active);
}
.ui-tag.primary.outline {
  background: var(--color-base-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.ui-tag.secondary {
  background: var(--color-secondary);
  color: var(--color-secondary-content);
  border-color: var(--color-secondary-active);
}
.ui-tag.secondary.outline {
  background: var(--color-base-light);
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.ui-tag.danger {
  background: var(--color-danger);
  color: var(--color-danger-content);
  border-color: var(--color-danger-active);
}
.ui-tag.danger.outline {
  background: var(--color-base-light);
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.ui-tag.light {
  background: var(--color-light);
  color: var(--color-light-content);
  border-color: var(--color-light-active);
}
.ui-tag.light.outline {
  background: var(--color-base-light);
  border-color: var(--color-light);
  color: var(--color-light);
}
.ui-tag.dark {
  background: var(--color-dark);
  color: var(--color-dark-content);
  border-color: var(--color-dark-active);
}
.ui-tag.dark.outline {
  background: var(--color-base-light);
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.ui-tag.medium {
  background: var(--color-medium);
  color: var(--color-medium-content);
  border-color: var(--color-medium-active);
}
.ui-tag.medium.outline {
  background: var(--color-base-light);
  border-color: var(--color-medium);
  color: var(--color-medium);
}
.ui-tag.gold {
  background: var(--color-gold);
  color: var(--color-gold-content);
  border-color: var(--color-gold-active);
}
.ui-tag.gold.outline {
  background: var(--color-base-light);
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.ui-tag.gold-deep {
  background: var(--color-gold-deep);
  color: var(--color-gold-deep-content);
  border-color: var(--color-gold-deep-active);
}
.ui-tag.gold-deep.outline {
  background: var(--color-base-light);
  border-color: var(--color-gold-deep);
  color: var(--color-gold-deep);
}
.ui-tag.wechat {
  background: var(--color-wechat);
  color: var(--color-wechat-content);
  border-color: var(--color-wechat-active);
}
.ui-tag.wechat.outline {
  background: var(--color-base-light);
  border-color: var(--color-wechat);
  color: var(--color-wechat);
}
.ui-tag.alipay {
  background: var(--color-alipay);
  color: var(--color-alipay-content);
  border-color: var(--color-alipay-active);
}
.ui-tag.alipay.outline {
  background: var(--color-base-light);
  border-color: var(--color-alipay);
  color: var(--color-alipay);
}

.ui-tag-list {
  overflow: auto;
}
.ui-tag-list .ui-tag {
  float: left;
  margin: 0 var(--margin-width) var(--margin-width) 0;
}
.ui-tag-list.small .ui-tag {
  margin: 0 var(--half-margin-width) var(--half-margin-width) 0;
  height: calc(var(--pixel) * 18);
  font-size: var(--tiny-text);
  padding: 0 var(--half-padding-width);
  min-width: calc(var(--pixel) * 30);
}
.ui-tag-list.text-center {
  text-align: center;
  display: block;
}
.ui-tag-list.text-center .ui-tag {
  float: none;
}

.ui-modal-page {
  position: fixed;
  z-index: 19;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background 0.3s;
  visibility: hidden;
  background: rgba(0, 0, 0, 0);
}
.ui-modal-page .modal-page-prefix {
  position: relative;
  height: 100%;
  z-index: 20;
}
.ui-modal-page .modal-page-container {
  position: absolute;
  z-index: 21;
  bottom: -80%;
  left: 0;
  width: 100%;
  height: 80%;
  display: flex;
  flex-flow: column;
  transition: bottom 0.3s, top 0.3s, opacity 0.3s;
  opacity: 0;
  padding-bottom: var(--safe-area-inset-bottom);
}
.ui-modal-page .modal-page-container:after {
  content: "";
  display: block;
  height: var(--safe-area-inset-bottom);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: var(--color-light);
}
.ui-modal-page .modal-page-container.auto-height {
  height: auto;
  max-height: 80%;
  bottom: -100%;
}
.ui-modal-page .modal-page-container .modal-page-container-title {
  border-radius: var(--border-radius-width) var(--border-radius-width) 0 0;
  background: var(--background-color-deep);
  color: var(--color-danger);
  padding: var(--padding-width);
  text-align: center;
  font-size: var(--small-text);
}
.ui-modal-page .modal-page-container .modal-page-container-title ~ .modal-page-container-hd {
  border-radius: 0 !important;
}
.ui-modal-page .modal-page-container .modal-page-header {
  min-height: calc(var(--pixel) * 36);
  border-radius: var(--border-radius-width) var(--border-radius-width) 0 0;
  background: var(--color-light);
  display: flex;
  border-bottom: solid var(--pixel) var(--color-light-active);
  padding-left: var(--padding-width);
  flex-flow: row;
}
.ui-modal-page .modal-page-container .modal-page-header .center {
  display: flex;
  flex: 1;
  flex-flow: column;
  justify-content: center;
}
.ui-modal-page .modal-page-container .modal-page-content {
  display: flex;
  flex: 1;
  background: var(--color-light);
  flex-flow: column;
  overflow: auto;
}
.ui-modal-page .modal-page-container .modal-page-content.small-padding {
  padding: var(--padding-width);
  margin: 0;
}
.ui-modal-page .modal-page-container .modal-page-footer {
  background: var(--color-light);
  border-top: solid var(--pixel) var(--color-light-active);
}
.ui-modal-page.active {
  visibility: visible;
  background: rgba(0, 0, 0, 0.5);
}
.ui-modal-page.active .modal-page-container {
  bottom: 0;
  opacity: 1;
}
.ui-modal-page.active.close {
  background: rgba(0, 0, 0, 0);
}
.ui-modal-page.active.close .modal-page-container {
  bottom: -80%;
  opacity: 0;
}
.ui-modal-page.active.close .modal-page-container.auto-height {
  bottom: -100%;
}

.ui-block {
  background: var(--color-base-light);
}
.ui-block .block-title {
  padding: var(--padding-width);
  font-size: var(--small-text);
  color: var(--color-base-light-content);
}
.ui-block.primary {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  border-color: var(--color-primary-active);
  --color-base: var(--color-primary);
  --color-base-primary: var(--color-primary-primary);
  --color-base-content: var(--color-primary-content);
  --color-base-active: var(--color-primary-active);
  --color-base-active-content: var(--color-primary-active-content);
  --color-base-light: var(--color-primary-light);
  --color-base-light-content: var(--color-primary-light-content);
  --color-base-light-active: var(--color-primary-light-active);
  --color-base-light-active-content: var(--color-primary-light-active-content);
}
.ui-block.secondary {
  background-color: var(--color-secondary);
  color: var(--color-secondary-content);
  border-color: var(--color-secondary-active);
  --color-base: var(--color-secondary);
  --color-base-primary: var(--color-secondary-primary);
  --color-base-content: var(--color-secondary-content);
  --color-base-active: var(--color-secondary-active);
  --color-base-active-content: var(--color-secondary-active-content);
  --color-base-light: var(--color-secondary-light);
  --color-base-light-content: var(--color-secondary-light-content);
  --color-base-light-active: var(--color-secondary-light-active);
  --color-base-light-active-content: var(--color-secondary-light-active-content);
}
.ui-block.danger {
  background-color: var(--color-danger);
  color: var(--color-danger-content);
  border-color: var(--color-danger-active);
  --color-base: var(--color-danger);
  --color-base-primary: var(--color-danger-primary);
  --color-base-content: var(--color-danger-content);
  --color-base-active: var(--color-danger-active);
  --color-base-active-content: var(--color-danger-active-content);
  --color-base-light: var(--color-danger-light);
  --color-base-light-content: var(--color-danger-light-content);
  --color-base-light-active: var(--color-danger-light-active);
  --color-base-light-active-content: var(--color-danger-light-active-content);
}
.ui-block.light {
  background-color: var(--color-light);
  color: var(--color-light-content);
  border-color: var(--color-light-active);
  --color-base: var(--color-light);
  --color-base-primary: var(--color-light-primary);
  --color-base-content: var(--color-light-content);
  --color-base-active: var(--color-light-active);
  --color-base-active-content: var(--color-light-active-content);
  --color-base-light: var(--color-light-light);
  --color-base-light-content: var(--color-light-light-content);
  --color-base-light-active: var(--color-light-light-active);
  --color-base-light-active-content: var(--color-light-light-active-content);
}
.ui-block.dark {
  background-color: var(--color-dark);
  color: var(--color-dark-content);
  border-color: var(--color-dark-active);
  --color-base: var(--color-dark);
  --color-base-primary: var(--color-dark-primary);
  --color-base-content: var(--color-dark-content);
  --color-base-active: var(--color-dark-active);
  --color-base-active-content: var(--color-dark-active-content);
  --color-base-light: var(--color-dark-light);
  --color-base-light-content: var(--color-dark-light-content);
  --color-base-light-active: var(--color-dark-light-active);
  --color-base-light-active-content: var(--color-dark-light-active-content);
}
.ui-block.medium {
  background-color: var(--color-medium);
  color: var(--color-medium-content);
  border-color: var(--color-medium-active);
  --color-base: var(--color-medium);
  --color-base-primary: var(--color-medium-primary);
  --color-base-content: var(--color-medium-content);
  --color-base-active: var(--color-medium-active);
  --color-base-active-content: var(--color-medium-active-content);
  --color-base-light: var(--color-medium-light);
  --color-base-light-content: var(--color-medium-light-content);
  --color-base-light-active: var(--color-medium-light-active);
  --color-base-light-active-content: var(--color-medium-light-active-content);
}
.ui-block.gold {
  background-color: var(--color-gold);
  color: var(--color-gold-content);
  border-color: var(--color-gold-active);
  --color-base: var(--color-gold);
  --color-base-primary: var(--color-gold-primary);
  --color-base-content: var(--color-gold-content);
  --color-base-active: var(--color-gold-active);
  --color-base-active-content: var(--color-gold-active-content);
  --color-base-light: var(--color-gold-light);
  --color-base-light-content: var(--color-gold-light-content);
  --color-base-light-active: var(--color-gold-light-active);
  --color-base-light-active-content: var(--color-gold-light-active-content);
}
.ui-block.gold-deep {
  background-color: var(--color-gold-deep);
  color: var(--color-gold-deep-content);
  border-color: var(--color-gold-deep-active);
  --color-base: var(--color-gold-deep);
  --color-base-primary: var(--color-gold-deep-primary);
  --color-base-content: var(--color-gold-deep-content);
  --color-base-active: var(--color-gold-deep-active);
  --color-base-active-content: var(--color-gold-deep-active-content);
  --color-base-light: var(--color-gold-deep-light);
  --color-base-light-content: var(--color-gold-deep-light-content);
  --color-base-light-active: var(--color-gold-deep-light-active);
  --color-base-light-active-content: var(--color-gold-deep-light-active-content);
}
.ui-block.wechat {
  background-color: var(--color-wechat);
  color: var(--color-wechat-content);
  border-color: var(--color-wechat-active);
  --color-base: var(--color-wechat);
  --color-base-primary: var(--color-wechat-primary);
  --color-base-content: var(--color-wechat-content);
  --color-base-active: var(--color-wechat-active);
  --color-base-active-content: var(--color-wechat-active-content);
  --color-base-light: var(--color-wechat-light);
  --color-base-light-content: var(--color-wechat-light-content);
  --color-base-light-active: var(--color-wechat-light-active);
  --color-base-light-active-content: var(--color-wechat-light-active-content);
}
.ui-block.alipay {
  background-color: var(--color-alipay);
  color: var(--color-alipay-content);
  border-color: var(--color-alipay-active);
  --color-base: var(--color-alipay);
  --color-base-primary: var(--color-alipay-primary);
  --color-base-content: var(--color-alipay-content);
  --color-base-active: var(--color-alipay-active);
  --color-base-active-content: var(--color-alipay-active-content);
  --color-base-light: var(--color-alipay-light);
  --color-base-light-content: var(--color-alipay-light-content);
  --color-base-light-active: var(--color-alipay-light-active);
  --color-base-light-active-content: var(--color-alipay-light-active-content);
}

.ui-row {
  overflow: visible;
}
.ui-row .col {
  padding: var(--half-padding-width);
  width: 100%;
  min-height: calc(var(--pixel) * 22);
}
.ui-row .col.col-1 {
  float: left;
  width: calc(1 / 20 * 100%);
}
.ui-row .col.col-2 {
  float: left;
  width: calc(2 / 20 * 100%);
}
.ui-row .col.col-3 {
  float: left;
  width: calc(3 / 20 * 100%);
}
.ui-row .col.col-4 {
  float: left;
  width: calc(4 / 20 * 100%);
}
.ui-row .col.col-5 {
  float: left;
  width: calc(5 / 20 * 100%);
}
.ui-row .col.col-6 {
  float: left;
  width: calc(6 / 20 * 100%);
}
.ui-row .col.col-7 {
  float: left;
  width: calc(7 / 20 * 100%);
}
.ui-row .col.col-8 {
  float: left;
  width: calc(8 / 20 * 100%);
}
.ui-row .col.col-9 {
  float: left;
  width: calc(9 / 20 * 100%);
}
.ui-row .col.col-10 {
  float: left;
  width: calc(10 / 20 * 100%);
}
.ui-row .col.col-11 {
  float: left;
  width: calc(11 / 20 * 100%);
}
.ui-row .col.col-12 {
  float: left;
  width: calc(12 / 20 * 100%);
}
.ui-row .col.col-13 {
  float: left;
  width: calc(13 / 20 * 100%);
}
.ui-row .col.col-14 {
  float: left;
  width: calc(14 / 20 * 100%);
}
.ui-row .col.col-15 {
  float: left;
  width: calc(15 / 20 * 100%);
}
.ui-row .col.col-16 {
  float: left;
  width: calc(16 / 20 * 100%);
}
.ui-row .col.col-17 {
  float: left;
  width: calc(17 / 20 * 100%);
}
.ui-row .col.col-18 {
  float: left;
  width: calc(18 / 20 * 100%);
}
.ui-row .col.col-19 {
  float: left;
  width: calc(19 / 20 * 100%);
}
.ui-row.flex {
  display: flex;
  flex-flow: row;
}
.ui-row.flex .col {
  display: flex;
  flex-flow: column;
}
.ui-row.flex .col.fluid {
  flex: 1;
  width: unset !important;
}

.ui-grid.col-border, .ui-grid.celled {
  border-left: solid var(--pixel) var(--color-base-active);
  border-top: solid var(--pixel) var(--color-base-active);
}
.ui-grid.col-border .col, .ui-grid.celled .col {
  border-right: solid var(--pixel) var(--color-base-active);
  border-bottom: solid var(--pixel) var(--color-base-active);
}
.ui-grid.col-border .col.has-child-grid .ui-row .col:last-child, .ui-grid.celled .col.has-child-grid .ui-row .col:last-child {
  border-right: none;
}
.ui-grid.col-border .col.has-child-grid .ui-row:last-child .col, .ui-grid.celled .col.has-child-grid .ui-row:last-child .col {
  border-bottom: none;
}
.ui-grid .ui-row {
  display: flex;
  flex-flow: row;
}
.ui-grid .ui-row .col.has-child-grid {
  padding: 0;
}
.ui-grid.border-radius .ui-row:first-child .col:first-child, .ui-grid.radius .ui-row:first-child .col:first-child {
  border-top-left-radius: var(--border-radius-width);
}
.ui-grid.border-radius .ui-row:first-child .col:last-child, .ui-grid.radius .ui-row:first-child .col:last-child {
  border-top-right-radius: var(--border-radius-width);
}
.ui-grid.border-radius .ui-row:last-child .col:first-child, .ui-grid.radius .ui-row:last-child .col:first-child {
  border-bottom-left-radius: var(--border-radius-width);
}
.ui-grid.border-radius .ui-row:last-child .col:last-child, .ui-grid.radius .ui-row:last-child .col:last-child {
  border-bottom-right-radius: var(--border-radius-width);
}

.ui-table {
  --radius-width: 3px;
  display: flex;
  flex-flow: column;
  border: solid 1px #ddd;
}
.ui-table .ui-row {
  display: flex;
  flex-flow: row;
}
.ui-table .ui-row .col {
  word-break: break-word;
}
.ui-table .thead {
  background: #f9fafb;
  border-bottom: solid 1px #eee;
  font-weight: bold;
}
.ui-table .thead:last-child {
  border-bottom: none;
}
.ui-table .tbody .ui-row {
  border-bottom: solid 1px #eee;
}
.ui-table .tbody .ui-row:nth-child(even) {
  background: #fafafa;
}
.ui-table .tbody .ui-row:last-child {
  border-bottom: none;
}
.ui-table .tbody.selectable .ui-row:hover {
  background: #f9f9f9;
}
.ui-table .tbody.selectable .ui-row:nth-child(even):hover {
  background: #eee;
}
.ui-table .tbody.selectable.transparent .ui-row {
  background: transparent;
}
.ui-table .tbody.selectable.transparent .ui-row:hover {
  background: #f9f9f9;
}
.ui-table .tbody .empty-list {
  text-align: center;
  padding: 50px;
}
.ui-table .tbody .foreach-wrap-elem {
  border-bottom: solid 1px #eee;
}
.ui-table .tbody .foreach-wrap-elem:last-child {
  border-bottom: none;
}
.ui-table.scroll-view {
  overflow: hidden;
}
.ui-table.scroll-view .tbody {
  display: flex;
  flex-flow: column;
  flex: 1;
  overflow: auto;
  position: relative;
}
.ui-table.scroll-view .tbody .empty-list {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(135deg, rgba(214, 214, 214, 0.3) 0, rgba(214, 214, 214, 0.3) 25%, transparent 25%, transparent 50%, rgba(214, 214, 214, 0.3) 50%, rgba(214, 214, 214, 0.3) 75%, transparent 75%, transparent);
  background-size: 6px 6px;
}
.ui-table .ui-row:last-child {
  border-bottom: none;
}
.ui-table.radius {
  border-radius: var(--radius-width);
}
.ui-table.radius .thead {
  border-top-left-radius: var(--radius-width);
  border-top-right-radius: var(--radius-width);
}
.ui-table.radius .thead:last-child {
  border-bottom-left-radius: var(--radius-width);
  border-bottom-right-radius: var(--radius-width);
}
.ui-table.radius .thead:last-child .ui-row:last-child {
  border-bottom-left-radius: var(--radius-width);
  border-bottom-right-radius: var(--radius-width);
}
.ui-table.radius .thead .ui-row:first-child {
  border-top-left-radius: var(--radius-width);
  border-top-right-radius: var(--radius-width);
}
.ui-table.radius .tbody:last-child, .ui-table.radius .tfoot:last-child {
  border-bottom-left-radius: var(--radius-width);
  border-bottom-right-radius: var(--radius-width);
}
.ui-table.radius .tbody:last-child .ui-row:last-child, .ui-table.radius .tfoot:last-child .ui-row:last-child {
  border-bottom-left-radius: var(--radius-width);
  border-bottom-right-radius: var(--radius-width);
}
.ui-table.radius .tbody:last-child .ui-row:last-child .col:first-child, .ui-table.radius .tfoot:last-child .ui-row:last-child .col:first-child {
  border-bottom-left-radius: var(--radius-width);
}
.ui-table.radius .tbody:last-child .ui-row:last-child .col:last-child, .ui-table.radius .tfoot:last-child .ui-row:last-child .col:last-child {
  border-bottom-right-radius: var(--radius-width);
}
.ui-table.radius .tfoot {
  background: #f9fafb;
  border-top: solid 1px #eee;
}
.ui-table.selectable .ui-row:hover {
  background: rgba(0, 0, 0, 0.1);
}
.ui-table.large-height .col {
  min-height: 28px;
  padding: var(--padding-width);
}
.ui-table.primary {
  border-top: solid 2px var(--color-primary);
}
.ui-table.secondary {
  border-top: solid 2px var(--color-secondary);
}
.ui-table.danger {
  border-top: solid 2px var(--color-danger);
}
.ui-table.light {
  border-top: solid 2px var(--color-light);
}
.ui-table.dark {
  border-top: solid 2px var(--color-dark);
}
.ui-table.medium {
  border-top: solid 2px var(--color-medium);
}
.ui-table.gold {
  border-top: solid 2px var(--color-gold);
}
.ui-table.gold-deep {
  border-top: solid 2px var(--color-gold-deep);
}
.ui-table.wechat {
  border-top: solid 2px var(--color-wechat);
}
.ui-table.alipay {
  border-top: solid 2px var(--color-alipay);
}

.ui-number-toggle {
  display: flex;
  flex-flow: row;
  border-radius: var(--border-radius-width);
  border: solid var(--pixel) var(--color-base-active);
}
.ui-number-toggle .button {
  width: calc(var(--pixel) * 30);
  height: calc(var(--pixel) * 30);
  text-align: center;
  font-size: calc(var(--pixel) * 14);
  display: flex;
  flex-flow: column;
  line-height: calc(var(--pixel) * 28);
}
.ui-number-toggle .button.disabled {
  color: var(--color-base-light-content);
  background: var(--color-base-light-active);
}
.ui-number-toggle .button.disabled {
  color: var(--color-base-light-content);
  background: var(--color-base-light-active);
}
.ui-number-toggle .button:active {
  background: var(--color-base-light-active);
}
.ui-number-toggle input, .ui-number-toggle .input {
  border-left: solid var(--pixel) var(--color-base-active);
  border-right: solid var(--pixel) var(--color-base-active);
  height: calc(var(--pixel) * 30);
  width: calc(var(--pixel) * 50);
  text-align: center;
  font-size: calc(var(--pixel) * 11);
  display: flex;
  justify-content: center;
  flex-flow: column;
}

.ui-checkbox {
  font-size: calc(var(--pixel) * 18);
  position: relative;
}
.ui-checkbox::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: calc(var(--pixel) * 18);
  height: calc(var(--pixel) * 18);
  border-radius: calc(var(--pixel) * 18);
  top: 50%;
  margin-top: calc(var(--pixel) * -9 - 0.5 * var(--pixel));
}
.ui-checkbox .false {
  position: relative;
  z-index: 2;
  display: inline;
}
.ui-checkbox .true {
  position: relative;
  z-index: 2;
  display: none;
}
.ui-checkbox.checked {
  color: var(--color-base-primary);
}
.ui-checkbox.checked .false {
  display: none;
}
.ui-checkbox.checked .true {
  display: inline;
}
.ui-checkbox.primary {
  color: var(--color-primary);
}
.ui-checkbox.primary.checked {
  color: var(--color-primary-content);
}
.ui-checkbox.primary.checked::before {
  background: var(--color-primary);
}
.ui-checkbox.secondary {
  color: var(--color-secondary);
}
.ui-checkbox.secondary.checked {
  color: var(--color-secondary-content);
}
.ui-checkbox.secondary.checked::before {
  background: var(--color-secondary);
}
.ui-checkbox.danger {
  color: var(--color-danger);
}
.ui-checkbox.danger.checked {
  color: var(--color-danger-content);
}
.ui-checkbox.danger.checked::before {
  background: var(--color-danger);
}
.ui-checkbox.light {
  color: var(--color-light);
}
.ui-checkbox.light.checked {
  color: var(--color-light-content);
}
.ui-checkbox.light.checked::before {
  background: var(--color-light);
}
.ui-checkbox.dark {
  color: var(--color-dark);
}
.ui-checkbox.dark.checked {
  color: var(--color-dark-content);
}
.ui-checkbox.dark.checked::before {
  background: var(--color-dark);
}
.ui-checkbox.medium {
  color: var(--color-medium);
}
.ui-checkbox.medium.checked {
  color: var(--color-medium-content);
}
.ui-checkbox.medium.checked::before {
  background: var(--color-medium);
}
.ui-checkbox.gold {
  color: var(--color-gold);
}
.ui-checkbox.gold.checked {
  color: var(--color-gold-content);
}
.ui-checkbox.gold.checked::before {
  background: var(--color-gold);
}
.ui-checkbox.gold-deep {
  color: var(--color-gold-deep);
}
.ui-checkbox.gold-deep.checked {
  color: var(--color-gold-deep-content);
}
.ui-checkbox.gold-deep.checked::before {
  background: var(--color-gold-deep);
}
.ui-checkbox.wechat {
  color: var(--color-wechat);
}
.ui-checkbox.wechat.checked {
  color: var(--color-wechat-content);
}
.ui-checkbox.wechat.checked::before {
  background: var(--color-wechat);
}
.ui-checkbox.alipay {
  color: var(--color-alipay);
}
.ui-checkbox.alipay.checked {
  color: var(--color-alipay-content);
}
.ui-checkbox.alipay.checked::before {
  background: var(--color-alipay);
}

.ui-single-input {
  text-align: center;
}

.ui-archive {
  padding: var(--padding-width);
}
.ui-archive .title {
  font-size: var(--large-text);
}
.ui-archive .info {
  padding: var(--padding-width) 0;
  font-size: var(--small-text);
}
.ui-archive .preview {
  margin: var(--margin-width) auto;
  text-align: center;
}
.ui-archive .preview image {
  border-radius: var(--border-radius-width);
  min-height: calc(var(--pixel) * 200);
  max-width: 80%;
  margin: 0 auto;
}
.ui-archive .desc {
  color: var(--color-base-light-content);
  font-size: small;
  border-left: solid calc(var(--pixel) * 3) var(--color-base-active);
  padding-left: var(--padding-width);
}

.ui-card {
  background: var(--color-base-light);
  padding-top: var(--padding-width);
}
.ui-card .preview {
  padding-top: calc(100% - var(--margin-width) * 2);
  position: relative;
  margin: 0 var(--margin-width);
}
.ui-card .preview image, .ui-card .preview img {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  width: 100% !important;
  max-width: 100%;
  height: 100% !important;
  max-height: 100%;
}
.ui-card .name {
  padding: var(--padding-width);
  font-size: var(--large-text);
}
.ui-card .desc {
  color: var(--color-base-light-content);
}

.ui-chat-item {
  overflow: auto;
  display: flex;
  flex-flow: row;
}
.ui-chat-item .thumbnail, .ui-chat-item .face {
  width: var(--small-image-width);
  height: var(--small-image-width);
  border-radius: 50%;
  overflow: hidden;
}
.ui-chat-item .thumbnail img, .ui-chat-item .thumbnail ion-img, .ui-chat-item .thumbnail image, .ui-chat-item .face img, .ui-chat-item .face ion-img, .ui-chat-item .face image {
  width: var(--small-image-width);
  height: var(--small-image-width);
  border-radius: 50%;
}
.ui-chat-item .chat-message {
  display: flex;
  flex-flow: column;
  flex: 1;
  padding-left: var(--padding-width);
}
.ui-chat-item .message-border {
  border-radius: 0 var(--border-radius-width) var(--border-radius-width) var(--border-radius-width);
  padding: var(--padding-width);
}
.ui-chat-item .message-image {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--border-radius-width);
}

.ui-chat-list .ui-chat-item {
  padding-top: var(--padding-width);
  padding-bottom: var(--padding-width);
}

.maximum-text {
  font-size: var(--maximum-text) !important;
  --iconfont-width: var(--maximum-text);
  --iconfont-height: var(--maximum-text);
}

.maximum-image {
  width: var(--maximum-image-width) !important;
  height: var(--maximum-image-width) !important;
}
.maximum-image image, .maximum-image img {
  max-width: 100%;
  max-height: 100%;
}

.bigger-text {
  font-size: var(--bigger-text) !important;
  --iconfont-width: var(--bigger-text);
  --iconfont-height: var(--bigger-text);
}

.bigger-image {
  width: var(--bigger-image-width) !important;
  height: var(--bigger-image-width) !important;
}
.bigger-image image, .bigger-image img {
  max-width: 100%;
  max-height: 100%;
}

.large-text {
  font-size: var(--large-text) !important;
  --iconfont-width: var(--large-text);
  --iconfont-height: var(--large-text);
}

.large-image {
  width: var(--large-image-width) !important;
  height: var(--large-image-width) !important;
}
.large-image image, .large-image img {
  max-width: 100%;
  max-height: 100%;
}

.default-text {
  font-size: var(--default-text) !important;
  --iconfont-width: var(--default-text);
  --iconfont-height: var(--default-text);
}

.default-image {
  width: var(--default-image-width) !important;
  height: var(--default-image-width) !important;
}
.default-image image, .default-image img {
  max-width: 100%;
  max-height: 100%;
}

.small-text {
  font-size: var(--small-text) !important;
  --iconfont-width: var(--small-text);
  --iconfont-height: var(--small-text);
}

.small-image {
  width: var(--small-image-width) !important;
  height: var(--small-image-width) !important;
}
.small-image image, .small-image img {
  max-width: 100%;
  max-height: 100%;
}

.tiny-text {
  font-size: var(--tiny-text) !important;
  --iconfont-width: var(--tiny-text);
  --iconfont-height: var(--tiny-text);
}

.tiny-image {
  width: var(--tiny-image-width) !important;
  height: var(--tiny-image-width) !important;
}
.tiny-image image, .tiny-image img {
  max-width: 100%;
  max-height: 100%;
}

.primary-text {
  color: var(--color-primary);
}

.secondary-text {
  color: var(--color-secondary);
}

.danger-text {
  color: var(--color-danger);
}

.light-text {
  color: var(--color-light);
}

.dark-text {
  color: var(--color-dark);
}

.medium-text {
  color: var(--color-medium);
}

.gold-text {
  color: var(--color-gold);
}

.gold-deep-text {
  color: var(--color-gold-deep);
}

.wechat-text {
  color: var(--color-wechat);
}

.alipay-text {
  color: var(--color-alipay);
}

.base-light-text {
  color: var(--color-base-light-content);
}

.base-primary-text {
  color: var(--color-base-primary);
}

.strong, .strong-text, .bold, .bold-text {
  font-weight: bold;
}

.text-left {
  text-align: left;
  flex-flow: column;
  justify-content: center;
}

.text-center {
  text-align: center;
  flex-flow: column;
  justify-content: center;
}

.text-right {
  text-align: right;
  flex-flow: column;
  justify-content: center;
}

.text-middle {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.delete-text {
  text-decoration: line-through;
}

.max-one-line-text {
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.max-two-line-text {
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.max-three-line-text {
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.justify-center {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.default-background {
  background: var(--background-color);
}

.primary-background {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  --color-base: var(--color-primary);
  --color-base-content: var(--color-primary-content);
  --color-base-active: var(--color-primary-active);
  --color-base-active-content: var(--color-primary-active-content);
  --color-base-light: var(--color-primary-light);
  --color-base-light-content: var(--color-primary-light-content);
  --color-base-light-active: var(--color-primary-light-active);
  --color-base-light-active-content: var(--color-primary-light-active-content);
}

.secondary-background {
  background-color: var(--color-secondary);
  color: var(--color-secondary-content);
  --color-base: var(--color-secondary);
  --color-base-content: var(--color-secondary-content);
  --color-base-active: var(--color-secondary-active);
  --color-base-active-content: var(--color-secondary-active-content);
  --color-base-light: var(--color-secondary-light);
  --color-base-light-content: var(--color-secondary-light-content);
  --color-base-light-active: var(--color-secondary-light-active);
  --color-base-light-active-content: var(--color-secondary-light-active-content);
}

.danger-background {
  background-color: var(--color-danger);
  color: var(--color-danger-content);
  --color-base: var(--color-danger);
  --color-base-content: var(--color-danger-content);
  --color-base-active: var(--color-danger-active);
  --color-base-active-content: var(--color-danger-active-content);
  --color-base-light: var(--color-danger-light);
  --color-base-light-content: var(--color-danger-light-content);
  --color-base-light-active: var(--color-danger-light-active);
  --color-base-light-active-content: var(--color-danger-light-active-content);
}

.light-background {
  background-color: var(--color-light);
  color: var(--color-light-content);
  --color-base: var(--color-light);
  --color-base-content: var(--color-light-content);
  --color-base-active: var(--color-light-active);
  --color-base-active-content: var(--color-light-active-content);
  --color-base-light: var(--color-light-light);
  --color-base-light-content: var(--color-light-light-content);
  --color-base-light-active: var(--color-light-light-active);
  --color-base-light-active-content: var(--color-light-light-active-content);
}

.dark-background {
  background-color: var(--color-dark);
  color: var(--color-dark-content);
  --color-base: var(--color-dark);
  --color-base-content: var(--color-dark-content);
  --color-base-active: var(--color-dark-active);
  --color-base-active-content: var(--color-dark-active-content);
  --color-base-light: var(--color-dark-light);
  --color-base-light-content: var(--color-dark-light-content);
  --color-base-light-active: var(--color-dark-light-active);
  --color-base-light-active-content: var(--color-dark-light-active-content);
}

.medium-background {
  background-color: var(--color-medium);
  color: var(--color-medium-content);
  --color-base: var(--color-medium);
  --color-base-content: var(--color-medium-content);
  --color-base-active: var(--color-medium-active);
  --color-base-active-content: var(--color-medium-active-content);
  --color-base-light: var(--color-medium-light);
  --color-base-light-content: var(--color-medium-light-content);
  --color-base-light-active: var(--color-medium-light-active);
  --color-base-light-active-content: var(--color-medium-light-active-content);
}

.gold-background {
  background-color: var(--color-gold);
  color: var(--color-gold-content);
  --color-base: var(--color-gold);
  --color-base-content: var(--color-gold-content);
  --color-base-active: var(--color-gold-active);
  --color-base-active-content: var(--color-gold-active-content);
  --color-base-light: var(--color-gold-light);
  --color-base-light-content: var(--color-gold-light-content);
  --color-base-light-active: var(--color-gold-light-active);
  --color-base-light-active-content: var(--color-gold-light-active-content);
}

.gold-deep-background {
  background-color: var(--color-gold-deep);
  color: var(--color-gold-deep-content);
  --color-base: var(--color-gold-deep);
  --color-base-content: var(--color-gold-deep-content);
  --color-base-active: var(--color-gold-deep-active);
  --color-base-active-content: var(--color-gold-deep-active-content);
  --color-base-light: var(--color-gold-deep-light);
  --color-base-light-content: var(--color-gold-deep-light-content);
  --color-base-light-active: var(--color-gold-deep-light-active);
  --color-base-light-active-content: var(--color-gold-deep-light-active-content);
}

.wechat-background {
  background-color: var(--color-wechat);
  color: var(--color-wechat-content);
  --color-base: var(--color-wechat);
  --color-base-content: var(--color-wechat-content);
  --color-base-active: var(--color-wechat-active);
  --color-base-active-content: var(--color-wechat-active-content);
  --color-base-light: var(--color-wechat-light);
  --color-base-light-content: var(--color-wechat-light-content);
  --color-base-light-active: var(--color-wechat-light-active);
  --color-base-light-active-content: var(--color-wechat-light-active-content);
}

.alipay-background {
  background-color: var(--color-alipay);
  color: var(--color-alipay-content);
  --color-base: var(--color-alipay);
  --color-base-content: var(--color-alipay-content);
  --color-base-active: var(--color-alipay-active);
  --color-base-active-content: var(--color-alipay-active-content);
  --color-base-light: var(--color-alipay-light);
  --color-base-light-content: var(--color-alipay-light-content);
  --color-base-light-active: var(--color-alipay-light-active);
  --color-base-light-active-content: var(--color-alipay-light-active-content);
}

.base-light-background {
  background-color: var(--color-base-light);
}

.safe-area-bottom {
  height: var(--safe-area-inset-bottom);
}

.safe-area-top {
  height: var(--safe-area-inset-top);
}

.safe-area-left {
  height: var(--safe-area-inset-left);
}

.safe-area-right {
  height: var(--safe-area-inset-right);
}

.no-bg {
  background: none !important;
}

.padding {
  padding: var(--padding-width);
}

.large-padding {
  padding: calc(var(--padding-width) * 2);
}

.maximum-padding {
  padding: calc(var(--padding-width) * 3);
}

.half-padding {
  padding: var(--half-padding-width);
}

.padding-start, .padding-left {
  padding-left: var(--padding-width);
}

.half-padding-start, .half-padding-left {
  padding-left: var(--half-padding-width);
}

.padding-top {
  padding-top: var(--padding-width);
}

.half-padding-top {
  padding-top: var(--half-padding-width);
}

.padding-end, .padding-right {
  padding-right: var(--padding-width);
}

.half-padding-end, .half-padding-right {
  padding-right: var(--half-padding-width);
}

.padding-bottom {
  padding-bottom: var(--padding-width);
}

.half-padding-bottom {
  padding-bottom: var(--half-padding-width);
}

.margin {
  margin: var(--margin-width);
}

.large-margin {
  margin: calc(var(--margin-width) * 2);
}

.maximum-margin {
  margin: calc(var(--margin-width) * 3);
}

.half-margin {
  margin: var(--half-margin-width);
}

.margin-start, .margin-left {
  margin-left: var(--margin-width);
}

.half-margin-start, .half-margin-left {
  margin-left: var(--half-margin-width);
}

.margin-top {
  margin-top: var(--margin-width);
}

.half-margin-top {
  margin-top: var(--half-margin-width);
}

.margin-end, .margin-right {
  margin-right: var(--margin-width);
}

.half-margin-end, .half-margin-right {
  margin-right: var(--half-margin-width);
}

.margin-bottom {
  margin-bottom: var(--margin-width);
}

.half-margin-bottom {
  margin-bottom: var(--half-margin-width);
}

.border {
  border: solid var(--pixel) var(--color-base-active);
}

.border-left, .border-start {
  border-left: solid var(--pixel) var(--color-base-active);
}

.border-right, .border-end {
  border-right: solid var(--pixel) var(--color-base-active);
}

.border-top {
  border-top: solid var(--pixel) var(--color-base-active);
}

.border-bottom {
  border-bottom: solid var(--pixel) var(--color-base-active);
}

.border-dashed {
  border: dashed var(--pixel) var(--color-base-active);
}

.border-dashed-left, .border-dashed-start {
  border-left: dashed var(--pixel) var(--color-base-active);
}

.border-dashed-right, .border-dashed-end {
  border-right: dashed var(--pixel) var(--color-base-active);
}

.border-dashed-top {
  border-top: dashed var(--pixel) var(--color-base-active);
}

.border-dashed-bottom {
  border-bottom: dashed var(--pixel) var(--color-base-active);
}

.border-radius, .radius {
  border-radius: var(--border-radius-width) !important;
}
.border-radius image, .border-radius img, .border-radius open-data, .radius image, .radius img, .radius open-data {
  border-radius: var(--border-radius-width) !important;
}

.border-round, .round {
  border-radius: 1000px !important;
}
.border-round image, .border-round img, .border-round open-data, .round image, .round img, .round open-data {
  border-radius: 1000px !important;
}

.inline-block {
  display: inline-block;
}

.hidden {
  display: none !important;
}

.flex-row {
  display: flex !important;
  flex-flow: row !important;
}

.flex-column {
  display: flex !important;
  flex-flow: column !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.relative {
  position: relative;
}

.fluid {
  width: 100%;
}

.auto-margin {
  margin: 0 auto;
}

.no-radius {
  border-radius: 0 !important;
}

.auto-break-word {
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
}

.ui-multi-selector {
  white-space: nowrap;
  height: 150px;
  overflow: auto;
  overflow-y: hidden;
}
.ui-multi-selector .options {
  display: inline-block;
  height: calc(100% - 8px);
  width: 28%;
  min-width: 100px;
  max-width: 200px;
  overflow: auto;
  border: solid var(--pixel) var(--color-base-active);
  border-right: none;
}
.ui-multi-selector .options:last-child {
  border-right: solid var(--pixel) var(--color-base-active);
}
.ui-multi-selector .options .option {
  border: solid var(--pixel) var(--color-base-active);
  margin: var(--half-margin-width);
  background: var(--color-base-light);
  cursor: pointer;
  padding: var(--half-padding-width);
  white-space: normal;
}
.ui-multi-selector .options .option .end {
  visibility: hidden;
}
.ui-multi-selector .options .option:hover {
  border-color: var(--color-base-active);
  background: var(--color-base-light-active);
}
.ui-multi-selector .options .option.selected {
  border-color: var(--color-base-primary);
  color: var(--color-base-primary);
}
.ui-multi-selector .options .option.selected .end {
  visibility: visible;
}
.ui-multi-selector .options .option.disabled {
  color: var(--color-medium);
  cursor: default;
}
.ui-multi-selector .options .option.title {
  margin: 0 0 var(--half-margin-width) 0;
  border-width: 0 0 var(--pixel) 0;
  text-align: center;
}
.ui-multi-selector .options .option.title.fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  height: auto;
  min-width: 0 !important;
  font-size: var(--font-size);
  line-height: normal;
  font-family: Arial, Helvetica, Tahoma, Verdana, Sans-Serif, ui-sans-serif;
  background: var(--color-light);
}

* {
  box-sizing: border-box;
}

i.icon {
  margin: 0;
}

a {
  color: var(--color-base-primary);
}

a, .ui-button {
  transition: color 0.3s, background 0.3s;
}

*::-webkit-scrollbar {
  width: 5px !important;
  background: rgba(0, 0, 0, 0.05) !important;
  height: 5px !important;
  border-radius: 0 !important;
}

*::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5) !important;
  border-radius: 0 !important;
}

.console-outlet {
  position: absolute;
  min-width: 640px;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  background: #E9ECF3;
}
.console-outlet .console-header {
  height: 60px;
  margin: 10px 0 0 0;
  position: relative;
  background: #ffffff;
  width: calc(100% - 20px);
  left: 10px;
  top: 0;
  padding: 0 1rem;
  border-radius: var(--border-radius-width, 5px);
}
.console-outlet .console-header .console-name {
  background: none;
  height: 60px;
  font-size: 26px;
  justify-content: center;
  display: flex;
  flex-flow: column;
}
.console-outlet .console-header .console-name .powerby {
  font-size: var(--small-text);
  color: var(--color-medium);
  user-select: none;
}
.console-outlet .console-header .links {
  right: 1rem;
  text-align: right;
  position: absolute;
  bottom: 1rem;
}
.console-outlet .console-header .user-options {
  user-select: none;
  position: relative;
  z-index: 10;
  width: 80px;
  background: #ffffff;
  border-radius: 3px;
}
.console-outlet .console-header .user-options .face {
  width: 80px;
  height: 60px;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.console-outlet .console-header .user-options .options {
  display: none;
}
.console-outlet .console-header .user-options .options a {
  display: block;
  padding: 5px;
  color: #666666;
  text-align: left;
}
.console-outlet .console-header .user-options .options a:last-child {
  border-radius: 0 0 3px 3px;
}
.console-outlet .console-header .user-options .options a:hover {
  background: var(--color-primary);
  color: var(--color-primary-content);
}
.console-outlet .console-header .user-options .options .split {
  margin: 5px;
  border-top: solid 1px #ddd;
}
.console-outlet .console-header .user-options:hover {
  background: #f9f9f9;
}
.console-outlet .console-header .user-options:hover .options {
  display: block;
}
.console-outlet .console-content {
  overflow: hidden;
  position: absolute;
  height: calc(100% - 80px);
  top: 80px;
  width: 100%;
}
.console-outlet .console-menu {
  position: absolute;
  left: 7px;
  top: 0;
  width: 180px;
  bottom: 10px;
  display: flex;
  flex-flow: column;
  overflow: hidden;
  border-radius: var(--border-radius-width, 5px);
}
.console-outlet .console-menu .bg {
  background: #fff;
  padding: 1px 0 5px 0;
  margin-left: 3px;
  border-radius: 0 0 var(--border-radius-width, 5px) var(--border-radius-width, 5px);
}
.console-outlet .console-menu .console-menu-header {
  color: #cccccc;
  line-height: 3rem;
  padding: 0 10px;
  cursor: default;
  margin-left: 3px;
  background: #ffffff;
  border-radius: var(--border-radius-width, 5px) var(--border-radius-width, 5px) 0 0;
}
.console-outlet .console-menu .console-menu-scroll-view {
  display: flex;
  flex-flow: column;
  flex: 1;
  overflow: auto;
}
.console-outlet .console-menu .accordion {
  user-select: none;
}
.console-outlet .console-menu .accordion .title {
  transition: background-color 0.5s, color 0.5s;
  position: relative;
  cursor: pointer;
  line-height: 3rem;
  padding: 0 15px !important;
  margin: 0;
  color: #666 !important;
  font-weight: bold;
}
.console-outlet .console-menu .accordion .title i {
  font-weight: normal;
}
.console-outlet .console-menu .accordion .title:hover {
  background: #f2f6f9;
}
.console-outlet .console-menu .accordion .title.active {
  background: #f2f6f9;
  border-left: solid 3px var(--color-primary, #E4393C);
  color: var(--color-primary, #E4393C) !important;
  margin-left: -3px;
}
.console-outlet .console-menu .accordion .title:after {
  content: "\f107";
  position: absolute;
  right: 15px;
  font-family: Icons;
}
.console-outlet .console-menu .accordion .title.active:after {
  transform: rotate(180deg);
}
.console-outlet .console-menu .accordion .content {
  padding: 0 !important;
  position: relative;
}
.console-outlet .console-menu .accordion .content a {
  line-height: 3rem;
  padding: 0 15px;
  display: block;
  margin: 1px 0;
  color: #666666;
  position: relative;
  transition: background-color 0.5s, color 0.5s, border-color 0.5s;
}
.console-outlet .console-menu .accordion .content a:hover, .console-outlet .console-menu .accordion .content a.active {
  background: #f2f6f9;
  color: var(--color-primary, #E4393C);
  border-left: solid 3px var(--color-primary, #ffb1aa) !important;
}
.console-outlet .console-menu .accordion .content a.active:after {
  content: "\f061";
  position: absolute;
  right: 15px;
  font-family: Icons;
}
.console-outlet .console-menu .accordion .content.active {
  margin-left: -3px;
}
.console-outlet .console-menu .accordion .content.active::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--color-primary, #ffb1aa);
  opacity: 0.5;
}
.console-outlet .console-menu .accordion .content.active a {
  border-left: solid 3px transparent;
}
.console-outlet .console-menu .accordion .content .sub-hd {
  font-size: 0.8rem;
  color: #999;
  padding: 5px 15px 5px 18px;
}
.console-outlet .console-menu .accordion .accordion {
  margin: 0 !important;
}
.console-outlet .console-menu .accordion .accordion .title {
  padding: 0 23px !important;
  font-weight: normal;
}
.console-outlet .console-menu .accordion .accordion .title.active {
  border-top: solid 1px #009c95;
  border-left: none;
  margin-left: 0 !important;
  margin-top: -1px !important;
}
.console-outlet .console-menu .accordion .accordion .content a {
  padding: 0 31px;
}
.console-outlet .console-frame {
  position: absolute;
  background: #ffffff;
  margin: 0;
  top: 0;
  width: calc(100% - 207px);
  right: 10px;
  bottom: 10px;
  border-radius: var(--border-radius-width, 5px);
}
.console-outlet .console-frame iframe {
  border-radius: var(--border-radius-width, 5px);
}

.console-login {
  width: 800px;
  height: 500px;
  box-sizing: content-box;
  background: #ffffff;
  border: solid 3px rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-flow: row;
}
.console-login .ad-slide {
  height: 500px;
  display: flex;
  flex: 1;
  background: #ffffff;
  background: linear-gradient(45deg, rgba(214, 214, 214, 0.5) 0, rgba(214, 214, 214, 0.5) 25%, transparent 25%, transparent 50%, rgba(214, 214, 214, 0.5) 50%, rgba(214, 214, 214, 0.5) 75%, transparent 75%, transparent);
  background-size: 10px 10px;
}
.console-login .login-form {
  width: 300px;
}

.page-outlet {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-flow: column;
}
.page-outlet .page-content {
  display: flex;
  flex: 1;
  flex-flow: row;
  overflow: auto;
}
.page-outlet .page-content .page-content-main {
  width: 100%;
  height: 100%;
  position: relative;
}
.page-outlet .page-content .page-content-main.border {
  border: 1px solid #ddd;
  border-top: 2px solid var(--color-base-primary);
  border-radius: var(--border-radius-width);
}
.page-outlet .page-content.scroll-view-enable {
  display: flex;
  flex-flow: column;
  overflow: hidden;
}
.page-outlet .page-content.scroll-view-enable .page-content-scroll-view {
  display: flex;
  flex: 1;
  flex-flow: column;
  overflow: auto;
  position: relative;
}
.page-outlet .page-content.scroll-view-enable .page-content-scroll-view:last-child {
  border-radius: var(--border-radius-width);
}
.page-outlet .page-content.scroll-view-enable .page-content-scroll-view .scroll-view-content {
  width: 100%;
}
.page-outlet .page-content .page-content-footer {
  background: #f9fafb;
  border-top: solid 1px #eee;
}
.page-outlet .page-content .page-content-footer:last-child {
  border-bottom-left-radius: var(--border-radius-width);
  border-bottom-right-radius: var(--border-radius-width);
}
.page-outlet .page-content .empty-list {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(135deg, rgba(214, 214, 214, 0.3) 0, rgba(214, 214, 214, 0.3) 25%, transparent 25%, transparent 50%, rgba(214, 214, 214, 0.3) 50%, rgba(214, 214, 214, 0.3) 75%, transparent 75%, transparent);
  background-size: 6px 6px;
}
.line-bg, .images-uploader .add-image, .images-uploader .image:hover {
  background-image: linear-gradient(135deg, rgba(214, 214, 214, 0.3) 0, rgba(214, 214, 214, 0.3) 25%, transparent 25%, transparent 50%, rgba(214, 214, 214, 0.3) 50%, rgba(214, 214, 214, 0.3) 75%, transparent 75%, transparent);
  background-size: 6px 6px;
}

.ui-row .col .fields:last-child {
  margin: 0 -0.5em;
}

.edui-editor {
  z-index: 1 !important;
}

.ui.form.has-bottom-options {
  padding-bottom: 50px;
}
.ui.form .form-bottom-options {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: #fff;
  border-top: solid 1px #ddd;
  z-index: 50 !important;
}
.ui.form.top-leave {
  border-top: solid 1px #eee;
  margin-top: 1rem;
  padding-top: 1rem;
}
.ui.form.border-top {
  border-top: solid 1px #eee;
}
.ui.form fieldset {
  margin-bottom: 1rem;
}
.ui.form.has-right-picture .form-bottom-options {
  right: 300px;
}

.focus-list .focus-item {
  float: left;
  width: 25%;
  position: relative;
  overflow: auto;
  padding: 5px;
}
.focus-list .focus-item:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  border: solid 1px #ddd;
  bottom: 5px;
  z-index: 1;
}
.focus-list .focus-item .hd {
  margin: 1px;
  z-index: 2;
  position: relative;
  padding: 5px;
  background: #f9f9f9;
}
.focus-list .focus-item .hd .h1 {
  font-size: 1.2rem;
}
.focus-list .focus-item .hd p {
  color: #999;
  margin: 5px 0 0 0;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.focus-list .focus-item .slide-wrap {
  padding-top: 56%;
  position: relative;
  margin: 1px;
  z-index: 3;
}
.focus-list .focus-item .slide-wrap .swiper-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.focus-list .focus-item .slide-wrap .swiper-container .swiper-slide {
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.focus-list .focus-item .slide-wrap .swiper-container .swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}

.focus-upload-list {
  overflow: auto;
}
.focus-upload-list .focus-upload-item {
  float: left;
  position: relative;
  width: 20%;
  padding: 5px;
}
.focus-upload-list .focus-upload-item:before {
  position: absolute;
  content: "";
  left: 5px;
  top: 5px;
  right: 5px;
  bottom: 5px;
  border: solid 1px #eee;
  z-index: 1;
}
.focus-upload-list .focus-upload-item .upload-wrap {
  margin: 8px;
  position: relative;
  padding-top: 56%;
  z-index: 3;
}
.focus-upload-list .focus-upload-item .upload-wrap .single-uploader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.focus-upload-list .focus-upload-item .upload-wrap .single-uploader img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}
.focus-upload-list .focus-upload-item.create .padding {
  visibility: hidden;
}
.focus-upload-list .focus-upload-item.create .upload-wrap {
  position: static;
}
.focus-upload-list .focus-upload-item.create .upload-wrap .single-uploader {
  z-index: 10;
}
.focus-upload-list .focus-upload-item .padding {
  padding: 16px 8px 8px 8px;
  position: relative;
  z-index: 3;
}
.focus-upload-list .focus-upload-item .options {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 5;
  display: none;
}
.focus-upload-list .focus-upload-item .options button {
  border-radius: 0 0 50% 0;
}
.focus-upload-list .focus-upload-item:hover .options {
  display: block;
}

.images-uploader {
  min-height: 122px;
  overflow: auto;
  padding: 0 0 var(--margin-width) var(--margin-width);
}
.images-uploader .center-button {
  margin: 0 auto;
  color: #999;
  width: 100px;
  text-align: center;
  cursor: pointer;
}
.images-uploader .center-button:hover {
  color: var(--color-primary);
}
.images-uploader .image {
  float: left;
  margin: var(--margin-width) var(--margin-width) 0 0;
  width: 100px;
  height: 100px;
  border: 1px dashed var(--border-color);
  transition: border 0.3s;
  border-radius: var(--border-radius-width);
  position: relative;
}
.images-uploader .image:hover {
  border: 1px dashed var(--color-primary);
}
.images-uploader .image:hover button {
  opacity: 1;
}
.images-uploader .image .img {
  width: 96px;
  height: 96px;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin: 1px auto;
  border-radius: var(--border-radius-width);
}
.images-uploader .image .img img {
  width: auto;
  height: auto;
}
.images-uploader .image button {
  position: absolute;
  right: 5px;
  top: 5px;
  opacity: 0;
  transition: opacity 0.3s;
}
.images-uploader .add-image {
  user-select: none;
  float: left;
  margin: var(--margin-width) var(--margin-width) 0 0;
  width: 100px;
  height: 100px;
  border: 1px dashed var(--border-color);
  transition: border 0.3s, color 0.3s;
  border-radius: var(--border-radius-width);
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  cursor: pointer;
}
.images-uploader .add-image:hover {
  border: 1px dashed var(--color-primary);
  color: var(--color-primary);
}

/* 2022 版本的后台界面 */
.console-outlet-v2022 {
  user-select: none;
  background: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  flex-flow: row;
}
.console-outlet-v2022 .start-side {
  width: 60px;
  display: flex;
  flex-flow: column;
  overflow: visible;
  background: #E9ECF3;
}
.console-outlet-v2022 .start-side .start-menu {
  width: 60px;
  flex: 1;
  overflow: auto;
}
.console-outlet-v2022 .start-side .start-menu .item {
  width: 30px;
  height: 30px;
  margin: 5px auto;
  border-radius: 50%;
  display: flex;
  position: relative;
  color: #666;
  font-size: 16px;
  flex-flow: column;
  justify-content: center;
  cursor: pointer;
}
.console-outlet-v2022 .start-side .start-menu .item i {
  margin: 0 auto;
}
.console-outlet-v2022 .start-side .start-menu .item:hover {
  color: var(--color-primary);
  opacity: 0.8;
}
.console-outlet-v2022 .start-side .start-menu .item.active {
  color: var(--color-primary);
  background: #E9ECF3;
}
.console-outlet-v2022 .start-side .bottom-menu .item {
  height: 40px;
  display: flex;
  position: relative;
  color: #666;
  font-size: 20px;
  flex-flow: column;
  justify-content: center;
  cursor: pointer;
}
.console-outlet-v2022 .start-side .bottom-menu .item i {
  margin: 0 auto;
}
.console-outlet-v2022 .start-side .bottom-menu .item:hover {
  color: var(--color-primary);
  opacity: 0.8;
}
.console-outlet-v2022 .menu-side {
  width: 160px;
  display: flex;
  flex-flow: column;
  overflow: hidden;
  background: #f5f7f8;
}
.console-outlet-v2022 .menu-side .menu-list {
  flex: 1;
  display: flex;
  flex-flow: column;
  overflow: hidden;
}
.console-outlet-v2022 .menu-side .title {
  text-align: center;
  padding: var(--padding-width);
  color: #999;
}
.console-outlet-v2022 .menu-side .menus {
  padding: 10px;
  flex: 1;
  overflow: auto;
}
.console-outlet-v2022 .menu-side .menus .item .sub-hd {
  font-size: var(--small-text);
  padding-top: 16px;
  color: #999;
}
.console-outlet-v2022 .menu-side .menus .item a {
  padding: 6px;
  background: #edeff3;
  margin-top: 6px;
  border-radius: var(--border-radius-width);
  color: #666;
  display: flex;
  flex-flow: row;
}
.console-outlet-v2022 .menu-side .menus .item a .start {
  display: flex;
  flex-flow: column;
  justify-content: center;
  min-width: 20px;
}
.console-outlet-v2022 .menu-side .menus .item a .center {
  flex: 1;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.console-outlet-v2022 .menu-side .menus .item a .end {
  visibility: hidden;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.console-outlet-v2022 .menu-side .menus .item a:hover {
  color: var(--color-primary);
  background: #e1e5ee;
}
.console-outlet-v2022 .menu-side .menus .item a.active {
  color: var(--color-primary);
  background: #e1e5ee;
}
.console-outlet-v2022 .menu-side .menus .item a.active .end {
  visibility: visible;
}
.console-outlet-v2022 .menu-side .menus .item:first-child .sub-hd {
  padding-top: 0;
}
.console-outlet-v2022 .menu-side .menus .item:first-child a {
  margin-top: 0;
}
.console-outlet-v2022 .frame-side {
  flex: 1;
  overflow: hidden;
}

.files-master {
  width: 100%;
  overflow: auto;
}
.files-master .file-item {
  width: 100px;
  margin: 10px 0 0 10px;
  border: solid 1px transparent;
  float: left;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.files-master .file-item .preview {
  width: 100%;
  padding-top: 100%;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
}
.files-master .file-item .preview .image {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.files-master .file-item .preview .image img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.files-master .file-item .name {
  height: 15px;
  text-align: center;
  margin-bottom: 10px;
}
.files-master .file-item .name a {
  color: #333;
}
.files-master .file-item .sel-wrap {
  cursor: pointer;
  user-select: none;
  height: 15px;
  margin-bottom: 10px;
}
.files-master .file-item.dir .name a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.files-master .file-item .options {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 4;
  padding: 0 !important;
}
.files-master .file-item .options .column {
  text-align: center;
}
.files-master .file-item .options .column a {
  color: #fff;
  text-shadow: 0 0 2px #333;
}
.files-master .file-item .options .column a:hover {
  text-decoration: underline;
}
.files-master .file-item:hover {
  border-color: #ccc;
  background: #f5f7f8;
}
.files-master .file-item:hover .options {
  visibility: visible;
}
.files-master .file-item.checked {
  border-color: var(--color-primary);
  background: #f5f7f8;
}
.files-master .uploading-item {
  float: left;
  width: 200px;
  display: flex;
  flex-flow: row;
  padding: 10px;
}
.files-master .uploading-item .center {
  padding-left: 10px;
  flex: 1;
}

.full-page-wrap, .full-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 99;
  background: #f5f7f8;
}

/*# sourceMappingURL=style.css.map */