/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */

@media(min-width: 768px){
	/*div.chat_ico{ z-index: 99; position: fixed; right: 50px; bottom: 50px; width: 70px; height: 70px; border-radius: 999px; background: #fff; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);}
	div.chat_ico button{ display: block; width: 100%; height: 100%; padding: 5px; cursor: pointer;}
	div.chat_ico button img{ display: block; width: 100%; height: 100%;}*/

	div.chat_form{ overflow: hidden; z-index: 2000; position: fixed; right: 50px; bottom: 50px; width: 350px; border-radius: 20px; background: #fff; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);}
	div.chat_form button.chat_view{ display: block; width: 100%; padding: 5px 0; color: #fff; background: #929292;}
	div.chat_form div.img_wrap{ position: relative; padding: 15px; background: #e51c28;}
	div.chat_form div.img_wrap img{ display: block; width: 150px;}
	div.chat_form div.img_wrap div.close_btn{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;}
	div.chat_form div.img_wrap div.close_btn button{ position: relative; width: 100%; height: 100%;}
	div.chat_form div.img_wrap div.close_btn span{ position: absolute; left: 50%; top: 50%; display: block; width: 25px; height: 2px; background: #fff;}
	div.chat_form div.img_wrap div.close_btn span:nth-child(1){ transform: translate(-50%, -50%) rotate(45deg);}
	div.chat_form div.img_wrap div.close_btn span:nth-child(2){ transform: translate(-50%, -50%) rotate(-45deg);}
	div.chat_form div.chat_list{ overflow-y: auto; padding: 15px; max-height: 400px; background: #f4f2f7; min-height: 400px;}
	div.chat_form div.chat_list ul + ul{ margin-top: 20px;}
	div.chat_form div.chat_list ul.user_chat li div{ display: flex; flex-direction: row-reverse;}
	div.chat_form div.chat_list ul.user_chat li div + div{ margin-top: 10px;}
	div.chat_form div.chat_list ul.user_chat li div p{ max-width: 80%; padding: 10px; border-radius: 15px 0 15px 15px; border: 1px solid #e5a1a1; background-color: #ffeded;}
	div.chat_form div.chat_list ul.com_chat li div.talk_info{ display: flex; align-items: center; gap: 10px;}
	div.chat_form div.chat_list ul.com_chat li div.talk_info div.profile{ width: 40px; height: 40px; padding: 8px; border-radius: 40px; background: #fff;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);}
	div.chat_form div.chat_list ul.com_chat li div.talk_info div.profile img{ display: block; width: 100%; height: 100%;}
	div.chat_form div.chat_list ul.com_chat li div.talk_info span{ display: block; margin-top: 7px; font-size: 14px;}
	div.chat_form div.chat_list ul.com_chat li > div:not(.talk_info){ display: flex; margin-left: 50px; margin-top: 10px;}
	div.chat_form div.chat_list ul.com_chat li > div:not(.talk_info) p{ max-width: 80%; padding: 10px; border-radius: 15px; border: 1px solid #ddd; background: #fff;}
	div.chat_form div.talk_mss{ display: flex; align-items: center; gap: 10px; height: 56px; padding: 10px;}
	div.chat_form div.talk_mss textarea{ width: calc(100% - 85px); height: 100%; padding: 10px 11px; resize: none;}
	div.chat_form div.talk_mss button{ display: block; padding: 10px 17px; color: #e51c28; border-radius: 5px; border: 1px solid #e5a1a1; background-color: #ffeded;}
}
@media(max-width: 767px){

	/*div.chat_ico{ z-index: 99; position: fixed; right: 50px; bottom: 50px; width: 70px; height: 70px; border-radius: 999px; background: #fff; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);}
	div.chat_ico button{ display: block; width: 100%; height: 100%; padding: 5px; cursor: pointer;}
	div.chat_ico button img{ display: block; width: 100%; height: 100%;}*/
	
	div.chat_form{ overflow: hidden; z-index: 2000; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; height: 90vh; border-radius: 20px; background: #fff;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);}
	div.chat_form button.chat_view{ display: block; width: 100%; padding: 5px 0; color: #fff; background: #929292;}
	div.chat_form div.img_wrap{ position: relative; padding: 15px; background: #e51c28;}
	div.chat_form div.img_wrap img{ display: block; width: 150px;}
	div.chat_form div.img_wrap div.close_btn{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;}
	div.chat_form div.img_wrap div.close_btn button{ position: relative; width: 100%; height: 100%;}
	div.chat_form div.img_wrap div.close_btn span{ position: absolute; left: 50%; top: 50%; display: block; width: 25px; height: 2px; background: #fff;}
	div.chat_form div.img_wrap div.close_btn span:nth-child(1){ transform: translate(-50%, -50%) rotate(45deg);}
	div.chat_form div.img_wrap div.close_btn span:nth-child(2){ transform: translate(-50%, -50%) rotate(-45deg);}
	div.chat_form div.chat_list{ overflow-y: auto; padding: 15px; height: calc(100% - 146px); background: #f4f2f7;}
	div.chat_form div.chat_list ul + ul{ margin-top: 20px;}
	div.chat_form div.chat_list ul.user_chat li div{ display: flex; flex-direction: row-reverse;}
	div.chat_form div.chat_list ul.user_chat li div + div{ margin-top: 10px;}
	div.chat_form div.chat_list ul.user_chat li div p{ max-width: 80%; padding: 10px; border-radius: 15px 0 15px 15px; border: 1px solid #e5a1a1; background-color: #ffeded;}
	div.chat_form div.chat_list ul.com_chat li div.talk_info{ display: flex; align-items: center; gap: 10px;}
	div.chat_form div.chat_list ul.com_chat li div.talk_info div.profile{ width: 40px; height: 40px; padding: 8px; border-radius: 40px; background: #fff;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);}
	div.chat_form div.chat_list ul.com_chat li div.talk_info div.profile img{ display: block; width: 100%; height: 100%;}
	div.chat_form div.chat_list ul.com_chat li div.talk_info span{ display: block; margin-top: 7px; font-size: 14px;}
	div.chat_form div.chat_list ul.com_chat li > div:not(.talk_info){ display: flex; margin-left: 50px; margin-top: 10px;}
	div.chat_form div.chat_list ul.com_chat li > div:not(.talk_info) p{ max-width: 80%; padding: 10px; border-radius: 15px; border: 1px solid #ddd; background: #fff;}
	div.chat_form div.talk_mss{ display: flex; align-items: center; gap: 10px; height: 56px; padding: 10px;}
	div.chat_form div.talk_mss textarea{ width: calc(100% - 85px); height: 100%; padding: 10px 11px; resize: none;}
	div.chat_form div.talk_mss button{ display: block; padding: 10px 17px; color: #e51c28; border-radius: 5px; border: 1px solid #e5a1a1; background-color: #ffeded;}
}

@media(min-width: 992px) {
	.list.open-room-chatting { cursor: default; pointer-events: none;}
	.list .btn_list a{
		cursor: pointer;
		pointer-events: auto;
	}
}
@media(max-width: 991px) {
	.list.open-room-chatting { cursor: pointer; }
}