/* 헤드 아이콘 관련 css */
.show {
    display:flex;
}
.hide {
    display:none;
}

#modal_msg {
    width:100%;
    height:100%;
    overflow:hidden;
}
/* 담당자 조회 */
.tab-area {
    width:100%;
    height:60px;
    position:relative;
}
.tab-area ul {
    width:100%;
    height:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0;
    box-sizing:border-box;
}
.tab-area ul li {
    width:50%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:16px;
    color:#919092;
    cursor:pointer;
    background-color:var(--bg-modal-box);
    padding:15px 0;
    border:0;
    border-bottom:1px solid var(--bg-border);
    font-family:var(--font-regular);
    font-weight:600;
}
.tab-area ul li.active {
    color:var(--bg-white);
    background-color:#049db1;
    border:0;
    border-top:1px solid var(--bg-border);      
    border-left:1px solid var(--bg-border);      
    border-right:1px solid var(--bg-border);  
    font-weight:600;
}
.msg_search .input-group {
    border:1px solid var(--bg-border);
    box-sizing:border-box;
    overflow:hidden;
}
.msg_search input[type="search"] {
    width:calc(100% - 35px);
    border:0;
    text-indent:5px;
}
.msg_search input[type="search"] {
    font-family:var(--font-regular);
}
.msg_search button {
    width:35px;
    border:0;
    background:none;
    border-left:1px solid #CED4DA;
}
.msg_search .input-group button i {
    color:#495057;
}
.title_btn button {
    border:0;
    background:#ACD9DF;
    width:30px;
    height:30px;
}
.title_btn button i {
    font-size:16px;
    color:var(--bg-modal);
}
.msg_p {
    font-size:1.125em;
    font-family:var(--font-regular);
    color:var(--bg-basefc);
    font-weight:600;
}
.msg_iname {
    width:45px;
    height:45px;
}
.msg_iname p {
    color:var(--bg-white);
    font-size:1.375em;
}
.msg_iname i {
    top:-3px;
    left:-12px;
}
.msg_iname i.like {
    font-size:1.5em;
    color:#FF6284;
}
.msg_iname i.unlike {
    font-size:1.625em;
    color:#CED4DA;
}
.msg_cont {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    text-overflow:ellipsis;
    overflow:hidden;
    font-size:0.75em;
}
.recent_chat::-webkit-scrollbar {
    background:#e9eaee;
    width:5px;
    background-clip:padding-box;
}
.recent_chat::-webkit-scrollbar-thumb {
    width:5px;
    background-clip:padding-box;
    box-shadow:inset 0 0 0 5px;
}
.recent_chat > div {
    color:var(--bg-basefc);
    background:var(--bg-modal-box);
}
.recent_chat > div:hover {
    background:var(--hover-color);
    cursor:pointer;
}
.recent_chat > div > div:first-child {
    width:20%;
}
.recent_chat > div > div:nth-child(2) {
    width:80%;
    padding:0 5px;
}
.recent_chat2::-webkit-scrollbar {
    background:#e9eaee;
    width:5px;
    background-clip:padding-box;
}
.recent_chat2::-webkit-scrollbar-thumb {
    width:5px;
    background-clip:padding-box;
    box-shadow:inset 0 0 0 5px;
}
.recent_chat2 > div {
    color:var(--bg-basefc);
    background:var(--bg-modal-box);
}
.recent_chat2 > div:hover {
    background:var(--hover-color);
    cursor:pointer;
}
.recent_chat2 > div > div:first-child {
    width:20%;
}
.recent_chat2 > div > div:nth-child(2) {
    width:80%;
    padding:0 5px;
}
.msg_user > div {
    width:70%;
    padding-top:70%;
}
.msg_menu > div {
    cursor:pointer;
}
.msg_menu > div i {
    color:var(--bg-white);
    font-size:1.875em;
}
.msg_menu > div p {
    color:var(--bg-white);
    font-size:0.875rem;
    font-family:var(--font-regular);
}
.msg_menu > div.active i {
    color:var(--bg-menu-active);
}
.msg_menu > div.active p {
    color:var(--bg-menu-active);
}
.msg_set button {
    border:0;
    background:none;
}
.msg_set i {
    color:var(--bg-white);
    font-size:2.188em;
}
.flex-msg {
    font-size:1.125em;
    font-family:var(--font-bold);
    color:var(--bg-basefc);
}
.chat_main > div {
    color:#000;
}
.chat_main {
    top:105px;
    bottom:140px;
    background:var(--modal-chat-background);
    overflow:overlay;
    overflow-x:hidden;
    overflow-y:scroll;
    overscroll-behavior:none;
    color:var(--modal-chat-text-color);
    font-family:var(--font-regular);
    width: 100%;
}
.chat_main::-webkit-scrollbar {
    background:#E9EAEE;
    width:5px;
    background-clip:padding-box;
}
.chat_main::-webkit-scrollbar-thumb {
    width:5px;
    background-clip:padding-box;
    box-shadow:inset 0 0 0 5px;
}
.message_main {
    width:calc(100% - 55px);
}
.message_main > div:nth-child(2) {
    font-size:0.875em;
}
.message_box {
    background:var(--bg-modal-box);
    border-radius:15px;
    border-top-left-radius:0;
    color:var(--bg-basefc);
}
.message-out .message_box {
    border-top-left-radius:15px;
    border-top-right-radius:0;
}
.msg_info .msg_read {
    font-size:0.875em;
    color:#049DB1;
}
.msg_time {
    font-size:0.875em;
	margin-bottom: 0;
}
.text-divider {
    line-height:0;
    text-align:center;
}
.text-divider span {
    background:#049DB1;
    padding:2px;
    color:var(--bg-white);
    border-radius:25px;
    font-family:var(--font-regular);
}
.text-divider:before {
    content:"";
    display:block;
    border-top:1px solid #049DB1;
}
.chat_user {
    font-size:1em;
    font-family:var(--font-regular);
    font-weight:600;
    color:var(--bg-basefc);
}
.chat_enter {
    height:140px;
    width: 100%;
}
.chat_enter .chat_btn button.chat_opt {
    border:0;
    background:none;
}
.chat_opt i {
    color:#6c757d;
    font-size:28px;
}
.chat_enter .chat_btn button.enter_btn {
    background:#049DB1;
    color:var(--bg-white);
    border:0;
    font-family:var(--font-regular);
    border-radius:5px;
}
.chat_input textarea {
    width:100%;
    border:0;
    resize:none;
	background-color: var(--bg-box);
    color: var(--modal-text-color1);
}
.chat_input textarea::-webkit-input-placeholder {
    font-family:var(--font-regular);
    font-size:0.875em;
}
.chat_input textarea:focus {
    outline:none;
}
.chat_search .input-group {
    border:1px solid var(--bg-border);
    box-sizing:border-box;
    overflow:hidden;
}
.chat_search input[type="search"] {
    width:calc(100% - 35px);
    border:0;
    text-indent:5px;
}
.chat_search input[type="search"]::-webkit-input-placeholder {
    font-family:var(--font-regular);
}
.chat_search button {
    width:35px;
    border:0;
    background:var(--color-bg-base);
    border-left:1px solid var(--bg-border);
}
.chat_search .input-group button i {
    color:var(--modal-text-color1);
}

/* 채팅 - 설정 */
.back_cov {
    background:rgba(0,102,116,0.4);
	z-index: 1000;
}
.list-group-item {
    color: var(--txt-color) !important;
    background-color: var(--color-bg-base) !important;
}
.msg_setmenu {
    width:370px;
    background:var(--color-bg-base);
    border-radius:15px;
    z-index:1050;
}
.msg_setmenu .accordion-button {
    width:28px;
    height:28px;
    padding:0;
    font-size:16px;
    color:#fff!important;
    background:#006674;
    border-radius:5px;
}
.msg_setmenu .accordion-button:not(.collapsed) {
    width:28px;
    height:28px;
    border:0;
    color:#fff!important;
    background:#006674;
    border-radius:5px;
}
.setmenu_btn button {
    border:0;
    color:#fff;
    font-size:16px;
    font-family:var(--font-regular);
    border-radius:5px;
}
.setmenu_btn button i {
    vertical-align:-1px;
}
.setmenu_btn button:first-child {
    background:#6C757D;
}
.setmenu_btn button:nth-child(2) {
    background:#36A2EB;
}
.shead_btn button {
    width:28px;
    height:28px;
    border:0;
    color:#fff;
    background:var(--bg-modal);
    border-radius:5px;
}
.shead_btn button i {
    font-size:16px;
    color:#fff;
}

@media (max-width:767px) {
    #modal_member .modal-header {
        height:55px;
        font-size:16px;
    }
    #modal_member .modal-md-lg {
        width: calc(100% - 1rem);
    }
    #modal_member .modal-content {
        height:750px;
        border:0;
        border-radius:15px;
        overflow:hidden;
    }
    #modal_msg .modal-xl {
        width: calc(100% - 1rem);
    }
    #modal_msg .modal-content {
        height:550px;
        border:0;
        border-radius:15px;
        overflow:hidden;
    }
    .msg_nav {
        width:20%;
        background:var(--bg-modal);
    }
    .msg_list {
        width:80%;
    }
    .msg_chat {
        display:none;
    }
    .swiper_iname {
        width:45px;
        height:45px;
    }
    .swiper_iname p {
        color:var(--bg-white);
        font-family:var(--font-bold);
        font-size:20px;
    }
    .chat_list {
        height:350px;
        overflow:overlay;
        overflow-x:hidden;
        overflow-y:scroll;
        overscroll-behavior:none;
        color:#B1B4B7;
        font-family:var(--font-regular);
    }
    .chat_list::-webkit-scrollbar {
        background:#e9eaee;
        width:5px;
        background-clip:padding-box;
    }
    .chat_list::-webkit-scrollbar-thumb {
        width:5px;
        background-clip:padding-box;
        box-shadow:inset 0 0 0 5px;
    }
    .chat_list > div {
        color:var(--bg-basefc);
        background:var(--bg-modal-box);
    }
    .chat_list > div.active {
        background:#E2FAFA;
    }
    .chat_list .msg_num > div {
        width:24px;
        height:24px;
        line-height:26px;
        background:#FF6284;
    }
    .chat_list .msg_num p {
        color:var(--bg-white);
        font-size:12px;
    }
    .chat_list p.u_name {
        font-size:16px;
        color:var(--bg-basefc);
    }
    .chat_list p.chat_time {
        font-size:12px;
        font-family:var(--font-regular);
        font-weight:600;
        color:#049DB1;
    }
    .msg_iname {
        width:45px;
        height:45px;
    }
    .chat_list > div > div:first-child {
        width:30%;
        padding:0 8px;
    }
    .chat_list > div > div:nth-child(2) {
        width:70%;
        padding:0 5px;
    }
    .recent_chat {
        height:410px;
        overflow:overlay;
        overflow-x:hidden;
        overflow-y:scroll;
        overscroll-behavior:none;
        color:#B1B4B7;
        font-family:var(--font-regular);
    }
    .recent_chat2 {
        height:410px;
        overflow:overlay;
        overflow-x:hidden;
        overflow-y:scroll;
        overscroll-behavior:none;
        color:#B1B4B7;
        font-family:var(--font-regular);
    }
    .recent_chat2 .msg_num > div {
        width:24px;
        height:24px;
        line-height:26px;
        background:#FF6284;
    }
    .recent_chat2 .msg_num p {
        color:var(--bg-white);
        font-size:12px;
    }
    .recent_chat2 p.u_name {
        font-size:16px;
        color:var(--bg-basefc);
    }
    .recent_chat2 p.chat_time {
        font-size:12px;
        font-family:var(--font-regular);
        font-weight:600;
        color:#049DB1;
    }

    .user_pro {
        width:55px;
        height:55px;
        background:#ECEAEB;
    }    
}
@media (min-width:768px) {
    .msg_nav {
        width:7%;
        background:var(--bg-modal);
    }
    .msg_list {
        width:28%;
        border-right:1px solid var(--bg-border);
        box-sizing:border-box;
    }
    .msg_chat {
        width:65%;
    }
    /* 담당자 조회 */
    #modal_member .modal-md-lg {
        width:410px;
        height:80%;
    }
    #modal_member .modal-content {
        border-radius:15px;
        overflow:hidden;
    }
    .chat_list {
        height:565px;
        overflow:overlay;
        overflow-x:hidden;
        overflow-y:scroll;
        overscroll-behavior:none;
        color:#B1B4B7;
        font-family:var(--font-regular);
    }
    .chat_list::-webkit-scrollbar {
        background:#e9eaee;
        width:5px;
        background-clip:padding-box;
    }
    .chat_list::-webkit-scrollbar-thumb {
        width:5px;
        background-clip:padding-box;
        box-shadow:inset 0 0 0 5px;
    }
    .chat_list > div {
        color:var(--bg-basefc);
        background:var(--bg-modal-box);
    }
    .chat_list > div.active {
        background:var(--hover-color);
    }
    .chat_list .msg_num > div {
        width:22px;
        height:22px;
        line-height:24px;
        background:#FF6284;
    }
    .chat_list .msg_num p {
        color:var(--bg-white);
        font-size:12px;
    }
    .chat_list p.u_name {
        font-size:1em;
        font-family:var(--font-bold);
        color:var(--bg-basefc);
    }
    .chat_list p.chat_time {
        font-size:0.75em;
        font-family:var(--font-regular);
        font-weight:600;
        color:#049DB1;
    }
    .swiper_iname {
        width:45px;
        height:45px;
    }
    .swiper_iname p {
        color:var(--bg-white);
        font-family:var(--font-bold);
        font-size:1.25em;
    }
    .swiper_iname i {
        top:-3px;
        left:-12px;
    }
    .user_pro {
        width:55px;
        height:55px;
        background:#ECEAEB;
    }
    #modal_msg .modal-xl {
        max-width:1300px!important;
        width:80%;
    }
    #modal_msg .modal-content {
        height:756px;
        border:0;
        border-radius:15px;
        overflow:hidden;
    }    
    .recent_chat {
        height:410px;
        overflow:overlay;
        overflow-x:hidden;
        overflow-y:scroll;
        overscroll-behavior:none;
        color:#B1B4B7;
        font-family:var(--font-regular);
    }
    .chat_list > div > div:first-child {
        width:22%;
        padding:0 8px;
    }
    .chat_list > div > div:nth-child(2) {
        width:78%;
        padding:0 5px;
    }
    .recent_chat2 {
        height:410px;
        overflow:overlay;
        overflow-x:hidden;
        overflow-y:scroll;
        overscroll-behavior:none;
        color:#B1B4B7;
        font-family:var(--font-regular);
    }
    .recent_chat2 .msg_num > div {
        width:22px;
        height:22px;
        line-height:24px;
        background:#FF6284;
    }
    .recent_chat2 .msg_num p {
        color:var(--bg-white);
        font-size:12px;
    }
    .recent_chat2 p.u_name {
        font-size:1em;
        font-family:var(--font-bold);
        color:var(--bg-basefc);
    }
    .recent_chat2 p.chat_time {
        font-size:0.75em;
        font-family:var(--font-regular);
        font-weight:600;
        color:#049DB1;
    }
    /* chat_main */
    

}

/* modal_context_menu */
/*
.modal_context_menu {
    width:200px;
    position:absolute;
    z-index:100;
    top:50%;
    left:52%;
    background:#fff;
    border:1px solid #006674;
    box-shadow: #9a9a9a 3px 3px 3px;
    display:none;
}
*/
.modal_context_menu ul, .context_menu ul{
    width:100%;  
    padding-left:0;
    margin-bottom:0;
}
.modal_context_menu ul li, .context_menu ul li{
    width:100%;
    height:45px;
    line-height:45px;
    padding-left:10px;
    border-bottom:1px solid var(--const-border-color);
    cursor:pointer;    
}
.modal_context_menu ul li {
    font-size:1em;
    font-family:var(--font-bold);
    font-weight:500;
    color:var(--bg-basefc);
}
.modal_context_menu ul li.active {
    color:var(--bg-modal);
}
.modal_context_menu ul li:last-child {
    border-bottom:0;
}
/* 즐겨찾기 */
/*
#modal_mark .modal-content {
    border-radius:15px;
    overflow:hidden;
}

#modal_mark .modal-header {
    background:var(--const-border-color);
}

#modal_mark .modal-title {
    font-family:var(--font-bold);
    color:var(--bg-basefc);
    font-size:20px;
}
*/
.mark_list > div {
    background:var(--bg-modal-box);
    color: var(--bg-basefc);
    font-size:14px;
    font-family:var(--font-regular);
}
.mark_heart i {
    color:var(--mana-pro-color);
    font-size:25px;
}
.mark_set {
    font-size:20px;
}
.mark_title {
    font-size:16px;
}
.mark_heart {
    width:42px;
    height:42px;
    border-radius:5px;
    border:1px solid var(--bg-border);
    background:var(--bg-box);
}
.mark_list {
    height:420px;
    box-sizing:border-box;
    overflow:overlay;
    overflow-x:hidden;
    overflow-y:scroll;
    overscroll-behavior:none;
    color:#B1B4B7;
}
.mark_list::-webkit-scrollbar {
    width:5px;
    background-clip:padding-box;
}
.mark_list::-webkit-scrollbar-thumb {
    width:5px;
    background-clip:padding-box;
    box-shadow:inset 0 0 0 5px;
}

 /* 알림 */
 /*
 #modal_noti .modal-content {
    border-radius:15px;
    overflow:hidden;
}
#modal_noti .modal-header {
    background:var(--modal-header-bg-color);
}
*/
.title_btn button {
    border:0;
    background:var(--bg-box);
    width:34px;
    height:34px;
}
.title_btn button i {
    color:var(--modal-icon-color);
}/*
#modal_noti .modal-title {
    font-family:var(--font-bold);
    color:#fff;
    font-size:20px;
}
#modal_noti .modal-body {
    font-style:normal;
    font-weight:100;
}
*/
.noti_p {
    font-family:var(--font-regular);
    font-size:14px;
}
.noti_btn button {
    border:1px solid var(--bg-border);
    background:none;
    font-family:var(--font-regular);
    border-radius:10px;
    font-size:14px;
	color:var(--wbtn-txt-color);
}
.noti_btn button br{display:none;}
.noti_btn button i {
    color:var(--bg-modal);
    vertical-align:-1px;
}
.noti_list {
    height:400px;
    box-sizing:border-box;
    overflow:overlay;
    overflow-x:hidden;
    overflow-y:scroll;
    overscroll-behavior:none;
    color:#B1B4B7;
}
.noti_list::-webkit-scrollbar {
    width:5px;
    background-clip:padding-box;
}
.noti_list::-webkit-scrollbar-thumb {
    width:5px;
    background-clip:padding-box;
    box-shadow:inset 0 0 0 5px;
}
.noti_list > div {
    background:var(--bg-modal-box);
    color: var(--modal-text-color1);
    font-size:14px;
    font-family:var(--font-regular);
}
.noti_list .noti_name {
    width:45px;
    height:45px;
    font-size:18px;
}
.noti_list .noti_name p {
    color:var(--btn-txt-color);
}
.noti_list .noti_title {
    font-size:16px;
    font-family:var(--font-bold);
    color:var(--bg-basefc);
    font-weight:600;
}
.noti_list .noti_date {
    font-size:12px;
    color:var(--bg-modal);
    font-family:var(--font-bold);
    font-weight:600;
}
.noti_list .noti_set {
    font-size:16px;
}
.noti_cont .noti {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    text-overflow:ellipsis;
    overflow:hidden;
}
.noti_read span {
    display:inline-block;
    width:14px;
    height:14px;
    background:var(--mana-pro-color);
}
.set_head {
    background:var(--bg-modal-box);
}
.set_head p {
    font-size:18px;
    font-family:var(--font-bold);
}
.set_head i {
    font-size:18px;
    color:var(--modal-icon1-color);
}
.shead_btn button {
    width:28px;
    height:28px;
    border:0;
    color:var(--btn-txt-color);
    background:var(--bg-modal);
}
    border-radius:5px;
}
.shead_btn button i {
    font-size:16px;
    color:var(--btn-txt-color);
}

.collapse:not(.show) {
    display: none !important;
}

.setmenu {
    height:128px;
    box-sizing:border-box;
    color:var(--modal-chat-text-color);
}
.setmenu.setmenu2{
    height:165px;
}

.setmenu .scroll_box {
    height: 100%;
    font-size: 0;
	color:#b1b4b7;
	overflow:overlay;
    overflow-x:hidden;
    overflow-y:scroll;
    overscroll-behavior:none;
}
.setmenu .scroll_box::-webkit-scrollbar {
    background-color:#e8eaed;
    width:5px;
    background-clip:padding-box;
}
.setmenu .scroll_box::-webkit-scrollbar-thumb {
    width:5px;
    background-clip:padding-box;
    box-shadow:inset 0 0 0 5px;
}

.setmenu li{font-size:14px;}




.setmenu.image{
	display:inline-block;
}
.userpro {
    width:35px;
    height:35px;
}
.userpro p {
    font-size:16px;
    color:#fff;
}
.setmenu3 ul {
    color:#59585b;
    font-size:14px;
}
.setmenu3 i {
    font-size:16px;
    color:#6C757D;
}
.filetype {
    width:35px;
    height:35px;
}
.filetype p {
    font-size:16px;
    color:#fff;
}
.filetype i {
    font-size:18px;
    color:#fff;
}

.accordion-item {
    background-color: var(--modal-chat-background) !important;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.border-bottom {
    border-bottom: 1px solid var(--bg-border) !important;
}

.border-top {
    border-top: 1px solid var(--bg-border) !important;
}