@charset "utf-8";
    /*
        author : Jinwoo Park, Front-End Developer

        info: 
            max-width:1920px;
            
            responsible: 1460px/1280px
        
        ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

        update
        - 20201022 : initially created
    */
    
/* hover, active, sel 모음 */
.btn_open_search_bar:hover, .enter_typing_contents:hover,
.btn_entrance:hover, .btn_login_chatting:hover { 
	background-color: #7c7cf1; 
}
.btn_open_search_bar:active, .enter_typing_contents:active,
.btn_entrance:active, .btn_login_chatting:active { 
	background-color: #4242ab; 
}

/* end */

.chatting_area{
	display: flex;
    flex-direction: column;
	position: relative;
	height: calc(100% - 44px);    	
    background-color: #fff;
    color: #000;
}
.chatting_list_area{	
    flex-grow: 1;
    overflow-y: auto;
}
.scroll-wrapper.chatting_list_area{
	margin: 2px 0 5px;	
}
.scroll-wrapper > .chatting_list_area.scroll-content{
	padding: 18px 18px 18px 20px;
	box-sizing: border-box !important;
}

/* 채팅창 내 스크롤 */
.chatting_list_area.scrollbar-inner > .scroll-element.scroll-y {
	width: 5px;
	right: 5px;
}
.chatting_list_area.scrollbar-inner > .scroll-element .scroll-element_outer,
.chatting_list_area.scrollbar-inner > .scroll-element .scroll-element_track,
.chatting_list_area.scrollbar-inner > .scroll-element .scroll-bar {
	-webkit-border-radius: 2.5px;
    -moz-border-radius: 2.5px;
    border-radius: 2.5px;
}
.chatting_list_area.scrollbar-inner > .scroll-element .scroll-element_track {
	background: #d4d7d8;
}
.chatting_list_area.scrollbar-inner > .scroll-element .scroll-bar {
	background: #81878d;
}
.chatting_list_area.scrollbar-inner > .scroll-element .scroll-bar:hover {
	/* background: #9aa7ab; */
}
.chatting_list_area.scrollbar-inner > .scroll-element .scroll-bar:active {
	/* background: #b4c0c4; */
}



/* 채팅창 검색 버튼 */
.closed_search_area{
	position: absolute;
	top: 7px;
	right: 15px;
	width: 32px;
	height: 32px;	
	z-index: 50;	
}
.btn_open_search_bar{
	width: 32px;
	height: 32px;
	border-radius: 10px;
	box-shadow: 0px 4px 8px 0 rgba(12, 12, 94, 0.24);
	background: #5b5bee url(../../images/icn-chat-search.svg) no-repeat center;
}

/* 채팅창 검색바 노출 */
.opened_search_area{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 46px;
	padding: 7px 6px;
	background-color: #7a4fd2;
	z-index: 50;
}
.search_area{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	width: 100%;
	height: 100%;	
	padding: 0 6px 0 30px;
	border-radius: 4px;    
    background-color: #5b34ac;
}
.icon_search_in_chatting{
	position: absolute;
	top: 7px;
	left: 10px;
	width: 18px;
	height: 18px;
	background: url(../../images/icn-chat-search-n.svg) no-repeat center;
}
.input_search_keyword{
	flex-grow: 1;
	margin-right: 50px;
	border: 0;
	outline: 0;	
	background-color: transparent;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -0.075em;
	color: #fff;
}
.input_search_keyword::placeholder{
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -0.075em;
	color: #d3c9e9;
}
.btn_close_search_bar{
	width: 20px;
	height: 20px;	
	background: url(../../images/btn-chat-search-close-n.svg) no-repeat center;
}

/* 채팅 목록 */
.chatting_list{
	font-size: 14px;
	letter-spacing: -0.075em;
}
.chatting_item{	
	padding-left: 18px;
	background: url(../../images/icn-chat-user-1.svg) no-repeat 0 5px / 13px;
}
.chatting_item + .chatting_item{
	margin-top: 10px;
}
.chatting_item dt{	
	float: left;
	margin-right: 15px; 
	color: #888;
	font-weight: bold;
	letter-spacing: -0.01em;
}
.chatting_item dt.icn-chat-user-1{ color: #c91815 }
.chatting_item dt.icn-chat-user-2{ color: #704997 }
.chatting_item dt.icn-chat-user-3{ color: #224f75 }
.chatting_item dt.icn-chat-user-4{ color: #017445 }
.chatting_item dt.icn-chat-user-5{ color: #9a9201 }
.chatting_item dt.icn-chat-user-6{ color: #d94403 }
.chatting_item dt.icn-chat-user-7{ color: #833f7a }
.chatting_item dt.icn-chat-user-8{ color: #9d5444 }
.chatting_item dt.icn-chat-user-9{ color: #008084 }
.chatting_item dt.icn-chat-user-10{ color: #369900 }
.chatting_item dt.icn-chat-user-11{ color: #d05d00 }
.chatting_item dt.icn-chat-user-12{ color: #445acc }
.chatting_item dt.icn-chat-user-13{ color: #b31a44 }
.chatting_item dt.icn-chat-user-14{ color: #4941a7 }
.chatting_item dt.icn-chat-user-15{ color: #216499 }
.chatting_item dt.icn-chat-user-16{ color: #1d906f }
.chatting_item dt.icn-chat-user-17{ color: #d036a0 }
.chatting_item dt.icn-chat-user-18{ color: #84700a }
.chatting_item dt.icn-chat-user-19{ color: #b83349 }
.chatting_item dt.icn-chat-user-20{ color: #0180bb }

.chatting_item dt, .chatting_item dd{
	line-height: 1.43;
}
.chatting_item > dd + dd{
	width: 300px;
/* 	height: 90px;	 */
	border-radius: 5px;
}
.chatting_item > dd + dd > img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin-top: 10px;
	border-radius: 4px;	
}
.chatting_item dt + dd ~ dd{
	clear: both;
}

.btn_go_bottom{	
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 12px;	
	width: 96px;
	height: 28px;
	padding: 8px 22px 8px 18px;
	border-radius: 14px;
	box-shadow: 0px 2px 6px 0 rgba(0, 0, 0, 0.4);
	background-color: #61616b;	
	font-size: 13px;
	font-weight: bold;
	letter-spacing: -0.075em;
	color: #fff;
}
.btn_go_bottom:hover{
	background-color: #4e87f0
}
.btn_go_bottom:active{
	background-color: #3a64b0
}
.btn_go_bottom img{
	margin: 2px 6px 0 0;
}

.wrap_btn_chatting{
	display: inline-flex;
	align-items: center;
	vertical-align: bottom;
}
.btn_chatting_reply, .btn_chatting_delete{	
	width: 19px;
	height: 19px;
	margin-left: 4px;	
	border-radius: 50%;
}
.btn_chatting_reply{
	background: #dce3ee url(../../images/icn-chat-reply-n.svg) no-repeat center;
}
.btn_chatting_delete{
	background: #dce3ee url(../../images/icn-chat-delete-n.svg) no-repeat center;
}

.btn_chatting_reply:hover, .btn_chatting_reply:active{
	background-image: url(../../images/icn-chat-reply-h-s.svg)
}
.btn_chatting_delete:hover, .btn_chatting_delete:active{
	background-image: url(../../images/icn-chat-delete-h-s.svg)
}
.btn_chatting_reply:hover, .btn_chatting_delete:hover{
	border: solid 1px #50509c;
    background-color: #7070f4;	
} 
.btn_chatting_reply:active, .btn_chatting_delete:active{
	border: solid 1px #3e3e7a;
    background-color: #6060ad;	
}



.blocked_chatting{
	display: flex;	
	align-items: center;
	letter-spacing: 0.075em;
	color: #b48787;
}
.blocked_chatting > span{	
	width: 15px;
	height: 15px;
	margin-right: 4px;	
	background: url(../../images/icn-notice.svg) no-repeat center;
}


/* 최대 글자 초과 시 */
.max_text{
	height: 42px;
	padding-left: 20px;
	box-shadow: 0px -4px 8px 0 rgba(0, 0, 0, 0.1);
	border: solid 1px #c9cdd6;
	border-bottom: 0;
	background-color: #fcfaef;
	display: none;
	visibility: hidden;
}
.max_text > p {
	line-height: 42px;
	font-size: 14px;    
    letter-spacing: -0.075em;    
    color: #111;
}


/* 채팅 답글 영역 */
.reply_chatting_item{
	position: relative;
	/* height: 66px; */
	padding: 15px 19px 14px;
	border: 1px solid #c9cdd6;
	border-bottom: 0;		
	font-size: 14px;	
	letter-spacing: -0.075em;
	line-height: 1;
	box-shadow: 0px -4px 8px 0 rgba(0, 0, 0, 0.1);	
	background-color: #fff;
}
.reply_chatting_item > p:nth-of-type(1){
	display: flex;
	color: #999;
}
.reply_chatting_item > p:nth-of-type(2){
	margin-top: 12px;
	color: #111;
}
.reply_target{
	margin-right: 4px;
	font-weight: bold;
	color: #2e70ea;
}
/* 대댓글 달 때, 채팅입력창 위에 오는 내용 1줄 처리 
.reply_target_message{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
} */
.btn_close_reply, .btn_close_upload{
	position: absolute;
	top: 12px;
	right: 12px;	
	width: 16px;
	height: 16px;
	background: url(../../images/icn-chat-tooltip-close.svg) no-repeat center;
}




/* 채팅 입력창 */
.chatting_typing_area{
	padding: 6px 16px 18px;
    background-color: #f3f5f8;
    border: 1px solid #c9cdd6;    
}
.chatting_user_id, .typing_box, .enter_typing_contents{
	font-size: 14px;
}
.chatting_user_id{
	position: relative;	
	padding: 0 22px 0 18px;
	color: #666;	
    font-weight: bold;    
    letter-spacing: -0.01em;
    line-height: 1;
    background: url(../../images/icn-chat-user-5.svg) no-repeat 0 5px;
}
.disabled_chattting{
	margin-top: 14px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -0.01em;
	color: #4941a7;
}

.btn_modify{
	content: '';
	position: absolute;
	top: 5px;
	width: 12px;
	height: 12px;	
}

.btn_modify{
	right: 0;	
	background: url(../../images/icn-chat-id-modify-n.png) no-repeat center;
}
.btn_modify:hover{
	background-image: url(../../images/icn-chat-id-modify-h.png);
}
.btn_modify:active{
	background-image: url(../../images/icn-chat-id-modify-s.png);
}
.wrap_typing_box{
	display: flex;
	justify-content: space-between;
	position: relative;	
	padding: 12px 12px 49px;
	margin-top: 10px;    
    background-color: #fff;
    border: solid 1px #dde1e9;
}
.btn_upload_img{	
	position: absolute;
	left: 12px;
	bottom: 12px;
	width: 20px;
	height: 20px;
	background: url(../../images/icn-file-n.svg) no-repeat center;
}
.btn_upload_img:hover{
	background-img: url(../../images/icn-file-h.svg);
}
.typing_box{
	flex-grow: 1;
	height: auto;
	min-height: 15px;
	padding: 0;
	border: 0;	
	margin-right: 26px;
	background-color: transparent;	
	letter-spacing: -0.075em;
	outline: 0; 
	cursor: text;
}
.typing_box {
	border: 1px solid #ddd;
	color : #333;
	font-size: 14px;
	width: 300px;
	padding: 5px;
	content: attr(placeholder);
	display: block;
	letter-spacing: -0.075em;
}
.typing_box::placeholder {
	color : #999;
}

[contenteditable=true]:empty:before{
  content: attr(placeholder);
  display: block;
  color: #999;
  letter-spacing: -0.075em;
  font-size: 14px;
}

.enter_typing_contents{
	flex-shrink: 0;
    width: 70px;
    height: 32px;    
    border-radius: 3px;
    box-shadow: 0px 4px 8px 0 rgba(12, 12, 94, 0.24);
	background-color: #5b5bee;    
    color: #fff;
    font-weight: bold;
}


/* 닉네임 지정 */
.after_login{
	padding: 12px 9px 0 4px;
}

.guide_nickname, .disabled_chattting{
	font-size: 14px;
	color: #666;
	letter-spacing: -0.075em
	;
}
.guide_nickname{	
	font-weight: bold;
}
.set_nickname{
	display: flex;
	align-items: center;
	width: 100%;
	height: 32px;
	margin: 22px 0 12px;	
}

.decide_nickname{
	font-size: 13px;
	font-weight: bold;
	color: #111;
	letter-spacing: -0.075em;	
}

.input_nickname{
	flex-grow: 1;
	margin: 0 4px 0 10px;
	height: 100%;	
	padding: 9px 12px;
	font-size: 14px;
	color: #111;
	border-radius: 3px;
  	border: solid 1px #c9cdd6;
}
/* .input_nickname::placeholder{
	font-size: 14px;
	color: #666;
	letter-spacing: -0.01em;
} */
.btn_entrance{
	width: 70px;
	height: 100%;
	border-radius: 3px;
	box-shadow: 0px 4px 8px 0 rgba(12, 12, 94, 0.24);
	background-color: #5b5bee;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	letter-spacing: -0.075em;
}

.disabled_nickname, .collapsed_nickname{
	margin-top: 12px;
	font-size: 14px;
	font-weight: bold;	
	letter-spacing: -0.075em;
}
.disabled_nickname{	
	color: #f00;
}
.collapsed_nickname{
	color: #2e70ea;
}


/* 로그인 전 */
.before_login{
	display: flex;
	justify-content: center;
	margin-top: 20px;	
}
.btn_login_chatting{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 42px;
	border-radius: 3px;
	box-shadow: 0px 4px 8px 0 rgba(12, 12, 94, 0.24);
	background-color: #5b5bee;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -0.075em;	 
	color: #fff;
}
.btn_login_chatting img{
	margin-right: 6px;
}


/* 첨부파일 */
.upload_area{
	display: flex;
	align-items: center;	
	position: relative;
	height: 42px;
	padding: 0 20px;
	box-shadow: 0px -4px 8px 0 rgba(0, 0, 0, 0.1);
	border: solid 1px #c9cdd6;
	background-color: #eff7ff;
}
.upload_text{
	font-size: 14px;
	letter-spacing: -0.075em;
	color: #111;
}
.upload_file{
	margin-left: 4px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -0.025em;
	color: #2e70ea;	
}

.search_chat_word{
	color: #9ace32;
}



/* 팝업창  */
.chat_popup_area{
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 306px;	
	border-radius: 2px;
	box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.4);
	border: 1px solid #9398a6;
	background-image: linear-gradient(to bottom, #f3f5f8, #f3f5f8), linear-gradient(to top, #9398a6, #b0b5c5);
	text-align: center;
	font-size: 14px;
	letter-spacing: -0.075em;
}
.increase_width{
	width: 326px;
}
.chat_popup_area div:first-child {	
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 20px 0 15px;
	margin: 0 14px;
	border-bottom: 1px solid #c3c8d5;
	text-align: center;
	color: #111;
}
.chat_popup_area strong{
	margin: 18px 0 8px;	
	font-weight: bold;	
}
.popup_common_btn{
	display: block;
	width: 100%;
	padding: 15px 0;
	text-align: center;
	font-weight: bold;
	color: #4949dd;
}
.popup_common_btn:hover, .popup_common_btn:active{
	background-color: #d2dae5;	
}
.btn_close_popup{
	position: absolute;
	top: 10px; right: 10px;
	width: 14px;
 	height: 14px;
 	padding: 15px 10px;
 	background: url(../../images/icn-chat-popup-close.svg) no-repeat center;
}