.page-chat .main{height:530px}.page-chat .chat-container{height:100%}.chat-wrapper{padding-top:0;padding-bottom:0}.chat-wrapper__side{width:300px;-webkit-box-flex:0;-ms-flex:none;flex:none;padding-bottom:10px;padding-right:10px;}.chat-wrapper__content{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:1px;padding-top:10px;padding-bottom:20px}.chat-content{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}.chat-content__top{padding:10px 0;-webkit-box-flex:0;-ms-flex:none;flex:none;width:100%;gap:7px;margin-left:-3px}.chat-content__user .cn-user__img{width:40px;height:40px}.chat-content__user .cn-user__name{font-size:16px;line-height:1.2;font-weight:600}.chat-content__user .cn-user__date{color:#968bac;font-size:12px;font-weight:500}.chat-content__back{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;height:30px;width:30px;padding:0;background:0 0;border:none}.chat-content__back .icon{color:#000;font-size:20px;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);fill:none}

.chat-content__middle{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden;overflow-y:auto;padding-right:20px;padding-left:5px;margin-right:-15px}.chat-content__bottom{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:5px;-webkit-box-flex:0;-ms-flex:none;flex:none;padding:10px 15px;border:1px solid #d9d9d9;border-radius:10px;width:100%}.chat-side{border-right:1px solid #dfdfdf;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.chat-side__top{ background: #F2F2F2;border-radius: 5px;margin-bottom: 10px;padding:10px;-webkit-box-flex:0;-ms-flex:none;flex:none;width:100%}.chat-list{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;width:100%}

.chat-list__item{padding:8px 10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;cursor:pointer;border-radius:10px}
.chat-list__item._active, .chat-list__item:hover{background:#eceaea}
.chat-list__item--support .chat-list__name{color:#ff6000}.chat-list__img{-webkit-box-flex:0;-ms-flex:none;flex:none;margin-right:12px}.chat-list__img img{width:40px;height:40px;border-radius:50%}.chat-list__content{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:1px}.chat-list__name{font-size:16px;font-weight:600;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.chat-list__text{font-size:12px;font-weight:500;color:#968bac;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.chat-list__badge{position:absolute;top:12px;right:10px;background:#ff6000;color:#fff;border-radius:100px;padding:0 10px;min-width:29px;text-align:center;line-height:18px;white-space:nowrap;font-size:12px;font-weight:500}

.cc-button-clip,.cc-button-send,.cc-button-smile{border:none;background:0 0;width:26px;height:26px;padding:0;-webkit-box-flex:0;-ms-flex:none;flex:none;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.cc-button-clip .icon,.cc-button-send .icon,.cc-button-smile .icon{color:#000;font-size:16px}.cc-button-clip .icon-smile,.cc-button-send .icon-smile,.cc-button-smile .icon-smile{fill:none}.cc-button-clip .icon-clip,.cc-button-send .icon-clip,.cc-button-smile .icon-clip{fill:none;stroke-width:1px}.cc-button-clip:hover .icon,.cc-button-send:hover .icon,.cc-button-smile:hover .icon{color:#ff6000}

.cc-button-clip{background: url(/plugins/chat/templates/default/img/addfile.svg) no-repeat center center;}
.cc-button-send{ background: url('/plugins/chat/templates/default/img/send.svg') no-repeat center center;}
.cc-button-send .icon{color:#ff6000;font-size:22px}.cc-control{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;border:none;height:30px;margin-left:10px;background:0 0;font-size:14px;min-width:1px;font-weight:500;color:#968bac;font-family:inherit}.cc-control::-webkit-input-placeholder{color:#968bac}.cc-control::-moz-placeholder{color:#968bac}.cc-control:-ms-input-placeholder{color:#968bac}.cc-control::-ms-input-placeholder{color:#968bac}.cc-control::placeholder{color:#968bac}.cc-message{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin:16px 0;gap:16px}.cc-message__avatar{-webkit-box-flex:0;-ms-flex:none;flex:none}.cc-message__avatar img{width:40px;height:40px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.cc-message__content{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:1px}.cc-message__text{text-align:left;background:#f2f2f2;border-radius:0 10px 10px 10px;padding:10px 15px;font-size:14px;font-weight:400;line-height:1.3;display:inline-block;max-width:80%;position:relative}.cc-message__text hr{margin:10px 0}.cc-message__text a{color:inherit}.cc-message__text:after{content:"";position:absolute;left:-10px;top:0;width:0;height:0;border-style:solid;border-width:0 10px 10px 0;border-color:transparent #f2f2f2 transparent transparent}.cc-message--reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.cc-message--reverse .cc-message__content{text-align:right}.cc-message--reverse .cc-message__text{border-radius:10px 0 10px 10px;background:#e4eef5}.cc-message--reverse .cc-message__text:after{left:100%;width:0;height:0;border-style:solid;border-width:10px 10px 0 0;border-color:#e4eef5 transparent transparent transparent}

.chat-wrapper{ width: 100%;}

.chat-bubble {
  margin-left:10px;
  -webkit-border-radius: 20px;
  -webkit-border-bottom-left-radius: 2px;
  -moz-border-radius: 20px;
  -moz-border-radius-bottomleft: 2px;
  border-radius: 20px;
  border-bottom-left-radius: 2px;
  display:inline-block;
}
.typing {
  align-items: center;
  display: flex;
  height: 17px;
}
.typing .dot {
  animation: mercuryTypingAnimation 1.8s infinite ease-in-out;
  background-color: #6CAD96 ; //rgba(20,105,69,.7);
  border-radius: 50%;
  height: 7px;
  margin-right: 4px;
  vertical-align: middle;
  width: 7px;
  display: inline-block;
}
.typing .dot:nth-child(1) {
  animation-delay: 200ms;
}
.typing .dot:nth-child(2) {
  animation-delay: 300ms;
}
.typing .dot:nth-child(3) {
  animation-delay: 400ms;
}
.typing .dot:last-child {
  margin-right: 0;
}

@keyframes mercuryTypingAnimation {
  0% {
    transform: translateY(0px);
    background-color:#6CAD96; // rgba(20,105,69,.7);
  }
  28% {
    transform: translateY(-7px);
    background-color:#9ECAB9; //rgba(20,105,69,.4);
  }
  44% {
    transform: translateY(0px);
    background-color: #B5D9CB; //rgba(20,105,69,.2);
  }
}
#typing_showboxw{ font-size: 12px; height: 15px;}
#typing_showbox{display:none;}
@media screen and (max-width: 991px) {
  .chat-wrapper__content {
    display: none;
  }
}
@media screen and (max-width: 991px) {
  .chat-wrapper.is-active .chat-wrapper__side {
    display: none;
  }
}@media screen and (max-width: 991px) {
  .chat-wrapper.is-active .chat-wrapper__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.js-close-chat{background: url('/plugins/chat/templates/default/img/next.svg?v=4') no-repeat center center;}
#message_content{ max-height: calc(100vh - 180px); min-height: 220px;}

@media screen and (max-width:575px){
.chat-content__bottom{
  bottom: 10px !important;
  right: 20px !important;
  left: 20px !important;
  width: auto !important;
}

  .chat-wrapper__side {
    width: 100%;
    max-height: calc(100vh - 140px);
  }
}

#chat_contacts{max-height: calc(100vh - 200px);}