input[type="text"], input[type="password"], input[type="number"], input[type="date"] { outline: none; height: 40px; line-height: 40px; background: #fff; box-sizing: border-box; border: 1px solid #dedede; font-size: 0.8em; color: #888; padding: 0 10px; }
input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus { border: 1px solid #7ec3e9; box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.4); }
input.rejected, select.rejected { box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,0,0,.4); border: 1px solid red; }
input[type="text"]:disabled { background: #eee; }
select { outline: none; height: 40px; line-height: 40px; width: 100px; background: #fff; box-sizing: border-box; border: 1px solid #dedede; font-size: 0.8em; color: #888; padding: 0 5px; }
select option { height: 40px; line-height: 40px; }
input[type="radio"] { line-height: 40px; }
input[type="radio" i]  { margin: 8px 5px; }
input[type="radio"]:checked+label { font-weight: bold; }
label { line-height: 40px; margin-right: 15px; }
textarea { width: 100%; height: 80px; outline: none; resize: none; font-size: 0.8em; color: #888; padding: 5px; box-sizing: border-box; border: 1px solid #dedede; }

.form { width: 100%; display: flex; flex-direction: column; padding-bottom: 20px; position: relative; }
.form.attachment { flex-direction: row; }
.form-content { display: flex; flex-direction: column; }
.form-row { width: 100%; display: flex; align-items: center; margin-bottom: 20px; }
.form-row-item { display: flex; width: 50%; margin-bottom: 15px; }
.form-row.upload { flex-direction: column; }
.form-row.flex-start { align-items: flex-start; }
.form-text { display: flex; align-items: center; }
.form-tips { margin-left: 135px; margin-top: 7px; color: #aaa; }
.form-title { width: 100px;  flex-shrink: 0; text-align: right; margin-right: 10px }
.form-input { width: 100%; max-width: 350px; /*height: 30px;*/ line-height: 40px; position: relative; }
.verify-ret { line-height: 30px; color: red; margin-left: 20px; display: none; }
.verify-ret i { margin-right: 10px; }
.form-checkbox { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; }

/*.form-input input[type="text"], .form-input input[type="password"] { height: 30px; line-height: 30px; }*/
.form-btns { /*display: flex; justify-content: center;*/ padding-top: 20px; margin-top: 20px; margin-bottom: 30px; border-top: 1px solid #DEDEDE; }
.form-btns.no-border { border: 0; }
.form-btns.no-margin { margin: 0; }
.form-btn { height: 35px; line-height: 35px; background: transparent; padding: 0 20px; margin: 0 15px; cursor: pointer; box-sizing: border-box; display: inline-block; }
.form-btn i { margin-right: 5px; }
.form-btn.default { border: 1px solid #ccc; background: #dedede; }
.form-btn.default:hover { background: #ccc; }
.form-btn.submit { background: #3d7aa9; color: #fff; border: 1px solid #3d7aa9; }
.form-btn.submit:hover { background: #005394; border: 1px solid #005394; }
.form-btn.upload { height: 34px; background: #30b08f; color: #fff; border: 1px solid #30b08f; margin: 15px 0 0 0; position: relative; cursor: pointer; }
.form-btn.upload i { line-height: 34px; margin-right: 7px; flex-shrink: 0; }
.form-btn.upload:hover { background: #0c9a76; border: 1px solid #0c9a76; }
.form-btn.upload input[type="file"] { width: 120px; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; }
.form-btn.search { background: #00c1de; color: #fff; border: 1px solid #00c1de; }
.form-btn.search:hover { background: #05a9c2; border: 1px solid #05a9c2; }
.form-btn.export { background: #def643; color: #555; border: 1px solid #d2eb2e; }
.form-btn.export:hover { background: #d2eb2e; border: 1px solid #d2eb2e; }
.form-btn.danger { background: #e65d6e; color: #fff; border: 1px solid #e65d6e; }
.form-btn.danger:hover { background: #da4659; border: 1px solid #da4659; }
.form-btn.success { background: #30b08f; color: #fff; border: 1px solid #30b08f; }
.form-btn.success:hover { background: #0c9a76; border: 1px solid #0c9a76; }
.form-btn.import-box { position: relative; }
.import-box input[type="file"] { position: absolute; top:0; left: 0; width: 98px; height: 34px; opacity: 0; }
.import-filename { height: 30px; line-height: 30px; border: 1px solid #dedede; background: #fff; color: #888; padding: 0 10px; min-width: 120px; text-align: center; }
.form input, .form select .form textarea { color: #888; }
.form label { margin-right: 10px; }

.form-upload { display: flex; }
.form-upload-btn { flex-shrink: 0; width: 80px; height: 30px; text-align: center; border:1px solid #dedede; border-left: 0; box-sizing: border-box; }
.form-upload input[type="file"] { width: 80px; height: 30px; position: absolute; top: 0; right: 0; z-index: 1; opacity: 0; }
.form-preview { margin-left: 135px; margin-top: 12px; display: flex; }
.preview-item { height: 100px; margin-right: 15px; position: relative; }
.preview-item.add {	width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; border:1px solid #dedede; box-sizing: border-box; }
.preview-item.add i { font-size: 2em; color: #dedede; }
.preview-item img { height: 100px; width: auto; }
.preview-item .preview-del { width: 16px; height: 16px; background: #f64444; border-radius: 50%; text-align: center; position: absolute; top: -8px; right: -8px; cursor: pointer; }
.preview-item .preview-del i { font-size: 0.5em; color: #fff; line-height: 16px; }
.form-file-list { margin-left: 135px; margin-top: 12px; }
.form-file-list .file-item { margin-bottom: 7px; }
.form-file-list .file-item .fa-file-text { color: #13b300; }
.form-file-list .file-item .fa-times { color: red; }
.form-file-list .file-item a { display: inline-block; margin: 0 10px; }

.form-btn.newButton { height:30px; line-height:30px; margin: 0; /*margin-top: 7px;*/ margin-right: 15px; border-radius: 5px; }
.form-btn.newButton i { margin-right: 5px; line-height: 30px; }

.form-main { width: 40%; margin-right: 2%; }
.form-attachment { width: 58%; }
.form-total { font-weight: bold; }
.form-total span { color: red; }