.body_chat {
	height: 100vh;
}

.image-chatroom {
	width: 45px;
	height: 45px;
	position: relative;
	overflow: hidden;
	border-radius: 50%;
}

	.image-chatroom img {
		/*display: inline;
		margin: 0 auto;
		height: 100%;
		object-fit: cover;*/
		display: block;
		height: 100%;
		position: absolute;
		margin: auto;
		top: -100%;
		right: -100%;
		bottom: -100%;
		left: -100%;
	}

.image-chatpop {
	width: 40px;
	height: 40px;
	position: relative;
	overflow: hidden;
	border-radius: 50%;
}

.image-chatbox {
	width: 35px;
	height: 35px;
	position: relative;
	overflow: hidden;
	border-radius: 50%;
}

	.image-chatbox:hover {
		transform: scale(1.1);
	}

	.image-chatbox img {
		display: inline;
		margin: 0 auto;
		height: 100%;
		object-fit: cover;
	}

.box_room {
	min-height: 10vh;
}

	.box_room table {
		margin-bottom: 0;
		border-color: transparent;
		overflow-x: hidden;
		/*overflow-y: scroll;*/
	}

	.box_room .table-hover > tbody > tr:hover > *, .box_room .table-hover > tbody > tr.active > * {
		/*border-radius: 10px;*/
		background: #FFEEDE;
	}

	.box_room table tr td {
		padding: 0.4rem 0.4rem;
		font-family: 'KwamSookbold';
		font-size: .9rem !important;
		border: 0;
	}

	.box_room img {
		border-radius: .5rem;
	}

	.box_room a p {
		color:#000;
	}

.room_pop tr:hover > * {
	border-radius: 0.475rem !important;
}

.box_invite {
	height: 35vh;
	min-height: 10vh;
}

	.box_invite table {
		margin-bottom: 0;
		border-color: transparent;
		overflow-x: hidden;
	}

		.box_invite table tbody tr td {
			padding: 0.4rem;
		}

	.box_invite .table-hover > tbody > tr:hover > * {
		background-color: #FFEEDE;
		border-radius: .5rem;
	}

.box_invite_select {
	height: 60vh;
	min-height: 20vh;
}

	.box_invite_select table {
		margin-bottom: 0;
		border-color: transparent;
		overflow-x: hidden;
	}

		.box_invite_select table tbody tr td {
			padding: 0.3rem;
		}

			.box_invite_select table tbody tr td .select_in {
				background-color: #EEEEEE;
				border-radius: .5rem;
				padding: 0.3rem;
			}

				.box_invite_select table tbody tr td .select_in:hover {
					background-color: #FFEEDE;
				}

				.box_invite_select table tbody tr td .select_in .justify-content-end p {
					padding: 0.3rem 0.65rem;
				}

					.box_invite_select table tbody tr td .select_in .justify-content-end p:hover {
						background-color: #f6f6f6;
						border-radius: 50%;
					}

.box_member {
	height: 70vh;
	min-height: 10vh;
	overflow-y: auto;
	overflow-x: hidden;
}

	.box_member .txt_member {
		font-size: 0.85rem;
		padding-right: 0.5rem !important;
		padding-left: 0.5rem !important;
	}

#txtMessageInput {
	font-family: 'KaLaTeXa';
	font-size: 1.1rem !important;
	/*resize: both;*/
	max-height: 5rem;
	resize: none;
	border-right: 0;
}

input::placeholder {
	color: #b5b3b3 !important;
}

.btn-outline-message {
	border: 1px solid #C0C0C0;
	border-left: 0;
}
	.btn-outline-message:hover {
		background-color: #e3e3e3 !important;
		border-color: #C0C0C0;
	}

.memberbox {
	/*border: 1px solid #cccccc;*/
}

	.memberbox table {
		margin-bottom: 0;
		border-color: transparent;
	}

	.memberbox .table-hover > tbody > tr:hover > * {
		border-radius: 10px;
	}

	.memberbox table tr td {
		padding: 0.25rem 0.3rem;
		font-family: 'KwamSookbold';
		font-size: .9rem !important;
	}

		.memberbox table tr td a.dropdown-toggle::after, #height_message .btn-group a.dropdown-toggle::after {
			border-right: none !important;
			border-left: none !important;
		}

.scrollbox {
	/*border: 1px solid #cccccc;*/
	position: relative;
	padding: 5px;
	/*background-color: #f9f9f9;*/
	font-size: .9rem;
	height: 95%;
	overflow-x: hidden;
	max-height: 100vh;
}

	.scrollbox .message .user_chat {
		font-family: 'KwamSookbold';
	}

		.scrollbox .message .user_chat small, .scrollbox .time_chat p {
			font-family: 'KwamSook';
			font-size: .7rem !important;
		}

	.scrollbox .message .messageText, .scrollbox .time_chat span {
		font-family: 'KaLaTeXa';
		font-size: 1.1rem;
	}

	.scrollbox .time_chat p {
		color: #9d9d9d;
	}


.time_chat {
	text-align: center;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	line-height: 1.4;
}

	.time_chat span {
		/*background-color: #f2f2f2;*/
		display: inline-block;
		border-radius: 3px;
		text-align: center;
		/*padding: 2px 20px;*/
		color: #aba9a9;
		/*opacity: 0.3;*/
		border-radius: 20px 20px 20px 20px;
	}

.message {
	margin-bottom: 10px;
}

	.message .user_chat {
		font-size: 0.9em;
	}

		.message .user_chat small {
			color: #C0C0C0;
		}

	.message .messageText {
		text-align: left;
		color: #FFFFFF;
	}

		.message .messageText .p_wrap {
			word-wrap: break-word !important;
			word-break: break-word !important;
			white-space: pre-wrap;
			padding: 0.5rem;
			background-color: #EEEEEE;
			border-radius: 10px 0 0 10px;
			border-bottom-right-radius: 10px;
		}

		.message .messageText .text_file {
			font-size: 0.85em;
		}

		.message .messageText .action_file a {
			height: 25px;
			width: 25px;
			background-color: #bbb;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0.5rem;
			background: #D9D9D9;
		}

		.message .messageText .action_file:hover a {
			background: #f47920;
		}

	.message.received_chat {
		text-align: left;
	}

		.message.received_chat .user_chat {
			color: #EE7203;
		}

	.message.sent_chat {
		text-align: right;
	}

		.message.sent_chat .user_chat {
			color: #00936D;
		}


	.message .resim {
		background: #FF0044 none no-repeat center;
		vertical-align: text-top;
		background-size: cover;
		display: inline-block;
		position: relative;
		color: #FFFFFF;
		height: 40px;
		width: 40px;
	}

	.message .messageText {
		vertical-align: text-top;
		display: inline-block;
		position: relative;
		line-height: 20px;
		max-width: 95%;
		color: #000000;
	}

.main_text_file {
	background-color: #EEEEEE;
	border-radius: 10px 0 0 10px;
	border-bottom-right-radius: 10px;
}

.sent_chat .messageText {
	/*background-color: #EEEEEE;*/
}

.received_chat .messageText {
	/*background-color: #EEEEEE;*/
}

.message.sent_chat .userPortrait,
.message.received_chat .messageText {
	border-radius: 0 10px 10px 0;
}

.message.received_chat .messageText {
	border-radius: 0 10px 10px 0;
	border-top-left-radius: 10px;
}

.message.sent_chat .messageText {
	/*border-radius: 10px 0 0 10px;
	border-bottom-right-radius: 10px;*/
}

.message .messageText:before {
	border-color: transparent #FF0044;
	border-style: solid;
	position: absolute;
	border-width: 0;
	display: block;
	content: "";
	z-index: 1;
}

.message .messageText:after {
	content: attr(data-time);
	color: black;
	position: absolute;
	line-height: 20px;
	display: block;
	bottom: 2px;
	z-index: 1;
}

.message.received_chat .messageText:after {
	margin-left: 5px;
	left: 100%;
}

.message.sent_chat .messageText:after {
	margin-right: 5px;
	right: 100%;
}

.chat-wrapper {
	/*height: 80vh;*/
	position: relative;
}

#elmMessageInput {
}

.message_handle, .member_handle {
	transition: opacity 0.3s ease-out;
	opacity: 0;
}

.message:hover .message_handle, .memberbox tr:hover .member_handle {
	opacity: 1;
}