.page { width:100%; height:100%; font-size:14px; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: rgb(0, 0, 0, 0); }
::-webkit-scrollbar-thumb { width: 7px; background: rgb(0, 0, 0, 0.2); }
::-webkit-scrollbar-thumb:hover { width: 7px; background: rgb(0, 0, 0, 0.4); }
a { color: #409fff; cursor:pointer; padding: 0 5px; text-decoration: none; }
a:hover { color: #1076dd; text-decoration: underline; }

.page-head { width:100%; height: 80px; padding: 20px 20px 24px; box-sizing: border-box; display:flex; justify-content:space-between; align-items:center; }
.page-head-item { display:flex; align-items:center; }
.page-body { width:100%; height:calc(100% - 80px); padding: 0 20px 20px; box-sizing:border-box; position:relative; }

.table-head { width: 100%; height:46px; display:flex; align-items:center; background:#def3ff; border:1px solid #b6d0df; box-sizing:border-box; }
.table-head-item { height:40px; line-height: 40px; text-align: center; padding: 0 10px; box-sizing: border-box; font-weight:bold; }
.page-scroll { width:100%; padding-right: 0px; box-sizing: border-box; height:calc(100% - 40px); overflow-y:auto; }

.empty { width:100%; height:50%; background: url(/img/empty.png) no-repeat; background-size:130px 130px; background-position:center; }

.page-form { padding: 30px 0 20px 0; box-sizing: border-box; display:flex; justify-content:center; }
.form { width: 900px; display: flex; flex-direction: column; position:relative; }
.form-head { height:40px; flex-shrink:0; }
.form-head span {  display: inline-flex; align-items: center; padding: 0 300px 10px 10px; border-bottom:3px solid transparent; border-image:linear-gradient(to right, #ffa500, #fff) 1; color: #117ae1; font-size:1.2em; font-weight:bold; }
.form-head span i { width:30px; height:30px; text-align:center; line-height:30px; font-size:1.4em; cursor:pointer; }
.form-head span i:hover { color: #00407f; }
.form-body { width:100%; height: 100%; padding: 30px 0; overflow-y:auto; }
.form-row { width:100%; display:flex; margin-bottom:20px; }
.form-row.inline { margin-bottom:0; }
.form-title { width: 140px; line-height:34px; text-align:right; margin-right:20px; flex-shrink:0; }
.form-title.require::before { content:'*'; color:red; }
.form-input { width:100%; min-height:34px; display:flex; align-items:center; }
.form-input input[type="text"], .form-input input[type="password"], .form-input input[type="date"] { width:300px; height:34px; line-height:34px; padding:0 10px; margin:0; border: 1px solid #cdcdcd; border-radius: 5px; box-sizing:border-box; outline:none; }
.form-input input[type="text"]:focus { border-color: #117ae1; }

.form-input label { margin-right:20px; }
.form-input.error input { border-color:rgba(255,0,0,0.6); background: rgba(255,0,0,0.15); }
.form-input.error .form-error { display:block; }
.form-img-list { width:100%; padding-left:160px; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; }
.form-image { width:80px; height:80px; background: #222; border-radius:5px; border: 1px solid #cdcdcd; box-sizing: border-box; display: flex; justify-content: center; align-items: center; overflow:hidden; }
.form-image img { width:auto; height:100%; }
.form-img-btn { width:80px; height:80px; border-radius:5px; border: 2px solid #cdcdcd; box-sizing: border-box; background:url(/img/image.jpg) no-repeat; background-size:60px 60px; background-position:center; }
.form-foot { padding: 10px 20px 30px 20px; border-top:1px solid #cdcdcd; background:#fff; display:flex; align-items:center; flex-shrink:0; }
.form-btn { height:36px; padding: 0 22px; margin: 0 10px; border-radius: 18px; border: 1px solid transparent; box-sizing: border-box; background: linear-gradient(to right,#45a3ff, #6fc9ff); color:#fff; display:flex; align-items:center; cursor:pointer; position:relative; }
.form-btn:hover { background: linear-gradient(to right,#117ae1, #18a9ff); }
.form-btn.upload { background: linear-gradient(to right,#00cd8d, #82e5c6); }
.form-btn.upload:hover { background:linear-gradient(to right,#339f7d, #00cd8d); }
.form-btn.cancel { border-color: #cdcdcd; background: #fff; color:#2b2b2b; }
.form-btn.cancel:hover { background: #f2f2f2; }
.form-href { margin: 0 10px; position:relative; }
.form-href i { margin-right:5px; }
.form-tips { padding: 0 10px; color: #8f8f8f; }
.form-tips i { margin-right:5px; }
.form-error { padding: 0 10px; color: red; display:none; }
.form-error i { margin-right:5px; }


table { width:100%; border-left:1px solid #dedede; border-right:1px solid #dedede; box-sizing:border-box; }
table thead { height: 40px; background:#def3ff;  }
table tbody tr { opacity:0.8; }
table tbody tr:hover { background: #f3f8fb; opacity:1; }
table th { padding: 10px; color:#2b2b2b; }
table td { height: 40px; padding: 10px; line-height:24px; text-align: center; border-bottom: 1px solid #dedede; }
table td .poster { height:60px; width:100px; background: #ccc; display:flex; justify-content:center; align-items:center; overflow:hidden; }
table td .poster img { height:100%; width:auto; }
table td .avatar { height:46px; width:100%; display:flex; justify-content:center; align-items:center; }
table td .avatar img { height:100%; width:auto; }
.state { display: inline-block; height: 24px; line-height: 24px; border-radius: 12px; padding-left: 26px; padding-right: 10px; font-size:0.8em; position:relative; }
.state i { width:20px; height:20px; border-radius:10px; background-color:#fff; position:absolute; top:2px; left:2px; background-repeat:no-repeat; background-size:16px 16px; background-position:center; }
.state.state0 { background:#bbb; color:#fff; }
.state.state0 i { background-image: url(/img/ico-setting.png); }
.state.state1 { background:#32a33f; color:#fff; }
.state.state1 i { background-image: url(/img/icon-success.png); }
.valid { display:inline-block; border-radius:12px; line-height: 24px; padding: 0 12px; color:#fff; font-size:0.8em; }
.valid.valid1 { background: #00af78; }
.valid.valid0 { background: #a4ada7; }
table tr td i.fa-arrow-up { width:30px; height:30px; line-height: 30px; border-radius:15px; color: #858785; cursor:pointer; }
table tr td i.fa-arrow-up:hover { color: #03c903; background-color:#dedede; }

input[type="file"] { width:100%; height:100%; position:absolute; left:0; top:0; opacity:0; }

.level-box { height: 24px; display: flex; align-items: flex-end; padding-left: 12px; margin-right: 15px; position:relative; filter: grayscale(100%); cursor:pointer; }
.level-box.active { filter: grayscale(0); }
.level-box span { line-height: 20px; padding: 0 6px 0 16px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; font-size:0.8em; }
.level-box img { width:auto; height:30px; position:absolute; top:-4px; left:0; }
.level-box span.lv1 { background-color:#c0eef1; color:#045ebb; }
.level-box span.lv2 { background-color:#ebd0fe; color:#8a47c8; }
.level-box span.lv3 { background-color:#ffe195; color:#fa7333; }
.level-box.active span.lv1 { box-shadow:0 0 5px rgba(4,94,187,0.8); }
.level-box.active span.lv2 { box-shadow:0 0 5px rgba(138,71,200,0.8); }
.level-box.active span.lv3 { box-shadow:0 0 5px rgba(250,115,51,0.8); }