@charset "UTF-8";
/**
 *
 * @variables.css
 * @author zhangxinxu
 * @edited yangfan
 * @create 20-03-17
**/

:root {
    /* 基础颜色变量 */
    --ui-blue: #2a80eb;
    --ui-dark-blue: #0057c3;
    --ui-dark: #4c5161;
    --ui-gray: #a2a9b6;
    --ui-dark-gray: #b6bbc6;
    --ui-light: #f7f9fa;
    --ui-white: #ffffff;
    --ui-green: #1cad70;
    --ui-orange: #f59b00;
    --ui-red: #eb4646;
    /* hover的颜色 */
    --ui-list-hover: #f0f7ff;
    /* selected的颜色 */
    --ui-list-selected: #e0f0ff;
    /* disabled禁用色 */
    --ui-disabled: #ccd0d7;
    /* 边框颜色 */
    --ui-border: #d0d0d5;
    /* 深一点的边框颜色 */
    --ui-dark-border: #ababaf;
    /* 浅一点的边框颜色 */
    --ui-light-border: #ededef;
    /* 透明度 */
    --ui-opacity: .4;
    /* 圆角变量 */
    --ui-radius: 4px;
    /* 基础字号 */
    --ui-font: 14px;
    /* 动画时间 */
    --ui-animate-time: .2s;
    /* 基本尺寸单元 */
    --ui-line-height: 20px;
    --ui-component-height: 40px;
}

/**
 *
 * @Button.css
 * @author zhangxinxu
 * @create  15-06-12
 * @edited  17-06-13
            17-11-07 use png+spin for loading
            19-07-09 IE9+, no external links
            20-04-03 version edge
 * @editor  lennonover
 */

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

}

.ui-button,
[is="ui-button"] {
    display: inline-block;
    line-height: var(--ui-button-line-height);
    font-size: var(--ui-font, 14px);
    text-align: center;
    color: var(--ui-dark, #4c5161);
    border-radius: var(--ui-radius, 4px);
    border: 1px solid var(--ui-border, #d0d0d5);
    padding: calc((var(--ui-button-height) - var(--ui-button-line-height) - 2px) / 2) 15px;
    min-width: 80px;
    background-color: var(--ui-white, #ffffff);
    background-repeat: no-repeat;
    background-position: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: border-color var(--ui-animate-time, .2s), box-shadow var(--ui-animate-time, .2s), opacity var(--ui-animate-time, .2s);
    font-family: inherit;
    cursor: pointer;
    overflow: visible;
}

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

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

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

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

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

.ui-button:hover,
[is="ui-button"]:hover {
    color: var(--ui-dark, #4c5161);
    text-decoration: none;
}
.ui-button:not(.disabled):not(.loading):not(:disabled):hover,
[is="ui-button"]:not(.disabled):not(.loading):not(:disabled):hover  {
    border-color: var(--ui-dark-border, #ababaf);
    box-shadow: inset 0 1px 2px rgba(var(--ui-button-black), 0.01),
        inset 0 0 0 100px rgba(var(--ui-button-black), 0.05);
}
.ui-button:not(.disabled):not(.loading):not(:disabled):active,
[is="ui-button"]:not(.disabled):not(.loading):not(:disabled):active {
    box-shadow: inset 0 1px 2px rgba(var(--ui-button-black), 0.1),
        inset 0 0 0 100px rgba(var(--ui-button-black), 0.1);
}
.ui-button[data-type="primary"],
.ui-button[data-type="remind"],
.ui-button[data-type="success"],
.ui-button[data-type^="warn"],
.ui-button[data-type="danger"],
.ui-button[data-type="error"],
.ui-button[type="primary"],
.ui-button[type="remind"],
.ui-button[type="success"],
.ui-button[type^="warn"],
.ui-button[type="danger"],
.ui-button[type="error"],
[is="ui-button"][data-type="primary"],
[is="ui-button"][data-type="remind"],
[is="ui-button"][data-type="success"],
[is="ui-button"][data-type^="warn"],
[is="ui-button"][data-type="danger"],
[is="ui-button"][data-type="error"],
[is="ui-button"][type="primary"],
[is="ui-button"][type="remind"],
[is="ui-button"][type="success"],
[is="ui-button"][type^="warn"],
[is="ui-button"][type="danger"],
[is="ui-button"][type="error"] {
    border: 0;
    padding-top: calc((var(--ui-button-height) - var(--ui-button-line-height)) / 2);
    padding-bottom: calc((var(--ui-button-height) - var(--ui-button-line-height)) / 2);
    color: var(--ui-white, #ffffff);
}

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

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

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

/* disabled status */
.ui-button.disabled,
.ui-button:disabled,
[is="ui-button"].disabled,
[is="ui-button"]:disabled {
    opacity: var(--ui-opacity, .4);
    cursor: default;
}
/* loading status */
.ui-button.loading,
[is="ui-button"].loading {
    color: transparent !important;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    cursor: default;
}
/* input按钮，三个点 */
input.ui-button.loading,
input[is="ui-button"].loading {
    --ui-loading-color: var(--ui-blue, #2a80eb);
    --ui-loading-radial: radial-gradient(3px circle, var(--ui-loading-color), var(--ui-loading-color) 2px, transparent 3px);
    background-image: var(--ui-loading-radial), var(--ui-loading-radial), var(--ui-loading-radial);
    background-position-x: calc(50% - 10px), 50%, calc(50% + 10px);
    background-position-y: 50%;
    background-size: 5px 5px;
    animation: bubbling 1s infinite;
}
input.ui-button[data-type]:not([data-type="normal"]).loading,
input[is="ui-button"][data-type]:not([data-type="normal"]).loading  {
    --ui-loading-color: var(--ui-white, #fff);
}

/* button 按钮 */
.ui-button.loading::before,
[is="ui-button"].loading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    background-color: var(--ui-blue,#2a80eb);
    background-repeat: no-repeat;
    -webkit-mask: var(--ui-button-loading-img);
    mask: var(--ui-button-loading-img);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    margin: auto;
    animation: spin 1s linear infinite;
}
/* 有底色按钮 */
.ui-button[data-type]:not([data-type="normal"]).loading::before,
.ui-button[type="primary"].loading::before,
.ui-button[type="remind"].loading::before,
.ui-button[type="success"].loading::before,
.ui-button[type^="warn"].loading::before,
.ui-button[type="danger"].loading::before,
.ui-button[type="error"].loading::before,
[is="ui-button"][data-type]:not([data-type="normal"]).loading::before,
[is="ui-button"][type="primary"].loading::before,
[is="ui-button"][type="remind"].loading::before,
[is="ui-button"][type="success"].loading::before,
[is="ui-button"][type^="warn"].loading::before,
[is="ui-button"][type="danger"].loading::before,
[is="ui-button"][type="error"].loading::before {
    background-color: var(--ui-white,#ffffff);
}

@keyframes bubbling {
    0% {
        background-position-y: 50%, 50%, 50%;
    }
    15% {
        background-position-y: calc(50% - 3px), 50%, 50%;
    }
    30% {
        background-position-y: calc(50% - 1px), calc(50% - 3px), 50%;
    }
    45% {
        background-position-y: 50%, calc(50% - 1px), calc(50% - 3px);
    }
    60% {
        background-position-y: 50%, 50%, calc(50% - 1px);
    }
    75% {
        background-position-y: 50%, 50%,  50%;
    }
}

@keyframes spin {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

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

/**
 *
 * @Checkbox.css
 * @author zhangxinxu
 * @create 15-06-18
 * @edit   17-06-14    focusable
 * @editor shanyerong
 * @edit   20-04-30    description here
**/
/* checkbox基础变量 */
:root {
    --ui-checkbox-width: 20px;
    --ui-checkbox-height: 20px;
}

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

[is="ui-checkbox"]::after {
    content: "";
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M920.185 224.838c-33.782-33.935-88.619-33.935-122.464 0L409.955 614.564 226.231 429.952c-33.782-33.935-88.68-33.935-122.461 0-33.784 33.997-33.784 89.108 0 123.044l244.925 246.118c33.782 33.998 88.68 33.998 122.463 0l449.028-451.201c33.843-33.967 33.843-89.048-.001-123.075z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
    background-size: 12px 12px;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--ui-animate-time, .2s);
}

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

[is="ui-checkbox"]:focus {
    color: var(--ui-blue, #2a80eb);
}

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

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

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

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

[is="ui-checkbox"]:indeterminate::after {
    opacity: 1;
    visibility: visible;
    color: var(--ui-blue, #2a80eb);
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 8px 8px;
}

[is="ui-checkbox"]:not(:disabled):indeterminate:focus,
[is="ui-checkbox"]:not(:disabled):indeterminate:hover {
    color: var(--ui-dark-blue, #0057c3);
}

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

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

@media (prefers-reduced-motion: reduce) {
    [is="ui-checkbox"],
    [is="ui-checkbox"]::after {
        transition: none;
    }
}

/**
 *
 * @Color.css
 * @author xinxuzhang
 * @create 16-06-03
 * @edited 20-07-16 @Gwokhov
**/

[is="ui-color"] {
    width: 40px;
    height: 40px;
    padding: 0;
    vertical-align: middle;
    border: 0;
    border-radius: var(--ui-radius, 4px);
    background-color: rgba(25, 28, 34, 0.2);
    outline: none;
    cursor: pointer;
}

[is="ui-color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    margin: 8px auto;
    width: 24px;
    height: 24px;
}

[is="ui-color"]::-webkit-color-swatch {
    border: 1px solid var(--ui-light, #f7f9fa);
    border-radius: calc(var(--ui-radius, 4px) - 1px);
}
[is="ui-color"]:disabled::-webkit-color-swatch {
    background-image: linear-gradient(to right bottom, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px)), linear-gradient(to top right, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px));
}

.ui-color-container {
    display: none;
    position: absolute;
    width: 241px;
    padding: 10px 12px;
    border-radius: var(--ui-radius, 4px);
    background-color: var(--ui-light, #f7f9fa);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    font-size: var(--ui-font, 14px);
    animation: fadeIn var(--ui-animate-time, .2s);
    --safe-area: 3px;
    z-index: 21;
}

.ui-color-switch {
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--ui-blue, #2a80eb);
    border: 1px solid transparent;
    height: 20px;
    line-height: 20px;
    padding: 2px 5px;
    border-radius: calc(var(--ui-radius, 4px) - 1px);
    background: none;
    font-family: inherit;
    transition: border-color var(--ui-animate-time, .2s), background-color var(--ui-animate-time, .2s);
    box-sizing: content-box;
}
.ui-color-switch:hover {
    background-color: var(--ui-white, #ffffff);
    border-color: #d0d0d5;
    background-color: var(--ui-white, #ffffff);
}
.ui-color-switch:active {
    line-height: normal;
}

.ui-color-switch[data-mode]::before {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    vertical-align: -2px;
    margin-right: 4px;
    pointer-events: none;
}
.ui-color-switch[data-mode="basic"]::before {
    background: conic-gradient(red 120deg, blue 120deg 240deg, lime 240deg);
    transform: rotate(-60deg);
    border-radius: 50%;
}
.ui-color-switch[data-mode="more"]::before {
    background: radial-gradient(closest-side, white, transparent),
        conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
    border-radius: 50%;
}

[type="color-opacity"] {
    background: linear-gradient(var(--ui-color-opacity, #000000), var(--ui-color-opacity, #000000)),
        conic-gradient(black 45deg, white 45deg, white 225deg, black 225deg);
    box-sizing: border-box;
    background-clip: content-box;
    border: 8px solid rgba(25, 28, 34, 0.2);
    padding: 1px;
    font-size: 0;
}

.ui-color-current {
    padding-bottom: 20px;
}

.ui-color-current-square,
.ui-color-current-square-opacity {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    border-radius: calc(var(--ui-radius, 4px) - 1px);
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.25),
        inset 0 -1px rgba(0, 0, 0, 0.25), inset 1px 0 rgba(0, 0, 0, 0.25),
        inset -1px 0 rgba(0, 0, 0, 0.25);
    background-color: currentColor;
    vertical-align: middle;
}
.ui-color-current-square-opacity {
    background: linear-gradient(var(--ui-color-opacity, #000000),var(--ui-color-opacity, #000000)),
        conic-gradient(black 45deg, white 45deg, white 225deg, black 225deg);
}

.ui-color-current-input {
    width: 72px;
    border: 1px solid var(--ui-border, #d0d0d5);
    background-color: var(--ui-white, #ffffff);
    height: 20px;
    line-height: 20px;
    padding: 2px 5px;
    border-radius: calc(var(--ui-radius, 4px) - 1px);
    margin-left: 5px;
    font-size: 13px;
    vertical-align: middle;
    box-sizing: content-box;
    text-transform: uppercase;
    color: inherit;
}

.ui-color-body {
    min-height: 100px;
}

.ui-color-basic {
    overflow: hidden;
}

.ui-color-lump-group {
    width: 72px;
    float: left;
}

.ui-color-lump {
    display: block;
    width: 11px;
    height: 11px;
    margin: 0 1px 1px 0;
    box-sizing: border-box;
    background-color: currentColor;
}

.ui-color-lump:hover,
.ui-color-basic a.active,
.ui-color-lump-preset:hover {
    border: 1px solid var(--ui-white, #ffffff);
}

.ui-color-lump-preset {
    display: block;
    height: 35px;
    margin: 0 1px 1px 0;
    box-sizing: border-box;
    background-color: currentColor;
    border: 1px solid transparent;
}

.ui-color-basic-l {
    width: 12px;
    float: left;
    overflow: hidden;
}

.ui-color-basic-r {
    margin-left: 25px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 150px;
    flex-wrap: wrap;
}

.ui-color-basic-r .ui-color-lump {
    float: left;
}

.ui-color-more {
    display: none;
    height: 150px;
}

.ui-color-more .ui-color-gradient {
    width: 100%;
    height: 100%;
}

.ui-color-more-l {
    width: 180px;
    height: inherit;
    float: left;
    position: relative;
}

.ui-color-more-l .ui-color-gradient {
    background: linear-gradient(90deg, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%);
}

.ui-color-cover-white {
    background-color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #808080);
    cursor: crosshair;
}

.ui-color-circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    border: 3px solid var(--ui-white, #ffffff);
    border-radius: 20px;
    background-color: #f00;
    background-clip: content-box;
    transform: translate(-11px, -11px);
    pointer-events: none;
}

.ui-color-more-r {
    height: inherit;
    float: right;
    padding-right: 8px;
    position: relative;
}

.ui-color-more-fill {
    display: block;
    width: 16px;
    height: 100%;
    background-color: #f00;
}

.ui-color-cover-white,
.ui-color-more-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: inherit;
    height: 150px;
}

.ui-color-more-cover {
    background-color: rgba(0, 0, 0, 0.01);
    -webkit-tap-highlight-color: transparent;
}

.ui-color-more-arrow {
    position: absolute;
    right: 0;
    top: 100%;
}

.ui-color-more-arrow::before {
    content: "";
    position: absolute;
    right: 0;
    top: -5px;
    width: 0;
    height: 0;
    border-width: 5px 6px;
    border-style: solid;
    border-color: transparent;
    border-right-color: #36383f;
    overflow: hidden;
}

.ui-color-opacity {
    margin-top: 12px;
    text-align: center;
}

.ui-color-opacity-range {
    width: 180px;
}

.ui-color-footer {
    margin-top: 15px;
    padding-bottom: 5px;
    text-align: right;
}

.ui-color-button-cancel,
.ui-color-button-ensure {
    display: inline-block;
    width: 80px;
    line-height: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-left: 15px;
    border-radius: var(--ui-radius, 4px);
    text-align: center;
    font-size: var(--ui-font, 14px);
    font-family: inherit;
    transition: box-shadow var(--ui-animate-time, .2s), border-color var(--ui-animate-time, .2s);
    cursor: pointer;
}

.ui-color-button-cancel {
    border: 1px solid var(--ui-border, #d0d0d5);
    background-color: var(--ui-white, #ffffff);
    color: var(--ui-dark, #4c5161);
}

.ui-color-button-cancel:hover {
    border-color: var(--ui-dark-border, #ababaf);
    color: var(--ui-dark, #4c5161);
}

.ui-color-button-ensure {
    border: 1px solid var(--ui-blue, #2a80eb);
    background-color: var(--ui-blue, #2a80eb);
    color: var(--ui-white, #ffffff);
}

.ui-color-button-ensure:hover {
    color: var(--ui-white, #ffffff);
}

.ui-color-button-cancel:hover,
.ui-color-button-ensure:hover {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.01),
        inset 0 0 0 100px rgba(0, 0, 0, 0.05);
}

.ui-color-button-cancel:active,
.ui-color-button-ensure:active {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
        inset 0 0 0 100px rgba(0, 0, 0, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .ui-color-container {
        animation: none;
    }
    .ui-color-switch,
    .ui-color-button-cancel,
    .ui-color-button-ensure {
        transition: none;
    }
}/**
 *
 * @Datalist.css
 * @author zhangxinxu
 * @create 16-03-29
 *
**/

datalist {
    display: none;
}

.ui-datalist {
    display: none;
    position: absolute;
    animation: fadeIn var(--ui-animate-time, .2s);
    z-index: 19;
}

.ui-datalist-datalist {
    max-height: 304px;
    background-color: var(--ui-white, #ffffff);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--ui-border, #d0d0d5);
    border: 0 rgba(0, 0, 0, 0.2);
    font-size: var(--ui-font, 14px);
    position: relative;
    overflow: auto;
    overscroll-behavior: none;
    -ms-scroll-chaining: none;
}

.ui-datalist-datalist::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.ui-datalist-datalist::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: calc(var(--ui-radius, 4px) + 4px);
}

.ui-datalist-datalist::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

.ui-datalist-datalist::-webkit-scrollbar-track-piece {
    background-color: #ddd;
}

.ui-datalist-option {
    line-height: 20px;
    padding: 9px 12px;
    background-color: var(--ui-white, #ffffff);
    transition: background-color var(--ui-animate-time, .2s);
    overflow: hidden;
    cursor: pointer;
}

.ui-datalist:empty,
.ui-datalist-option:empty {
    display: none;
}

.ui-datalist-option:not(.disabled):hover {
    background-color: var(--ui-list-hover, #f0f7ff);
}

.ui-datalist-datalist > .selected {
    background-color: var(--ui-list-selected, #e0f0ff);
}

.ui-datalist-datalist > .disabled {
    opacity: var(--ui-opacity, .4);
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ui-datalist-value {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    overflow: hidden;
}

.ui-datalist-label {
    float: right;
    color: var(--ui-gray, #a2a9b6);
    font-size: calc(var(--ui-font, 14px) - 2px);
}

.ui-datalist-label + .ui-datalist-value {
    margin-right: 60px;
}

@media (prefers-reduced-motion: reduce) {
    .ui-datalist {
        animation: none;
    }
    .ui-datalist-option {
        transition: none;
    }
}

/**
 *
 * @Date.css
 * @author xinxuzhang
 * @create 15-07-03
 *
**/
[is="ui-datetime"]::-webkit-clear-button,
[is="ui-datetime"]::-webkit-inner-spin-button,
[is="ui-datetime"]::-webkit-calendar-picker-indicator {
    display: none;
}

[type="date"][is="ui-datetime"]::-webkit-datetime-edit-text {
    color: transparent;
    background: linear-gradient(
            to bottom,
            transparent 9px,
            var(--ui-dark, #4c5161) 9px,
            var(--ui-dark, #4c5161) 10px,
            transparent 10px
        )
        no-repeat center;
    background-size: 80% 100%;
}

[is="ui-datetime"]::-webkit-datetime-edit-text,
[is="ui-datetime"]::-webkit-datetime-edit-year-field,
[is="ui-datetime"]::-webkit-datetime-edit-month-field,
[is="ui-datetime"]::-webkit-datetime-edit-day-field,
[is="ui-datetime"]::-webkit-datetime-edit-hour-field,
[is="ui-datetime"]::-webkit-datetime-edit-minute-field,
[is="ui-datetime"]::-webkit-datetime-edit-ampm-field {
    background: none;
    color: var(--ui-dark, #4c5161);
}
[is="ui-datetime"]:disabled::-webkit-datetime-edit-text,
[is="ui-datetime"]:disabled::-webkit-datetime-edit-year-field,
[is="ui-datetime"]:disabled::-webkit-datetime-edit-month-field,
[is="ui-datetime"]:disabled::-webkit-datetime-edit-day-field,
[is="ui-datetime"]:disabled::-webkit-datetime-edit-hour-field,
[is="ui-datetime"]:disabled::-webkit-datetime-edit-minute-field,
[is="ui-datetime"]:disabled::-webkit-datetime-edit-ampm-field {
    opacity: var(--ui-opacity, .4);
}

[is="ui-datetime"]:valid::-webkit-datetime-edit {
    visibility: hidden;
}

[is="ui-datetime"] {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    height: var(--ui-input-height);
    line-height: var(--ui-input-line-height);
    padding: calc((var(--ui-input-height) - var(--ui-input-line-height) - 2px) / 2) 8px;
    padding-right: 20px; /* 下拉图标 */
    border: 1px solid var(--ui-border, #d0d0d5);
    border-radius: var(--ui-radius, 4px);
    box-sizing: border-box;
    font-size: var(--ui-font, 14px);
    outline: none;
    color: var(--ui-dark, #4c5161);
    transition: border-color var(--ui-animate-time, .2s), background-color var(--ui-animate-time, .2s);
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;

    background: var(--ui-white, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-205 297 200 200'%3E%3Cpath d='M-59.3 365.9c-5.1-5.2-13.4-5.2-18.5 0l-27.7 28.3-27.7-28.3c-5.1-5.2-13.4-5.2-18.5 0s-5.1 13.6 0 18.9l46.2 47.1 46.2-47.1c5.1-5.2 5.1-13.6 0-18.9z' fill='%232a80eb'/%3E%3C/svg%3E")
        no-repeat right 3px center;
    background-size: 20px 20px;
    user-select: none;
    cursor: pointer;
}
[is="ui-datetime"]:read-write {
    /* avoid firefox invalid style */
    box-shadow: none;
    color: transparent;
}

:disabled[is="ui-datetime"] {
    color: var(--ui-gray, #a2a9b6);
    background: var(--ui-light, #f7f9fa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-205 297 200 200'%3E%3Cpath d='M-59.3 365.9c-5.1-5.2-13.4-5.2-18.5 0l-27.7 28.3-27.7-28.3c-5.1-5.2-13.4-5.2-18.5 0s-5.1 13.6 0 18.9l46.2 47.1 46.2-47.1c5.1-5.2 5.1-13.6 0-18.9z' fill='%232a80eb' fill-opacity='0.4' /%3E%3C/svg%3E") no-repeat right 3px center;
    background-size: 20px 20px;
    cursor: default;
}

:active[is="ui-datetime"] {
    background-color: var(--ui-light, #f7f9fa);
}

[is-error][is="ui-datetime"] {
    border-color: var(--ui-red, #eb4646);
}

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

[is="ui-datetime"]:not(:disabled):active {
    background-color: var(--ui-light, #f7f9fa);
}

[is="ui-datetime"]:not([type]) {
    width: 125px;
}
[is="ui-datetime"][type="date"] {
    min-width: 125px;
}

[is="ui-datetime"][type="year"],
[is="ui-datetime"][type="time"],
[is="ui-datetime"][type="hour"],
[is="ui-datetime"][type="minute"] {
    width: 85px;
}

[is="ui-datetime"][type="month"] {
    width: 125px;
}

[is="ui-datetime"][type="date-range"] {
    width: 210px;
}

[is="ui-datetime"][type="month-range"] {
    width: 170px;
}

[is="ui-datetime"][type="time"] {
    width: auto;
}
/* for Safari */
@supports not (text-align-last: auto) {
    [is="ui-datetime"][type="time"] {
        max-width: 125px;
    }
}
@supports not (-moz-appearance: none) {
    [is="ui-datetime"][type="time"] {
        padding-right: 33px;
    }
}

/* 选择浮层 */
.ui-date-container {
    display: inline-block;
    background-color: var(--ui-white, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--ui-border, #d0d0d5);
    border-radius: var(--ui-radius, 4px);
    font-size: var(--ui-font, 14px);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    animation: fadeIn var(--ui-animate-time, .2s);
    --safe-area: 3px;
    -webkit-user-select: none;
    user-select: none;
}
body > .ui-date-container {
    display: none;
    position: absolute;
    z-index: 9;
}

.ui-date-container a {
    text-decoration: none;
    transition: background-color var(--ui-animate-time, .2s), color var(--ui-animate-time, .2s);
}

.ui-date-head {
    padding: 5px 0 0;
    overflow: hidden;
}

.ui-date-half {
    width: 50%;
    float: left;
}

.ui-date-prev,
.ui-date-next {
    width: 35px;
    height: 30px;
    text-align: center;
    color: #b6bbc6;
}

a.ui-date-prev:hover {
    color: var(--ui-blue, #2a80eb);
}

span.ui-date-prev {
    color: var(--ui-diabled, #ccd0d7);
}

a.ui-date-next:hover {
    color: var(--ui-blue, #2a80eb);
}

span.ui-date-next {
    color: var(--ui-diabled, #ccd0d7);
}

.ui-date-prev::before,
.ui-date-next::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    margin: 5px auto 0;
    --mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M85.876 100.5l49.537-50.526c4.089-4.215 4.089-11.049 0-15.262-4.089-4.218-10.719-4.218-14.808 0L63.586 92.868c-4.089 4.215-4.089 11.049 0 15.264l57.018 58.156c4.089 4.215 10.719 4.215 14.808 0s4.089-11.049 0-15.262L85.876 100.5z'/%3E%3C/svg%3E");
    -webkit-mask: var(--mask-image);
    mask: var(--mask-image);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.ui-date-next::before {
    transform: rotate(180deg);
}

.ui-date-prev {
    float: left;
}

.ui-date-next {
    float: right;
}

.ui-date-switch {
    display: block;
    line-height: 30px;
    margin: 0 35px;
    border-radius: calc(var(--ui-radius, 4px) - 2px);
    color: var(--ui-dark, #4c5161);
    text-align: center;
}

a.ui-date-switch:hover,
a.ui-date-item:not(.selected):hover {
    color: var(--ui-dark, #4c5161);
    background-color: #f0f0f2;
}

.ui-minute-x,
.ui-hour-x,
.ui-year-x,
.ui-month-x,
.ui-date-x {
    width: 225px;
}

.ui-minute-x[data-step="1"] {
    width: 328px;
}
.ui-minute-x[data-step="2"] {
    width: 276px;
}

.ui-minute-body {
    padding-left: 12px;
    padding-bottom: 12px;
}

.ui-hour-body {
    padding: 8px 0 12px 12px;
}

.ui-year-body,
.ui-month-body,
.ui-date-body {
    padding-left: 5px;
    padding-right: 2px;
    padding-bottom: 5px;
}

.ui-date-item {
    display: inline-block;
    border-radius: calc(var(--ui-radius, 4px) - 2px);
    text-align: center;
    font-size: 13px;
    color: var(--ui-dark, #4c5161);
}

span.ui-date-item {
    opacity: var(--ui-opacity, .4);
}

.ui-date-item.col0,
.ui-date-item.col6,
.ui-day-item.col0,
.ui-day-item.col6 {
    color: var(--ui-red, #eb4646);
}

.ui-date-tr:last-child .ui-date-item:empty {
    display: none;
}

.ui-minute-body .ui-date-item,
.ui-hour-body .ui-date-item {
    width: 45px;
    line-height: 26px;
    margin-top: 4px;
    margin-right: 7px;
}

.ui-year-body .ui-date-item,
.ui-month-body .ui-date-item {
    width: 45px;
    line-height: 54px;
    margin-top: 5px;
    margin-left: 7px;
}

.ui-date-now {
    display: block;
    line-height: 30px;
    margin: 0 5px 5px;
    text-align: center;
}

.ui-day-x {
    padding: 0 2px 0 5px;
    text-align: center;
}

.ui-day-item,
.ui-date-body .ui-date-item {
    display: inline-block;
    width: 28px;
    line-height: 28px;
    margin-right: 3px;
    margin-top: 1px;
    vertical-align: top;
}

.ui-range-x {
    width: 458px;
}

.ui-range-body {
    overflow: hidden;
}

.ui-range-body .ui-date-half + .ui-date-half {
    border-left: 1px solid #f0f0f2;
    margin-left: -1px;
}

.ui-range-footer {
    padding: 5px 15px 15px;
    text-align: right;
}

.ui-range-footer > .ui-button {
    margin-left: 10px;
}

.ui-date-container .selected {
    background-color: var(--ui-blue, #2a80eb);
    color: var(--ui-white, #ffffff);
    cursor: default;
}

.ui-date-container span.selected {
    opacity: var(--ui-opacity, .4);
}

.ui-range-body .ui-date-half {
    width: 229px;
}

.ui-range-body .ui-date-body {
    padding-left: 6px;
    padding-right: 0;
}

.ui-range-body .ui-month-body {
    margin-bottom: 15px;
}

.ui-range-date-body .selected {
    width: 26px;
    line-height: 26px;
    border: 1px solid var(--ui-blue, #2a80eb);
    border-right-width: 4px;
    margin-right: 0;
    border-radius: 0;
}

.ui-range-body .selected.col0 {
    margin-left: -6px;
    border-left-width: 7px;
}

.ui-range-body .selected.col6 {
    border-right-width: 10px;
}

.ui-range-body .selected.ui-date-first:not(.col0) {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.ui-range-body .selected.ui-date-last:not(.col6) {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.ui-range-body .ui-date-begin,
.ui-range-body .ui-date-end {
    border-radius: 0;
    width: 26px;
    background-color: var(--ui-white, #ffffff);
    color: var(--ui-dark, #4c5161);
}

.ui-range-body .ui-date-begin {
    border-right-width: 4px;
    border-left-width: 1px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.ui-range-body .ui-date-end {
    margin-right: 3px;
    border-right-width: 1px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.ui-range-body .ui-date-begin:hover,
.ui-range-body .ui-date-end:hover {
    background-color: var(--ui-white, #ffffff);
    color: var(--ui-dark, #4c5161);
}

.ui-range-body .ui-date-begin.col6 {
    border-right-width: 0;
    padding-right: 9px;
}

.ui-range-body .ui-date-begin.col0 {
    border-left-width: 1px;
    margin-left: 0;
}

.ui-range-body .ui-date-end.col0 {
    border-left-width: 0;
    padding-left: 7px;
}

.ui-range-body .ui-date-end.col6 {
    border-right-width: 1px;
}

.ui-range-body .ui-date-begin.ui-date-end {
    margin-right: 3px;
    padding: 0;
    border: 1px solid var(--ui-blue, #2a80eb);
    border-radius: calc(var(--ui-radius, 4px) - 2px);
}

.ui-range-body .ui-date-begin + .ui-date-end {
    border-left-width: 1px;
    margin-right: 3px;
}


.ui-time-x {
    display: inline-flex;
    gap: 5px;
    padding: 5px;
}
.ui-time-col {
    height: calc(290px);
    overflow: auto;
    overflow: overlay;
    scrollbar-width: none;
    overscroll-behavior: contain;
}
.ui-time-col::-webkit-scrollbar {
    display: none;
}
.ui-time-item {
    display: block;
    border: 0;
    background-color: var(--ui-white, #fff);
    padding: 0 1em;
    height: var(--ui-component-height, 40px);
    color: var(--ui-dark, #4c5161);
}
.ui-time-item:disabled {
    opacity: var(--ui-opacity, .4);
}
.ui-time-item:not(:disabled):not(.selected):hover {
    background-color: var(--ui-list-hover, #f0f7ff);
}
.ui-time-item[data-visibility="false"] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .ui-date-container {
        animation: none;
    }
    [is="ui-datetime"],
    .ui-date-container a {
        transition: none;
    }
}


/**
 *
 * @Dialog.css
 * @author zhangxinxu
 * @create 15-06-18
 * @edit   19-10-31
 *
**/
:root {
    --ui-url-close: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M594.698 511.995l186.788-186.808a37.693 37.693 0 0 0 0-53.35l-26.7-26.702c-14.7-14.75-38.6-14.75-53.351 0L514.637 431.933 327.839 245.13a37.755 37.755 0 0 0-53.402 0l-26.65 26.701a37.693 37.693 0 0 0 0 53.35L434.576 511.99 247.788 698.778a37.755 37.755 0 0 0 0 53.401l26.65 26.701a37.847 37.847 0 0 0 53.4 0l186.799-186.819L701.44 778.885c14.75 14.7 38.65 14.7 53.35 0l26.701-26.7a37.755 37.755 0 0 0 0-53.402L594.698 511.995z' fill='%23bbb'/%3E%3C/svg%3E");
    --ui-dialog-icon-url: url("data:image/svg+xml,%3Csvg width='401' height='401' viewBox='0 0 401 401' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M200.501.5C310.958.5 400.5 90.042 400.5 200.5c0 110.457-89.542 199.999-199.999 199.999C90.043 400.499.5 310.957.5 200.5.5 90.042 90.043.5 200.501.5zm5.002 280.002h-10a5 5 0 0 0-5 4.999v20.002a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5v-20.002a5 5 0 0 0-5-4.999zm0-179.999h-10a5 5 0 0 0-5 5v150a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5v-150a5 5 0 0 0-5-5z' fill='%23F59B00' fill-rule='nonzero'/%3E%3C/svg%3E");
    --ui-dialog-success-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cpath fill='%231cad70' d='M400.5 200.5c0 110.457-89.542 199.999-199.999 199.999C90.043 400.499.5 310.957.5 200.5m0 0C.5 90.042 90.043.5 200.501.5 310.958.5 400.5 90.042 400.5 200.5'/%3E%3Cpath fill='%23FFF' d='M286.398 147.132c-1.654-1.134-3.306-2.395-6.801-4.293-4.271-2.336-9.259 2.624-12.391 6.816l-77.641 102.279-47.916-63.522c-3.144-4.188-4.902-8.468-13.073-1.859-3.097 2.123.234-.361-3.969 2.881-3.884 3.064-4.105 8.598-.971 12.774 0 0 38.641 55.817 45.883 65.074 10.625 13.22 29.944 12.57 40.087 0 7.483-9.473 77.757-107.584 77.757-107.584 3.14-4.194 2.898-9.697-.965-12.566z'/%3E%3C/svg%3E");
}

[is="ui-dialog"] {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    padding: 0;
    border: 0;
    background-color: rgba(25, 28, 34, 0.88);
    color: var(--ui-dark, #4c5161);
    font-size: var(--ui-font, 14px);
    overflow: auto;
    z-index: 19;
    display: grid;
    place-items: center;
}

[is="ui-dialog"]:not([open]) {
    display: none;
}

.ui-dialog-animation {
    animation: fadeIn var(--ui-animate-time, .2s) both;
}

/* 多个弹框出现的时候，隐藏后面弹框的背景 */
[is="ui-dialog"] + [is="ui-dialog"] {
    transition: background-color var(--ui-animate-time, .2s);
    background-color: transparent;
}

.ui-dialog {
    display: flex;
    flex-direction: column;
    min-width: min(400px, calc(100vw - 2rem));
    max-width: calc(100vw - 16px);
    border-radius: var(--ui-radius, 4px);
    /* background-color: var(--ui-light, #fff); */
    background-color: #fff;
    outline: none;
    position: relative;
}
.ui-dialog[style^="width:"],
.ui-dialog[style*=" width:"] {
    min-width: initial;
}

.ui-dialog-animation .ui-dialog {
    animation: tinydown var(--ui-animate-time, .2s);
}

.ui-dialog-title {
    margin: 0;
    line-height: 30px;
    padding: 15px 50px 0 25px;
    font-weight: bold;
    font-size: var(--ui-font, 14px);
    color: var(--ui-dark, #4c5161);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

.ui-dialog-close {
    position: absolute;
    top: 8px;
    right: 7px;
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    font-size: 0;
    cursor: pointer;
    z-index: 1;
}
.ui-dialog-close::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: inherit; height: inherit;
    background-color: var(--ui-gray, #a2a9b6);
    transition: background-color var(--ui-animate-time, .2s);
    -webkit-mask: var(--ui-url-close) no-repeat center / 24px;
    mask: var(--ui-url-close) no-repeat center / 24px;
}

.ui-dialog-close:hover::before {
    background-color: var(--ui-dark, #4c5161);
}

.ui-dialog-body {
    display: flow-root;
    min-height: 60px;
    padding: 10px 25px 20px;
}

.ui-dialog-title:empty ~ .ui-dialog-body {
    min-height: 40px;
    padding-top: 30px;
}

@supports not (display: flow-root) {
    .ui-dialog-body:after {
        content: '';
        display: table;
        clear: both;
    }
}

.ui-dialog-footer {
    padding: 3px 25px 25px;
    margin-top: auto;
    text-align: right;
    opacity: 1;
    transition: max-height var(--ui-animate-time, .2s), opacity var(--ui-animate-time, .2s) var(--ui-animate-time, .2s);
    overflow: hidden;
}

.ui-dialog-footer:empty {
    max-height: 0;
    opacity: 0;
}

.ui-dialog-footer .ui-button {
    margin-left: 15px;
}

.ui-dialog-footer .ui-button:first-child {
    margin-left: 0;
}

.ui-dialog-stretch {
    max-height: 2000px;
    height: calc(100% - 50px);
}

.ui-dialog-stretch .ui-dialog-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
}

.ui-dialog-stretch .ui-dialog-body {
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    bottom: 90px;
    padding: 0 0 0 25px;
    overflow: auto;
}

/* alert | comfirm */
.ui-dialog-confirm::before,
.ui-dialog-alert::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.ui-dialog-success::before {
    background-image: var(--ui-dialog-success-url), none;
}

.ui-dialog-warning::before,
.ui-dialog-danger::before,
.ui-dialog-remind::before {
    -webkit-mask-image: var(--ui-dialog-icon-url);
    mask-image: var(--ui-dialog-icon-url);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-size: 40px;
    mask-size: 40px;
}

.ui-dialog-remind::before {
    background-color: var(--ui-blue, #2a80eb);
}

.ui-dialog-warning::before {
    background-color: var(--ui-orange, #f59b00);
}

.ui-dialog-danger::before {
    background-color: var(--ui-red, #eb4646);
}

.ui-dialog-alert,
.ui-dialog-confirm {
    max-width: min(340px, calc(100vw - 2rem));
    min-height: 40px;
    font-size: calc(var(--ui-font, 14px) + 2px);
    word-wrap: break-word;
    overflow: hidden;
    position: relative;
}

.ui-dialog-wrap > h6 {
    font-size: calc(var(--ui-font, 14px) + 1px);
    margin-bottom: 5px;
    margin-top: 0;
}

.ui-dialog-wrap > h6 ~ p {
    font-size: var(--ui-font, 14px);
}

.ui-dialog-wrap > p {
    margin: 0;
}

.ui-dialog-remind,
.ui-dialog-success,
.ui-dialog-warning,
.ui-dialog-danger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 20px;
    padding: 0 0 0 60px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 40px 40px;
}

.ui-dialog-loading .ui-dialog-title,
.ui-dialog-loading .ui-dialog-close,
.ui-dialog-loading .ui-dialog-footer {
    visibility: hidden;
}

/* 触碰设备按钮点击区域扩大 */
@media (pointer: coarse) {
    .ui-dialog-footer {
        display: flex;
    }
    .ui-dialog-footer .ui-button {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-dialog-animation,
    .ui-dialog-animation .ui-dialog {
        animation: none;
    }
    [is="ui-dialog"] + [is="ui-dialog"],
    .ui-dialog-close::before,
    .ui-dialog-footer {
        transition: none;
    }
}

/**
 *
 * @Drop.css
 * @author zhangxinxu
 * @create 20-12-15
 *
**/

ui-drop[tabindex="0"] {
    cursor: pointer;
}
ui-drop ~ .ui-drop-target {
    position: absolute;
    z-index: 9;
}
ui-drop:not([open]) ~ .ui-drop-target {
    display: none;
}

/**
 *
 * @DropList.css
 * @author xinxuzhang
 * @create 15-07-01
 * @edit  19-10-20 sunmeiye
 *
**/
.ui-droplist-x {
    position: absolute;
    width: 111px;
    padding: 7px 0;
    background-color: var(--ui-white, #ffffff);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
    --safe-area: 3px;
    border: 1px solid var(--ui-border, #d0d0d5);
    border-radius: var(--ui-radius, 4px);
    font-size: var(--ui-font, 14px);
    animation: fadeIn var(--ui-animate-time, .2s);
    z-index: 9;
}

.ui-droplist-li {
    display: block;
    line-height: 20px;
    padding: 7px 12px 8px;
    color: var(--ui-dark, #4c5161);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.ui-droplist-hr {
    border: 0;
    border-bottom: 1px solid var(--ui-border, #d0d0d5);
    margin: 7px 12px;
    opacity: .4;
}
.ui-droplist-hr:first-child {
    display: none;
}

a.ui-droplist-li:hover {
    color: var(--ui-dark, #4c5161);
    background-color: var(--ui-list-hover, #f0f7ff);
}
a.ui-droplist-li:hover::after {
    background-position: 0 -20px;
}

span.ui-droplist-li {
    color: var(--ui-gray, #a2a9b6);
    cursor: default;
}
.ui-droplist-li[role="heading"] {
    font-weight: 700;
    padding-bottom: 5px;
    cursor: default;
}
[role="heading"] ~ .ui-droplist-li:not([role="heading"]) {
    padding-left: 24px;
}
.ui-droplist-li.disabled {
    opacity: var(--ui-opacity, .4);
}

.ui-droplist-li[data-sublist]::before {
    transform: rotate(-90deg);
    margin-top: 1px;
    float: right;
}

.ui-droplist-x > .selected {
    background-color: var(--ui-list-selected, #e0f0ff);
}

.selected + .ui-droplist-xx > .ui-droplist-x {
    display: block;
}

.ui-droplist-xx {
    position: relative;
}
.ui-droplist-xx > .ui-droplist-x {
    display: none;
    left: calc(100% - 5px);
    top: -35px;
}
.ui-droplist-xx > .reverse {
    left: auto;
    right: calc(100% - 5px);
}

.ui-droplist-arrow:empty,
.ui-droplist-arrow:not(:empty)::after,
.ui-droplist-li[data-sublist]::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-205 197 200 400'%3E%3Cpath d='M-59.7 271.6c-4.2-4.1-11-4.1-15.3 0l-30.5 29.6-30.5-29.6c-4.2-4.1-11-4.1-15.3 0-4.2 4.1-4.2 10.7 0 14.8l38.2 37c4.2 4.1 11 4.1 15.3 0l38.2-37c4.1-4.1 4.1-10.7-.1-14.8z' fill='%23a2a9b6'/%3E%3Cpath d='M-58.7 471.6c-4.2-4.1-11-4.1-15.3 0l-30.5 29.6-30.5-29.6c-4.2-4.1-11-4.1-15.3 0-4.2 4.1-4.2 10.7 0 14.8l38.2 37c4.2 4.1 11 4.1 15.3 0l38.2-37c4.1-4.1 4.1-10.7-.1-14.8z' fill='%232a80eb'/%3E%3C/svg%3E"), none;
    background-size: 20px 40px;
    vertical-align: -5px;
}

a:hover .ui-droplist-arrow:empty,
.ui-droplist-arrow:not(:empty):hover::after {
    background-position: 0 -20px;
}

/**
 *
 * @DropPanel.css
 * @author xinxuzhang
 * @create 15-07-01
 *
**/
.ui-dropanel-x {
    position: absolute;
    width: 260px;
    padding: 20px;
    background-color: var(--ui-white, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    --safe-area: 3px;
    border: 1px solid var(--ui-border, #d0d0d5);
    border: 0 rgba(0, 0, 0, 0.2);
    font-size: var(--ui-font, 14px);
    animation: fadeIn var(--ui-animate-time, .2s);
    z-index: 9;
}

.ui-dropanel-title {
    line-height: 20px;
    margin-top: -2px;
    margin-bottom: 0;
    font-size: var(--ui-font, 14px);
    font-weight: bold;
}

.ui-dropanel-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    z-index: 1;
}
.ui-dropanel-close::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background: var(--ui-dark-gray, #b6bbc6);
    transition: background-color var(--ui-animate-time, .2s);
    --mask-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20%3E%3Cpath%20d%3D%22M116.152%2C99.999l36.482-36.486c2.881-2.881%2C2.881-7.54%2C0-10.42%20l-5.215-5.215c-2.871-2.881-7.539-2.881-10.42%2C0l-36.484%2C36.484L64.031%2C47.877c-2.881-2.881-7.549-2.881-10.43%2C0l-5.205%2C5.215%20c-2.881%2C2.881-2.881%2C7.54%2C0%2C10.42l36.482%2C36.486l-36.482%2C36.482c-2.881%2C2.881-2.881%2C7.549%2C0%2C10.43l5.205%2C5.215%20c2.881%2C2.871%2C7.549%2C2.871%2C10.43%2C0l36.484-36.488L137%2C152.126c2.881%2C2.871%2C7.549%2C2.871%2C10.42%2C0l5.215-5.215%20c2.881-2.881%2C2.881-7.549%2C0-10.43L116.152%2C99.999z%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask: var(--mask-image) no-repeat center / 100% 100%;
    mask: var(--mask-image) no-repeat center / 100% 100%;
}

.ui-dropanel-close:hover::before {
    background-color: var(--ui-dark, #4c5161);
}

.ui-dropanel-content {
    display: block;
    min-height: 40px;
    padding: 10px 0 20px;
}

.ui-dropanel-footer {
    text-align: right;
}

.ui-dropanel-footer .ui-button {
    margin-left: 15px;
}

.ui-dropanel-footer .ui-button:first-child {
    margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ui-droplist-x,
    .ui-dropanel-x {
        animation: none;
    }
    .ui-dropanel-close::before {
        transition: none;
    }
}
/**
 *
 * @Input.css
 * @author zhangxinxu(.com)
 * @create 15-06-16
 * @edit   17-06-13
           19-07-18 version pure
           20-04-03 version edge
 * @editor lennonover
 */
/* input基础变量 */
:root {
    --ui-input-height: var(--ui-component-height, 40px);
    --ui-input-line-height: var(--ui-line-height, 20px);
    --ui-input-search-img: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M638.72 638.72a256 256 0 1 0-361.984-361.984A256 256 0 0 0 638.72 638.72zm58.71 119.04a384 384 0 1 1 85.418-95.573l202.24 202.24a64.256 64.256 0 0 1 .597 91.136 63.744 63.744 0 0 1-91.05-.598l-197.206-197.12z' fill='%23b6bbc6'/%3E%3C/svg%3E") no-repeat;
}

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

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

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

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

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--ui-white, #fff) inset;
    background-color: transparent;
}

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

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

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

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

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

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

/* input with count */
.ui-input-x {
    position: relative;
}
span.ui-input-x {
    display: inline-block;
}

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

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

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

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

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

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

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

.ui-input-search:hover .ui-icon-search {
    color: var(--ui-gray, #a2a9b6);
}
.ui-input-search > :disabled ~ .ui-icon-search {
    color: var(--ui-disabled, #ccd0d7);
    cursor: default;
}
.ui-input-search > :focus ~ .ui-icon-search {
    color: var(--ui-blue, #2a80eb);
}
.ui-input-search > [is-error] ~ .ui-icon-search {
    color: var(--ui-red, #eb4646);
}

/**
 * 改成CSS绘制
 */
.ui-icon-search::before,
.ui-icon-search::after {
    content: "";
    position: absolute;
}
.ui-icon-search::before {
    width: 9px;
    height: 9px;
    border: 2px solid;
    border-radius: 50%;
    left: 2px;
    top: 2px;
}
.ui-icon-search::after {
    width: 6px;
    border-top: 2px solid;
    transform-origin: left;
    transform: scaleY(1.25) rotate(30deg);
    left: 13px;
    top: 11px;
}

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    [type="search"]::-webkit-search-cancel-button,
    input.ui-input,
    .ui-input > input,
    [is="ui-input"],
    .ui-icon-search {
        transition: none;
    }
}/**
 *
 * @Keyboard.css
 * @author zhangxinxu
 * @create 17-06-13
 *
**/
.ui-kbd-tips {
    position: absolute;
    left: -9em;
    top: -9em;
    font-family: consolas, "Liberation Mono", courier, monospace;
    font-size: 12px;
    border-radius: 2px;
    color: var(--ui-white, #ffffff);
    background: rgba(0, 0, 0, 0.75);
    opacity: 0.8;
    line-height: 13px;
    padding: 0 3px;
    z-index: 99;
}

.ui-kbd-tips kbd {
    font-family: inherit;
}

.ui-outline.ui-outline {
    outline: 1px dotted var(--ui-blue, #2a80eb);
    outline: 5px auto -webkit-focus-ring-color;
}
/**
 *
 * @LightTip.css
 * @author xinxuzhang
 * @create 15-06-25
 * @edit   17-06-19
 * @edit   19-09-13 @ziven27 [去jQuery]
 * @edit   20-05-19 @popeyesailorman [add custom element support]
**/
/*
 * 结构如下：
 * <ui-lighttip></ui-lighttip>
 *
*/
/* lighttip基础变量 */
:root {
    --ui-lighttip-width: 25em;
    --ui-loading-lighttip: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M512 1024q-104 0-199-40-92-39-163-110T40 711Q0 616 0 512q0-15 10.5-25.5T36 476t25.5 10.5T72 512q0 90 35 171 33 79 94 140t140 95q81 34 171 34t171-35q79-33 140-94t95-140q34-81 34-171t-35-171q-33-79-94-140t-140-95q-81-34-171-34-15 0-25.5-10.5T476 36t10.5-25.5T512 0q104 0 199 40 92 39 163 110t110 163q40 95 40 199t-40 199q-39 92-110 163T711 984q-95 40-199 40z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat;
}

ui-lighttip {
    display: flex;
    justify-content: center;
    width: var(--ui-lighttip-width, 25em);
    font-size: var(--ui-font, 14px);
    text-align: left;
    line-height: 20px;
    color: var(--ui-white, #ffffff);
    background-color: var(--ui-dark, #4c5161);
    border-radius: calc(var(--ui-radius, 4px) - 2px);
    padding: 15px 10px;
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    z-index: 19;
    outline: none;
    cursor: default;
    animation: fadeIn .25s both;
}
ui-lighttip:not([open]) {
    display: none;
}

ui-lighttip[type="success"] {
    background-color: var(--ui-green, #1cad70);
}
ui-lighttip[type="error"] {
    background-color: var(--ui-red, #eb4646);
}
ui-lighttip[type="warning"] {
    background-color: var(--ui-orange, #f59b00);
}
ui-lighttip[type="success"]::before,
ui-lighttip[type="error"]::before,
ui-lighttip[type="warning"]::before {
    content: '';
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='%23FFF' d='M163.038 57.226c-5.217-4.162-5.713-4.289-11.674-7.244-2.683-1.344-6.633 2.113-8.569 4.67l-52.648 67.042-34.301-43.387c-1.94-2.558-5.516-3.499-8.2-2.293-6.11 3.095-5.496 2.992-10.715 7.029-2.386 1.883-2.535 5.245-.597 7.793 0 0 36.97 46.917 41.44 52.565 6.557 8.068 18.483 7.669 24.744 0 4.62-5.781 61.117-78.506 61.117-78.506 1.937-2.559 1.788-5.918-.597-7.669z'/%3E%3C/svg%3E") no-repeat;
    background-size: contain;
    transform: translate(-5px, 0);
}
ui-lighttip[type="error"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='%23FFF' d='M116.153 99.999l36.484-36.486a7.369 7.369 0 0 0 0-10.423l-5.212-5.213a7.375 7.375 0 0 0-10.425 0l-36.484 36.485-36.485-36.485a7.374 7.374 0 0 0-10.424 0l-5.211 5.213a7.365 7.365 0 0 0 0 10.423L84.88 99.999l-36.483 36.485a7.369 7.369 0 0 0 0 10.426l5.211 5.213a7.38 7.38 0 0 0 10.424 0l36.485-36.486L137 152.122a7.38 7.38 0 0 0 10.425 0l5.212-5.213a7.372 7.372 0 0 0 0-10.426l-36.484-36.484z'/%3E%3C/svg%3E");
}
ui-lighttip[type="warning"]::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxwYXRoIGQ9Ik00MTMgMTc4YzUuNSAwIDEwLjEgNC42IDEwLjEgMTAuMVY0MTNjMCA1LjUtNC42IDEwLjEtMTAuMSAxMC4xSDE4OC4xYy01LjUgMC0xMC4xLTQuNi0xMC4xLTEwLjFWMTg4LjFjMC01LjUgNC42LTEwLjEgMTAuMS0xMC4xSDQxM20wLTUwSDE4OC4xYy0zMy4xIDAtNjAuMSAyNy02MC4xIDYwLjFWNDEzYzAgMzMuMSAyNyA2MC4xIDYwLjEgNjAuMUg0MTNjMzMuMSAwIDYwLjEtMjcgNjAuMS02MC4xVjE4OC4xYzAtMzMuMS0yNy02MC4xLTYwLjEtNjAuMXptNDIzLjEgMzQ1LjFINjExLjJjLTMzLjEgMC02MC4xLTI3LTYwLjEtNjAuMVYxODguMWMwLTMzLjEgMjctNjAuMSA2MC4xLTYwLjFoMjI0LjljMzMuMSAwIDYwLjEgMjcgNjAuMSA2MC4xVjQxM2MwIDMzLTI3LjEgNjAuMS02MC4xIDYwLjF6TTQxMyA2MDEuM2M1LjUgMCAxMC4xIDQuNiAxMC4xIDEwLjF2MjI0LjljMCA1LjUtNC42IDEwLjEtMTAuMSAxMC4xSDE4OC4xYy01LjUgMC0xMC4xLTQuNi0xMC4xLTEwLjFWNjExLjRjMC01LjUgNC42LTEwLjEgMTAuMS0xMC4xSDQxM20wLTUwSDE4OC4xYy0zMy4xIDAtNjAuMSAyNy02MC4xIDYwLjF2MjI0LjljMCAzMy4xIDI3IDYwLjEgNjAuMSA2MC4xSDQxM2MzMy4xIDAgNjAuMS0yNyA2MC4xLTYwLjFWNjExLjRjMC0zMy0yNy02MC4xLTYwLjEtNjAuMXptNDIzLjEgNTBjNS41IDAgMTAuMSA0LjYgMTAuMSAxMC4xdjIyNC45YzAgNS41LTQuNiAxMC4xLTEwLjEgMTAuMUg2MTEuMmMtNS41IDAtMTAuMS00LjYtMTAuMS0xMC4xVjYxMS40YzAtNS41IDQuNi0xMC4xIDEwLjEtMTAuMWgyMjQuOW0wLTUwSDYxMS4yYy0zMy4xIDAtNjAuMSAyNy02MC4xIDYwLjF2MjI0LjljMCAzMy4xIDI3IDYwLjEgNjAuMSA2MC4xaDIyNC45YzMzLjEgMCA2MC4xLTI3IDYwLjEtNjAuMVY2MTEuNGMwLTMzLTI3LjEtNjAuMS02MC4xLTYwLjF6IiBmaWxsPSIjZmZmIi8+PC9zdmc+");
}

/* 移动端居中呈现  */
@media (max-width: 640px) {
    ui-lighttip {
        width: auto;
        padding-left: 1rem; padding-right: 1rem;
        top: 50%; left: 50%;
        right: auto;
        max-width: calc(100% - 2rem - 2em);
        transform: translate(-50%, -50%);
    }
}

/* 全局loading */
ui-lighttip[type="loading"] {
    top: 50%;
    left: 50%;
    width: auto;
    padding-right: calc(10px + .5em);
    max-width: calc(100% - 2rem - 2em);
    transform: translate(-50%, -50%);
    border-radius: var(--ui-radius, 4px);
    background-color: rgba(25, 28, 34, 0.88);
    visibility: hidden;
    opacity: 0;
}
ui-lighttip[type="loading"][open]::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 .5em;
    background: var(--ui-loading-lighttip) no-repeat center / 100%;
    animation: spin 1s linear infinite;
    filter: brightness(100);
}
ui-lighttip[type="loading"][open]{
    visibility: visible;
    opacity: 1;
}
ui-lighttip[type="loading"]::before{
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    ui-lighttip {
        animation: none;
    }
}
/**
 *
 * @Loading.css
 * @author zhangxinxu
 * @create 15-06-23
 * @edit   19-09-24  add custom element support
 * @edit by littleLionGuoQing:  20-04-30 支持使用color变色
 *
**/
/*
 * 结构如下：
 * <ui-loading></ui-loading>
 *
*/
/* loading基础变量 */
:root {
    --ui-loading-img: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M512 1024q-104 0-199-40-92-39-163-110T40 711Q0 616 0 512q0-15 10.5-25.5T36 476t25.5 10.5T72 512q0 90 35 171 33 79 94 140t140 95q81 34 171 34t171-35q79-33 140-94t95-140q34-81 34-171t-35-171q-33-79-94-140t-140-95q-81-34-171-34-15 0-25.5-10.5T476 36t10.5-25.5T512 0q104 0 199 40 92 39 163 110t110 163q40 95 40 199t-40 199q-39 92-110 163T711 984q-95 40-199 40z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat;
}

ui-loading,
.ui-loading {
    text-align: center;
    cursor: default;
    /* icon offset need */
    box-sizing: border-box;
}
ui-loading {
    display: inline-block;
    font-size: var(--ui-font, 14px);
    line-height: 20px;
    vertical-align: middle;
}

ui-loading[rows] {
    display: block;
}
ui-loading:not([rows]):not([spin])::before {
    display: block;
}
ui-loading:not([rows]):not([spin])::after {
    display: none;
}

/* 更高高度使用style属性内容或者JS控制 */
ui-loading[rows="2"] {
    height: 40px;
}
ui-loading[rows="3"] {
    height: 60px;
}
ui-loading[rows="4"] {
    height: 80px;
}
ui-loading[rows="5"] {
    height: 100px;
}
ui-loading[rows="6"] {
    height: 120px;
}
ui-loading[rows="7"] {
    height: 140px;
}
ui-loading[rows="8"] {
    height: 160px;
}
ui-loading[rows="9"] {
    height: 180px;
}
ui-loading[rows="10"] {
    height: 200px;
}
ui-loading[rows="11"] {
    height: 220px;
}
ui-loading[rows="12"] {
    height: 240px;
}
ui-loading[rows="13"] {
    height: 260px;
}
ui-loading[rows="14"] {
    height: 280px;
}
ui-loading[rows="15"] {
    height: 300px;
}
ui-loading[width="100%"] {
    width: 100%;
}
ui-loading[height="100%"] {
    height: 100%;
}

ui-loading::after,
.ui-loading::after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
ui-loading::before,
.ui-loading::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 .5em;
    background-color: var(--color,#2a80eb);
    -webkit-mask: var(--ui-loading-img);
    mask: var(--ui-loading-img);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    animation: spin 1s linear infinite;
    vertical-align: -4px;
}
ui-loading[spin]::before,
.ui-loading[spin]::before {
    display: none;
}

ui-loading[size="1"]::before,
.ui-loading[size="1"]::before {
    width: 10px; height: 10px;
    vertical-align: 0;
}
ui-loading[size="3"]::before,
.ui-loading[size="3"]::before {
    width: 30px; height: 30px;
    vertical-align: -8px;
}
ui-loading[size="4"]::before,
.ui-loading[size="4"]::before {
    width: 40px; height: 40px;
    vertical-align: -12px;
}

@keyframes spin {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 文本点点点 */
ui-dot,
[is-dot] {
    display: inline-block;
    height: 1em; line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}
ui-dot::before,
[is-dot]::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% {
        transform: translateY(-2em);
    }
    66% {
        transform: translateY(-1em);
    }
}
/**
 *
 * @Pagination.css
 * @author xboxyan
 * @create 20-06-03
 * @editd 21-06-25 by zhangxinxu
**/

ui-pagination:not(:defined),
[is-pagination]:not([defined]){
    display: flex;
    height: 30px;
}/**
 * @Placeholder.css
 * @editor gandaochuan
 * @edit 20-04-10
 */

::placeholder {
    transition: opacity var(--ui-animate-time, .2s);
    color: var(--ui-gray, #a2a9b6);
    font-size: var(--ui-font, 14px);
    opacity: 1; /* fix firfox  */
}

:focus::placeholder {
    opacity: var(--ui-opacity, .4);
}

@media (prefers-reduced-motion: reduce) {
    ::placeholder {
        transition: none;
    }
}
/**
 *
 * @Progress.css
 * @author zhangxinxu
 * @create 19-10-18
 * @editor gandaochuan
 * @edit   20-04-10
 *
**/

/* progress基础变量 */
:root {
    --ui-progress-width: 10em;
    --ui-progress-height: .25em;
    --ui-progress-background-color: var(--ui-border, #d0d0d5);
}

.ui-progress,
[is="ui-progress"] {
    display: inline-block;
    width: var(--ui-progress-width, 10em);
    height: var(--ui-progress-height, .25em);
    vertical-align: calc(.25em - 2px);
    border: 0;
    background-color: var(--ui-progress-background-color);
    border-radius: 1em;
    overflow: hidden;
}
.ui-progress::-moz-progress-bar,
[is="ui-progress"]::-moz-progress-bar {
    background-color: var(--ui-blue);
}
.ui-progress::-webkit-progress-bar,
[is="ui-progress"]::-webkit-progress-bar {
    background-color: var(--ui-progress-background-color);
}
.ui-progress::-webkit-progress-value,
[is="ui-progress"]::-webkit-progress-value {
    background-color: var(--ui-blue);
}

progress[width="100%"] {
    width: 100%;
}

/* For firefox to match no [value] */
.ui-progress:indeterminate::-moz-progress-bar,
[is="ui-progress"]:indeterminate::-moz-progress-bar {
    background-color: inherit;
}

/**
 *
 * @Radio.css
 * @author zhangxinxu
 * @create 15-06-17
 * @edit   17-06-14 focusable
 * @editor shanyerong
 * @edit   2020-04-30    description here
**/
/* radio基础变量 */
:root {
    --ui-radio-width: 20px;
    --ui-radio-height: 20px;
}

[is="ui-radio"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    width: var(--ui-radio-width, 20px);
    height: var(--ui-radio-height, 20px);
    cursor: pointer;
    display: inline-flex;
    outline: none;
    border: solid 1px var(--ui-border, #d0d0d5);
    background-color: var(--ui-white, #ffffff);
    border-radius: 100%;
    box-sizing: border-box;
    vertical-align: -0.5ex;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: border-color var(--ui-animate-time, .2s);
}
[is="ui-radio"]::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--ui-blue, #2a80eb);
    transform: scale(0);
    opacity: 0;
    border-radius: 100%;
}

[is="ui-radio"]:not(:disabled):hover {
    border-color: var(--ui-dark-border, #ababaf);
}
[is="ui-radio"]:focus {
    border-color: var(--ui-blue, #2a80eb);
}
[is="ui-radio"]:checked::after {
    transform: scale(.5);
    opacity: 1;
}
[is="ui-radio"]:disabled {
    border-color: var(--ui-dark-border, #ababaf);
    opacity: var(--ui-opacity, .4);
    cursor: default;
}
[is="ui-radio"][is-error] {
    border-color: var(--ui-red, #eb4646) !important;
}

@media (prefers-reduced-motion: reduce) {
    [is="ui-radio"] {
        transition: none;
    }
}
/**
 *
 * @Range.css
 * @author xboxyan
 * @create 20-04-30
**/
/* range基础变量 */
:root {
    --ui-range-track-hegiht: 4px;
    --ui-range-thumb-size: 16px;
}

/* range */
[is="ui-range"] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    vertical-align: middle;
}
[is="ui-range"]:disabled {
    opacity: var(--ui-opacity, .4);
}
[is="ui-range"]::-webkit-slider-runnable-track {
    display: flex;
    align-items: flex-start;
    position: relative;
    height: var(--ui-range-track-hegiht);
    border-radius: var(--ui-range-track-hegiht);
    background: linear-gradient(to right, var(--ui-blue, #2a80eb) calc(100% * var(--percent,100)), var(--ui-gray, #a2a9b6) 0% );
}
[type="range" i]::-webkit-slider-container {
    display: flex;
    height: var(--ui-range-thumb-size);
}
[is="ui-range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--ui-range-thumb-size);
    height: var(--ui-range-thumb-size);
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .25);
    transition: border-color var(-ui-animate-time, .2s), background-color var(-ui-animate-time, .2s);
    margin-top: calc((var(--ui-range-thumb-size) - var(--ui-range-track-hegiht)) * -0.5);
}
[is="ui-range"]::-webkit-slider-thumb:active {
    background-color: var(--ui-light,#f7f9fa);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, .25);
}

/* 黑色提示效果 */
input[data-tips]{
    position: relative;
}
[is="ui-range"][data-tips] {
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent;
    border-width: 0 calc(var(--ui-range-thumb-size) * 0.5);
}
[is="ui-range"][data-tips]::-webkit-slider-runnable-track {
    margin: 0 calc(var(--ui-range-thumb-size) * -0.5);
}
input[data-tips]::before,
input[data-tips]::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    transform: translate(-50%, -20px);
    opacity: 0;
    transition: all .15s .15s,left 0s, top 0s;
    color: #373c42;
    visibility: hidden;
    pointer-events: none;
}
input[data-tips]::before {
    content: attr(data-tips);
    border-radius: 3px;
    padding: 6px 10px;
    line-height: 18px;
    text-align: left;
    background-color: #373c42;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    width: max-content;
    max-width: 200px;
    left: calc( var(--percent,.5) * 100% );
    bottom: 100%;
    transform: translate(-50%, -20px);
}
input[data-tips]::after {
    width: 0;
    height: 0;
    overflow: hidden;
    border: 6px solid transparent;
    left: calc( var(--percent,.5) * 100% );
    bottom: 100%;
    transform: translate(-50%, -20px);
    margin-bottom: -12px;
    border-top-color: currentColor;
}
input[data-tips][reverse]::before {
    left: calc( var(--percent,.5) * 100% );
    bottom: auto;
    top: 100%;
    transform: translate(-50%, 20px);
}
input[data-tips][reverse]::after {
    bottom: auto;
    top: 100%;
    transform: translate(-50%, 20px);
    margin-top: -12px;
    border-top-color: transparent;
    border-bottom-color: currentColor;
}
input[data-tips]:not([data-tips*="$"]):hover::before,
input[data-tips]:not([data-tips*="$"]):hover::after,
input[data-tips]:not([data-tips*="$"]):active::before,
input[data-tips]:not([data-tips*="$"]):active::after {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, calc( var(--ui-range-thumb-size) * -1));
}
input[data-tips][reverse]:not([data-tips*="$"]):hover::before,
input[data-tips][reverse]:not([data-tips*="$"]):hover::after,
input[data-tips][reverse]:not([data-tips*="$"]):active::before,
input[data-tips][reverse]:not([data-tips*="$"]):active::after {
    transform: translate(-50%, var(--ui-range-thumb-size));
}
/* vertical */
[is="ui-range"][vertical]{
    position: relative;
    width: 20px;
    height: 150px;
}
[is="ui-range"][data-tips][vertical] {
    border-width: calc(var(--ui-range-thumb-size) * 0.5) 0;
}
[is="ui-range"][vertical]::-webkit-slider-container {
    transform: rotate(-90deg);
    width: var(--h, 150px);
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
}
[is="ui-range"][data-tips][vertical]::before,
[is="ui-range"][data-tips][vertical]::after {
    transition: all .15s .15s, bottom 0s, left 0s;
    bottom: calc( var(--percent,.5) * 100% );
    left: 50%;
    top: auto;
}
[is="ui-range"][data-tips][vertical][reverse]::before,
[is="ui-range"][data-tips][vertical][reverse]::after {
    transition: all .15s .15s, top 0s, left 0s;
    top: calc( (1 - var(--percent, .5)) * 100% );
    left: 50%;
    bottom: auto;
}
/* 区域选择 */
[is="ui-range"][multiple]{
    pointer-events: none;
    vertical-align: top;
}
[is="ui-range"][multiple]::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--ui-gray, #a2a9b6) calc(1% * var(--from, 0)), var(--ui-blue, #2a80eb) calc(1% * var(--from, 0)) calc(1% * var(--to, 100)), var(--ui-gray, #a2a9b6) 0%);
}

[is="ui-range"][multiple][data-range="from"] {
    position: absolute;
}
[is="ui-range"][multiple][data-range="to"] {
    opacity: 1;
}
[is="ui-range"][multiple][data-range="to"]:disabled::-webkit-slider-thumb {
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
}
[is="ui-range"][multiple][data-range="to"]::-webkit-slider-runnable-track {
    background: none;
}
[is="ui-range"][multiple]::-webkit-slider-thumb {
    pointer-events: all;
    position: relative;
}
[is="ui-range"][multiple]::-webkit-slider-thumb:active {
    z-index: 1;
}

/* Firefox 范围选择 */
[is="ui-range"][multiple]::-moz-range-thumb {
    pointer-events: initial;
}
[is="ui-range"][multiple]::-moz-range-track {
    background: linear-gradient(to right, var(--ui-gray, #a2a9b6) calc(1% * var(--from, 0)), var(--ui-blue, #2a80eb) calc(1% * var(--from, 0)) calc(1% * var(--to, 100)), var(--ui-gray, #a2a9b6) 0%);
}
[is="ui-range"][multiple][data-range="to"]::-moz-range-progress {
    background: none;
}

/* 星星评分 */

[is="ui-rate"]:enabled {
    cursor: pointer;
}
[is="ui-rate"]:disabled {
    opacity: var(--ui-opacity, .4);
}
[is="ui-rate"] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    vertical-align: middle;
    width: calc(var(--number, 5) * 2em);
    --mask-url: url("data:image/svg+xml,%3Csvg width='12' height='11' viewBox='0 0 12 11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0l1.693 3.67 4.013.476L8.74 6.89l.788 3.964L6 8.88l-3.527 1.974.788-3.964L.294 4.146l4.013-.476L6 0z'/%3E%3C/svg%3E");
    --mask: var(--mask-url) repeat-x left / 2em 100%;
}

[is="ui-rate"]::-webkit-slider-runnable-track {
    background: var(--ui-orange, #f59b00);
    height: 2em;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

[is="ui-rate"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1px;
    height: 100%;
    box-shadow: 999em 0 0 999em var(--ui-light-border, #ededef);
}

[is="ui-rate"]:focus::-webkit-slider-thumb {
    box-shadow: 999em 0 0 999em var(--ui-light-border, #ededef);
    background: var(--ui-orange, #f59b00);
}
[is="ui-rate"][readonly] {
    cursor: default;
    pointer-events: none;
}

/* 兼容火狐浏览器 */
[is="ui-rate"],
_::-moz-range-track {
    appearance: none;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    height: 2em;
}

[is="ui-range"]::-moz-range-track {
    background: var(--ui-light-border, #ededef);
    height: 4px;
}

[is="ui-rate"]::-moz-range-track {
    background: var(--ui-light-border, #ededef);
    height: inherit;
}

[is="ui-range"]::-moz-range-progress {
    background: var(--ui-blue, #2a80eb);
    height: 4px;
}
[is="ui-rate"]::-moz-range-progress {
    background: var(--ui-orange, #f59b00);
    height: inherit;
}

[is="ui-rate"]::-moz-range-thumb {
    width: 0;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    [is="ui-range"]::-webkit-slider-thumb,
    input[data-tips]::before,
    input[data-tips]::after,
    [is="ui-range"][data-tips][vertical]::before,
    [is="ui-range"][data-tips][vertical]::after,
    [is="ui-range"][data-tips][vertical][reverse]::before,
    [is="ui-range"][data-tips][vertical][reverse]::after {
        transition: none;
    }
}/**
 *
 * @Select.css
 * @author zhangxinxu(.com)
 * @create 15-06-18
 * @edited 19-08-27
 *
**/

[is="ui-select"] {
    display: inline-block;
    height: 40px;
    margin: 0;
    border: 1px solid var(--ui-border, #d0d0d5);
    font-size: var(--ui-font, 14px);
    font-family: inherit;
    vertical-align: middle;
}

[is="ui-select"][width="100%"] {
    width: 100%;
}

[is="ui-select"] {
    transform-origin: left;
    /* OS X padding-right无效 */
    border-right: 27px solid var(--ui-border, #d0d0d5);
    opacity: 0.0001;
    pointer-events: none;
    visibility: hidden;
    z-index: 1;
}

[is="ui-select"][multiple] {
    visibility: visible;
    pointer-events: auto;
}

[is="ui-select"] option {
    min-height: 38px;
    height: 38px;
    padding: 0;
    font-size: inherit;
}

[is="ui-select"][multiple] {
    height: auto;
    font-size: calc(34px - 1px);
    font-size: var(--ui-font, 14px);
    padding: 0;
    border-right-width: 13px;
    border-left: 13px solid;
    vertical-align: top;
    cursor: pointer;
}

[is="ui-select"][multiple] > option {
    min-height: 38px;
    height: 38px;
    padding: 0;
    font-size: inherit;
}

select[multiple] > option:disabled {
    cursor: default;
}

.ui-select {
    display: inline-block;
    height: 40px;
    line-height: 20px;
    vertical-align: middle;
    font-size: var(--ui-font, 14px);
    transition: opacity var(--ui-animate-time, .2s);
    text-align: start;
    position: relative;
}

[disabled] + .ui-select {
   pointer-events: none;
}

select[hidden],
select[hidden] + .ui-select {
    display: none;
}

[is="ui-select"][multiple] + .ui-select {
    vertical-align: top;
}

.ui-select.active {
    z-index: 3;
}

.ui-select-button {
    display: block;
    height: 20px;
    padding: 9px 27px 9px 12px;
    color: var(--ui-dark, #4c5161);
    border: 1px solid var(--ui-border, #d0d0d5);
    border-radius: var(--ui-radius, 4px);
    background-color: var(--ui-white, #fff);
    text-decoration: none;
    transition: border-color var(--ui-animate-time, .2s), background-color var(--ui-animate-time, .2s);
    cursor: pointer;
}

.ui-select-button:hover {
    color: var(--ui-dark, #4c5161);
    border-color: var(--ui-dark-border, #ababaf);
}

:not(:disabled) + .ui-select > .ui-select-button:active {
    background-color: var(--ui-light, #f7f9fa);
}

.active > a.ui-select-button {
    border-color: var(--ui-blue, #2a80eb);
    border-radius: var(--ui-radius, 4px) var(--ui-radius, 4px) 0 0;
}

.reverse > a.ui-select-button {
    border-radius: 0 0 var(--ui-radius, 4px) var(--ui-radius, 4px);
}

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

.ui-select-icon,
.ui-select-text:only-child::after,
.ui-select-button:empty::after {
    position: absolute;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='%232a80eb' d='M145.659 68.949a12.874 12.874 0 0 0-18.473 0L99.479 97.233 71.772 68.949a12.874 12.874 0 0 0-18.473 0c-5.099 5.208-5.099 13.648 0 18.857l46.18 47.14 46.181-47.14c5.099-5.208 5.099-13.649-.001-18.857z'/%3E%3C/svg%3E")
        no-repeat center;
    background-size: 20px 20px;
    right: 7px;
    top: 10px;
}
.ui-select-text:only-child::after,
.ui-select-button:empty::after {
    content: "";
}

.ui-select-datalist {
    position: absolute;
    left: 0;
    right: 0;
    top: 39px;
    display: none;
    max-height: 304px;
    padding: 0;
    border: 1px solid var(--ui-blue, #2a80eb);
    background-color: var(--ui-white, #fff);
    overflow: auto;
    overscroll-behavior: none;
    -ms-scroll-chaining: none;
    scrollbar-width: thin;
    text-align: left;
}

[multiple] ~ .ui-select > .ui-select-datalist {
    position: static;
    display: block;
    max-height: none;
    height: inherit;
    border-color: #d0d0d5;
    border-radius: var(--ui-radius, 4px);
    box-sizing: border-box;
}

[multiple]:hover ~ .ui-select > .ui-select-datalist {
    border-color: var(--ui-dark-border, #ababaf);
}

[multiple]:focus ~ .ui-select > .ui-select-datalist {
    border-color: var(--ui-blue, #2a80eb);
}

[data-custom-scroll="true"]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-custom-scroll="true"]::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: calc(var(--ui-radius, 4px) + 4px);
}

[data-custom-scroll="true"]::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

[data-custom-scroll="true"]::-webkit-scrollbar-track-piece {
    background-color: #ddd;
}

.active > .ui-select-datalist {
    display: block;
}

.reverse > .ui-select-datalist {
    top: auto;
    bottom: 39px;
}

.ui-select-intent {
    text-indent: 1em;
}

.ui-select-datalist-li {
    display: block;
    line-height: 20px;
    padding: 9px 12px;
    color: var(--ui-dark, #4c5161);
    background-color: var(--ui-white, #fff);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color var(--ui-animate-time, .2s);
    overflow: hidden;
}
h6.ui-select-datalist-li,
.ui-select-datalist-li[role="heading"] {
    font-weight: 700;
    margin: 0;
    padding-bottom: 6px;
}
.ui-select-datalist-li[href] {
    cursor: pointer;
}

.ui-select-datalist-li:not(:only-child):empty {
    display: none;
}

.ui-select-datalist-hr:not(:first-child) {
    border: 0;
    border-bottom: 1px solid var(--ui-border, #d0d0d5);
    margin: 7px 12px;
    opacity: .4;
}

/* reset default a:hover */
.ui-select-datalist-li:hover {
    color: var(--ui-dark, #4c5161);
}

.ui-select-datalist > .disabled {
    color: var(--ui-gray, #a2a9b6);
    cursor: default;
}

.ui-select-datalist > .selected {
    background-color: var(--ui-list-selected, #e0f0ff);
}

.ui-select-datalist-li[href]:hover,
[multiple] ~ .ui-select .ui-select-datalist-li[href] {
    color: var(--ui-dark, #4c5161);
    background-color: var(--ui-list-hover, #f0f7ff);
}

/* disabled */
select:disabled {
    cursor: default;
}

select:disabled + .ui-select {
    opacity: var(--ui-opacity, .4);
}

select:disabled + .ui-select .ui-select-button,
select:disabled + .ui-select .ui-select-datalist {
    cursor: default;
    border-color: var(--ui-dark-border, #ababaf);
}

/* error */
[is-error] .ui-select-button,
[is-error][multiple] ~ .ui-select .ui-select-datalist,
select[is-error] {
    border-color: var(--ui-red, #eb4646);
}

@media (prefers-reduced-motion: reduce) {
    .ui-select-button,
    .ui-select,
    .ui-select-datalist-li {
        transition: none;
    }
}

/**
 *
 * @Switch.css
 * @author zhangxinxu
 * @create 15-06-18
 * @edit   17-06-14    keyboard accessible
 * @editor shanyerong
 * @edit   2020-04-30
**/
:root {
    --ui-switch-width: 44px;
    --ui-switch-height: 26px;
}
input[is="ui-switch"] {
    -webkit-appearance: none;
    display: inline-flex;
    outline: none;
    box-sizing: border-box;
    box-shadow: inset 0 1px, inset 1px 0, inset -1px 0, inset 0 -1px;
    background-clip: content-box;
    -webkit-appearance: none;
    width: var(--ui-switch-width, 44px);
    height: var(--ui-switch-height, 26px);
    border: 2px solid;
    border-radius: var(--ui-switch-height, 26px);
    background-color: currentColor;
    color: var(--ui-dark-gray, #b6bbc6);
    font-size: 0;
    transition: all var(--ui-animate-time, .2s);
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
input[is="ui-switch"]:checked {
    color: var(--ui-blue, #2a80eb);
    background-color: var(--ui-blue, #2a80eb);
}
input[is="ui-switch"]::before {
    content: '';
    flex: 0;
    transition: flex var(--ui-animate-time, .2s);
}

input[is="ui-switch"]::after {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 100%;
    background-color: var(--ui-white, #ffffff);
    opacity: 1;
    visibility: visible;
}

input[is="ui-switch"]:active {
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
}

input[is="ui-switch"]:checked::before {
    flex: 1;
}

input[is="ui-switch"]:disabled {
    opacity: var(--ui-opacity, .4);
    cursor: default;
}

input[is="ui-switch"]:focus:not(:disabled),
input[is="ui-switch"]:hover:not(:disabled) {
    color: var(--ui-gray, #a2a9b6);
}

input[is="ui-switch"]:checked:focus:not(:disabled),
input[is="ui-switch"]:checked:hover:not(:disabled) {
    color: var(--ui-dark-blue, #0057c3);
    background-color: var(--ui-dark-blue, #0057c3);
}

input[is="ui-switch"]:checked:focus:disabled,
input[is="ui-switch"]:checked:disabled:hover {
    color: var(--ui-blue, #2a80eb);
    background-color: var(--ui-blue, #2a80eb);
}

@media (prefers-reduced-motion: reduce) {
    input[is="ui-switch"],
    input[is="ui-switch"]::before {
        transition: none;
    }
}
/**
 *
 * @Tab.css
 * @author xinxuzhang
 * @create 15-06-12
 */
/* tabs */

ui-tab {
    cursor: pointer;
}

.ui-tab-tabs {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid var(--ui-border, #d0d0d5);
    position: relative;
    display: flex;
}

.ui-tab-tab {
    margin-right: 50px;
    font-size: calc(var(--ui-font, 14px) + 2px);
    text-align: center;
    color: var(--ui-dark, #4c5161);
    text-decoration: none;
    border: 0;
    background: none;
    overflow: hidden;
    cursor: pointer;
}

.ui-tab-tab a {
    display: block;
    color: inherit;
}

.ui-tab-tab:hover {
    color: var(--ui-blue, #2a80eb);
}

.ui-tab-tabs [open] {
    line-height: 36px;
    padding-top: 2px;
    margin-bottom: -1px;
    border-bottom: solid;
    color: var(--ui-blue, #2a80eb);
    cursor: default;
}
.ui-tab-tabs[style*="--ui-tab"]::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: calc(1px * var(--ui-tab-left));
    width: calc(1px * var(--ui-tab-width));
    border-bottom: solid var(--ui-blue, #2a80eb);
    transition: all var(--ui-animate-time, .2s);
}

[style*="--ui-tab"] > .ui-tab-tab {
    line-height: 40px;
    padding-top: 0;
    border-bottom: 0;
    margin-bottom: 0;
}

/* contents */
.ui-tab-contents {
    margin-top: 30px;
}

/* 有role属性表示JS已经介入了初始化，锚点hash显示功能去除 */
.ui-tab-content[role]:not(.active),
.ui-tab-content:not([role]):not(:target) {
    display: none;
}

.ui-tab-contents:target-within .ui-tab-content:not(:target) {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .ui-tab-tabs[style*="--ui-tab"]::after {
        transition: none;
    }
}
/**
 *
 * @Table.css
 * @author xinxuzhang
 * @create 15-06-24
 *
**/
/* table基础变量 */
:root {
    --ui-table-cell-height: 50px;
    --ui-table-line-height: var(--ui-line-height, 20px);
}

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

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

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

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

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

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

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

/**
 *
 * @Textarea.css
 * @author xinxuzhang
 * @create 15-06-17
 * @edit   20-04-03 version edge
 * @editor lennonover
**/

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

textarea {
    font-family: inherit;
}

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

textarea[resize] {
    resize: both;
}
textarea[resize="vertical"] {
    resize: vertical;
}
textarea[resize="horizontal"] {
    resize: horizontal;
}

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

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

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

/* textarea with count */
.ui-textarea-x {
    position: relative;
    z-index: 0;
    overflow: hidden;
}
span.ui-textarea-x {
    display: inline-block;
}
.ui-textarea-x > textarea:only-child {
    padding-bottom: 32px;
}
.ui-textarea-x > textarea:not(:only-child) {
    padding-bottom: 0;
    margin: 1px 1px 33px;
    width: calc(100% - 2px);
    border: 0;
    background: none;
}
.ui-textarea-x > textarea {
    display: block;
    width: 100%;
    /* for Firefox */
    margin: 0;
}

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

/* disabled */
.ui-textarea:disabled,
[is="ui-textarea"]:disabled,
.ui-textarea > textarea:disabled,
:disabled ~ .ui-textarea-count {
    background-color: var(--ui-light, #f7f9fa);
}
.ui-textarea:read-only,
[is="ui-textarea"]:read-only,
.ui-textarea > textarea:read-only,
:read-only ~ .ui-textarea-count {
    background-color: var(--ui-white, #ffffff);
}
/* firefox */
.ui-textarea:-moz-read-only,
[is="ui-textarea"]:-moz-read-only,
.ui-textarea > textarea:-moz-read-only,
:-moz-read-only ~ .ui-textarea-count {
    background-color: var(--ui-white, #ffffff);
}

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    textarea.ui-textarea,
    [is="ui-textarea"],
    .ui-textarea > textarea,
    textarea ~ .ui-textarea-count {
        transition: none;
    }
}

/**
 *
 * @Tips.css
 * @author xinxuzhang
 * @create 15-06-25
 *
**/

:root {
    --ui-tips-triangle-size: 6px; /* 底为 6*2，高为 6 */
    --ui-tips-bg: #373c42;
    --ui-tips-error-bg: linear-gradient(90deg, #ff8da2, #ec5b60);

}

.ui-tips[data-title],
[is-tips="css"][data-title] {
    text-indent: 0;
    position: relative;
    overflow: visible;
}

.ui-tips[data-title]::before,
.ui-tips[data-title]::after,
[is-tips="css"][data-title]::before,
[is-tips="css"][data-title]::after {
    position: absolute;
    left: 50%;
    -ms-pointer-events: none;
    pointer-events: none;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    visibility: hidden;
    content: attr(data-title);
    bottom: calc(100% + 6px);
    max-width: 250px;
    /* 四边都预留出三角形的位置 */
    padding: calc(6px + var(--ui-tips-triangle-size)) calc(10px + var(--ui-tips-triangle-size));

    line-height: 18px;
    background: var(--ui-tips-bg);
    text-align: left;
    color: var(--ui-white, #ffffff);
    font-size: calc(var(--ui-font, 14px) - 2px);
    font-style: normal;
    white-space: nowrap;
}

.ui-tips[data-title]::before,
[is-tips="css"][data-title]::before {
    /* 切割出框体，带 border-radius */
    clip-path: inset(
            var(--ui-tips-triangle-size)
            var(--ui-tips-triangle-size)
            var(--ui-tips-triangle-size)
            var(--ui-tips-triangle-size)
            round calc(var(--ui-radius, 4px) - 1px));
}

.ui-tips[data-title]::after,
[is-tips="css"][data-title]::after {
    /* 默认是在框体下方居中位置，多 1 像素避免缝隙 */
    clip-path: polygon(
            calc(50% - var(--ui-tips-triangle-size)) calc(100% - (var(--ui-tips-triangle-size) + 1px)),
            calc(50% + var(--ui-tips-triangle-size)) calc(100% - (var(--ui-tips-triangle-size) + 1px)),
            50% 100%
    );
}

.ui-tips[data-title]:hover::before,
.ui-tips[data-title]:hover::after,
.ui-tips[data-title]:focus::before,
.ui-tips[data-title]:focus::after,
[is-tips="css"][data-title]:hover::before,
[is-tips="css"][data-title]:hover::after,
[is-tips="css"][data-title]:focus::before,
[is-tips="css"][data-title]:focus::after {
    transition: visibility var(--ui-animate-time, .2s) var(--ui-animate-time, .2s);
    visibility: visible;
}

.ui-tips[data-title]:hover,
[is-tips="css"][data-title]:hover {
    outline: none;
}

/* 朝下的情况 */
.reverse.ui-tips[data-title]::before,
.reverse.ui-tips[data-title]::after,
.reverse[is-tips="css"][data-title]::before,
.reverse[is-tips="css"][data-title]::after {
    bottom: auto;
    top: calc(100% + 6px);
}

.reverse.ui-tips[data-title]::after,
.reverse[is-tips="css"][data-title]::after {
    clip-path: polygon(
            calc(50% - var(--ui-tips-triangle-size)) calc(0% + var(--ui-tips-triangle-size) + 1px),
            calc(50% + var(--ui-tips-triangle-size)) calc(0% + var(--ui-tips-triangle-size) + 1px),
            50% 0%
    );
}


/* JS生成的，和CSS定位样式不合并，保持独立 */
.ui-tips-x {
    position: absolute;
    width: fit-content;
    z-index: 99;
    margin-top: -6px;
    max-width: 20em;
    padding: calc(6px + var(--ui-tips-triangle-size)) calc(10px + var(--ui-tips-triangle-size));
    line-height: 18px;
    color: var(--ui-white, #fff);
    font-size: calc(var(--ui-font, 14px) - 2px);
    font-style: normal;
    text-align: left;
}
.ui-tips-x::before,
.ui-tips-x::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--ui-tips-bg);
}
.ui-tips-x::before {
    z-index:-1;
    clip-path: inset(
            var(--ui-tips-triangle-size)
            var(--ui-tips-triangle-size)
            var(--ui-tips-triangle-size)
            var(--ui-tips-triangle-size)
            round calc(var(--ui-radius, 4px) - 1px));
}
.ui-tips-x::after {
    clip-path: polygon(
            calc(50% - var(--ui-tips-triangle-size)) calc(100% - (var(--ui-tips-triangle-size) + 1px)),
            calc(50% + var(--ui-tips-triangle-size)) calc(100% - (var(--ui-tips-triangle-size) + 1px)),
            50% 100%
    );}



@media (any-hover: none) {
    html {
        --hoverNone: 'true';
    }
}

/* 悬浮在左右侧的，限定最大宽度 */
.ui-tips-x[data-align="8-6"],
.ui-tips-x[data-align="6-8"] {
    max-width: 600px;
}


/* 悬浮在目标正下方，箭头在框体 50% 0 位置 */
.ui-tips-x[data-align="7-5"] {
    margin-top: 6px;
}

.ui-tips-x[data-align="7-5"]::after {
    clip-path: polygon(
            calc(50% - var(--ui-tips-triangle-size)) calc(0% + (var(--ui-tips-triangle-size) + 1px)),
            calc(50% + var(--ui-tips-triangle-size)) calc(0% + (var(--ui-tips-triangle-size) + 1px)),
            50% 0%
    );
}

/* 悬浮在目标左上，箭头在框体 100% -16px, 100% 位置 */
.ui-tips-x[data-align="2-3"] {
    margin-left: 12px;
    margin-top: -6px;
}

.ui-tips-x[data-align="2-3"]::after {
    clip-path: polygon(
            calc(100% - 16px) calc(100% - (var(--ui-tips-triangle-size) + 1px)),
            calc(100% - (16px + var(--ui-tips-triangle-size)*2)) calc(100% - (var(--ui-tips-triangle-size) + 1px)),
            calc(100% - (16px + var(--ui-tips-triangle-size))) 100%
    );
}

/* 悬浮在目标右上，箭头在框体 16px, 100% 位置 */
.ui-tips-x[data-align="1-4"] {
    margin-left: -12px;
    margin-top: -6px;
}
.ui-tips-x[data-align="1-4"]::after {
    clip-path: polygon(
            16px calc(100% - (var(--ui-tips-triangle-size) + 1px)),
            calc(16px + var(--ui-tips-triangle-size)*2) calc(100% - (var(--ui-tips-triangle-size) + 1px)),
            calc(16px + var(--ui-tips-triangle-size)) 100%
    );
}

/* 悬浮在目标左侧，箭头在框体 100%, 50% 位置 */
.ui-tips-x[data-align="8-6"] {
    margin-left: -6px;
    margin-top: 0;
}

.ui-tips-x[data-align="8-6"]::after {
    clip-path: polygon(
            calc(100% - (var(--ui-tips-triangle-size) + 1px)) calc(50% - var(--ui-tips-triangle-size)),
            calc(100% - (var(--ui-tips-triangle-size) + 1px)) calc(50% + var(--ui-tips-triangle-size)),
            100% 50%
    );
}
/* 悬浮在目标右侧，箭头在框体 0%, 50% 位置 */
.ui-tips-x[data-align="6-8"] {
    margin-left: 6px;
    margin-top: 0;
}

.ui-tips-x[data-align="6-8"]::after {
    clip-path: polygon(
            calc(0% + (var(--ui-tips-triangle-size) + 1px)) calc(50% - var(--ui-tips-triangle-size)),
            calc(0% + (var(--ui-tips-triangle-size) + 1px)) calc(50% + var(--ui-tips-triangle-size)),
            0% 50%
    );
}

/* 悬浮在目标左下侧，箭头在框体 100% - 16px, 0% 位置 */
.ui-tips-x[data-align="3-2"] {
    margin-left: 12px;
    margin-top: 6px;
}

.ui-tips-x[data-align="3-2"]::after {
    clip-path: polygon(
            calc(100% - 16px) calc(0% + (var(--ui-tips-triangle-size) + 1px)),
            calc(100% - (16px + var(--ui-tips-triangle-size)*2)) calc(0% + (var(--ui-tips-triangle-size) + 1px)),
            calc(100% - (16px + var(--ui-tips-triangle-size))) 0%
    );
}

/* 悬浮在目标右下侧，箭头在框体 16px, 0% 位置*/
.ui-tips-x[data-align="4-1"] {
    margin-left: -12px;
    margin-top: 6px;
}

.ui-tips-x[data-align="4-1"]::after {
    clip-path: polygon(
            16px calc(0% + (var(--ui-tips-triangle-size) + 1px)),
            calc(16px + var(--ui-tips-triangle-size)*2) calc(0% + (var(--ui-tips-triangle-size) + 1px)),
            calc(16px + var(--ui-tips-triangle-size)) 0%
    );
}


/* 错误提示的tips效果 */
.ui-tips-error:not(.none) {
    animation: fadeIn var(--ui-animate-time, .2s), fallDown var(--ui-animate-time, .2s);
}

.ui-tips-error.ui-tips-x::before,
.ui-tips-error.ui-tips-x::after {
    background: var(--ui-tips-error-bg);
    /*background-color: var(--ui-red, #eb4646);*/
}


/**
 *
 * @Table.css
 * @author zhangxinxu
 * @edit 17-10-18 从原Table.css中分离出来
 *
**/
/* table shadow */
.table-x {
    background-color: #fff;
    border: 1px solid var(--ui-border, #d0d0d5);
}

.table-x table {
    border: 0;
}

/* table without data */
.table-null-x,
.table-error-x {
    display: none;
    align-items: center;
    justify-content: center;
    height: 300px;
    flex-direction: column;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.table-null-x:empty::before {
    content: '暂无数据';
}
.table-error-x:empty::before {
    content: '数据获取失败';
}

/* 列表分页 */
.table-page-x,
.table-x > ui-pagination {
    padding: 10px 10px 10px 20px;
    margin-top: -1px;
    border-top: 1px solid var(--ui-light-border, #ededed);
    background-color: var(--ui-light, #f7f9fa);
    position: relative;
    overflow: hidden;
}
.table-x > ui-pagination {
    justify-content: flex-end;
}
.table-x > ui-pagination:not([current]) {
    --ui-visibility: hidden;
}
@media screen and (max-width: 640px) {
    .table-page-x {
        padding-left: 10px;
        padding-right: 5px;
    }
}

.table-page-data {
    float: left;
    line-height: 20px;
    padding-top: 5px;
    font-size: 14px;
}

.table-page-total {
    margin: 0 3px;
}

.table-page-per {
    display: inline-block;
    margin-left: 5px;
    color: var(--ui-blue, #2a80eb);
    cursor: pointer;
}
.table-page-per::after {
    content: '';
    display: inline-block;
    width: 20px; height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-205 197 200 400'%3E%3Cpath d='M-59.7 271.6c-4.2-4.1-11-4.1-15.3 0l-30.5 29.6-30.5-29.6c-4.2-4.1-11-4.1-15.3 0-4.2 4.1-4.2 10.7 0 14.8l38.2 37c4.2 4.1 11 4.1 15.3 0l38.2-37c4.1-4.1 4.1-10.7-.1-14.8z' fill='%23a2a9b6'/%3E%3Cpath d='M-58.7 471.6c-4.2-4.1-11-4.1-15.3 0l-30.5 29.6-30.5-29.6c-4.2-4.1-11-4.1-15.3 0-4.2 4.1-4.2 10.7 0 14.8l38.2 37c4.2 4.1 11 4.1 15.3 0l38.2-37c4.1-4.1 4.1-10.7-.1-14.8z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat;
    background-size: 20px 40px;
    vertical-align: -5px;
}

.table-page-per:hover::after {
    color: var(--ui-blue, #2a80eb);
    background-position: 0 -20px;
}

.table-page {
    float: right;
    padding-top: 2px;
}

.table-checkbox td:first-child,
.table-checkbox th:first-child {
    width: 20px;
    padding-right: 0;
    padding-left: 18px;
    text-align: right;
}

.table-checkbox td:first-child + td,
.table-checkbox th:first-child + th {
    padding-left: 13px;
}

.table-checkbox tr:hover td {
    background-color: var(--ui-list-hover, #f0f7ff);
}

.table-checkbox tr.selected td {
    background-color: var(--ui-list-selected, #e0f0ff);
}


/* 表格头部操作，搜索，或者大标题 */
.table-header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--ui-light-border, #ededed);
}

.table-title {
    line-height: 56px;
    font-size: 24px;
    margin: 0;
}