lu2/theme/pure/css/common/ui.css

Simple and flexible UI component library based on native HTML and JavaScript

@charset "UTF-8";
/**
 *
 * @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
 */
.ui-button {
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
    text-align: center;
    color: #4c5161;
    border-radius: 4px;
    border: 1px solid #d0d0d5;
    padding: 9px 15px;
    min-width: 80px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s, opacity .15s;
    font-family: inherit;
    cursor: pointer;
    overflow: visible;
}

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

div.ui-button {
    display: block;
}

[type="submit"]:not([class]) {
    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;
}

input.ui-button,
button.ui-button {
    height: 40px;
}
.ui-button:hover {
    color: #4c5161;
    text-decoration: none;
}
.ui-button:not(.disabled):not(.loading):not(:disabled):hover {
    border-color: #ababaf;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.01), inset 0 0 0 100px rgba(0,0,0,.05);
}
.ui-button:not(.disabled):not(.loading):not(:disabled):active {
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1), inset 0 0 0 100px rgba(0,0,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"] {
    border: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
}

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

/* success button */
.ui-button[data-type="success"] {
    background-color: #1cad70;
}

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

/* disabled status */
.ui-button.disabled,
.ui-button:disabled {
    opacity: .4;
    cursor: default;
}
/* loading status */
.ui-button.loading {
    color: transparent !important;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    cursor: default;
}
/* for IE9 button按钮以及IE9+ input按钮，三个点 */
input.ui-button.loading,
.ui-button.loading::before {
    background-image: 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='M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z' fill='%232a80eb'/%3E%3C/svg%3E"), 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='M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z' fill='%232a80eb'/%3E%3C/svg%3E"), 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='M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z' fill='%232a80eb'/%3E%3C/svg%3E");
    background-position-x: calc(50% - 10px), 50%, calc(50% + 10px);
    /* IE不支持calc计算动画，因此是要具体数值代替 */
    background-position-y: 18px, 18px, 18px;
    background-size: 5px 5px;
    animation: bubbling 1s infinite;
}
input.ui-button[data-type]:not([data-type="normal"]).loading,
.ui-button[data-type]:not([data-type="normal"]).loading::before {
    background-image: 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='M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z' fill='%23fff'/%3E%3C/svg%3E"), 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='M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z' fill='%23fff'/%3E%3C/svg%3E"), 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='M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z' fill='%23fff'/%3E%3C/svg%3E");
}

/* IE9+ */
.ui-button.loading::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background-repeat: no-repeat;
}
/* IE10+，:invalid伪类IE10+才支持 */
.ui-button.loading::before,
div:invalid {
    width: 20px; height: 20px;
    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='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 center;
    background-size: 20px 20px;
    margin: auto;
    animation: spin 1s linear infinite;
}
/* IE10+ */
.ui-button[data-type]:not([data-type="normal"]).loading::before,
div:invalid {
    background-image: 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='%23fff'/%3E%3C/svg%3E");
}

@keyframes bubbling {
    0% {
        background-position-y: 18px, 18px, 18px;
    }
    15% {
        background-position-y: 15px, 18px, 18px;
    }
    30% {
        background-position-y: 17px, 15px, 18px;
    }
    45% {
        background-position-y: 18px, 17px, 15px;
    }
    60% {
        background-position-y: 18px, 18px, 17px;
    }
}

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

/* error */
.ui-button.error {
    border-color: #eb4646 !important;
}

@media (prefers-reduced-motion: reduce) {
    .ui-button {
        transition: none;
    }
}
/**
 *
 * @Checkbox.css
 * @author zhangxinxu
 * @create 15-06-18
 * @edit 17-06-14    focusable
**/
input[type="checkbox"]:not([ui-visible]) {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: -1;
}

[ui-visible] + .ui-checkbox {
    display: none;
}

/* 无绝对定位的模拟生成实现 */
.ui-checkbox {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: inset 0 1px, inset 1px 0, inset -1px 0, inset 0 -1px;
    background-color: #fff;
    background-clip: content-box;
    color: #d0d0d5;
    transition: color .2s, background-color .1s;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: -5px;
    overflow: hidden;
}

.ui-checkbox + label {
    margin-left: 5px;
}

:not(:disabled) + .ui-checkbox:hover,
:disabled + .ui-checkbox {
    color: #ababaf;
}

:focus + .ui-checkbox {
    color: #2a80eb;
}
:focus + .ui-checkbox:hover {
    color: #0057c3;
}

:checked + .ui-checkbox {
    color: #2a80eb;
    background-color: #2a80eb;
}

:checked:focus + .ui-checkbox,
:checked + .ui-checkbox:hover {
    color: #0057c3;
    background-color: #0057c3;
}

.ui-checkbox::after {
    content: '';
    display: block;
    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;
}

:checked + .ui-checkbox::after {
    visibility: visible;
}

:disabled + .ui-checkbox {
    opacity: .38;
}

/* error */
.error.ui-checkbox {
    color: #eb4646;
}

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

/**
 *
 * @Color.css
 * @author xinxuzhang
 * @create 16-06-03
**/
.ui-color-input,
[type='color']:not([is-visible]) {
    width: 40px; height: 40px;
    margin: 0; padding: 0;
    border: 0 none;
    opacity: 0;
    vertical-align: middle;
    /* remove IE caret光标 */
    text-indent: -999px;
    position: relative;
    z-index: -1;
}

.ui-color-track {
    display: inline;
    /*    重要，不会换行    */
    position: absolute;
    width: 40px; height: 40px;
    border-radius: 4px;
    background-color: rgba(25, 28, 34, 0.2);
    cursor: pointer;
}

.ui-color-thumb {
    display: block;
    margin: 7px auto;
    width: 24px; height: 24px;
    border: 1px solid #f7f9fa;
    border-radius: 3px;
    background-color: #4c5161;
    background-clip: content-box;
    transition: background-color .25s;
}

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

.ui-color-switch {
    position: absolute;
    top: 12px; right: 12px;
    color: #2a80eb;
    border: 1px solid transparent;
    height: 20px;
    line-height: 20px;
    padding: 2px 5px;
    border-radius: 3px;
    background: none;
    font-family: inherit;
    transition: border-color .2s, background-color .2s;
    box-sizing: content-box;
}
.ui-color-switch:hover {
    background-color: #fff;
    border-color: #d0d0d5;
    background-color: #fff;
}
.ui-color-switch:active {
    line-height: normal;
}

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

.ui-color-current-square {
    display: inline-block;
    width: 20px; height: 20px;
    margin-right: 5px;
    border-radius: 3px;
    box-shadow: inset 0 1px rgba(0, 0, 0, .25), inset 0 -1px rgba(0, 0, 0, .25), inset 1px 0 rgba(0, 0, 0, .25), inset -1px 0 rgba(0, 0, 0, .25);
    background-color: currentColor;
    vertical-align: middle;
}

.ui-color-current-input {
    width: 72px;
    border: 1px solid #d0d0d5;
    background-color: #fff;
    height: 20px;
    line-height: 20px;
    padding: 2px 5px;
    border-radius: 3px;
    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 {
    border: 1px solid #fff;
}

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

.ui-color-basic-r {
    margin-left: 25px;
    overflow: hidden;
}

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

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

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

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

.ui-color-cover-white {
    background-color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #808080);
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00808080,endcolorstr=#FF808080,gradientType=0);
    cursor: crosshair;
}

.ui-color-circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    border: 3px solid #fff;
    border-radius: 20px;
    background-color: #f00;
    background-clip: content-box;
    -ms-transform: translate(-11px, -11px);
    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: 100px;
}

.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-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: 4px;
    text-align: center;
    font-size: 14px;
    font-family: inherit;
    transition: box-shadow .2s, border-color .2s;
    cursor: pointer;
}

.ui-color-button-cancel {
    border: 1px solid #d0d0d5;
    background-color: #fff;
    color: #4c5161;
}

.ui-color-button-cancel:hover {
    border-color: #ababaf;
    color: #4c5161;
}

.ui-color-button-ensure {
    border: 1px solid #2a80eb;
    background-color: #2a80eb;
    color: #fff;
}

.ui-color-button-ensure:hover {
    color: #fff;
}

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

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

@media (prefers-reduced-motion: reduce) {
    .ui-color-container {
        animation: none;
    }
    .ui-color-thumb,
    .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 .2s;
    z-index: 19;
}

.ui-datalist-datalist {
    max-height: 304px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #d0d0d5;
    border: 0 rgba(0, 0, 0, 0.2);
    font-size: 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: 8px;
}

.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: #fff;
    transition: background-color .15s;
    overflow: hidden;
    cursor: pointer;
}

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

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

.ui-datalist-datalist > .selected {
    background-color: #e0f0ff;
}
.ui-datalist-datalist > .disabled {
    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: #a2a9b6;
    font-size: 12px;
}

.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
 *
**/
:not([is-visible])::-webkit-clear-button,
:not([is-visible])::-webkit-inner-spin-button,
:not([is-visible])::-webkit-calendar-picker-indicator {
    display: none;
}

[type="date"]:not([is-visible])::-webkit-datetime-edit-text {
    color: transparent;
    background: linear-gradient(#4c5161, #4c5161) no-repeat center;
    background-size: 80% 1px;
}

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

:not([is-visible]):valid::-webkit-datetime-edit {
    visibility: hidden;
}

.ui-date-input,
.ui-year-input,
.ui-month-input,
.ui-time-input,
.ui-date-range-input,
.ui-month-range-input {
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.ui-date-input > input:not([is-visible]),
.ui-year-input > input:not([is-visible]),
.ui-month-input > input:not([is-visible]),
.ui-time-input > input:not([is-visible]),
.ui-hour-input > input:not([is-visible]),
[class].ui-date-range-input > input,
[class].ui-month-range-input > input {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #fff;
    -webkit-appearance: none;
}

.ui-input:hover > input[readonly] {
    border-color: #ababaf;
}

.ui-input:active > input[readonly] {
    background-color: #f7f9fa;
}

span.ui-date-input > input {
    width: 125px;
}

span.ui-year-input > input,
span.ui-time-input > input {
    width: 85px;
}

span.ui-month-input > input {
    width: 125px;
}

span.ui-date-range-input > input {
    width: 210px;
}

span.ui-month-range-input > input {
    width: 170px;
}

/* Chrome-window/iOS 月份日期控件会根据系统添加中文描述，宽度不定，因此，宽度使用自动宽度 */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    span.ui-time-input > [type="time"] {
        width: auto;
        /* for Safari */
        max-width: 125px;
    }
}
@supports not (-moz-appearance: none) {
    span.ui-time-input > [type="time"] {
        padding-right: 33px;
    }
}

/* 这里定位改成覆盖是为了避免IE浏览器下的focus光标 */
.ui-date-arrow {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    border-right: 4px solid transparent;
    cursor: pointer;
}
.ui-date-arrow::before {
    content: '';
    position: absolute;
    width: 20px;
    top: 1px; bottom: 1px; right: 0;
    margin: auto;
    background: 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;
    background-size: 20px 20px;
}
:disabled + .ui-date-arrow {
    cursor: default;
}
:disabled + .ui-date-arrow::before {
    background-image: 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");
}

/* firefox覆盖清除按钮，以及移动端覆盖下拉箭头 */
.ui-date-arrow::before {
    background-color: #fff;
    transition: background-color .15s;
}
.ui-input:active .ui-date-arrow::before,
:disabled + .ui-date-arrow::before {
    background-color: #f7f9fa;
}

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

.ui-date-container a {
    text-decoration: none;
    transition: background-color .2s, color .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;
    fill: currentColor;
}
a.ui-date-prev:hover {
    color: #2a80eb;
}

span.ui-date-prev {
    color: #ccd0d7;
}

a.ui-date-next:hover {
    color: #2a80eb;
}

span.ui-date-next {
    color: #ccd0d7;
}

.ui-date-prev > svg,
.ui-date-next > svg {
    display: block;
    width: 20px;
    height: 20px;
    margin: 5px auto 0;
}

.ui-date-next > svg {
    -ms-transform: rotate(180deg);
    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: 2px;
    color: #4c5161;
    text-align: center;
}

a.ui-date-switch:hover,
a.ui-date-item:not(.selected):hover {
    color: #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: 2px;
    text-align: center;
    font-size: 13px;
    color: #4c5161;
}

span.ui-date-item {
    opacity: .4;
}

.ui-date-item.col0,
.ui-date-item.col6,
.ui-day-item.col0,
.ui-day-item.col6 {
    color: #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: #2a80eb;
    color: #fff;
    cursor: default;
}

.ui-date-container span.selected {
    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 #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: #fff;
    color: #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: #fff;
    color: #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 #2a80eb;
    border-radius: 2px;
}

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

@media (prefers-reduced-motion: reduce) {
    .ui-date-container {
        animation: none;
    }
    .ui-date-arrow::before,
    .ui-date-container a {
        transition: none;
    }
}

/**
 *
 * @Dialog.css
 * @author zhangxinxu
 * @create 15-06-18
 * @edit   19-10-31
 *
**/
.ui-dialog-container {
    position: fixed;
    left: 0; top: 0;
    height: 100%;
    width: 100%;
    padding: 0;
    border: 0;
    background-color: rgba(25, 28, 34, 0.88);
    text-align: center;
    color: #4c5161;
    font-size: 14px;
    white-space: nowrap;
    overflow: auto;
    z-index: 19;
}

.ui-dialog-container:not([open]) {
    display: none;
}

.ui-dialog-animation {
    animation: fadeIn .2s both;
}

/* 多个弹框出现的时候，隐藏后面弹框的背景 */
.ui-dialog-container + .ui-dialog-container {
    transition: background-color .2s;
    background-color: transparent;
}

.ui-dialog-container:after {
    content: '';
    display: inline-block;
    height: 95%;
    vertical-align: middle;
}

.ui-dialog {
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: left;
    min-width: 400px;
    border-radius: 4px;
    background-color: #f7f9fa;
    vertical-align: middle;
    white-space: normal;
    outline: none;
    position: relative;
}

.ui-dialog-animation .ui-dialog {
    animation: tinydown .25s;
}

.ui-dialog-title {
    margin: 0;
    line-height: 30px;
    padding: 15px 50px 0 25px;
    font-weight: bold;
    font-size: 14px;
    color: #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;
    transition: fill .2s;
    fill: #b6bbc6;
    cursor: pointer;
    z-index: 1;
}

.ui-dialog-close > svg {
    width: 20px;
    height: 20px;
}

.ui-dialog-close:hover {
    background-color: #4c5161;
    background-color: rgba(0, 0, 0, 0);
    fill: #4c5161;
}

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

.ui-dialog-body:after {
    content: '';
    display: table;
    clear: both;
}

.ui-dialog-footer {
    padding: 3px 25px 25px;
    margin-top: -3px;
    text-align: right;
    max-height: 40px;
    opacity: 1;
    transition: max-height .2s, opacity .2s .1s;
    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;
}

.ui-dialog-remind {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-105 197 400 400'%3E%3Cstyle%3E.st1%7Bfill:%23fff%7D%3C/style%3E%3Cpath d='M95.5 197.5c110.5 0 200 89.5 200 200s-89.5 200-200 200-200-89.5-200-200 89.5-200 200-200z' fill='%232a80eb'/%3E%3Cpath class='st1' d='M90.5 347.5h10c2.8 0 5 2.2 5 5v150c0 2.8-2.2 5-5 5h-10c-2.8 0-5-2.2-5-5v-150c0-2.8 2.2-5 5-5zM90.5 297.5h10c2.8 0 5 2.2 5 5v20c0 2.8-2.2 5-5 5h-10c-2.8 0-5-2.2-5-5v-20c0-2.8 2.2-5 5-5z'/%3E%3C/svg%3E"), none;
}

.ui-dialog-success {
    background: 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"), none;
}

.ui-dialog-warning {
    background: 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='%23f59b00' 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='M195.503 100.503h10a5 5 0 0 1 5 5v150a5 5 0 0 1-5 5h-10a5 5 0 0 1-5-5v-150a5 5 0 0 1 5-5zM195.503 280.502h10a5 5 0 0 1 5 4.999v20.002a5 5 0 0 1-5 5h-10a5 5 0 0 1-5-5v-20.002a5 5 0 0 1 5-4.999z'/%3E%3C/svg%3E"), none;
}

.ui-dialog-danger {
    background: 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='%23eb4646' 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='M195.503 100.503h10a5 5 0 0 1 5 5v150a5 5 0 0 1-5 5h-10a5 5 0 0 1-5-5v-150a5 5 0 0 1 5-5zM195.503 280.502h10a5 5 0 0 1 5 4.999v20.002a5 5 0 0 1-5 5h-10a5 5 0 0 1-5-5v-20.002a5 5 0 0 1 5-4.999z'/%3E%3C/svg%3E"), none;
}

.ui-dialog-alert,
.ui-dialog-confirm {
    max-width: 340px;
    min-height: 40px;
    padding-top: 10px;
    font-size: 16px;
    word-wrap: break-word;
    overflow: hidden;
}

.ui-dialog-remind,
.ui-dialog-success,
.ui-dialog-warning,
.ui-dialog-danger {
    padding: 20px 0 20px 60px;
    background-repeat: no-repeat;
    background-position: 0 10px;
    background-size: 40px 40px;
}

.ui-dialog-alert > h6,
.ui-dialog-confirm > h6 {
    font-size: 15px;
    margin-bottom: 5px;
}
.ui-dialog-alert > :first-child:only-child,
.ui-dialog-confirm > :first-child:only-child {
    margin-top: 0;
}
.ui-dialog-alert > :first-child:not(:only-child),
.ui-dialog-confirm > :first-child:not(:only-child) {
    margin-top: -10px;
}

.ui-dialog-alert > h6 ~ p,
.ui-dialog-confirm > h6 ~ p {
    font-size: 14px;
}

.ui-dialog-alert > p,
.ui-dialog-confirm > p {
    margin: 0;
}

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

.ui-dialog-loading .ui-dialog-body {
    min-width: 400px;
}

@media screen and (max-width: 480px) {
    .ui-dialog-loading .ui-dialog-body,
    .ui-dialog {
        min-width: 90vw;
    }
    .ui-dialog-remind,
    .ui-dialog-success,
    .ui-dialog-warning,
    .ui-dialog-danger {
        padding-bottom: 0;
    }
    .ui-dialog-container-alert .ui-dialog,
    .ui-dialog-container-confirm .ui-dialog,
    .ui-dialog[style*="width: auto"] {
        max-width: calc(100vw - 16px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-dialog-animation,
    .ui-dialog-animation .ui-dialog {
        animation: none;
    }
    .ui-dialog-container + .ui-dialog-container,
    .ui-dialog-close,
    .ui-dialog-footer {
        transition: 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: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
    border: 1px solid #d0d0d5;
    border-radius: 4px;
    font-size: 14px;
    animation: fadeIn .2s;
    z-index: 9;
}

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

.ui-droplist-hr {
    border: 0;
    border-bottom: 1px solid #d0d0d5;
    margin: 7px 12px;
    opacity: .4;
}

a.ui-droplist-li:hover {
    color: #4c5161;
    background-color: #f0f7ff;
}
a.ui-droplist-li:hover::after {
    background-position: 0 -20px;
}

span.ui-droplist-li {
    color: #a2a9b6;
    cursor: default;
}


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

.ui-droplist-x > .selected {
	background-color: #f1f9fe;
}

.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: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    border: 1px solid #d0d0d5;
    border: 0 rgba(0, 0, 0, 0.2);
    font-size: 14px;
    animation: fadeIn .2s;
    z-index: 9;
}

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

.ui-dropanel-close {
    position: absolute;
    top: 3px; right: 2px;
    width: 40px; height: 40px;
    border: 0;
    background: none;
    margin: 0; padding: 0;
    transition: fill .2s;
    fill: #b6bbc6;
    cursor: pointer;
    z-index: 1;
}

.ui-dropanel-close svg {
    width: 20px;
    height: 20px;
}

.ui-dropanel-close:hover {
    background-color: #4c5161;
    fill: #4c5161;
    background: none, none;
}

.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-datalist-x,
    .ui-dropanel-x {
        animation: none;
    }
    .ui-dropanel-close {
        transition: none;
    }
}

/**
 *
 * @Input.css
 * @author zhangxinxu(.com)
 * @create 15-06-16
 * @edit     17-06-13
 *                 19-07-18 version pure
 */
/*disabled X for IE */
input:not([type=search])::-ms-clear {
    display: none;
}

/* 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: #b6bbc6 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkYiIGQ9Ik0wIDB2MjAwaDIwMFYwSDB6bTE1MS42MzYgMTM2LjQ4MmE3LjM3NCA3LjM3NCAwIDAgMSAwIDEwLjQyN2wtNS4yMTIgNS4yMWE3LjM3MiA3LjM3MiAwIDAgMS0xMC40MjYgMGwtMzYuNDgzLTM2LjQ4NUw2My4wMyAxNTIuMTJhNy4zNyA3LjM3IDAgMCAxLTEwLjQyNCAwbC01LjIxLTUuMjFhNy4zNyA3LjM3IDAgMCAxIDAtMTAuNDI4TDgzLjg4IDEwMCA0Ny4zOTYgNjMuNTE0YTcuMzY4IDcuMzY4IDAgMCAxIDAtMTAuNDI1bDUuMjEtNS4yMWE3LjM2OCA3LjM2OCAwIDAgMSAxMC40MjYgMEw5OS41MTYgODQuMzYgMTM2IDQ3Ljg4YTcuMzcgNy4zNyAwIDAgMSAxMC40MjUgMGw1LjIxMiA1LjIxYTcuMzcgNy4zNyAwIDAgMSAwIDEwLjQyNUwxMTUuMTUzIDEwMGwzNi40ODMgMzYuNDgyeiIvPjwvc3ZnPg==) no-repeat center;
    background-size: 20px 20px;
    transition: background-color .15s;
    cursor: pointer;
}

[type=search]::-webkit-search-cancel-button:hover {
    background-color: #4c5161;
}

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

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    background-color: transparent;
}

input[disabled],
input[readonly] {
    cursor: default;
}

input.ui-input,
.ui-input > input {
    height: 40px;
    line-height: 20px;
    padding: 9px 8px;
    border: 1px solid #d0d0d5;
    border-radius: 4px;
    background-color: #fff;
    box-sizing: border-box;
    font-size: 14px;
    outline: none;
    color: #4c5161;
    transition: border-color .15s, background-color .15s;
}

.ui-input:hover,
.ui-input:hover > input {
    border-color: #ababaf;
}

.ui-input:focus,
.ui-input > input:focus {
    border-color: #2a80eb;
}

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

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

/* input with count */
.ui-input-x {
    position: relative;
    padding: 0 56px 0 3px;
    border-radius: 4px;
    box-sizing: border-box;
    overflow: hidden;
}

.ui-input-x > input {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 20px;
    padding: 9px 0 9px;
    border: 0 none;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    right: -6px;
    color: #4c5161;
    font-size: 14px;
    outline: none;
    background: none;
    background-clip: content-box;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.ui-input-x > .ui-input {
    position: absolute;
    border: 1px solid #d0d0d5;
    border-radius: 4px;
    background-color: #fff;
    top: 0; bottom: 0; left: 0; right: 0;
    transition: border-color .15s, background-color .15s;
}

.ui-input-x .ui-input-count {
    line-height: 38px;
    padding: 0 2px;
    color: #a2a9b6;
    font-size: 12px;
    white-space: nowrap;
    position: absolute;
    font-family: sans-serif;
    right: 8px;
    top: 1px;
    z-index: 1;
}
.ui-input-count slash {
    margin: 0 1px;
}

.ui-input-x > input:not(:disabled):not([readonly]):hover ~ .ui-input {
    border-color: #ababaf;
}

.ui-input-x > input:not(:disabled):not([readonly]):focus ~ .ui-input {
    border-color: #2a80eb;
}

.ui-input-x .ui-placeholder {
    padding: 9px 7px;
    z-index: 1;
}

/* 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="right"] > :not(.ui-icon-search),
.ui-input-search[align="end"] > :not(.ui-icon-search) {
    padding-right: 40px;
    padding-left: 9px;
}

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

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

.ui-input-search:hover .ui-icon-search {
    color: #a2a9b6;
}
.ui-input-search > :disabled ~ .ui-icon-search {
    color: #b6bbc6;
    cursor: default;
}
.ui-input-search > :focus ~ .ui-icon-search {
    color: #2a80eb;
}
.ui-input-search > .error ~ .ui-icon-search {
    color: #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: 1px;
    width: 18px; height: 18px;
    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='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") center;
    background-clip: content-box;
    /* 不能是18px 18px，否则Chrome下会有显示bug */
    background-size: 17.9px 17.9px;
    box-sizing: content-box;
}

:focus ~ input.ui-icon-search {
    background-image: 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='%232a80eb'/%3E%3C/svg%3E");
}
.error ~ input.ui-icon-search {
    background-image: 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='%23eb4646'/%3E%3C/svg%3E");
}

/*
 * disabled and readonly
 * 理论上，[readonly]应该使用:read-only伪类更合适，
 * 只不过Firefox还需要-moz-私有前缀，也就是:-moz-read-only，
 * IE也不支持，Edge13+才支持
 * 比较啰嗦，因此，我们使用属性选择器代替
 **/
input.ui-input:disabled,
.ui-input > input:disabled,
.ui-input-x > :disabled ~ .ui-input {
    background-color: #f7f9fa;
}

input.ui-input:disabled,
.ui-input > input:disabled,
.ui-input-x > input:disabled {
    color: #a2a9b6;
}

.ui-input:disabled:hover,
.ui-input > input:disabled:hover,
.ui-input:hover > input:disabled,
.ui-input[readonly]:hover,
.ui-input > input[readonly]:hover,
.ui-input[readonly]:focus,
.ui-input > input[readonly]:focus {
    border-color: #d0d0d5;
}

/* error */
.ui-input.error,
.ui-input > .error {
    border-color: #eb4646 !important;
}
.ui-input-count > .error,
.ui-input-count.error {
    color: #eb4646;
}

@media (prefers-reduced-motion: reduce) {
    [type=search]::-webkit-search-cancel-button,
    input.ui-input,
    .ui-input > input,
    .ui-input-x > .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: #fff;
    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 #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]
**/

.ui-lightip {
    display: none;
    width: 25em;
    margin: 0 auto;
    border-radius: 2px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    padding: 15px 1em;
    background-color: #4c5161;
    animation: fadeIn .25s both;
    transition: top .2s;
    position: fixed;
    top: 10px; 
    left: 1rem; right: 1rem;
    z-index: 19;
    outline: none;
    cursor: default;
}

/* 显示 */
.ui-lightip[open] {
    display: inline;
}

/* 成功状态  */
.ui-lightip[data-status="success"] {
    background-color: #1cad70;
}


/* 失败状态  */
.ui-lightip[data-status="error"] {
    background-color: #eb4646;
}

/* 修改文案  */
.ui-lightip-text {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    text-align: left;
    color: #fff;
}

[data-status="success"] .ui-lightip-text {
    padding-left: 23px;
    margin-left: -5px;
    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='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");
}

[data-status="error"] .ui-lightip-text {
    padding-left: 23px;
    margin-left: -5px;
    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");
}

/* 移动端居中呈现  */
@media screen and (max-width: 640px) {
    .ui-lightip {
        width: auto;
        max-width: calc(100% - 2rem - 2em);
    }
}

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

/**
 *
 * @Loading.css
 * @author zhangxinxu
 * @create 15-06-23
 * @edit   19-09-24  add custom element support
 *
**/
/*
 * 结构如下：
 * <ui-loading></ui-loading>
 *
*/
ui-loading,
.ui-loading {
    text-align: center;
    cursor: default;
    /* icon offset need */
    box-sizing: border-box;
}
ui-loading {
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
}

ui-loading[align="center"] {
    position: absolute;
    left: 50%; top: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

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,
.ui-loading-before {
    content: '';
    display: inline-block;
    width: 20px; height: 20px;
    margin: 0 .5em;
    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='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 center;
    background-size: 100%;
    animation: spin 1s linear infinite;
    vertical-align: -4px;
}
ui-loading[spin]::before,
.ui-