/* CSS3 Reset By Alex 1st 28 Jan. 2015 */
html{font:14px/20px Tahoma,Helvetica,Arial;color:#222;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font-size:100%;font-family:tahoma;vertical-align:baseline;*vertical-align:middle}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}q table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/* Layout */
html{width: 1202px; height: 100%; margin: 0 auto; }

header, footer {height: 80px; line-height: 80px; }
header .logo {float: left; height: 100%; }
nav {float: right; height: 100%; }
nav a {float: left; height: 20px; line-height: 20px; font-size: 20px; padding: 0 20px; margin-top: 30px; border-right: 1px solid #222; }
nav .act {color: #B71F2E; }
nav .user {position: relative; width: 20px; background: url('../img/icon.png') no-repeat 22px 3px; padding-right: 0; border: none; }
nav .userMenu {position: absolute; overflow: hidden; display: none; right: 0; top: 20px; width: 160px; z-index: 99; }
nav .userMenu .arrow {margin-left: 135px; width: 0; height: 0; border: 7px solid #fff; border-right: 7px solid #F2F2F2; border-bottom: 7px solid #F2F2F2; }
nav .userMenu .view {padding: 0 10px; border-radius: 5px; background-color: #F2F2F2; }
nav .userMenu span {display: block; height: 30px; cursor: pointer; color: #444; line-height: 30px; border-bottom: 1px solid #C0C0C0; font-size: 12px; text-align: center; }
nav .userMenu span:last-child {border-bottom: none; }
nav .userMenu span:hover {color: #B71F2E; }

main {overflow: hidden; position: relative; border: 1px solid #c0c0c0; }
menu {float: left; width: 200px; height: 100%; background-color: #F2F2F2; margin: 0; padding: 0; margin-bottom: -10000px; padding-bottom: 10000px; }
menu a {display: block; height: 40px; padding-left: 10px; line-height: 40px; font-size: 18px; color: #B71F2E; }
menu .act {background-color: #fff; }

.modeicon {position: absolute; left: 0; bottom: 0; width: 200px; height: 200px; background-color: #fff; }
.mdi_, .mdi_official {background: url('../img/factory.png') no-repeat; }
.mdi_user {background: url('../img/user.png') no-repeat; }

.contentview {position: relative; float: right; width: 1000px;}

.pageview {padding: 20px; padding-top: 7px; }
.pageview .titc {height: 32px; font-size: 16px; line-height: 32px; color: #888; border-bottom: 1px solid #c0c0c0; margin: 0; }
.pageview .tinp {height: 20px; font-size: 16px; line-height: 20px; padding: 5px 5px 6px 5px; border: 1px solid #c0c0c0; border-bottom: none; }
.pageview .tips {min-height: 40px; font-size: 16px; line-height: 16px; text-align: center; background-color: #b5dbf4; border-radius: 5px; border: 1px solid #7bbfea; }
.pageview .tips .stg {color: #0c9fff; }
.pageview .warn {min-height: 40px; font-size: 16px; line-height: 16px; text-align: center; background-color: #ffc4c4; border-radius: 5px; border: 1px solid #FF6462; }
.errortips {position: absolute; top: 0; width: 100%; height: 40px; text-align: center; line-height: 40px; font-size: 16px; color: #fff; background-color: #B7202F; display: none; }

.emphasis {margin-top: 40px; margin-bottom: 20px; text-align: center; }
.emphasis .item {display: inline-block; line-height: 72px; font-size: 72px; color: #aeaeae; }
.emphasis .str {line-height: 20px; font-size: 20px; margin: 0; margin-top: 10px; color: #B71F2E; }
.emphasis .sp {padding: 0 30px; border-right: 1px solid #c0c0c0; }
.charts {height: 400px; }

.boxview {overflow: hidden; width: 600px; margin: 20px auto; padding: 10px; border: 1px solid #f0f0f0; border-radius: 5px; box-shadow: 0 2px 2px #888; }
.boxview .titc {border: none; font-size: 14px; color: #666; }
.boxview .tinp {width: 258px; border-bottom: 1px solid #c0c0c0; }
.boxview select {width: 270px; border-bottom: 1px solid #c0c0c0; }

.floatbox {position: absolute; }
.trv {top: 0; right: 0; }
.tlv {top: 0; left: 0; }
.chv {left: 20px; padding-top: 6px; height: 34px; z-index: 99; }

.paging {overflow: hidden; height: 50px; border: 1px solid #c0c0c0; border-bottom: none; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.paging a {float: right; width: 68px; height: 40px; background-color: #F2F2F2; color: #666; text-shadow: 0 1px 0 #fff; font-size: 12px; line-height: 40px; border-left: 1px solid #c0c0c0; text-align: center; letter-spacing: -7px; }
.paging a:hover {text-decoration: none; background-color: #c2c2c2; color: #fff; text-shadow: 0 1px 0 #000; }
.paging a:active {background-color: #B71F2E; }
.paging input {width: 50px; height: 28px; border: 1px solid #ccc; border-radius: 3px; text-align: center; color: #444; }
.paging hr {margin-top: 40px; }
.paging h5 {float: left; width: 50%; color: #888; line-height: 40px; margin: 0; text-indent: 10px; }
.paging h5 span {color: #b71f2e; font-size: 14px; padding: 0 10px; }
.paging.modb {border: 1px solid #c0c0c0; border-top: none; border-radius: 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.paging.modb hr {margin-top: 10px; margin-bottom: 0; }
.paging .pars {display: none; }

.pt {display: inline-block; width: 16px; height: 16px; vertical-align: middle; box-shadow: inset 0 2px 8px rgba(255,255,255,0.5), inset 0 -2px 8px rgba(0,0,0,0.5); border-radius: 50%; background-color: #00A8E1; cursor: pointer; }
.pt:hover {box-shadow: inset 0 2px 8px rgba(255,255,255,0.5), inset 0 -2px 8px rgba(0,0,0,0.5), 0 0 0 3px rgba(0,0,0,0.2); }
.pt.on {background-color: #84F268; }
.pt.off {background-color: #B71F2E; }
.pt.dis {background-color: #AAA; }

/* Form Style */
.form {}
.form .ftitle {color: #B71F2E; height: 39px; line-height: 39px; margin: 0; border-bottom: 1px solid #c0c0c0; font-size: 24px; font-weight: normal; }
.form .ntitle {height: 40px; line-height: 40px; margin: 0; font-size: 20px; font-weight: normal; }
.form .plac {display: inline-block; width: 360px; height: 40px; text-align: left; }
.form label {display: block; height: 40px; line-height: 40px; margin-top: 20px; text-align: right; color: #969696; font-size: 16px; vertical-align: middle; }
.form .plac label {display: inline-block; vertical-align: top; margin: 0; }
.form .nlab {height: 30px; line-height: 30px; text-align: left; margin-top: 0; }
.form .nlab:hover {background-color: #f0f0f0; cursor: pointer; }
.form .nlab .plac {height: 30px; }
.form .labh20 {height: 20px; line-height: 20px;}
.form .labh20 .plac {height: 20px; }
.form .labh30 {height: 30px; line-height: 30px;}
.form .labh30 .plac {height: 30px; }
.form .bt {border-top: 1px solid #c0c0c0; }
.form .mt0 {margin-top: 0; }
.form hr {border: none; border-bottom: 1px solid #c0c0c0; margin: 0; }
.form .cb {color: #222; }
.form input[type=radio], .form input[type=checkbox] {margin: 0; vertical-align: middle; }
.form input[type=text], .form  input[type=password], .form input[type=file], .form input[type=number], .form input[type=email], .form textarea {width: 340px; height: 20px; padding: 9px; border: 1px solid #c0c0c0; color: #222; }
.form input[type=file] {height: auto; padding: 7px 9px 6px 9px; }
.form input[readonly=readonly], .form select[disabled], .form textarea[readonly=readonly] {border-color: #eee; color: #c0c0c0; outline: none; }
.form input[type=button], .form input[type=submit], .button {width: 110px; height: 40px; background-color: #929292; border-radius: 20px; border: none; font-size: 18px; color: #fff; }
.form input[type=button]:hover, .button:hover {background-color: #AEAEAE;}
.form input[type=submit], .form .submit {background-color: #B71F2E!important; }
.form input[type=submit]:hover, .form .submit:hover {background-color: #DE4554!important;}
.form textarea {height: 80px; resize: none; }
.form select {width: 360px; padding: 9px 8px 8px 8px; border: 1px solid #c0c0c0; color: #222; }
.form .cbtn {width: 40px; padding: 4px; background-color: #fff; box-shadow: inset 0 0 0 1px #c0c0c0; vertical-align: top; }
.sw {height: 40px; border: 1px solid #c0c0c0; background-color: #f2f2f2; margin: 0; padding: 2px; box-sizing: border-box; vertical-align: middle; }
.sw span {display: block; height: 34px; width: 50%; /*box-shadow: 15px 0 0 #aaa;*/ background-color: #c0c0c0; color: #fff; border-radius: 3px; line-height: 34px; text-align: center; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; }
.sw.act span {background-color: #B71F2E; margin-left: 50%; /*box-shadow: -15px 0 0 #db5360;*/ }
.sws {width: 34px; height: 20px; border-radius: 10px; outline: none; }
.sws span {border-radius: 50%; height: 14px; }

select {width: 340px; padding: 6px; border: 1px solid #c0c0c0; color: #222; }
.form  .Wdate {background: url('../img/icon_wdate.png') no-repeat right center; border-color: #c0c0c0!important; color: #222!important; }

/* Private Style */
.form .splac {width: 153px; overflow: hidden; vertical-align:top; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Table Style */
.table {width: 100%; border-collapse: collapse; border-left: 1px solid #c0c0c0; border-top: 1px solid #c0c0c0; }
.table td {height: 40px; line-height: 40px; padding: 10px 0; text-align: center; vertical-align: middle; border-right: 1px solid #c0c0c0; border-bottom: 1px solid #c0c0c0; }
.table .tal {text-align: left; }
.table .ti2 {text-indent: 20px; }
.table .tabtit td {height: 20px; line-height: 20px; background-color: #b71f2e; color: #fff; font-weight: bold; }
.table .icon {float: left; margin-left: 10px; }
.table .hbar td {height: 32px; line-height: 32px; padding: 4px 0; }
.table .hbar .all {margin-left: 24px; }
.table .hbar .frv {float: right; }
.table .hbar .frv .icon {margin-left: 0; margin-right: 10px; }
.table .alarm td {background-color: #fadadd; }

.upgrade {position: relative; overflow: hidden; line-height: 20px; box-sizing: border-box; }
.upgrade .icon {position: absolute; right: 0; top: 4px; }

/* Tab View Style */
.tabs {height: 32px; font-size: 16px; line-height: 32px; border-bottom: 1px solid #c0c0c0; margin: 0; }
.tabs a:first-child {margin-left: 5px; }
.tabs a {float: left; overflow: hidden; color: #fff; min-width: 70px; height: 31px; padding-left: 12px; background-color: #dadada; border: 1px solid transparent; border-width: 1px 17px 1px 1px; border-image: url('../img/tabs_border.png') 1 16 1 1; -moz-border-image: url('../img/tabs_border.png') 1 16 1 1; text-align: center; }
.tabs a:hover {text-decoration: none; opacity: 0.7; }
.tabs .act {color: #888; background-color: #fff; border-image: url('../img/tabs_border_act.png') 1 16 1 1;  -webkit-border-image: url('../img/tabs_border_act.png') 1 16 1 1; -moz-border-image: url('../img/tabs_border_act.png') 1 16 1 1; }

/* Card View Style */
.card {display: block; width: 100%; min-height: 100px; margin-bottom: 15px; background-color: #fff; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

/* Trace View Style */
.trView {}
.trView tr:nth-child(n+2) td {min-height: 40px; line-height: 20px; vertical-align: top; border-bottom-color: #f0f0f0; }
.trView tr:last-child td {border-bottom-color: #c0c0c0; }
.trView tr:nth-child(n+2) td:first-child {text-indent: 10px; }
.trView tr:nth-child(n+2) td:first-child span {display: block; height: 20px; width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.trView tr:nth-child(n+2) td:nth-child(2) {font-weight: bold; color: #00c500; font-size: 16px; }
.trView tr:nth-child(n+2) td:nth-child(1) p, .trView tr:nth-child(n+1) td:nth-child(2) p {color: #aaa; font-size: 14px; font-weight: normal; }
.trView p {margin: 0;}
.trView .tview {position: relative; border-radius: 5px; min-height: 100%; box-sizing: border-box; margin: 0 5px; padding: 5px; background-color: #fff; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; }
.trView .tline {display: block; width: 100%; height: 20px; background-color: #a3e9a4; text-align: center; color: #fff; border-radius: 10px; cursor: pointer;  transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; }
.trView .tline span {font-size: 12px; color: #444; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; }
.trView .tline:hover {color: #444; }
.trView .tline:hover span {opacity: 1; }
.trView .tinfo {overflow: hidden; height: 0; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; }
.trView .tinfo hr {color: #d9d9d9; margin: 5px 0; }
.trView .tinfo code {display: block; font-size: 12px; text-align: left; box-sizing: border-box; padding: 0 10px; line-height: 12px; }
.trView .on {background-color: #f2f2f2; }
.trView .on .tline {color: #444; }
.trView .on .tinfo {height: auto; opacity: 1; }

.trView .w td:nth-child(2) {color: #ffb74d!important; }
.trView .w .tline {background-color: #ffb74d; }
.trView .e td:nth-child(2) {color: #f36c60!important; }
.trView .e .tline {background-color: #f36c60; }

/* Livechat Style */
.chatfbtn {position: absolute; left: 50%; width: 120px; height: 39px; margin-left: 460px; line-height: 40px; text-align: center; border-radius: 5px; font-size: 14px; background-color: #f2f2f2; color: #ddd; cursor: default; }
.chatfbtn:hover {text-decoration: none; }
.chatfbtn.fixed {position: fixed; top: 0; left: 50%; margin-left: 460px; }
.chatfbtn.enable {background-color: #B71F2E; color: #fff; cursor: pointer; }
.chatfbtn.enable:hover {background-color: #DE4554; }
.chatList {position: relative; }
.chatList .boxview {position: relative; width: 100%; height: 80px; border: none; margin: 10px 0 0 0; /*cursor: pointer;*/ box-sizing: border-box; background-color: #f2f2f2; box-shadow: none; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; }
.chatList .boxview:hover {background-color: #eaeaea; box-shadow: 0 2px 3px #888; /*transform: translateY(-5px); -webkit-transform: translateY(-5px);*/ }
.chatList .boxview .vw1 {float: left; width: 30px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.chatList .boxview .vw2 {float: left; width: 680px; padding-left: 20px;}
.chatList .boxview .vw3 {float: right; width: 120px; height: 100%; display: -ms-flexbox;display: -webkit-flex;display: flex;-ms-flex-align: center;-webkit-align-items: center;-webkit-box-align: center;align-items: center; }
.chatList .boxview .vw2 p {margin: 0; padding: 0; line-height: 20px; color: #888; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.chatList .boxview .vw2 .pl {float: left; overflow: hidden; width: 50%; }
.chatList .boxview .vw2 .pr {float: right; overflow: hidden; width: 50%; text-align: right; }
.chatList .boxview .vw3 p {width: 100%; box-sizing: border-box; margin: 0; padding: 0; line-height: 20px; color: #aaa; }
.chatList .boxview .vw2 .msg {color: #444; }
.chatList .boxview .vw2 .msg b { }
.chatList .boxview .vw2 .st, .chatList .boxview .vw2 .st0 {color: #b71f2e; }
.chatList .boxview .vw2 .st1 {color: #52C3DD; }
.chatList .boxview .vw2 .st2 {color: #aaa; }
.chatList .boxview .vw2 .st3 {color: #aaa; }
.chatList .boxview .vw2 .st9 {color: #444; }
.chatList .boxview .vw2 a {display: inline-block; min-width: 70px; height: 20px; line-height: 20px; margin-right: 10px; background-color: #e8e8e8; color: #aaa; border-radius: 5px; }
.chatList .boxview .vw2 a:hover {text-decoration: none; background-color: #fff; color: #888; }
.chatList .boxview .vw2 .dis {background-color: #fff!important; color: #ddd!important; cursor: default; }
.chatList .new {animation: fx_twinkle 2s linear infinite; -webkit-animation: fx_twinkle 2s linear infinite; }
@keyframes fx_twinkle {
	50% {background-color: #ddd; }
}
@-webkit-keyframes fx_twinkle {
	50% {background-color: #ddd; }
}
.chatList .boxview .chkbox {display: none; }
.chatList .boxview .chkbox + label {
	cursor: pointer;
	margin-top: 19px;
	background-color: #fff;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
}
.chatList .boxview .chkbox + label:active, .regular-checkbox:checked + label:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.chatList .boxview .chkbox:checked + label {
	background-color: #fff;
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #99a1a7;
}
.chatList .boxview .chkbox:checked + label:after {
	content: '\2714';
	font-size: 14px;
	position: absolute;
	top: 0px;
	left: 3px;
	color: #B71F2E;
}
.chatList .boxview img {float: left; box-sizing: border-box; overflow: hidden; width: 60px; height: 60px; border-radius: 50%; background-color: #fff; border: 2px solid #fff; box-shadow: 0 0 3px #888; }

.chatView {overflow: hidden; width: 100%; height: 100%; background-color: #f2f2f2; box-sizing: border-box; padding: 5px 25% 5px 5px; }
.chatView .viewLT {position: relative; overflow: auto; overflow-x: hidden; width: 100%; height: 75%; box-sizing: border-box; border: 1px solid #b4b4b4; border-bottom: none; background-color: #f1f0f8; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.chatView .viewLB {position: relative; overflow: hidden; padding-top: 40px; width: 100%; height: 25%; box-sizing: border-box; border: 1px solid #b4b4b4; border-top: none; background-color: #fff; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.chatView .viewR {position: absolute; overflow: hidden; top: 0; right: 0; width: 25%; height: 100%; box-sizing: border-box; padding: 5px; }
.chatView .viewLT .msg {position: relative; margin: 0 10px 20px 35px; font-family: 'Segoe UI Emoji','Emoji','Microsoft YaHei','微软雅黑',Tahoma,Helvetica,Arial; }
.chatView .viewLT .msg:first-child {margin-top: 10px; }
.chatView .viewLT .r {margin: 0 35px 20px 10px; text-align: right; }
.chatView .viewLT img {overflow: hidden; border-radius: 5px; width: auto; max-width: 80%; }
.chatView .viewLT p {position: relative; display: inline-block; width: auto; min-width: 200px; max-width: 90%; min-height: 50px; line-height: 20px; font-size: 12px; margin: 0; padding: 5px 10px 5px 35px; box-sizing: border-box; background-color: #fff; border-radius: 5px; box-shadow: 0 1px 3px #bbb; word-break: break-all; word-wrap:break-word; }
.chatView .viewLT .r p {padding: 5px 35px 5px 10px; background-color: #AAE85E; text-align: left; }
.chatView .viewLT b {color: #666; font-size: 14px; }
.chatView .viewLT b span {color: #aaa; font-size: 12px; font-weight: normal; }
.chatView .viewLT .r b {display: inline-block; width: 100%; color: #444; text-align: right; }
.chatView .viewLT .r b span {color: #666; }
.chatView .viewLT .avt {position: absolute; overflow: hidden; margin: -5px 0 0 -60px; width: 50px; height: 50px; box-sizing: border-box; border-radius: 50%; background-color: #ddd; border: 2px solid #ddd; }
.chatView .viewLT .r .avt {right: -25px; margin: -5px 0 0 0; }
.chatView .viewLT .s {display: block; min-width: 150px; min-height: 40px; box-sizing: border-box; background-color: #fff; border: 2px solid #D13D4B; color: #D13D4B; font-size: 14px; line-height: 40px; text-align: center; border-radius: 5px; }
.chatView .viewLT .g, .chatView .viewLT .g1 {color: #aaa; background-color: #f2f2f2; border: none; }
.chatView .viewLT .g2 {color: #fff; background-color: #7fbbe2; border: none; }
.chatView .viewLT .g3 {color: #fff; background-color: #ffa565; border: none; }
.chatView .viewLT .gs {border-radius: 20px; background-color: #f2f2f2; border: none; width: 100%; color: #D13D4B; }
.chatView .viewLT .gc {min-height: 20px; line-height: 20px; padding: 5px; color: #444; background-color: #f2f2f2; border: none; text-align: left; }
.chatView .typSel {position: absolute; top: 0; width: 100%; height: 40px; background-color: #f2f1ef; box-shadow: inset 0 1px 0 #b4b4b4; }
.chatView .typSel a {float: left; width: 40px; height: 100%; line-height: 40px; text-align: center; }
.chatView .typSel .fr {float: right; }
.chatView .typSel a:hover {text-decoration: none; box-shadow:inset 0 40px 0 rgba(0,0,0,.05); }
.chatView .typSel .act, .chatView .typSel .act:hover {box-shadow: inset 0 3px 0 #B71F2E, inset 0 40px 0 rgba(0,0,0,.05); color: #B71F2E; }
.chatView .typSel .sbic {vertical-align: middle; }
.chatView .viewLB textarea {width: 100%; height: 100%; box-sizing: border-box; padding: 10px; border: none; resize: none; outline: none; font-size: 12px; font-family: 'Segoe UI Emoji','Emoji','Microsoft YaHei','微软雅黑',Tahoma,Helvetica,Arial; }
.chatView .viewLB textarea:focus {box-shadow: inset 0 0 5px #3e82d3; }
.chatView .btn {position: absolute; right: 0; bottom: 0; width: 25%; height: 30px; line-height: 30px; outline: none; text-align: center; font-weight: bold; color: #fff; background-color: #B71F2E; border-top-left-radius: 5px; opacity: .3; border: none; }
.chatView .btn:hover {opacity: .8; }
.chatView .viewLB form {height: 100%; }
.chatView .viewLB .file {width: 100%; height: 100%; }
.chatView .viewR .rv {position: relative; height: 100%; box-sizing: border-box; border: 1px solid #b4b4b4; border-radius: 5px; }

.chatView .floatView {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); display: none; }
.chatView #fList {}
.chatView #fList a {display: block; height: 30px; line-height: 30px; text-indent: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chatView #fList a:hover, .chatView #fList .act {text-decoration: none; background-color: rgba(255,255,255,.5); }
.chatView #qList { }
.chatView #qList .q {overflow: hidden; padding: 10px; cursor: pointer; box-sizing: border-box; margin: 15px; background-color: rgba(0,0,0,.3); border-radius: 10px; font-size: 12px; line-height: 20px; color: #eee; }
.chatView #qList .q:hover {background-color: rgba(0,0,0,.2); color: #fff; }
.chatView #rForm {overflow: hidden; margin: 0 10%; width:80%; height: 100%; padding: 0 20px 20px 20px; color: #fff; box-sizing: border-box; background-color:rgba(0,0,0,.3);border-radius:10px; }
.chatView #rForm label {text-align: left; }
.chatView #rForm label a {display: inline-block; width: 15%; height: 100%; margin-right: 5px; box-sizing: border-box; border-radius: 5px; border: 1px solid #bbb; color: #fff; text-align: center; }
.chatView #rForm label a:hover, .chatView #rForm label .act {text-decoration: none; background-color: rgba(255,255,255,.5);}
.chatView .floatView .close {position: fixed; bottom: 0; right: 0; width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: rgba(0,0,0,.5); border-top-left-radius: 50%; color: #fff; font-size: 30px; font-weight: bold; cursor: pointer; }
.chatView .floatView .close:hover {background-color: rgba(0,0,0,.65); color: #B71F2E; }

.smaList {overflow: auto; overflow-x: hidden; width: 200px; height: 50%; bottom: 0; left: 50%; margin-left: -600px; background-color: #fff; border-radius: 10px; opacity:.6; }
.smaList .boxview {position: relative; width: 100%; height: 40px; -webkit-filter: grayscale(100%); color: #bbb; margin: 1px 0; border: none; padding: 5px; box-sizing: border-box; background-color: #f2f2f2; box-shadow: none; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; }
.smaList .boxview img {float: left; box-sizing: border-box; overflow: hidden; width: 30px; height: 30px; border-radius: 50%; background-color: #fff; border: 2px solid #fff; box-shadow: 0 0 3px #888; }
.smaList .boxview .vw1 {float: left; cursor: default; width: 140px; height: 30px; height: 30px; line-height: 30px; text-indent: 10px; font-size: 12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.smaList .online {-webkit-filter: grayscale(0); color: #444; }
.smaList .online img {border-color: #82C2FC; box-shadow: 0 0 3px #82C2FC; }

/* Widget Style */
.fx_mask {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; display: none; }
.fx_dialog, .fx_alert {position: fixed; top: 50%; left: 50%; padding: 20px; background-color: #fff; box-shadow: 0 0 10px #444; z-index: 9999; }
.fx_dialog .btmbar {margin-top: 20px; text-align: right; }
.fx_alert span {font-size: 16px; }
.fx_alert .btmbar {margin-top: 20px;  text-align: center; }
.fx_dialog .tac {text-align: center; }
.fx_loading {position: fixed; top: 50%; left: 50%; width: 150px; height: 150px; margin-left: -75px; margin-top: -75px; background: rgba(0, 0, 0, 0.4) url('../img/loading.png') no-repeat 0 -1500px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; line-height: 150px; border-radius: 20px;  z-index: 9999; 
	-webkit-animation: ani-loading 1.5s steps(1) infinite; }
@-webkit-keyframes ani-loading {
	00%	{background-position: 0 0; }
	04%	{background-position: 0 -150px; }
	08%	{background-position: 0 -300px; }
	12%	{background-position: 0 -450px; }
	16%	{background-position: 0 -600px; }
	20%	{background-position: 0 -750px; }
	24%	{background-position: 0 -900px; }
	28%	{background-position: 0 -1050px; }
	32%	{background-position: 0 -1200px; }
	36%	{background-position: 0 -1350px; }
	40%	{background-position: 0 -1500px; }
	44%	{background-position: 0 -1650px; }
	48%	{background-position: 0 -1800px; }
	52%	{background-position: 0 -1950px; }
	56%	{background-position: 0 -2100px; }
	60%	{background-position: 0 -2250px; }
	64%	{background-position: 0 -2400px; }
	68%	{background-position: 0 -2550px; }
	72%	{background-position: 0 -2700px; }
	76%	{background-position: 0 -2850px; }
	80%	{background-position: 0 -3000px; }
	84%	{background-position: 0 -3150px; }
}
/* Scroll Bar Style */
.scroll {
	position: relative;
	overflow: hidden;
}
.scrollWrapper {
	position: absolute;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width: 100%;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
	z-index: 1;
}

/* Common Style */
.cf:after {content: ''; display: block; height: 0; clear: both; visibility: hidden; }
.cf {zoom: 1; }

.dn {display: none;}
.th {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fl {float: left;}
.fr {float: right;}
.ml10 {margin-left: 10px;}
.ml20 {margin-left: 20px;}
.ml30 {margin-left: 30px;}
.ml40 {margin-left: 40px;}
.ml50 {margin-left: 50px;}
.ml80 {margin-left: 80px;}
.mt10 {margin-top: 10px; }
.mt20 {margin-top: 20px; }
.mt40 {margin-top: 40px; }
.mt60 {margin-top: 60px; }
.mr10 {margin-right: 10px;}
.mr20 {margin-right: 20px;}
.stg {font-weight: bold; }
.mkt {color: #b71f2e; }
.dis {color: #c0c0c0; }
.tac {text-align: center; }

.fx {transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; }
.ani {transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; }
.blur {-webkit-filter: blur(3px); -moz-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); }
.icondis {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
.imp {font-weight: bold; color: #b71f2e; }
a {color: #222; text-decoration: none; }
a:hover {text-decoration: underline; }
hr {border: none; border-bottom: 1px solid #c0c0c0; height: 0; margin: 10px 0; }
.flexbox {display: -ms-flexbox;display: -webkit-flex;display: flex;-ms-flex-align: center;-webkit-align-items: center;-webkit-box-align: center;align-items: center; }
.fixview {position: fixed; }

.icon {display: block; width: 32px; height: 32px; background: url('../img/icon.png') no-repeat 32px 32px; }
.icon.user	{background-position: 8px 8px; }
.icon.add	{background-position: 0 -32px; }
.icon.edit	{background-position: 0 -64px; }
.icon.trace	{background-position: 0 -96px; }
.icon.day	{background-position: -32px 0; }
.icon.close	{background-position: -32px -32px; }
.icon.del	{background-position: -32px -64px; }
.icon.update{background-position: -32px -96px; }
.icon.moth	{background-position: -64px 0; }
.icon.pass	{background-position: -64px -32px; }
.icon.lock	{background-position: -64px -64px; }
.icon.updateb{background-position: -64px -96px; }
.icon.hour	{background-position: -96px 0; }
.icon.reject{background-position: -96px -32px; }
.icon.unlock{background-position: -96px -64px; }
.icon.chart {background-position: -96px -96px; }
.icon.alert	{background-position: -128px -32px; }
.icon.audit	{background-position: -128px -64px; }
.icon.chat	{background-position: -128px -96px; }
.icon.reset {background-position: -160px -32px; }
.icon.back	{background-position: -160px -64px; }
.icon.comm	{background-position: -160px -96px; }
.icon.up	{background-position: -192px -32px; }
.icon.search{background-position: -192px -64px; }
.icon.down	{background-position: -224px -32px; }
.icon.manage{background-position: -224px -64px; }
.icon.download{background-position: -288px -64px; }
.icon.clock {background-position: -256px -32px; }
.icon.open	{background-position: -256px -64px; }
.icon.clocks{background-position: -288px -32px; }
.icon.upload{background-position: -288px -96px; }
.icon.prog  {background: url('../img/prog.gif') no-repeat; }

.sbic {display: inline-block; width: 20px; height: 20px; vertical-align: top; background: url('../img/icon_24.png') no-repeat 0 0; }
.sbic.time		{background-position: -45px -21px; }
.sbic.missed	{background-position: -45px -93px; }
.sbic.focus		{background-position: -69px -45px; }
.sbic.report	{background-position: -93px -69px; }
.sbic.grade		{background-position: -93px -141px; }
.sbic.ignore	{background-position: -117px -117px; }
.sbic.text		{background-position: -141px -45px; }
.sbic.ended		{background-position: -165px -93px; }
.sbic.history	{background-position: -261px -21px; }
.sbic.chat		{background-position: -237px -117px; }
.sbic.end		{background-position: -309px 3px; }
.sbic.model		{background-position: -357px -45px; }
.sbic.remove	{background-position: -453px 3px; }
.sbic.image		{background-position: -453px -45px; }