/**/
input, textarea { box-sizing: border-box; }
input::placeholder,
textarea::placeholder { color: #bbb; }

/* input */
.u-input { position: relative; white-space: nowrap; cursor: pointer; }
.u-input input {
    display: block; width: 100%; padding: 10px 50px 10px 16px; cursor: pointer;
    border: 1px solid #e8e8e8; border-radius: 4px; line-height: 26px; font-size: 16px; color: #333;
}
.u-input.input-focus input { border-color: #0057ff; }
.u-input .u-fixation { position: absolute; top: 0; right: 0; padding: 0 8px; line-height: 50px; }
.u-input .u-fixation .fix-item { float: left; padding: 0 8px; }
.u-input .u-fixation .iconfont { float: left; font-size: 16px; color: #999; margin-top: 0; }
.u-input .u-fixation .iconfont:hover { color: #0057ff; }
.u-input .is-hide .icon-eye:before { content: '\e640'; }
.input-code { padding-right: 120px; }
.input-code .u-btn { position: absolute; top: 0; right: 0; height: 50px; }

/* textarea */
.u-textarea { position: relative; background-color: #fff; }
.u-textarea textarea {
    display: block; width: 100%; height: 150px; overflow-y: hidden;
    padding: 12px 16px; border: 1px solid #e8e8e8; border-radius: 4px;
    font-size: 16px; line-height: 22px;
}
/* .u-textarea .hidden-txt { position: absolute; left: 0; right: 0; bottom: 0; visibility: hidden; padding: 12px 8px; line-height: 22px; box-sizing: content-box; } */
.u-textarea .txt-num {
    position: absolute; right: 2px; bottom: 1px; padding: 0 8px; background-color: #fff;
    font-size: 13px; color: #bbb; line-height: 22px;
}
.u-textarea .txt-num em { font-style: normal; color: #666; margin-top: -2px; }

/* check */
.check-group { display: inline-block; vertical-align: middle; height: 20px; line-height: 20px; }
.check-group label { float: left; font-size: 16px; line-height: inherit; height: inherit; cursor: pointer; }
.check-group label input { display: none; }
.check-group label .iconfont { float: left; font-size: 16px; line-height: 1em; margin: 2px 8px 0 0; }
.check-group label .iconfont:hover { color: #0057ff; }
.check-group label .icon-radio,
.check-group label .icon-checkbox { color: #d9d9d9; }
.check-group label.is-checked .icon-radio { color: #0057ff; }
.check-group label.is-checked .icon-radio:before { content: "\e637"; }
.check-group label.is-checked .icon-checkbox { color: #0057ff; }
.check-group label.is-checked .icon-checkbox:before { content: "\e644"; }
.check-group label.is-disabled .icon-radio,
.check-group label.is-disabled .icon-checkbox { color: #e8e8e8; }

/* switch */
.u-switch { display: inline-block; vertical-align: middle; margin-top: -2px; position: relative; min-width: 58px; height: 28px; line-height: 28px; border-radius: 14px; background-color: #d9d9d9; transition: background .3s ease-in-out; }
.u-switch .dot { position: absolute; left: 2px; top: 2px; margin-top: 0; width: 24px; height: 24px; background-color: #fff; border-radius: 50%; transition: .1s linear; }
.u-switch span { display: block; padding: 0 12px 0 30px; color: #fff; font-size: 14px; margin-top: 0; }
.u-switch.is-checked,
.u-switch.is-checked.is-disabled { background-color: #0057ff; }
.u-switch.is-checked span { padding: 0 30px 0 12px; }
.u-switch.is-disabled { background-color: #e8e8e8; }

/* u-select */
.u-select {
    display: inline-block; vertical-align: middle; position: relative; z-index: 1;
    min-width: 200px; border: 1px solid #d9d9d9; border-radius: 4px; cursor: pointer;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none;
}
.u-select .select-title { padding: 0 30px 0 16px; line-height: 38px; border-radius: 4px; background-color: #fff; color: #bbb; }
.u-select .select-title .txt { display: block; width: 100%; line-height: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-select .u-fixation { position: absolute; top: 0; right: 0; bottom: 0; padding: 0 10px; }
.u-select .u-fixation .iconfont { font-size: 12px; transform: rotate(0deg) scale(.8); transition: transform .2s linear; }
/**/
.select-tags { padding-bottom: 9px; overflow: hidden; margin-left: -8px; }
.select-tags span {
    float: left; padding: 0 9px; background-color: #e8e8e8; border-radius: 11px;
    height: 22px; line-height: 22px; font-size: 12px; color: #666; margin: 9px 5px 0 0;
}
.select-tags span .icon-close { font-size: 12px; color: #999; font-weight: bold; transform: scale(.65); margin: -2px 0 0 5px; }
/**/
.u-select .select-pop {
    position: absolute; left: 0; top: 50px; transition: top .1s linear, opacity .2s linear;
    background-color: #fff; border-radius: 4px; box-shadow: 0 2px 5px 0 rgba(0,0,0, .15);
    min-width: 100%; max-height: 160px; overflow-y: auto; visibility: hidden; opacity: 0;
}
.u-select .select-pop p { padding: 0 16px; height: 32px; line-height: 32px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-select .select-pop p:hover { background-color: #f8f8f8; }
.u-select .select-pop p.is-this { background-color: #f8f8f8; color: #0057ff; }
.u-select .select-pop p.is-selected { position: relative; color: #0057ff; padding-right: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-select .select-pop p.is-selected::after { position: absolute; top: 0; right: 10px; font-family: 'iconfont'; content: '\e604'; font-size: 12px; color: #0057ff; }
.u-select .select-pop p.is-disabled { color: #bbb; }
.u-select .select-pop dt { padding: 0 10px; font-size: 12px; color: #ddd; font-weight: bold; line-height: 36px; }
/* show */
.u-select.is-show { z-index: 5; }
.u-select.is-show .u-fixation .iconfont { transform: rotate(180deg) scale(.8); margin-top: -4px; }
.u-select.is-show .select-pop { top: 39px; visibility: visible; opacity: 1; }
/* disabled */
.u-select.is-disabled .select-title { background-color: #f8f8f8; }
/* size */



/* form-group */
.form-group li { position: relative; line-height: 48px; min-height: 48px; margin-bottom: 16px; }

/* u-btn */
.u-btn {
    display: inline-block; vertical-align: middle; text-align: center; cursor: pointer;
    font-size: 16px; border: 1px solid #d9d9d9; border-radius: 4px;
    transition: background-color .2s linear, border-color .2s linear;
}
.u-btn.btn-block { display: block; width: 100%; height: 48px; }
.u-btn .iconfont { font-size: 16px; margin-top: -4px; }
.u-btn.btn-primary { border-color: #0057ff; background-color: #0057ff; color: #fff; }
.u-btn.btn-primary:active { background-color: #2670ff; border-color: #2670ff; }
.u-btn.btn-warn { border-color: #ec3b3b; background-color: #ec3b3b; color: #fff; }
.u-btn.btn-warn:active { background-color: #ef5858; border-color: #ef5858; }
.u-btn.btn-success { border-color: #11bb65; background-color: #11bb65; color: #fff; }
.u-btn.btn-primary-plain { border-color: #f2f4ff; background-color: #f2f4ff; color: #0057ff; }
.u-btn.btn-warn-plain { border-color: #fef0f0; background-color: #fef0f0; color: #ec3b3b; }
.u-btn.btn-primary-line { background-color: transparent; border-color: #0057ff; color: #0057ff; }
.u-btn.btn-warn-line { background-color: transparent; border-color: #ec3b3b; color: #ec3b3b; }
.u-btn.btn-white { background-color: #fff !important; border-color: #fff !important; }
.u-btn.btn-white.is-disabled { color: #bbb; }
.u-btn.is-disabled { background-color: #d9d9d9; border-color: #d9d9d9; color: #fff; box-shadow: none !important; }
.u-btn.is-disabled:active { background-color: #e8e8e8; border-color: #e8e8e8; }