/* *******************************
message-area
******************************** */
.scrollbar
{
    overflow-y: scroll;
    height: 800px;
    padding-right: 14px;
}


#style-3::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar
{
    width: 0px;
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
    background-color: #000000;
}


span.chat_times {
    font-size: 12px;
}

.msg_of_num {
    width: 20px;
    height: 20px;
    border-radius: 50px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    background: #FFC924;
}
a.send_icons {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
.chat_user{width: 48px;height: 48px;}
/*.message-area{height:100vh;overflow:hidden;padding:30px 0;background:#f5f5f5;}*/
.chat-area{position:relative;width:100%;background-color:#fff;border-radius:0.3rem;height:90vh;overflow:hidden;min-height:calc(100% - 1rem);}
.chatlist{outline:0;height:100%;overflow:hidden;width:325px;float:left;padding:0 70px 0 7px;}
.chat-area .modal-content{border:none;border-radius:0;outline:0;height:100%;}
.chat-area .modal-dialog-scrollable{height:100%!important;}
.chatbox{width:auto;overflow:hidden;height:100%;margin:5px 5px 0;background:#FFFFFF;box-shadow:0px 2px 3px rgba(0,0,0,0.25);border-radius:8px;}
.chat-header{margin-bottom:50px;}
.chatbox .modal-dialog,.chatlist .modal-dialog{max-width:100%;margin:0;}
.msg-search{display:flex;align-items:center;justify-content:space-between;}
.msg-search{display:block; padding:0.375rem 0.75rem;font-size:14px;font-weight:400;line-height:1.5;color:#222;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.chat-area .form-control:focus{outline:0;box-shadow:inherit;}

.chat-list h3{color: #4F5148;font-size:16px;font-weight:500;line-height:1.3;text-transform:capitalize;margin-bottom:3px;}
.chat-list p{color:#343434;font-size:14px;font-weight:400;line-height:1.5;text-transform:capitalize;margin-bottom:0;}
.chat-list a.d-flex{margin-bottom:15px;position:relative;text-decoration:none;}
.chat-list .active,.chatbox .active{display:block;content:'';clear:both;position:absolute;bottom:3px;left:34px;height:12px;width:12px;background:#FFC924;border-radius:50%;border:2px solid #fff;}
.msg-head h3{color:#222;font-size:18px;font-weight:500;line-height:1.5;margin-bottom:0;}
.msg-head p{color:#343434;font-size:14px;font-weight:400;line-height:1.5;text-transform:capitalize;margin-bottom:0;}
.msg-head{padding:15px;border-bottom:1px solid #ccc;}
.moreoption{display:flex;align-items:center;justify-content:end;}
.moreoption .navbar{padding:0;}
.moreoption li .nav-link{color:#222;font-size:16px;}
.moreoption .dropdown-toggle::after{display:none;}
.moreoption .dropdown-menu[data-bs-popper]{top:100%;left:auto;right:0;margin-top:0.125rem;}
.msg-body ul{overflow:hidden;}
.msg-body ul li{list-style:none;margin:15px 0;}
.msg-body ul li.sender{display:block;width:100%;position:relative;}
/*.msg-body ul li.sender:before{display:block;clear:both;content:'';position:absolute;top:-6px;left:-7px;width:0;height:0;border-style:solid;border-width:0 12px 15px 12px;border-color:transparent transparent #f5f5f5 transparent;-webkit-transform:rotate(-37deg);-ms-transform:rotate(-37deg);transform:rotate(-37deg);}*/
.msg-body ul li.sender p{color:#000;font-size:14px;line-height:1.5;font-weight:400;padding:15px;background:#f5f5f5;display:inline-block;border-bottom-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;margin-bottom:0;}
.msg-body ul li.sender p b{display:block;color:#180660;font-size:14px;line-height:1.5;font-weight:500;}
.msg-body ul li.repaly{display:block;width:100%;text-align:right;position:relative;}
/*.msg-body ul li.repaly:before{display:block;clear:both;content:'';position:absolute;bottom:15px;right:-7px;width:0;height:0;border-style:solid;border-width:0 12px 15px 12px;border-color:transparent transparent #4b7bec transparent;-webkit-transform:rotate(37deg);-ms-transform:rotate(37deg);transform:rotate(37deg);}*/
.msg-body ul li.repaly p{color:#fff;font-size:14px;line-height:1.5;font-weight:400;padding:15px;background:rgba(255, 201, 36, 0.2);display:inline-block;border-top-left-radius:10px;border-top-right-radius:0px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;margin-bottom:0;}
.msg-body ul li.repaly p b{display:block;color:#061061;font-size:14px;line-height:1.5;font-weight:500;}
.msg-body ul li.repaly:after{display:block;content:'';clear:both;}
.time{display:block;color:#000;font-size:12px;line-height:1.5;font-weight:400;}
li.repaly .time{margin-right:20px;}
.divider{position:relative;z-index:1;text-align:center;}
.msg-body h6{text-align:center;font-weight:normal;font-size:14px;line-height:1.5;color:#222;background:#fff;display:inline-block;padding:0 5px;margin-bottom:0;}
.divider:after{display:block;content:'';clear:both;position:absolute;top:12px;left:0;border-top:1px solid #EBEBEB;width:100%;height:100%;z-index:-1;}
.send-box{padding:15px;border-top:1px solid #ccc;}
#upload {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;    width: 24px;
    height: 24px;
}
.send-box form > input {
    padding: 10px 45px 10px 45px;
}
.send-btns {
    position: absolute;
    top: 11px;
    left: 18px;
}
.add-apoint{display:inline-block;margin-left:5px;}
.add-apoint a{text-decoration:none;background:#F6F7FA;border-radius:8px;padding:8px 8px;font-size:13px;font-weight:400;line-height:1.2;color:#343945;}
.add-apoint a svg{margin-right:5px;}
.chat-icon{display:none;}
.closess i{display:none;}

@media (max-width:767px){
    .chat-icon{display:block;margin-right:5px;}
    .chatlist{width:100%;padding: 0 7px 0 7px;}
    .chatbox{width:100%;position:absolute;left:1000px;right:0;background:#fff;transition:all 0.5s ease;border-left:none;    margin-top:0px;}
    .showbox{left:0!important;transition:all 0.5s ease;}
    .msg-head h3{font-size:14px;}
    .msg-head p{font-size:12px;}
    .send-box button{width:28%;}
    .send-box .form-control{width:70%;}
    .chat-list h3{font-size:14px;}
    .chat-list p{font-size:12px;}
    .msg-body ul li.sender p{font-size:13px;padding:8px;border-bottom-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;}
    .msg-body ul li.repaly p{font-size:13px;padding:8px;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-left-radius:6px;}
}