/* Minification failed. Returning unminified contents.
(560,17): run-time error CSS1038: Expected hex color, found '#fffa'
(560,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
 */
html,body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #2e2f3d;
	overflow: hidden;
}

@media only screen and (min-width: 768px) {
	.box{
		position: relative;
		width: 70%;
		margin:80px auto 0 auto;
		height: 80%;
		background: #fff;
	}
	.box >.left{
		position: relative;
		width: 293px;
		height: 100%;
		float: right;
		border-left: solid 1px #d2d2d2;
	}
	.box >.left .top{
		position: relative;
		width: 100%;
		height: 77px;
		background: #597095;
		color: #FFF;
		line-height: 77px;
		text-align: center;
	}
	.box >.right{
		position: relative;
		width:calc(100% - 294px);
		
		height: 100%;
		float: right;
	}
	.box >.right .top .fanhui{
		display: none;
	}
	.box >.right .top .name{
		width: calc(100% - 62px);
		height: 100%;
		line-height: 77px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-left: 11px;
		float: left;
		color: #313131;
		font-size: 13px;
	}
	.box >.left .contactsList li{
		position: relative;
		border-bottom: solid 1px #d2e6f9;
		overflow: hidden;
		box-sizing: border-box;
		padding:10px;
		cursor:pointer;
	}
	.box >.left .logo{
		position: relative;
		text-align: center;
		height: 80px;
		margin-top: 10px;
	}
	.box >.left .logo img{
		width:auto;
		height: auto;
		max-height: 100%;
	}
	.box >.left .contactsList li:hover{
		color:#dd5911;
	}
	.selected_color{
		color:#dd5911 !important; 
	}
	.box >.left .contactsList li .tx{
		width:40px;
		height: 40px;
		float: left;
		margin-left: 11px;
		margin-top: 11px;
	}
	.box >.left .contactsList li .name{
		width: calc(100% - 62px);
		height: 100%;
		line-height: 60px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-left: 11px;
		float: left;
		color: #313131;
		font-size: 13px;
	}
	.box> .left .contactsList {
		position: relative;
		width:100%;
		height: calc(100% - 200px);
		padding: 0;
		margin: 0;
		list-style: none;
		overflow: auto;
	}
	.box> .left .search{
		position: relative;
		width:calc(100% - 56px);
		height: 25px;
		background: #fff;
		margin-left: 17px;
		margin-bottom: 15px;
		padding-left: 24px;
		color:#8c8b8b;
	}
	.box > .left .top .icon-weibiaoti--{
		position: absolute;
		bottom: 20px;
		left: 22px;
		color: #8c8b8b;
	}
	.box >.right .top{
		position: relative;
		width: 100%;
		height: 77px;
		background: #f7f7f7;
		border-bottom: solid 1px #e0e0e0;
	}
	.box >.right .top .tx{
		width:40px;
		height: 40px;
		float: left;
		margin-left: 11px;
		margin-top: 20px;
	}
	.box >.right .middle{
		position: relative;
		width: 100%;
		padding-top: 25px;
		height: calc(100% - 241px);
		border-bottom: solid 1px #e0e0e0;
		overflow: auto;
	}
	.box >.right .middle .item {
	    margin-bottom: 10px;
	    height: auto;
		width: 100%;
	    position: relative;
		box-sizing: border-box;
		padding: 0 5px;
	}
	.box >.right .middle .item .title{
		position: absolute;
		top: -20px;
		font-size: 12px;
		color: #313131;
	}
	.box> .right .middle .left .title{
		left: 50px;
	}
	.box> .right .middle .right .title{
		right: 50px;
	}
	.box >.right .middle .chart-timer{
	    text-align: center;
	    color: #616161;
	    font-size: 13px;
	}
	.box> .right .middle .header-img {
		float: left;
	    width: 42px;
	    height: 42px;
	}
	.box >.right .bottom .operator .iconfont{
		color:#646973; 
		font-size: 20px;
	}
	.box >.right .bottom textarea{
		position: absolute;
	    width: 98%;
	    height: calc(100% - 30px);
	    top: 0px;
	    left: 1%;
	    background: none;
	    outline:none;
	    resize:none;
		margin: 0 auto;
	}
	.box >.right .bottom .operator{
		position: relative;
		height: 35px;
		margin-top: 10px;
	}
	.box >.right .bottom .buttonBox{
		position: absolute;
		width: 100%;
		bottom: 0;
	}
	.box >.right .bottom .buttonBox .button{
		float: right;
		background: #fff;
		border: solid 1px #dbdbdb;
		border-radius: 4px;
		font-size: 12px;
		padding: 5px 10px;
		margin-right: 10px;
		cursor: pointer;
	}
	.box >.right .bottom{
		position: relative;
		width: 100%;
		height: 137px;
		overflow: hidden;
	}
	/* .m_bottom{
		display: none;
	} */
}
@media only screen and (max-width: 768px) {
	.box{
		position: relative;
		width: 100%;
		height: 100%;
		background: #fff;
	}
	.box >.left{
		position: relative;
		width: 100%;
		height: 100%;
		float: none;
		border-right: solid 1px #dadada;
		display: none;
	}
	.box >.left .top{
		position: relative;
		width: 100%;
		height: 200px;
		background: #597095;
	}
	.box >.right{
		/* display: none; */
		position: relative;
		width:100%;
		height: 100%;
		float: none;
	}
	
	
	.box >.right .top .name{
		width: calc(100% - 102px);
		height: 100%;
		line-height: 77px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-left: 11px;
		float: left;
		color: #313131;
		font-size: 13px;
	}
	.box >.left .contactsList li{
		position: relative;
		height: 120px;
		background: #d2e6f9;
		overflow: hidden;
	}
	.box >.left .contactsList li .tx{
		width:100px;
		height: 100px;
		float: left;
		margin-left: 11px;
		margin-top: 11px;
	}
	.box >.left .contactsList li .name{
		width: calc(100% - 130px);
		height: 100%;
		line-height:120px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-left: 11px;
		float: left;
		color: #313131;
		font-size: 40px;
	}
	.box> .left .contactsList {
		position: relative;
		width:100%;
		height: calc(100% - 200px);
		padding: 0;
		margin: 0;
		list-style: none;
		overflow: auto;
	}
	.box> .left .search {
	   position: relative;
	    width: calc(100% - 111px);
	    height: 70px;
	    background: #fff;
	    margin-left: 17px;
	    margin-bottom: 15px;
	    padding-left: 67px;
	    color: #8c8b8b;
	    font-size: 40px;
	}
	.box > .left .top .icon-weibiaoti-- {
	    position: absolute;
	    bottom: 32px;
	    left: 22px;
	    color: #8c8b8b;
	    font-size: 57px;
	}
	.box >.left .top .tx_name {
		font-size: 40px;
	}
	.box >.right .top {
	    position: relative;
		background:#f7f7f7;
	    width: 100%;
	    height: 55px;
	    border-bottom: solid 1px #f0f0f0;
	}
	.box >.right .top .tx {
	  display: none;
	}
	.box >.right .top .name {
	       width: 50%;
	       position: absolute;
	       height: 100%;
	       line-height: 55px;
	       overflow: hidden;
	       white-space: nowrap;
	       text-overflow: ellipsis;
	       color: #313131;
	       text-align: center;
	       left: 0;
	       right: 0;
	       margin: auto;
	}
	.box >.right .top .fanhui {
	   float: right;
	   width: 33px;
	   height: 100%;
	   line-height: 55px;
	}
	.box >.right .top .fanhui .iconfont{
		font-size: 25px;
		
	}
	.box >.right .middle {
	   position: relative;
	   width: 100%;
	   padding: 10px;
	  /* height: calc(100% - 108px); */
	   height:  calc(100% - 167px);
	   border-bottom: solid 1px #e3e3e3;
	   overflow: auto;
	   background: #f9f9f9;
	   box-sizing: border-box;
	}
	.box >.right .middle .item {
	    margin-bottom: 10px;
	    height: auto;
	    position: relative;
	}
	.box> .right .middle .header-img {
	    width: 50px;
	    height: 50px;
		float: left;
	}
	.box >.right .middle .item .title {
	    position: absolute;
	    top: -43px;
	    font-size: 35px;
	    color: #313131;
	}
	.box> .right .middle .left .title {
	    left: 108px;
	}
	.box> .right .middle .right .title{
		right: 108px;
	}
	.box >.right .middle .chart-timer {
	    text-align: center;
	    color: #616161;
	    font-size: 30px;
	}
	.box >.right .bottom .operator .iconfont {
	    color: #646973;
	    font-size: 40px;
	    margin-right: 20px;
	}
	.box >.right .bottom textarea {
	    position: relative;
	    width: 98%;
	    height: 80%;
	    border: none;
	    background: none;
	    outline: none;
	    resize: none;
	    margin: 0 auto;
	}
	.box >.right .bottom .operator {
	    position: relative;
	    height: 40px;
	    margin-top: 10px;
	}
	.box >.right .bottom .buttonBox {
	    position: relative;
	    width: 100%;
	    height: 66px;
	}
	.box >.right .bottom .buttonBox .button {
	    float: right;
	    background: #fff;
	    border: solid 1px #dbdbdb;
	    border-radius: 4px;
	    font-size: 40px;
	    padding: 5px 10px;
	    margin-right: 10px;
	    cursor: pointer;
	}
	/* .box >.right .bottom {
	    display: none;
	} 
	.m_bottom{
		display: block;
		box-sizing: border-box;
		padding-top: 10px;
		height: 55px;
		position: relative;
	}*/
}
.box> .left .top .tx{
	width: 100%;
	height: auto;
}
.box >.left .top .tx_box{
	position: relative;
	width: 60px;
	height: 60px;
	margin-left: 17px;
	margin-top: 24px;
	margin-bottom: 13px;
	background: #fff;
	float: left;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 20px;
    color: #dedede;
    z-index: 1;
}	
.box >.left .top .tx_box img{
	width: 100%;
	height: 100%;
}
.box >.left .top #upload{
	position: absolute;
	width: 60px;
	height: 60px;
	left: 17px;
    top: 24px;
	background: transparent;
}
.box >.left .top .tx_box .iconfont{
	
	font-size: 43px;
	color:#dedede;
}
.box >.left .top .tx_name{
	float: left;
	width: calc(100% - 103px);
	height: 60px;
	margin-top: 24px;
	line-height: 60px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #fff;
	margin-left: 13px;
}
.box >.left .contactsList li .tx img{
	width: 100%;
	height: 100%;
}
.box >.right .top .tx img{
	width: 100%;
	height: 100%;
}
.box> .right .middle .right {
	 position: relative;
}
.box> .right .middle .right .iconfont{
	font-size: 43px;
	color:#dedede;
	float: right;
	margin-top: -12px;
}
.box> .right .middle .right .message {
    margin-right: 10px;
	background: #d0e9ff;
	float: right;
}
.box> .right .middle .left .message{
    margin-left: 10px;
	background: #f3f3f3;
	float: left;
}
.box >.right .middle .message {
    border-radius: 10px;
    background: #efefef;
   max-width: 50%;
    padding: 9px 10px;
    color: #222121;
    box-shadow: 0px 3px 3px #e5e2e1;
}
.box >.right .middle .message .questions{
	padding: 0;
	list-style: none;
}
.box >.right .middle .message .questions li{
	cursor: pointer;
	margin-bottom: 5px;
}
.box >.right .middle .message .questions li:hover{
	color: #ee4706;
}
.box >.right .middle .input-box {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    display: flex;
    padding: 4px 6px;
    box-sizing: border-box;
}

.box> .right .middle .input-box input {
    flex: 1;
    border-radius: 10px;
    border: 1px #cecece solid;
    padding: 3px 4px;
    outline: none;
}

.box >.right .middle .input-box button {
    width: 80px;
    background: #2196F4;
    border-radius: 21px;
    border: 1px #fffa solid;
    color: #ffffff;
    margin: 0px 6px;
    outline: none;
}

.footer{
	margin-top: 15px;
	font-size: 12px;
	color: #fff;
	text-align: center;
}
.clearfix{
	clear: both;
}