@CHARSET "UTF-8";

body {
		padding: 0px;
		margin: 0px;
	}

	.content {
		font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		background-color: #F5F5F5;
		position: absolute;
		height: 520px;
		width: 860px;
	}

	.chat-list {
		display: flex;
		font-size: 14px;
		position: absolute;
		max-height: calc(100% - 102px);
		overflow: auto;
		width: calc(100% - 40px);
		padding: 0px 20px;
		flex-direction: column;
		flex-grow: 1;
		flex-shrink: 0;
	}

	.chat-list div:last-child {
		margin-bottom: 10px;
	}

	.chat-list .kf {
		align-self: flex-start;
		margin-top: 10px;
		position: relative;
		background-image: url("../images/znkf/kf_photo.png");
		background-repeat: no-repeat;
		background-size: 38px;
		padding-left: 60px;
		background-position-y: 10px;
		max-width: calc(100% - 300px);
	}

	.chat-list .kf:after {
		content: "";
		position: absolute;
		top: 30px;
		left: 50px;
		width: 0;
		height: 0;
		border-width: 5px;
		border-style: solid;
		border-color: transparent #ffffff transparent transparent;
	}

	.chat-list .host {
		padding: 10px;
		border-radius: 8px;
		background-color: #fff;
	}

	.chat-list .host p {
		margin: 0px;
		padding: 0px 0px 10px 0px !important;
	}

	.chat-list .kf p {
		padding: 10px;
		border-radius: 8px;
		background-color: #fff;
	}

	.chat-list ul {
		border-top: 1px solid #E7E7E7;
		background-color: #fff;
		margin: 0px;
		padding: 10px 10px 0px 20px;
	}

	.chat-list ul li {
		line-height: 26px;
		color: #D6D6D6;
		background-color: #fff;
		list-style-type: disc;
	}

	.chat-list ul li:hover {
		cursor: pointer;
		background-color: #fff;
	}

	.chat-list ul li span {
		color: #D17D04;
	}

	.chat-list .user {
		align-self: flex-end;
		text-align: right;
		background-image: url("../images/znkf/user_photo.png");
		background-position-x: 100%;
		margin-top: 10px;
		position: relative;
		background-repeat: no-repeat;
		background-size: 38px;
		padding-right: 70px;
		max-width: calc(100% - 300px);
	}

	.chat-list .user p {
		position: relative;
		border-radius: 8px;
		padding: 10px;
		margin-top: 0px;
		background-color: #FFCC73;
		word-break: break-all;
		text-align: left;
	}

	.chat-list .user:after {
		content: "";
		position: absolute;
		right: 60px;
		top: 15px;
		width: 0;
		height: 0;
		border-width: 5px;
		border-style: solid;
		border-color: transparent transparent transparent #FFCC73;
	}

	.input {
		position: inherit;
		bottom: 0;
		/* height: 120px; */
		width: calc(100% - 32px);
		padding: 15px;
		border: 1px solid #F5F5F5;
		/* border-top: 1px solid #D9D9D9; */
		/* border-left: none; */
		background-color: #fff;
		display: flex;
	}

	.input .textarea {
		width: calc(100% - 100px);
	}

	.input .textarea textarea {
		width: calc(100% - 30px);
		height: 50px;
		resize: none;
		padding: 10px;
		outline: none;
		border-radius: 10px;
		border: 1px solid #E6E6E6 !important;
	}

	.input .btn {
		text-align: center;
		width: 100px;
		/* height: 100px; */
		background-color: #fff;
	}

	.input .btn button {
		margin-top: 20px;
		background-image: url("../images/znkf/send.png");
		background-repeat: no-repeat;
		width: 40px;
		height: 40px;
		border: 0px;
		background-color: #fff;
		background-size: 100%;
		outline: none;
		cursor: pointer;
	}
	
	.httpurl{
		color: #D17D04;
	}
	
	.httpurl:hover{ cursor: pointer;}