@font-face { 
    font-family: 'iconfont-control'; /* project id 487974 */ 
    src: url('//at.alicdn.com/t/font_487974_y4x38qtndx11yvi.eot'); 
    src: url('//at.alicdn.com/t/font_487974_y4x38qtndx11yvi.eot?#iefix') format('embedded-opentype'), 
    url('//at.alicdn.com/t/font_487974_y4x38qtndx11yvi.woff') format('woff'), 
    url('//at.alicdn.com/t/font_487974_y4x38qtndx11yvi.ttf') format('truetype'), 
    url('//at.alicdn.com/t/font_487974_y4x38qtndx11yvi.svg#iconfont') format('svg'); 
}

input[type=checkbox][disabled], input[type=radio][disabled] { cursor: not-allowed; }

input[type='text'], input[type='password'], input[type='number'], textarea, select, input[type=color] { border: 1px solid #e7e7e7; box-sizing: border-box; -webkit-box-sizing: border-box; vertical-align:middle; }
input[type='text']:hover, input[type='password']:hover, input[type='number']:hover, input[type=color]:hover, textarea:hover, select:hover { border-color: #ccc; }
input[type='text'], input[type='password'], input[type='number'] { height: 30px; padding: 0 8px; line-height: 1; }
input[disabled], input.disabled, select[disabled], select.disabled { border-color: #ccc; background-color: #f8f8f8; cursor: not-allowed; color: #cacaca; pointer-events: none; }

input[type=number] { position: relative; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { position: absolute; top: 0; right: 0; width: 20px; height: 100%; }

select { position: relative; height: 30px; line-height: 28px; padding: 0 5px; text-align: left; cursor: pointer; }
input[type=color] { width: 60px; background-color: #fff; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border linear .2s,box-shadow linear .2s; -moz-transition: border linear .2s,box-shadow linear .2s; -o-transition: border linear .2s,box-shadow linear .2s; transition: border linear .2s,box-shadow linear .2s; }

/* 旧版 单选框
input[type=radio] { position: relative; display: inline-block; width: 16px; height: 16px; visibility: hidden; margin: 0; border: 0; background: 0 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type=radio]:before { content: ''; position: absolute; left: 0; top: 0; display: block; visibility: visible; width: 16px; height: 16px; border: 1px solid #a0a0a0; border-radius: 16px; }
input[type=radio]:after { content: ''; position: absolute; left: 4px; top: 4px; display: block; visibility: visible; width: 8px; height: 8px; border-radius: 8px; }
input[type=radio]:checked:before { border: 1px solid #00adec; }
input[type=radio]:checked:after { background: #00adec; }
input[type=radio]:focus { outline: 0; }
*/

/* 新版单选框 和多选框 */
input[type=radio], input[type=checkbox] { position: relative; display: inline-block; width: 16px; height: 16px; visibility: hidden; margin: 0; border: 0; background: 0 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type=radio]:after, input[type=checkbox]:after { content: ''; visibility: visible; font-family: 'iconfont-control'; font-size: 12px; position: absolute; left: 0; top: 0; bottom: 0; right: 0; speak: none; background: #fff; border-radius: 2px; border: 1px solid #a0a0a0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; -webkit-align-items: center; box-align: center; -moz-box-align: center; -webkit-box-align: center; justify-content: center; text-align: center; }
input[type=radio]:checked:after, input[type=checkbox]:checked:after { content: '\e6a0'; border-color: #00adec; color: #fff; background: #00adec; }
input[type=radio], input[type=checkbox] { margin-right: 3px; vertical-align: -3px; }

label.input { display: inline-block; position: relative; line-height: 1; font-size: 0; vertical-align: middle; min-width: 30px; cursor: pointer; }
label.input, label.input:before, label.input:after, label.input *, label.input *:before, label.input *:after { box-sizing: border-box; -webkit-box-sizing: border-box; }
label.input input { font-size: 14px; vertical-align: middle; width: 100%; height: 30px; }


/*数字控件*/
.number { width: 50px; }
label.input.number:after { content: '\e64d'; position: absolute; width: 20px; top: 0; bottom: 0; right: 0; font-family: 'iconfont-control'; font-size: 16px; pointer-events: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; -webkit-align-items: center; box-align: center; -moz-box-align: center; -webkit-box-align: center; justify-content: center; text-align: center; }
label.input.number input[type=number]::-webkit-inner-spin-button, label.input.number input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/*颜色选择器*/
label.input.color { border: 1px solid #e7e7e7; padding-right: 20px; min-width: 50px; background: #fff; }
label.input.color:hover { border-color: #ccc; }
label.input.color input[type=color], label.input.color input[type=color]:hover { border: none; padding: 0 2px; height: 28px; -webkit-box-shadow: none; box-shadow: none; }
label.input.color:after { content: '\e614'; position: absolute; width: 20px; top: 0; bottom: 0; right: 0; font-family: 'iconfont-control'; font-size: 24px; pointer-events: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; -webkit-align-items: center; box-align: center; -moz-box-align: center; -webkit-box-align: center; justify-content: center; text-align: center; }

/*第三方颜色选择器*/
label.input.color-picker { min-width: 50px; }
label.input.color-picker .sp-replacer { border: 1px solid #e7e7e7; background: #fff; padding: 4px; width: 100%; }
label.input.color-picker .sp-replacer:hover { border-color: #ccc; }
label.input.color-picker .sp-preview { height: 18px; border-color: #777; margin: 0; width: calc(100% - 20px); }
label.input.color-picker .sp-dd { float: right; }

/*字体*/
label.input.font { width: 24px; height: 30px; min-width: 24px; }
label.input.font input[type=checkbox] { visibility: hidden; width: 24px; }
label.input.font input[type=checkbox]:after { visibility: visible; color: #505050; border: none; background: transparent; border-radius: 2px; font-size: 18px; content: ''; }
label.input.font input[type=checkbox]:checked:after { background: #00adec; color: #fff; }
/*加粗*/
label.input.bold input[type=checkbox]:after { content: '\e6be'; }
/*倾斜*/
label.input.italic input[type=checkbox]:after { content: '\e6bf'; }
/*下划线*/
label.input.underline input[type=checkbox]:after { content: '\e6c0'; }