﻿/** New:  #15524  by  LJ  2021-01-20 */	

textarea { resize: none; }
input::placeholder, textarea::placeholder { color: #bbb; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; } 
input[type="number"]{ -moz-appearance: textfield; }

.u-input.is-focus, .u-textarea.is-focus { border-color: #666; }
.u-input.is-disabled, .u-textarea.is-disabled { background-color: #f8f8f8; }
.u-input.is-disabled input, .u-textarea.is-disabled textarea { cursor: not-allowed; }

/* u-input */
.u-input { display: inline-block; vertical-align: middle; min-width: 200px; line-height: 40px; border: 1px solid #d9d9d9; border-radius: 4px; position: relative; }
.u-input input { display: block; width: 100%; height: 38px; line-height: 38px; padding: 0 16px; }
    /**/
.u-input .u-fixation { position: absolute; top: -1px; z-index: 2; padding: 0 10px; color: #999; font-size: 12px; }
.u-input .u-fixation .iconfont { color: #999; margin-top: -4px; }
.u-input.u-suffix input { padding-right: 50px; }
.u-input.u-suffix .u-fixation { right: -1px; border-radius: 0 4px 4px 0; }
.u-input.u-prefix input { padding-left: 35px; }
.u-input.u-prefix .u-fixation { left: -1px; border-radius: 4px 0 0 4px; }
.verify-pic { display: inline-block; vertical-align: middle; width: 100px; height: 30px; }
.verify-pic img, .verify-pic canvas { display: block; width: 100%; height: 100%; }
 
    /* size */
.input-s { line-height: 36px; }
.input-s input { height: 34px; line-height: 34px; }
.input-xs { line-height: 32px; }
.input-xs input { height: 30px; line-height: 30px; }
.input-mini { line-height: 28px; }
.input-mini input { height: 26px; line-height: 26px; font-size: 12px; }
.input-mini .u-fixation .iconfont { font-size: 14px; }

/* u-number 配合 u-input 使用 */
.u-number input { padding-right: 40px; }
.u-number .num-btn { position: absolute; right: 0; width: 24px; height: 50%; border-left: 1px solid #d9d9d9; line-height: 18px; text-align: center; cursor: pointer; }
.u-number .num-btn .iconfont { font-size: 12px; color: #999; font-weight: bold; transform: scale(.8); }
.u-number .num-btn:hover .iconfont { color: #FF562F; }
.u-number .num-btn.is-disabled .iconfont { color: #e8e8e8; }
.u-number .btn-dec { top: 0; border-bottom: 1px solid #d9d9d9; }
.u-number .btn-inc { bottom: 0; }
    /**/
.input-xs .num-btn { line-height: 14px; }
.input-mini .num-btn { line-height: 12px; }
.input-xs .num-btn .iconfont,
.input-mini .num-btn .iconfont { transform: scale(.7); }

/* u-textarea */
.u-textarea { display: inline-block; vertical-align: middle; width: 560px; border: 1px solid #d9d9d9; border-radius: 4px; position: relative; }
.u-textarea textarea { display: block; width: 100%; height: 130px; padding: 10px 16px; line-height: 22px; }
.u-textarea .u-fixation { position: absolute; right: 0; bottom: 5px; padding: 0 10px; background-color: #fff; font-size: 12px; color: #999; }

/* 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: #FF562F; }
.u-select .select-pop p.is-selected { position: relative; color: #FF562F; 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: #FF562F; }
.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 */
.select-s.u-select .select-title { line-height: 34px; }
.select-s.u-select .select-pop { top: 35px; }
.select-xs.u-select .select-title { line-height: 30px; }
.select-xs.u-select .select-pop { top: 31px; }
.select-mini.u-select .select-title { line-height: 26px; }
.select-mini.u-select .select-pop { top: 27px; }

/* select-input-group */
.select-input-group { position: relative; }
.select-input-group .u-input { width: 430px; }
.select-input-group .u-input input { padding-left: 130px;  }
.select-input-group .u-select { position: absolute; left: 1px; top: 1px; width: 110px; border: none; }
.select-input-group .u-select:after { position: absolute; top: 9px; right: -5px; z-index: 2; content: ''; height: 20px; border-left: 1px solid #d9d9d9; }

/* u-check ( radio , checkbox ) */
.u-check { display: inline-block; cursor: pointer; }
.u-check .iconfont { position: relative; margin: -3px 8px 0 0; color: #d9d9d9; }
    /* checked , disabled */
.u-check.is-checked .iconfont { color: #FF562F; }
.u-check.is-disabled .iconfont { color: #e8e8e8; }
    /* bordered */
.is-bordered { display: inline-block; padding: 0 20px; line-height: 38px; border: 1px solid #e8e8e8; border-radius: 4px; }
.is-bordered.is-checked { background-color: #f2f4ff; border-color: #FF562F; color: #FF562F; }
.is-bordered.is-checked.is-disabled { background-color: #fff; border-color: #e8e8e8; color: #e8e8e8; }
    /* radio , checkbox */
.u-check .icon-radio:before { content: "\e617"; }
.u-check.is-checked .icon-radio:before { content: "\e618"; }
.u-check .icon-checkbox:before { content: "\e68b"; }
.u-check.is-checked .icon-checkbox:before { content: "\e68e"; }

/* u-switch */
.u-switch { 
    display: inline-block; vertical-align: middle; cursor: pointer; position: relative;
    min-width: 48px; height: 24px; line-height: 24px; border-radius: 12px; background-color: #d9d9d9;
    transition: background .3s ease-in-out;
}
.u-switch .dot { position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; background-color: #fff; border-radius: 50%; transition: left .3s ease-in-out; }
.u-switch span { display: block; padding: 0 9px 0 26px; font-size: 12px; color: #fff; }
    /* checked */
.u-switch.is-checked { background-color: #FF562F; }
.u-switch.is-checked .dot { left: 100%; margin-left: -22px; }
.u-switch.is-checked span { padding: 0 26px 0 9px; }
    /* disabled */
.u-switch.is-disabled { background-color: #e8e8e8; }
    /* switch-s */
.switch-s { min-width: 40px; height: 20px; line-height: 20px; }
.switch-s .dot { width: 16px; height: 16px; }
.switch-s span { padding: 0 5px 0 20px; }
.switch-s.is-checked .dot { margin-left: -18px; }
.switch-s.is-checked span { padding: 0 20px 0 5px; }
    /* switch-mini */
.switch-mini { min-width: 32px; height: 16px; line-height: 16px; }
.switch-mini .dot { width: 12px; height: 12px; }
.switch-mini span { padding: 0 4px 0 16px; }
.switch-mini.is-checked .dot { margin-left: -14px; }
.switch-mini.is-checked span { padding: 0 16px 0 4px; }