.chat-user{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;padding:10px;color:#ffffff;-webkit-transition:all 0.4s;transition:all 0.4s}
.chat-user:hover{background-color:rgba(255,255,255,0.1);cursor:pointer;-webkit-transition:all 0.4s;transition:all 0.4s}
.chat-user--active{background-color:#3498db}
.chat-user--active:hover{background-color:#3498db;cursor:default}
.chat-user__avatar{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:36px;height:36px;-webkit-box-flex:0;-ms-flex:0 0 36px;flex:0 0 36px;text-transform:uppercase;border-radius:6px;background-size:cover;background-position:center center}
.chat-user__avatar>*{margin:0}
.chat-user__new-msg{position:absolute;right:-3px;bottom:-3px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:20px;height:20px;font-size:11px;line-height:14px;background-color:#3498db;border-radius:10px;border:2px solid #2c3e50}
.chat-user__body{-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2;max-width:calc(100% - 50px)}
.chat-user__top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.chat-user__name{overflow:hidden;margin-bottom:0;white-space:nowrap;text-overflow:ellipsis;font-weight: 400}
.chat-user__time{color:#7b8a8b}
.chat-user--active .chat-user__time{color:#ffffff}
.chat-user__last-msg{max-width:260px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;line-height:1.2;color:#7b8a8b}
.chat-user--active .chat-user__last-msg{color:#ffffff;opacity:0.7}
.chat-user__last-msg span{color:#4388B9}
.chat-user-list{height:calc(100% - 59px);overflow-y:scroll}
.chat-user-list__more{padding:10px}
.chat-user-list__more .btn{width:100%}
.chat-message{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;gap:12px}
.chat-message--user .chat-message__avatar{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}
.chat-message--user .chat-message__body{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}
.chat-message__avatar{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:32px;height:32px;-webkit-box-flex:0;-ms-flex:0 0 32px;flex:0 0 32px;text-transform:uppercase;border-radius:6px;background-size:cover;background-position:center center;background-color:#CB4F87}
.chat-message__avatar>*{margin:0;color:#ffffff}
.chat-message__body{position:relative;padding:10px;max-width:420px;text-align:left;background-color:#cff4fc;border:1px solid #b6effb;border-radius:10px}
.chat-message__body::before,.chat-message__body:after{position:absolute;bottom: -1px;left:-12px;display:block;width:0;height:0;content:"";border-bottom:12px solid #b6effb;border-left:11px solid transparent;border-right:11px solid transparent}
.chat-message__body:after{bottom:0;left:-10px;border-bottom:10px solid #cff4fc;border-left:10px solid transparent;border-right:10px solid transparent}
.chat-message--user .chat-message__body{background-color:#fff3cd;border:1px solid #ffecb5}
.chat-message--user .chat-message__body::before{left:auto;right:-12px;border-bottom:12px solid #ffecb5}
.chat-message--user .chat-message__body::after{left:auto;right:-10px;border-bottom:10px solid #fff3cd}
.chat-message__img{display:block;width:100%;max-width:100px;height:80px}
.chat-message-list{padding:30px 20px;padding-right:20px;overflow-y:scroll}
.chat-message-list__more{margin-bottom:20px}
.chat-message-list__more .btn{width:100%}
.chat-message-list__item:not(:last-child){margin-bottom:10px}
@media (min-width: 768px){.chat-message-list__item{padding-right:40px}
}
.chat-message-list__item--user{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding-right:0}
@media (min-width: 768px){.chat-message-list__item--user{padding-left:40px}
}
.chat-info{padding:10px;height:53px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:6px;border-bottom:1px solid #dee2e6}
.chat-info__body{max-width:100px}
@media (min-width: 375px){.chat-info__body{max-width:150px}
}
@media (min-width: 576px){.chat-info__body{max-width:300px}
}
.chat-info__title{margin:0;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-info__note{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-info__actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;gap:4px}
.chat-info .btn{width:32px;color:#95a5a6;}
@media (min-width: 992px){.chat-info__user-list-open{display:none}
}
.chat-message-form form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:10px;padding:10px;margin:0}
.chat-message-form textarea{display:block;-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2;margin:0;height:46px;width:100%}
.chat-message-form .chat-btn{width:32px;height:32px;color:#95a5a6;}
.chat-message-form .chat-message-fileinput{width:38px;height:38px}
.chat-sidebar{height:100%}
.chat-sidebar__header{display:none}
@media (max-width: 1199px){.chat-sidebar__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:10px;padding-bottom:0}
}
.chat-sidebar__header .btn{width:32px;height:32px;color:#95a5a6;}
.chat-sidebar__body{padding:8px;padding-top:0;height:calc(100% - 52px);overflow-y:hidden}
@media (min-width: 1200px){.chat-sidebar__body{padding:8px;height:100%}
}
.chat-sidebar__content{padding:0 2px;margin-top:8px;height:calc(100% - 52px);overflow-y:scroll;overflow-x:hidden}
.chat-sidebar td,.chat-sidebar th{padding:5px 5px 5px 0}
.chat-sidebar img{display:block;width:100%;max-width:80px}
.chat-sidebar__content .col,.chat-sidebar__content .col-auto{padding-left:8px;padding-right:8px}
.chat-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:6px;padding:10px;height:53px;border-bottom:1px solid #dee2e6}
.chat-header__close{display:none}
@media (max-width: 991px){.chat-header__close{display:inline-block}
}
.chat-header__form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:6px;-webkit-margin-after:0;margin-block-end:0;-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2}
.chat-header__form .dropdown-toggle::after{content:none}
.chat-header .dropdown-menu{left:auto;right:0}
.chat-header .form-control{height:32px}
.chat{margin:1rem 0;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;height:520px;border:1px solid #dee2e6;border-radius:0.25rem}
@media (max-width: 575px){.chat{margin-left:-10px;margin-right:-10px;border-left:none;border-right:none;border-radius:0}
}
.chat__user-list{width:100%;max-width:320px;-webkit-box-flex:0;-ms-flex:0 0 320px;flex:0 0 320px;display:none;background-color:#2c3e50;border-radius:0.25rem 0 0 0.25rem}
@media (min-width: 992px){.chat__user-list{display:block}
}
@media (max-width: 991px){.chat__user-list.show{position:absolute;top:0;left:0;right:0;bottom:0;z-index:100;display:block;max-width:none;height:100%;border-radius:0.25rem}
}
@media (max-width: 575px){.chat__user-list.show{border-radius:0}
}
.chat__main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}
.chat__main>div{width:100%}
.chat__main .chat-message-list{-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2}
.chat__main .chat-message-form:last-child{border-top:1px solid #dee2e6}
.chat__main .chat-message-form:not(:last-child){border-bottom:1px solid #dee2e6}
.chat__pagination{padding:20px;padding-bottom:0}
.chat__no-msg{-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:10px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}
.chat__sidebar{width:100%;max-width:300px;border-left:1px solid #dee2e6;display:none}
@media (min-width: 1200px){.chat__sidebar{display:block}
}
@media (max-width: 1199px){.chat__sidebar.show{position:absolute;top:0;left:0;right:0;bottom:0;z-index:100;display:block;max-width:none;height:100%;background-color:#ffffff;border-radius:0.25rem}
}
@media (min-width: 1200px){.chat__sidebar.show{display:none}
}
.chat .btn-light{width:32px;height:32px;color:#95a5a6;-webkit-box-flex:0;-ms-flex:0 0 32px;flex:0 0 32px;padding:0;font-size:1rem;}

.chat .chat-images-wrapper {display: flex !important;display: -webkit-box !important;display: -webkit-flex !important;display: -ms-flexbox !important;justify-content: flex-start !important;-webkit-box-pack: start !important;-webkit-justify-content: flex-start !important;-ms-flex-pack: start !important;flex-wrap: wrap !important;-webkit-flex-wrap: wrap !important;-ms-flex-wrap: wrap !important; column-gap:0.5rem;margin-bottom:0.5rem}
.chat .chat-message-fileinput{margin:0;cursor:pointer}
.chat .chat-message-fileinput .fa{margin-top:4px}
.chat-message__name {font-size: 0.75rem}
.chat .chat-sidebar__table {width:100%;margin: 0.5rem 0}
.chat-images-preview{padding: 5px 10px;list-style: none}
.chat-images-preview span {max-width:100px;overflow:hidden;text-overflow:ellipsis}
.chat-images-preview img {max-height:40px;max-width:40px}
.chat-message__text{white-space:pre-line}
.chat-message__time{color:#95a5a6;font-style:italic}
.chat.fullscreen {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: white;z-index: 1100;width: 100%;height: 100%;margin: 0;border: none;border-radius: 0}
.chat-message-list__body{overflow-wrap:break-word;word-break:break-word}

.img-fluid {
    max-width: 100%;
    height: auto
}

.img-thumbnail {
    padding: .25rem;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    max-width: 100%;
    height: auto
}