[v-cloak] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

*:focus {
  outline: none;
}

.qcw-header .qcw-header-info {
  line-height: 18px;
}

.loading-indicator {
  -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;
  padding: 10px;
}

.loading-indicator div {
  border: 2px solid #eee;
  border-top: 2px solid var(--c-primary);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s ease-out infinite;
  animation: spin 2s ease-out infinite;
  margin: auto;
}

.inbox-container {
  -webkit-box-flex: 1;
  -ms-flex: 1 100%;
  flex: 1 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
}

.conversation-list {
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 380px;
  flex: 0 0 380px;
  min-height: 0;
  overflow: hidden;
  border-right: thin solid #e8e8e8;
}

.conversation-list::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: transparent;
}

.conversation-list::-webkit-scrollbar {
  width: 8px;
  background-color: transparent;
}

.conversation-list::-webkit-scrollbar-thumb {
  width: 8px;
  border-radius: 4px;
  background-color: #e0e0e0;
}

.conversation-list__header {
  padding: 20px 18px;
  background: rgba(104, 200, 183, 1);
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  z-index: 1;
}

.conversation-list__header > a:hover .tooltip {
  display: block;
  top: inherit;
  left: 50%;
  right: unset;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  margin-top: 17px;
  z-index: 1000;
}

.conversation-list__header.search {
  padding: 0;
}

.conversation-list__header.search.tab {
  border-bottom: 0;
}

.conversation-list__header.search.tab .notlink {
  display: block;
  padding: 18px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.45);
  border-bottom: thin solid #e8e8e8;
}

.conversation-list__header.search.tab a {
  font-weight: normal;
  font-size: 14px;
  line-height: 19px;
  color: rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid #ddd;
  height: 54px;
}

.conversation-list__header.search.tab a:hover,
.conversation-list__header.search.tab a.active {
  color: #27b199;
  border-bottom-width: 2px;
}

.filter-date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

.dtp-picker-days {
  width: 100%;
}

.filter-date-wrapper {
  border: 1px solid #ddd;
  border-radius: 15px;
  overflow: hidden;
}

.filter-date input {
  border: none;
  cursor: pointer;
  width: 100%;
  padding-left: 15px;
}

.conversation-list #menu:after {
  display: none;
}

.blank-room,
.empty-room {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: white;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  z-index: 1;
  color: var(--c-primary);
}

.blank-room img {
  height: 260px;
}

.blank-room p {
  margin: 20px;
}

.empty-room h2 {
  margin-top: 32px;
  margin-bottom: 18px;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  color: #454545;
}

.empty-room p {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  color: #454545;
}

.conversation-list__header span {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.conversation-list__header a {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 24px;
  flex: 0 24px;
  height: 24px;
  margin-left: 18px;
}

.conversation-list__header.search a {
  margin-left: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 64px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 9px;
  line-height: 12px;
  padding-top: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  color: #a0a0a0;
}

.conversation-list__header.search a.active {
  font-weight: 700;
  color: #0a0a0a;
}

.conversation-list__header.search a.active,
.conversation-list__header.search a:hover {
  border-bottom-color: #27b199;
}

.conversation-list__header.search a svg {
  width: 100%;
  margin-bottom: 5px;
}

.filter-room {
  display: -ms-grid;
  display: grid;
  place-items: center;
}

.filter-room .btn-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: var(--c-primary);
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
}

.filter-room .btn-wrapper div {
  display: block;
  text-align: center;
  cursor: pointer;
  padding: 10px 10px;
  width: 320px;
  border: 1px solid var(--c-primary);
}

.filter-room .btn-wrapper div.active {
  color: #ffffff;
  background-color: var(--c-primary);
}

.filter-room .btn-wrapper div.active > span {
  color: #333;
  background: #fff;
  padding: 2px 7px;
  line-height: 1;
  border-radius: 50px;
  text-align: center;
  font-size: 12px;
}

.filter-room .btn-wrapper div:first-child {
  border-bottom-left-radius: 30px;
  border-top-left-radius: 30px;
  border-right: 1px solid var(--c-primary);
}

.filter-room .btn-wrapper div:last-child {
  border-bottom-right-radius: 30px;
  border-top-right-radius: 30px;
}

.conversation-list__header .menu:hover {
  opacity: 0.7;
}

.conversation-list ul {
  position: relative;
  list-style: none;
  overflow-y: auto;
  height: 100%;
}

.conversation-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  color: #555555;
  position: relative;
  height: 72px;
}

li.search-result {
  height: auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

li.search-result > * {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  margin-left: 18px;
  padding: 18px 10px 18px 0;
  border-bottom: 1px solid #e8e8e8;
}

.search-result__room-name {
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  color: #555555;
  margin-bottom: 8px;
}

.search-result__room-name .search-result__date {
  font-weight: normal;
  font-size: 12px;
  line-height: 15px;
  color: rgba(0, 0, 0, 0.45);
}

.search-result__room-mesage {
  display: block;
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  color: rgba(0, 0, 0, 0.45);
  max-width: 320px;
}

.search-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  margin-top: 12px;
  margin-bottom: 12px;
  transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -webkit-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
  margin-left: 18px;
  margin-right: 18px;
}

.agent-search-input {
  width: 100%;
  border-color: transparent;
}

.agent-search-result {
  position: absolute;
  width: 250px;
  border-radius: 10px;
  margin-left: 5px;
  border: 1px solid #ddd;
  z-index: 1;
}

.agent-search-result:first-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.agent-search-result:last-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.agent-search-result div {
  background: white;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 40px;
  padding: 10px;
  cursor: pointer;
}

.agent-search-result div:hover {
  background: #ddd;
}

.clear-search {
  color: #979797;
  -ms-flex-preferred-size: 34px;
  flex-basis: 34px;
  cursor: pointer;
}

.clear-search > i {
  font-size: 20px;
}

li.separator {
  color: var(--c-primary);
  font-size: 12px;
  text-transform: uppercase;
  padding: 20px;
}

.conversation-list li.label {
  font-size: 15px;
  color: #999;
}

b.highlight {
  color: #555555;
}

li.search-result .conversation-list__detail {
  width: 100%;
}

.conversation-list li.active {
  background: #f4f4f4;
}

.conversation-list li:hover {
  background: #f8f8f8;
}

li.separator:hover,
li.label:hover {
  background-color: transparent;
  cursor: default;
}

.conversation-list__detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: transparent;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  border-bottom: 1px solid #f4f4f4;
  max-width: 300px;
}

.conversation-list .conversation-list__avatar {
  width: 40px;
  height: 40px;
  background-size: cover;
  border-radius: 50%;
  background-color: #f1f9ef;
  background-image: url(https://d1edrlpyc25xu0.cloudfront.net/kiwari-prod/image/upload/wMWsDZP6ta/1516689726-ic_qiscus_client.png);
  background-repeat: no-repeat;
  background-position: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  border: 1px solid #ececec;
}

.conversation-list .conversation-list__avatar .conversation-is__resolve {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
  min-height: 16px;
  min-width: 16px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 50%;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  background-color: transparent;
}

.conversation-list .conversation-list__avatar .expired,
.conversation-list .conversation-list__avatar .expired_in,
.conversation-list .conversation-list__avatar .wa_group {
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  margin-left: -5px;
  margin-top: 5px;
  bottom: 15px;
}

.conversation-list .conversation-list__avatar .wa_group {
  background: url("/img/wa-group.svg") no-repeat center;
}

.conversation-list .conversation-list__avatar .expired {
  background: url("/img/expired.svg") no-repeat center;
}

.conversation-list .conversation-list__avatar .expired_in {
  background: url("/img/expired-in.svg") no-repeat center;
}

.conversation-list
  .conversation-list__avatar
  .conversation-is__resolve.resolved {
  background: url("/img/icon_solved_flag.png") no-repeat center;
  background-size: 20px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  margin-top: -4px;
}

.conversation-list img.conversation-list__avatar {
  -webkit-box-flex: 0;
  -ms-flex: 0 50px;
  flex: 0 50px;
  width: 50px;
  border-radius: 50%;
}

.conversation-list img.conversation-list__badge {
  -webkit-box-flex: 0;
  -ms-flex: 0 30px;
  flex: 0 30px;
  width: 30px;
  height: 30px;
  margin-right: 20px;
}

.conversation-list__info {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-right: 6px;
  padding-left: 10px;
  font-size: 14px;
  font-weight: 500;
  max-width: 140px;
}

.conversation-list__info img {
  -webkit-transform: scale(0.65) translateY(3px);
  -ms-transform: scale(0.65) translateY(3px);
  transform: scale(0.65) translateY(3px);
}

.conversation-list__info.unread,
.conversation-list__info.unread .conversation-list__comment {
  font-weight: bold;
}

.conversation-list__info .conversation-list__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 170px;
  line-height: 22px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  gap: 8px;
}

.conversation-list__info .conversation-list__title .conversation-list__name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  text-transform: capitalize;
  max-width: 106px;
}

.conversation-list__info .conversation-list__title .conversation-list__bot,
.conversation-list__info .conversation-list__title .conversation-list__pin,
.conversation-list__wag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 18px;
  flex: 0 18px;
  background: transparent;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.conversation-list__info .conversation-list__title .conversation-list__pin {
  margin-left: 6px;
}

.conversation-list__info
  .conversation-list__title
  .conversation-list__bot.bot--active {
  background-color: var(--c-primary);
  -webkit-mask: url("/img/icon_robot.svg") no-repeat top;
  mask: url("/img/icon_robot.svg") no-repeat top;
}

.conversation-list__info
  .conversation-list__title
  .conversation-list__pin.pin--active {
  background-color: var(--c-primary);
  -webkit-mask: url("/img/icon_pin.svg") no-repeat top;
  mask: url("/img/icon_pin.svg") no-repeat top;
}

.conversation-list__wag.is--wag {
  background: url("/img/wag_badge.svg") no-repeat center;
  background-size: 16px;
  background-position: center;
  min-height: 16px;
  min-width: 16px;
}

.conversation-list__info .conversation-list__comment {
  display: block;
  color: #8c8c8c;
  line-height: 21px;
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  font-weight: 400;
}

.conversation-list__info .conversation-list__comment img {
  margin-right: 8px;
  width: 15px;
  height: 15px;
  -webkit-transform: scale(0.65) translateY(5px);
  -ms-transform: scale(0.65) translateY(5px);
  transform: scale(0.65) translateY(5px);
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.conversation-list li small {
  display: block;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 17px;
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.conversation-list li small img {
  width: 15px;
  margin-right: 7px;
  -webkit-transform: scale(0.8) translateY(1px);
  -ms-transform: scale(0.8) translateY(1px);
  transform: scale(0.8) translateY(1px);
}

.conversation-list__extra {
  -webkit-box-flex: 0;
  -ms-flex: 0 100px;
  flex: 0 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  font-size: 14px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-right: 10px;
  padding-top: 14px;
  padding-bottom: 14px;
  text-align: right;
}

.conversation-list__extra .waiting,
.conversation-list__extra .waiting-active {
  font-size: 12px;
  font-weight: normal;
  color: var(--c-primary);
}

.conversation-list__extra .waiting-active {
  color: #eb5757;
}

.conversation-list__extra .waiting,
.conversation-list__extra .waiting-active {
  font-size: 12px;
  font-weight: normal;
  color: var(--c-primary);
}

.conversation-list__extra .waiting-active {
  color: #eb5757;
}

.conversation-list__time {
  color: rgba(0, 0, 0, 0.45);
  font-weight: normal;
  font-size: 12px;
  margin-bottom: 6px;
  width: 100px;
}

.conversation-list__unread-count {
  position: absolute;
  top: 16px;
  left: 8px;
  background: #eb5757;
  border-radius: 50%;
  min-width: 8px;
  min-height: 8px;
}

.app-chat-area {
  background: #dedede;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.qcw-main {
  width: 100%;
}

.qcw-header {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 4rem;
  flex: 0 0 4rem;
}

.app-chat-area .qcw-header {
  background: #fff;
  border-radius: 0;
  color: #444;
  text-shadow: none;
  -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
  height: 60px;
}

.app-chat-area .qcw-app--wide-mode {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #ffffff;
}

.qcw-window-toggle-btn {
  display: none;
}

.hidden {
  display: none !important;
}

.conversation-info {
  -webkit-box-flex: 0;
  -ms-flex: 0 304px;
  flex: 0 304px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0 0;
  height: 100%;
  margin: 0;
  background: #ffffff;
  overflow: hidden;
  overflow-y: auto;
  font-size: 14px;
}

.conversation-info .header {
  position: relative;
  height: 64px;
  border-bottom: 1px solid #e2e2e2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.conversation-info > .body {
  height: calc(100% - 64px);
  overflow-y: auto;
}

.conversation-info .conversation-info__top {
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: 24px;
  position: relative;
  gap: 12px;
}

.conversation-info span.close-chat-info {
  font-size: 32px;
  color: #979797;
  -webkit-box-flex: 0;
  -ms-flex: 0 60px;
  flex: 0 60px;
  text-align: center;
  cursor: pointer;
  margin-top: -4px;
}

.conversation-info span.close-chat-info:hover {
  color: var(--c-primary);
}

.conversation-info .conversation-info__user-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.conversation-info__user-info > div {
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}

.conversation-info__user-info > div:hover {
  white-space: normal;
}

.conversation-info .conversation-info__user-info > div {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

.conversation-info .conversation-info__user-info .name {
  text-transform: capitalize;
  font-weight: 700;
  overflow: unset;
}

.conversation-info .conversation-info__top .conversation-info__avatar {
  position: relative;
  height: 64px;
  border-radius: 50%;
  width: 64px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f1f9ef;
  /* -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2); */
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border: 1px solid #ececec;
}

.conversation-info
  .conversation-info__top
  .conversation-info__avatar
  .conversation-info__badge {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /* -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2; */
  background-color: white;
  background-size: 16px;
  border-radius: 50%;
  border: 1px solid #f2f2f2;
}

.conversation-info__badge.badge_fb {
  background: url("/img/messenger_flag_chat_list.svg") no-repeat center;
  background-size: 24px !important;
}

.conversation-info__badge.badge_line {
  background: url("/img/LINE_SOCIAL_Circle_typeA.png") no-repeat center;
  background-size: cover;
}

.conversation-info__badge.badge_qiscus {
  background: url("/img/qiscus_flag_chat_list.svg") no-repeat center;
  background-size: 20px !important;
}

.conversation-info__badge.badge_telegram {
  background: url("/img/telegram_badge.svg") no-repeat center;
  background-size: 20px !important;
}

.conversation-info__badge.badge_wa,
.conversation-info__badge.badge_wabox {
  background: url("/img/whatsapp_badge.svg") no-repeat center;
}

.conversation-info .conversation-info__top h4 {
  margin: 15px 0 30px;
}

.conversation-info .conversation-info__bottom {
  width: 100%;
  margin: 0;
  padding: 0;
  border-top: 1px solid #f2f2f2;
}

.conversation-info .conversation-info__bottom ul li {
  border-bottom: 1px solid #ececec;
  list-style: none;
  padding: 24px 16px;
}

.conversation-info .conversation-info__bottom ul li:last-child {
  border-bottom: none;
}

.conversation-info .conversation-info__bottom ul li span {
  color: #0a0a0a;
  display: block;
  text-transform: capitalize;
  font-size: 14px;
  line-height: 17px;
}

.label-tag {
  background-color: var(--c-primary);
  color: #fff;
  border-radius: 30px;
  padding: 8px 12px;
  position: relative;
  margin-right: 10px;
  margin-bottom: 5px;
  text-transform: none;
  word-break: break-word;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}

.label-tag-unsaved {
  background-color: #aaa;
  color: #fff;
  border-radius: 15px;
  padding: 4px 10px;
  position: relative;
  margin-right: 10px;
  margin-bottom: 5px;
  text-transform: none;
  word-break: break-word;
}

.remove-tag {
  position: absolute;
  right: -4px;
  top: -4px;
  color: var(--c-primary);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 100%;
  padding: 2px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  border: 1px solid var(--c-primary);
  cursor: pointer;
  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;
}

.conversation-info .conversation-info__bottom .additional-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.conversation-info .conversation-info__bottom .additional-info input {
  width: 40%;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  margin-right: 10px;
}

/* Additional Info CSS */

.additional-info-btn {
  text-transform: uppercase;
  color: #27b199;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

.additional-info-btn img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.additional-info-window {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: #fff;
  z-index: 700;
}

.add-additional-info-btn {
  color: #27b199;
  font-size: 14px;
  border: 0;
  outline: 0;
  cursor: pointer;
  margin: 20px auto;
  background: transparent;
  text-align: center;
  -webkit-box-flex: 1;
  -ms-flex: 1 100%;
  flex: 1 100%;
}

.additional-info__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 22px 24px;
  line-height: 19px;
  border-bottom: 1px solid #f2f2f2;
  height: 64px;
  color: #555555;
}

.additional-info__header img {
  cursor: pointer;
  margin-right: 18px;
}

.additional-info__header .close {
  font-size: 24px;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  right: 24px;
  position: absolute;
  cursor: pointer;
  color: #555555;
}

.additional-info__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-y: auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.additional-info__body .item-broadcast-log {
  padding: 24px;
  border-bottom: 1px solid #f2f2f2;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.additional-info__body .item-active-session {
  padding: 16px;
  border: 1px solid #ececec;
  border-radius: 8px;
}

.additional-info__body .item-active-session-wag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 16px;
}

.additional-info__body .item-active-session-wag p {
  font-size: 14px;
  font-weight: 600;
  line-height: 19.6px;
  letter-spacing: 0.005em;
  color: #0a0a0a;
}

.additional-info__body .item-active-session-wag small {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.005em;
  color: #a0a0a0;
}

.additional-info__body .item-active-session-wag .material-icons {
  text-transform: none;
  font-size: 24px;
  cursor: pointer;
}

.item-active-session h3 {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.005em;
  margin-block: 18px;
}

.item-active-session .description {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  color: #007bff;
}

.item-active-session .description div:nth-child(1) {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.005em;
  color: #565656;
}

.item-active-session .description .date {
  font-size: 14px;
  font-weight: 600;
  line-height: 19.6px;
  letter-spacing: 0.005em;
}

.item-active-session .description .remaining-time {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.005em;
}

.additional-info__body .info__content {
  line-height: 25px;
  margin-top: 8px;
}

.additional-info-form label {
  color: #333;
  margin-bottom: 8px;
}

.additional-info-form input,
.additional-info-form textarea {
  margin-bottom: 15px;
}

.additional-info-form {
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 14px;
}

.additional-info-form__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-top: 10px;
  margin-bottom: 15px;
}

.additional-info-form__actions button {
  margin-left: 15px;
  width: 90px;
  padding-left: 10px;
  padding-right: 10px;
}

.additional-info-form__actions button:nth-child(1) {
  background: #fff;
  border: 1px solid #27b199;
  color: #27b199;
}

.additional-info-form__actions button:nth-child(2) {
  background: #27b199;
  color: #fff;
}

.additional-info-data {
  font-size: 14px;
  position: relative;
  border-bottom: 1px solid #f4f4f4;
  -webkit-box-flex: 1;
  -ms-flex: 1 100%;
  flex: 1 100%;
}

.additional-info-data > div {
  padding: 20px;
}

.additional-info-data:hover,
.additional-info-data:hover .additional-info-data__actions {
  background: #f9f9f9;
}

.additional-info-data h3 {
  margin-bottom: 15px;
}

.additional-info-data h3,
.additional-info-data:hover h3 {
  text-transform: capitalize;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.additional-info-data:hover h3 {
  width: 117px;
}

.additional-info-data > div > div:nth-child(2) {
  white-space: pre-line;
  word-break: break-word;
}

.additional-info-data p {
  line-height: 21px;
}

.additional-info-data__actions {
  position: absolute;
  top: 25px;
  right: 15px;
  display: none;
  background: #fff;
}

.additional-info-data:hover .additional-info-data__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.additional-info-data__actions button {
  padding: 0;
  border: 0;
  background: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 11px;
  cursor: pointer;
}

.additional-info-data__actions button:nth-child(1) {
  color: #2f80ed;
}

.additional-info-data__actions button:nth-child(2) {
  color: #f55757;
}

.additional-info-data__actions i {
  font-size: 16px;
  margin-right: 5px;
}

/* End of Additional Info CSS */
/* Contact CSS */
.additional-info-btn .badge-info.link-contact.active {
  margin: 0px;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--c-primary);
  text-transform: capitalize;
}

.additional-info-btn .badge-info.link-contact.error {
  margin: 0px;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: #eb5757;
  text-transform: capitalize;
}

/* End Contact CSS */

/* Customer Properties CSS -> Extends Additional Info CSS  */
.customer-properties-form {
  padding: 20px;
}

.customer-properties-form:hover {
  background: #f9f9f9;
}

.customer-properties-form {
  font-size: 14px;
  position: relative;
  border-bottom: 1px solid #f4f4f4;
  -webkit-box-flex: 1;
  -ms-flex: 1 100%;
  flex: 1 100%;
}

.customer-properties-form .label-form {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  letter-spacing: -0.0045em;
  color: #bdbdbd;
  margin-bottom: 12px;
}

.customer-properties-form .label-form-value {
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  color: #555555;
  margin-bottom: 18px;
}

.customer-properties-form .input-properties {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 150%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  letter-spacing: -0.006em;
  color: #333333;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 90%;
  flex: 0 0 90%;
  margin-right: 12px;
}

.customer-properties-form a:hover .tooltip {
  display: block;
  top: inherit;
  left: 79%;
  right: unset;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  margin-top: 17px;
  z-index: 1000;
  width: 41%;
}

.customer-properties-form a:hover .tooltip.top-center::after {
  -webkit-transform: translateX(141%);
  -ms-transform: translateX(141%);
  transform: translateX(141%);
}

.d-none {
  display: none;
}

/* End of Customer Properties CSS */
.conversation-info .conversation-info__bottom ul li .input-group,
.conversation-info .conversation-info__bottom ul li .text-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.conversation-info .conversation-info__bottom ul li .input-group input {
  height: 27px;
  padding: 5px 0;
  border: none;
  border-bottom: 1px solid #dedede;
  font-size: 16px;
}

.conversation-info .conversation-info__bottom ul li .input-group input.notes {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.conversation-info .conversation-info__bottom ul li .input-group button,
.conversation-info .conversation-info__bottom ul li .text-group button {
  -webkit-box-flex: 0;
  -ms-flex: 0 25px;
  flex: 0 25px;
  height: 25px;
  margin-left: 3px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.conversation-info .conversation-info__bottom ul li .text-group p {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 25px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-info .conversation-info__bottom ul li .text-group .notes {
  max-height: 120px;
  overflow-y: auto;
  white-space: pre;
}

.conversation-info .conversation-info__bottom ul li .text-group button {
  color: #6d6a6a;
}

.badge {
  min-width: 20px;
  height: 20px;
  width: 20px;
  background: transparent;
  -webkit-box-flex: 0;
  -ms-flex: 0 20px;
  flex: 0 20px;
}

.badge.badge_fb {
  background: url("/img/messenger_flag_chat_list.svg") no-repeat center;
  background-size: 20px;
}

.badge.badge_line {
  background: url("/img/line_flag_chat_list.svg") no-repeat center;
  background-size: 20px;
}

.badge.badge_qiscus {
  background: url("/img/qiscus_flag_chat_list.svg") no-repeat center;
  background-size: 20px;
}

.badge.badge_telegram {
  background: url("/img/telegram_flag_chat_list.svg") no-repeat center;
  background-size: 20px;
}

.badge.badge_wa,
.badge.badge_wabox,
.badge.badge_waca {
  background: url("/img/whatsapp_flag_chat_list.svg") no-repeat center;
  background-size: 20px;
}

.badge.badge_custom {
  background: url("/img/custom_channel_badge.svg") no-repeat center;
  background-size: 20px;
}

/* custom room sdk */

@media only screen and (max-width: 1376px) {
  .qcw-container--wide .qcw-comment__message {
    max-width: 360px;
  }
}

.qcw-upload-file .progress-bar {
  width: 100%;
}

.outside-channel
  .qcw-comments
  li:hover
  .hover-effect
  .qcw-comment__more-wrapper,
.outside-channel
  .qcw-comment-container:not(.qcw-comment--cust):not(.comment--me)
  .reply-btn-wrapper {
  left: -53px;
}

.outside-channel .qcw-comments li:hover .hover-effect .qcw-comment__more {
  display: none;
}

.outside-channel .qcw-comments li:hover .hover-effect .reply-btn-wrapper {
  right: -53px;
}

.outside-channel .qcw-comments li:hover .hover-effect i.reply-btn {
  display: none;
}

.qcw-chat-wrapper {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
}

.qcw-comment .qcw-avatar img {
  width: 36px !important;
}

.comment--me .qcw-comment__message .comment-text .qcw-comment__content a {
  color: #ffffff !important;
}

.comment--me
  .qcw-comment__message
  .comment-text
  .reply-wrapper--me
  .qcw-comment__content
  a {
  color: var(--c-primary) !important;
}

.qcw-comment--carousel .comment--me .qcw-comment__message {
  background: transparent !important;
  color: #39393a;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.qcw-comment .qcw-comment__message .qcw-comment__info {
  border-bottom: 1px dashed #828282;
  padding-bottom: 3px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.comment--me .qcw-comment__message .qcw-comment__info {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.7);
}

.qcw-comment .qcw-comment__message .qcw-comment__username {
  width: auto;
  max-width: 260px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.qcw-comment .qcw-comment__message .qcw-comment__time {
  font-weight: 300;
}

.qcw-comment .comment__card--container {
  color: #444;
}

.comment__card--container .comment__card--image .qcw-image-container {
  width: auto;
  min-width: 210px;
}

.comment__card--container .comment__card--description {
  white-space: pre-wrap;
}

.qcw-comment__time {
  color: #898989;
  font-size: 11px;
}

.comment--me .qcw-comment__message .reply-wrapper--me a {
  color: #27b69d;
}

.comment-text .reply-wrapper .image-loader {
  overflow: inherit !important;
  width: auto !important;
  height: auto !important;
}

.comment-text .qcw-comment__content a,
.comment-text .qcw-comment__content a:visited {
  color: #3333ff;
  text-decoration: underline;
}

.reply-wrapper .reply-caption-container {
  height: auto !important;
}

.comment--parent.comment--me .qcw-comment__message:after {
  border-top-color: transparent;
  background-color: #32b59d;
  -webkit-mask: url("/img/tip.svg") no-repeat center;
  mask: url("/img/tip.svg") no-repeat center;
  -webkit-transform: rotate(180deg) scaleX(-1);
  -ms-transform: rotate(180deg) scaleX(-1);
  transform: rotate(180deg) scaleX(-1);
  top: -2px;
  right: -7px;
}

.comment--parent .qcw-comment__message:after {
  border-top-color: transparent;
  background-color: #ffffff;
  -webkit-mask: url("/img/tip.svg") no-repeat center;
  mask: url("/img/tip.svg") no-repeat center;
  -webkit-transform: rotate(175deg);
  -ms-transform: rotate(175deg);
  transform: rotate(175deg);
  top: -2px;
  left: -7px;
}

.qcw-comment-container.comment--me .qcw-avatar {
  display: block;
  left: auto;
}

.qcw-comment-container .qcw-comment .qcw-comment__message.message__broadcast_button,
.qcw-comment-container_carousel {
  margin-bottom: 16px;
}


.qcw-comment-container .qcw-comment .qcw-comment__message.message__bot,
.qcw-comment-container:not(.qcw-comment--cust):not(.comment--me)
  .qcw-comment__message:not(.sticker).message__bot,
.qcw-comment-container.qcw-comment--carousel:not(.qcw-comment--cust):not(
    .comment--me
  )
  .qcw-comment
  .qcw-comment__message:not(.sticker).message__bot {
  background: #6a6a6a !important;
  border-color: #6a6a6a !important;
  color: #fff;
  margin-bottom: 16px;
}

.message__bot .bot__indicator {
  position: absolute;
  bottom: -25px;
  right: 8px;
}

.qcw-comment-container .qcw-comment .qcw-comment__message.message__bot .tip,
.qcw-comment-container:not(.qcw-comment--cust):not(.comment--me)
  .qcw-comment__message:not(.sticker).message__bot
  .tip {
  border-left-color: #6a6a6a !important;
}

.message__bot .comment-text:after {
  content: " ";
  width: 38px;
  height: 38px;
  display: block;
  position: absolute;
  bottom: -23px;
  right: 8px;
  background: url(/img/bot.svg);
}

.qcw-image-container img {
  width: auto;
}

.widget-chat-wrapper {
  border-left: 1px solid #d8d8d8;
  border-right: 1px solid #d8d8d8;
}

ul#messages__comments {
  background: #fafafa;
  overflow: auto;
  overflow-y: auto;
  -webkit-box-shadow: none;
  box-shadow: none;
}

ul#messages__comments::-webkit-scrollbar {
  width: 8px;
  background: #fafafa;
}

ul#messages__comments::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #fafafa;
}

ul#messages__comments:hover::-webkit-scrollbar-thumb {
  background-color: #e8e8e8;
}

ul#messages__comments li {
  margin-bottom: 7px;
}

.qcw-form-actions {
  left: auto;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  height: 49px;
}

.qcw-form-actions li {
  background: var(--c-primary) !important;
  color: #ffffff !important;
  border-radius: 50%;
  margin: 0 1px 0 2px;
}

.qcw-form-actions li .qc-icon {
  fill: #ffffff !important;
}

.qcw-form-actions li i {
  color: #ffffff !important;
}

.qcw-form-actions li:hover,
.qcw-form-actions li:active {
  background: #2ea196 !important;
}

.qcw-form-actions li svg {
  fill: #ffffff;
}

.qcw-form-actions li:nth-child(1) {
  margin-right: 7px;
}

.qcw-form-actions li:nth-child(2) {
  margin-right: 10px;
}

.qcw-comment-form {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 96px;
  flex: 0 0 96px;
  background: var(--c-gray) !important;
}

.qcw-comment-form textarea {
  margin-right: 16px;
  padding: unset;
  -webkit-box-shadow: none;
  box-shadow: none;
  width: auto;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}

.app-chat-area .qcw-header {
  height: 60px;
}

.app-chat-area .qcw-header .qcw-header__main {
  margin: 0 29px;
  line-height: 35px;
  overflow: hidden;
  height: 35px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: normal;
}

.qcw-room-avatar {
  height: 36px;
  width: 36px;
  margin: 0 11px;
  padding: 0;
  -o-object-fit: cover;
  object-fit: cover;
}

.qcw-container {
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: "Inter", sans-serif;
  border-radius: 0;
}

#qcw-app {
  font-family: "Inter", sans-serif;
}

.qcw-attachment__actions.qcw-attachment__actions--active {
  right: 58px;
}

.qcw-attachment__actions.qcw-attachment__actions--active li:hover {
  background: #b7b7b7;
}

.app-chat-area .qcw-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.app-chat-area .qcw-header .qcw-header__main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.app-chat-area .qcw-header .qcw-header__actions {
  -webkit-box-flex: 0;
  -ms-flex: 0 270px;
  flex: 0 270px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.app-chat-area .qcw-header .qcw-header__actions a.link {
  padding: 0;
  color: var(--c-primary);
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-decoration: none;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.app-chat-area .qcw-header .qcw-header__actions a.link.menu {
  -webkit-box-flex: 0;
  -ms-flex: 0 30px;
  flex: 0 30px;
}

.app-chat-area .qcw-header .qcw-header__actions a.link.menu:nth-child(4) {
  margin-right: 6px;
}

.app-chat-area .qcw-header .qcw-header__actions a.link.menu i {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: unset;
  transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -webkit-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
}

.app-chat-area .qcw-header .qcw-header__actions a.link.menu i:hover {
  opacity: 0.7;
}

.app-chat-area .qcw-header .qcw-header__actions a.link.bot-header {
  display: none;
}

.app-chat-area .qcw-header .qcw-header__actions a.link.bot-header.bot-enable {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 70px;
  flex: 0 70px;
}

.app-chat-area
  .qcw-header
  .qcw-header__actions
  a.link.bot-header.bot-enable
  > .switch.switch:before,
.app-chat-area
  .qcw-header
  .qcw-header__actions
  a.link.bot-header.bot-enable
  > .switch.switch-on:before,
.app-chat-area
  .qcw-header
  .qcw-header__actions
  a.link.bot-header.bot-enable
  > .switch.switch--on:before {
  width: 20px;
  min-width: 20px;
  height: 20px;
}

.app-chat-area .qcw-header .qcw-header__actions a.link.mark-resolved {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  border: 1px solid transparent;
  border-radius: 15px;
  margin-right: 12px;
  margin-left: 12px;
  padding: 2px 16px;
  background-color: var(--c-primary);
  color: #ffffff;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
  display: none;
}

.app-chat-area
  .qcw-header
  .qcw-header__actions
  a.link.mark-resolved.unresolved {
  visibility: visible;
  opacity: 1;
  display: block;
}

.app-chat-area .qcw-header .qcw-header__actions a.link.wa {
  -webkit-box-flex: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  border-radius: 64px;
  border: 1px solid var(--c-primary);
  padding: 2px 16px;
}

.app-chat-area .qcw-header .qcw-header__actions a.link.wa.hidden {
  display: none !important;
}

.app-chat-area .qcw-header .qcw-header__actions a.link label {
  margin: 0 10px;
}

.switch {
  width: 44px;
  margin-left: 6px;
}

#menu-assign {
  width: 180px;
  right: 0;
  left: auto;
  padding: 8px 0;
  margin-top: -5px;
  z-index: 2;
}

#menu-assign:after {
  right: 20px;
}

#menu-assign.clear-position {
  right: 0;
}

#menu-assign ul {
  padding: 0;
  margin: 0;
}

#menu-assign ul li {
  font-size: 14px;
  padding: 12px 20px;
  height: auto;
  line-height: 16px;
}

#menu-assign ul li a {
  text-decoration: none;
  color: #333333;
  font-weight: 400;
  -webkit-transition: color 0.3s ease-out;
  -o-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
}

#menu-assign ul li a.act-contact,
#menu-assign ul li a.act-contact:hover {
  color: var(--c-notif-error, #ef4c00) !important;
}

#menu-assign ul li:hover {
  background: transparent;
}

#menu-assign ul li a:hover,
#menu-assign ul li a:focus {
  color: var(--c-primary);
  background: none;
}

#menu-assign fieldset {
  border: 0;
  border-top: 1px solid #e8e8e8;
  padding: 0;
}

#menu-assign legend {
  padding: 10px;
  padding-left: 5px;
  font-size: 10px;
  line-height: 12px;
}

#menu.menu-panel {
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  -webkit-box-shadow: -5px 30px 40px rgba(105, 105, 105, 0.15);
  box-shadow: -5px 30px 40px rgba(105, 105, 105, 0.15);
  border-radius: 0;
}

#menu.menu-panel.open {
  z-index: 1000;
}

#menu.menu-panel ul {
  margin: 0;
}

#menu.menu-panel .filter-list-channel,
#menu.menu-panel .filter-list-agent {
  padding-left: 0;
}

#menu.menu-panel .filter-list-channel.inactive-bot {
  margin-bottom: 32px;
}

#menu.menu-panel .menu-panel-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 64px;
  padding-left: 24px;
  padding-right: 24px;
  background: rgba(104, 200, 183, 1);
  color: #ffffff;
}

#menu.menu-panel .menu-panel-body {
  height: calc(100% - 128px);
  padding: 24px;
  overflow-y: auto;
}

#menu.menu-panel .menu-panel-body h4 {
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  text-transform: capitalize;
  color: #828282 !important;
  margin: 0 0 18px 0;
  padding: 0;
}

.type-filter {
  margin-bottom: 18px;
}

#menu.menu-panel .menu-panel-body .type-filter .material-icons {
  position: absolute;
  right: 24px;
  width: 40px;
  height: 40px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

#menu.menu-panel .menu-panel-body .selected-filter {
  cursor: pointer;
  height: 40px;
  border-radius: 4px;
  border: 1px solid rgb(196, 196, 196);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 18px;
  padding-right: 24px;
  font-size: 14px;
}

#menu.menu-panel .menu-panel-body .selected-filter:empty:not(:focus):before {
  content: attr(placeholder);
  color: #c4c4c4;
}

#menu.menu-panel ul li {
  height: auto;
  line-height: 17px;
  position: relative;
  padding: 0;
}

#menu.menu-panel ul.filter-list-channel > li,
#menu.menu-panel ul.filter-list-agent > li {
  font-weight: 600;
  margin-bottom: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#menu.menu-panel ul.filter-list-channel > li {
  font-weight: 700;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.menu-panel ul:not(.filter-list-channel) li input[type="checkbox"] {
  right: 0;
}

#menu.menu-panel ul.filter-list-channel > li .material-icons,
#menu.menu-panel ul.filter-list-agent > li .material-icons {
  font-size: 24px;
}

#menu.menu-panel ul.filter-list-channel > li .checkbox + label,
#menu.menu-panel ul.filter-list-agent > li .checkbox + label {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  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;
  margin-left: 4px;
}

#menu.menu-panel ul.filter-list-channel > li .checkbox + label {
  -webkit-box-flex: unset;
  -ms-flex: unset;
  flex: none;
  margin-left: 0px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
}

#menu.menu-panel ul.filter-list-channel > li .checkbox + label:before,
#menu.menu-panel ul.filter-list-agent > li .checkbox + label:before {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  margin-right: 0;
  width: 20px;
  height: 20px;
}

#menu.menu-panel ul.filter-list-channel > li .checkbox + label:before {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
  margin-right: 8px;
}

#menu.menu-panel ul.filter-list-agent > li .checkbox:checked + label:after {
  left: auto;
  right: 13px;
  margin-top: -1px;
}

/* #menu.menu-panel ul.filter-list-channel>li label.unlist {
  margin-left: 24px;
} */

#menu.menu-panel ul.list-spec-channel {
  padding: 0;
  margin-top: 18px;
  margin-left: 32px;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
}

#menu.menu-panel ul.list-spec-channel.resolve {
  margin: 0;
}

#menu.menu-panel ul.list-spec-channel > li:not(:last-child) {
  border-bottom: none;
  margin-bottom: 18px;
}

#menu.menu-panel ul.list-spec-channel > li > label {
  font-weight: normal;
  color: #565656;
}

#menu.menu-panel .menu-action {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  -webkit-box-shadow: 0px -6px 13px 0px #a6a6a626;
  box-shadow: 0px -6px 13px 0px #a6a6a626;
  padding: 18px;
  gap: 16px;
}

.agent-container {
  -webkit-box-flex: 0;
  -ms-flex: 0 300px;
  flex: 0 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
  height: 100%;
}

.agent-container .agent-empty {
  padding: 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
  color: #666;
  font-size: 14px;
  line-height: 200%;
}

.agent-container .agent-list__header {
  padding: 17px;
  background: #39c4b1;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  height: 64px;
  font-size: 16px;
  opacity: 0.9;
  z-index: 3;
  line-height: 36px;
}

.agent-container .agent-list__search {
  padding: 16px 18px;
  position: relative;
}

.agent-container .agent-list__search > svg {
  position: absolute;
  top: 30px;
  left: 40px;
}

.agent-container .agent-list__search .input-search-agent {
  border-radius: 6px;
  padding: 12px 16px 12px 16px;
  padding-left: 48px;
  -webkit-box-shadow: 0px 7px 17px 0px #33333312;
  box-shadow: 0px 7px 17px 0px #33333312;
}

.agent-container
  .agent-list__search
  .input-search-agent::-webkit-input-placeholder {
  font-weight: 300;
}

.agent-container .agent-list__search .input-search-agent::-moz-placeholder {
  font-weight: 300;
}

.agent-container .agent-list__search .input-search-agent:-ms-input-placeholder {
  font-weight: 300;
}

.agent-container
  .agent-list__search
  .input-search-agent::-ms-input-placeholder {
  font-weight: 300;
}

.agent-container
  .agent-list__search
  .input-search-agent::-webkit-input-placeholder {
  font-weight: 300;
}

.agent-container .agent-list__search .input-search-agent::-moz-placeholder {
  font-weight: 300;
}

.agent-container .agent-list__search .input-search-agent:-ms-input-placeholder {
  font-weight: 300;
}

.agent-container
  .agent-list__search
  .input-search-agent::-ms-input-placeholder {
  font-weight: 300;
}

.agent-container
  .agent-list__search
  .input-search-agent::-webkit-input-placeholder {
  font-weight: 300;
}

.agent-container .agent-list__search .input-search-agent::-moz-placeholder {
  font-weight: 300;
}

.agent-container .agent-list__search .input-search-agent:-ms-input-placeholder {
  font-weight: 300;
}

.agent-container
  .agent-list__search
  .input-search-agent::-ms-input-placeholder {
  font-weight: 300;
}

.agent-container
  .agent-list__search
  .input-search-agent::-webkit-input-placeholder {
  font-weight: 300;
}

.agent-container .agent-list__search .input-search-agent::-moz-placeholder {
  font-weight: 300;
}

.agent-container .agent-list__search .input-search-agent:-ms-input-placeholder {
  font-weight: 300;
}

.agent-container
  .agent-list__search
  .input-search-agent::-ms-input-placeholder {
  font-weight: 300;
}

.agent-container .agent-list__search .input-search-agent::placeholder {
  font-weight: 300;
}

.agent-container ul {
  list-style: none;
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100% - 135px);
  padding: 0 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}

.agent-container ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  /* align-items: center; */
  cursor: pointer;
  color: #39393a;
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 8px;
}

.agent-container ul li:hover {
  background-color: #fafafa;
}

.agent-container ul li.empty-state {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: default;
}

.agent-container ul li.empty-state:hover {
  background-color: transparent;
}

.agent-container ul li .agent-avatar__img {
  position: relative;
  /* min-width: 80px;
  width: 80px;
  height: 80px; */
  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; */
  /* -ms-flex-line-pack: center; */
  /* align-content: center; */
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /* background-size: 50px;
  border-radius: 50%; */
  /* text-align: center; */
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ececec;
}

.agent-container ul li .agent-avatar__img img {
  -webkit-box-flex: 0;
  -ms-flex: 0 32px;
  flex: 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #c4c4c4;
}

.agent-container ul li .agent-avatar__img p {
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.005em;
  color: #565656;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.agent-container ul li .customer-count {
  font-size: 9px;
  padding: 8px 4px;
  border-radius: 8px;
  color: var(--c-primary);
  background: #f1f9ef;
  font-weight: 500;
  line-height: 13.5px;
  letter-spacing: 0.005em;
}

.agent-container ul li .agent-detail__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /* -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: transparent;
  padding: 10px 0;

  border-bottom: 1px solid #d8d8d8;
  width: calc(100% - 80px); */
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #ececec;
}

.agent-container ul li .agent-detail__info .agent-info {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 16px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(100% - 50px);
  position: relative;
}

.agent-container ul li .agent-detail__info .agent-info__text p {
  font-size: 9px;
  font-weight: 500;
  line-height: 13.5px;
  letter-spacing: 0.005em;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.agent-container ul li .agent-detail__info .agent-info a {
  color: #000000;
  text-decoration: none;
  text-transform: capitalize;
}

.agent-info a,
.agent-info .agent-roles {
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.agent-container ul li .agent-detail__info .agent-info .customer-info {
  color: var(--c-primary);
  font-size: 10px;
}

.agent-container ul li .agent-detail__info .agent-info .agent-roles {
  font-size: 12px;
  color: black;
  padding: 1px 0px;
}

.agent-container ul li .agent-detail__info .agent-status {
  width: 50px;
  height: 50px;
  background-size: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0;
}

.agent-container ul li .agent-detail__info .agent-status .check {
  height: 50px;
  width: 50px;
  background: transparent;
  margin: 0;
}

.agent-container ul li.active {
  border: 1px solid var(--company-base-color, #27b199);
  background-color: #fafafa;
}

.agent-container .agent-list__footer {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: #ffffff;
  color: #333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  font-size: 16px;
  position: fixed;
  width: 300px;
  opacity: 1;
  z-index: 2;
  bottom: 0;
  left: auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 8px;
  -webkit-box-shadow: 0px -4px 8px 0px #00000014;
  box-shadow: 0px -4px 8px 0px #00000014;
}

.agent-container .agent-list__footer .btn {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 36px;
  padding: 7px 30px;
  font-weight: 400;
  text-decoration: none;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.agent-container .agent-list__footer .btn.btn-cancel {
  background: transparent;
  border: 1px solid var(--company-base-color, #27b199);
  color: var(--company-base-color, #27b199);
  border-radius: 24px;
}

.agent-container .agent-list__footer .btn.btn-assign {
  color: #ffffff;
  background: var(--c-primary);
  border-radius: 24px;
}

.agent-container .agent-list__footer .btn.btn-remove {
  color: #ffffff;
  background: #eb5757;
  border-radius: 24px;
}

.agent-container .agent-list__footer .btn.btn-assign.disabled {
  opacity: 0.7;
  cursor: default;
}

/* Participants */

.conversation-bottom__participants ul {
  list-style: none;
  margin: 0;
}

.conversation-info .conversation-bottom__participants ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0;
  margin: 0;
  color: #39393a;
  margin-bottom: 0;
}

.conversation-bottom__participants ul li .participants-avatar__img {
  position: relative;
  width: 36px;
  height: 36px;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
  background-color: #c4c4c4;
  border: 2px solid #aeaeae;
  padding: 2px;
}

.conversation-bottom__participants ul li .participants-avatar__img.online {
  border-color: #26d142;
}

.conversation-bottom__participants
  ul
  li
  .participants-avatar__img
  .dot-indicator {
  background-color: #aeaeae;
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 7px;
  border: 2px solid #fff;
}

.conversation-bottom__participants
  ul
  li
  .participants-avatar__img
  .dot-indicator.online {
  background-color: #26d142;
}

.conversation-bottom__participants ul li .participants-avatar__img img {
  -webkit-box-flex: 0;
  -ms-flex: 0 50px;
  flex: 0 50px;
  width: 50px;
  border-radius: 50%;
}

.conversation-bottom__participants ul li .participants-detail__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: transparent;
  -webkit-box-align: center;
  -ms-flex-align: center;
  /* align-items: center; */
  border-bottom: 1px solid #f2f2f2;
  margin-left: 10px;
  /* -ms-flex-wrap: wrap; */
  /* flex-wrap: wrap; */
  max-width: calc(100% - 48px);
  /* height: 60px; */
  padding: 10px 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
}

.conversation-bottom__participants ul li .participants-detail__info a {
  color: #000000;
  text-decoration: none;
  font-size: 0.875rem;
  max-width: 200px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-flex: 1;
  -ms-flex: 1 100%;
  flex: 1 100%;
  text-transform: capitalize;
}

.conversation-bottom__participants ul li .participants-detail__info > span {
  text-transform: lowercase;
  padding: 0px;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  max-width: 175px;
  font-size: 12px;
  line-height: 18px;
}

.conversation-list li.conversation-empty__state,
.conversation-empty__state {
  position: relative;
  color: #999999;
  font-size: 14px;
  line-height: 21px;
  font-weight: normal;
  padding: 15px;
  text-align: center;
  overflow: hidden;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: default;
}

.conversation-list li.conversation-empty__state:hover {
  background-color: transparent;
}

.conversation-list li.conversation-empty,
.conversation-empty {
  position: absolute;
  width: 100%;
  color: #999999;
  font-size: 14px;
  padding: 15px;
  text-align: center;
  overflow: hidden;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: default;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.conversation-list li.conversation-empty:hover {
  background-color: transparent;
}

.search {
  padding: 0 18px;
  border-bottom: 1px solid #ddd;
  background-color: #ffffff;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.search.serve-other-customer {
  width: 100%;
  height: 72px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 0;
  border-top: 1px solid #e8e8e8;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.search > div {
  width: 100%;
}

.search input {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.search.serve-other-customer .filter-room .btn-wrapper {
  width: 60%;
}

@media only screen and (min-width: 1024px) {
  .inbox-container .qcw-container--wide .qcw-comment__message {
    max-width: 400px !important;
  }
}

.qcw-comment--carousel .comment--me .qcw-comment__message {
  color: #444444 !important;
}

.qcw-comment--carousel
  .qcw-comment__message.message__bot.carousel
  .qcw-comment__state,
.qcw-comment--carousel
  .qcw-comment__message.message__bot.carousel
  .qcw-comment__state.qcw-comment__state--read {
  left: -22px !important;
}

.qcw-image-modal__wrapper .qcw-image-container img {
  width: 100%;
  max-height: 100%;
}

.qcw-message-info__comment-text img {
  max-height: 70px;
}

.inbox-container .qcw-message-info__header {
  height: 64px;
}

@media only screen and (max-width: 767px) {
  .qcw-image-container img {
    width: 100%;
  }

  .conversation-list,
  .app-chat-area {
    position: absolute;
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;
    width: 100%;
    height: 100%;
  }

  .conversation-list {
    top: 0;
  }

  .conversation-list.show {
    z-index: 2;
    background-color: #ffffff;
  }

  .app-chat-area {
    -webkit-box-shadow: 0 -7px 15px rgba(0, 0, 0, 0.3);
    box-shadow: 0 -7px 15px rgba(0, 0, 0, 0.3);
    bottom: 0;
    top: auto;
  }

  .conversation-info,
  .conversation-info.show {
    display: none;
  }

  .blank-room img {
    height: 180px;
  }

  .blank-room p {
    font-size: 13px;
  }
}

.room-name {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 16px;
}

.room-name a {
  color: #6d6a6a;
}

.input-room-name {
  width: calc(100% - 24px);
  text-transform: capitalize;
  margin-right: 6px;
  margin-bottom: 6px;
}

.qcw-user-display-name {
  text-transform: capitalize;
  max-width: 240px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
}

/* CSS for predefined message */

#predefined-message .modal__header {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: var(--c-primary);
}

#predefined-message a {
  color: var(--c-primary);
  text-decoration: none;
}

#predefined-message a:hover {
  text-decoration: underline;
}

#predefined-message main.modal__content {
  margin-bottom: 0;
  width: 440px;
}

#predefined-message .modal__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 45px;
}

#predefined-message .barcode-text {
  text-align: center;
}

#predefined-message iframe {
  width: 100%;
  height: 330px;
  margin: 20px auto 0;
}

#predefined-message .modal__btn-primary {
  border-radius: 16px;
}

table.table {
  width: 100%;
  border-collapse: collapse;
}

table.table td,
table.table th {
  padding: 10px;
}

table.table tbody td {
  font-size: 12px;
}

table.table tbody td.predefined-msg-action {
  text-align: right;
}

table.table tr:nth-child(even) {
  background: #f2f2f2;
}

table.table thead {
  border-bottom: 1px solid #f2f2f2;
}

table.table thead th {
  font-size: 12px;
  font-weight: normal;
  color: #bdbdbd;
  text-align: left;
}

table.table tfoot td {
  font-size: 14px;
}

table tr th.center,
table tr td.center {
  text-align: center;
}

table tr th.right,
table tr td.right {
  text-align: right;
}

table tr td.row-badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

table tr td a.btn-edit,
table tr td a.btn-delete {
  text-decoration: none;
}

table tr td a.btn-edit {
  color: #2f80ed;
}

table tr td a.btn-delete {
  margin-left: 20px;
  color: #eb5757;
}

table tr td a.btn-send {
  color: #2f80ed;
  font-size: 10pt;
}

.predefined-img-thumb {
  width: 70px;
  height: 55px;
  -o-object-fit: cover;
  object-fit: cover;
}

.predefined-img {
  float: left;
  margin-right: 5px;
}

.pedefined-detail {
  float: left;
  width: calc(100% - 75px);
}

.pedefined-detail b {
  font-size: 10pt;
}

.pedefined-detail p {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  height: 1.5em;
  white-space: nowrap;
  max-width: 290px;
}

#list-predefined-message {
  vertical-align: top;
}

ul.autocomplete-list {
  position: absolute;
  width: 100%;
  background: #fff;
  list-style: none;
  border-radius: 12px;
  border: solid 1px #bfbfbf;

  max-width: calc(100% - 26px);
  max-height: 400px;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1000;
}

ul.autocomplete-list .autocomplete-header {
  padding: 16px 16px 4px 16px;
  position: sticky;
  top: 0;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  z-index: 99;
}

ul.autocomplete-list .autocomplete-list__title {
  color: #0a0a0a;
}

ul.autocomplete-list .autocomplete-list__title,
ul.autocomplete-list .autocomplete-list__subtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

ul.autocomplete-list .autocomplete-list__subtitle {
  font-size: 12px;
}

ul.autocomplete-list li {
  position: relative;
  line-height: 1.7em;
  font-size: 14px;
  padding-block: 12px;
  padding-inline: 16px;

  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}

ul.autocomplete-list li:not(:last-child)::after {
  position: absolute;
  bottom: 0;
  content: "";
  height: 1px;
  background-color: #ececec;
  left: 16px;
  right: 16px;
}

ul.autocomplete-list li > div:first-child {
  color: #a0a0a0;
  font-size: 12px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

ul.autocomplete-list li > div:last-child {
  color: #565656;
  font-weight: 500;
  font-size: 12px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

ul.autocomplete-list li div {
  -webkit-box-flex: 1;
  -ms-flex: 1 60%;
  flex: 1 60%;
  word-break: break-word;
}

/* ul.autocomplete-list li.active {
  background: #F1F9EF;
} */

ul.autocomplete-list li:is(.template-command):hover {
  background: #f1f9ef;
}

.title-room-tags {
  margin-bottom: 10px;
}

.input-room-tags {
  margin-bottom: 15px;
}

.input-room-tags > a {
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: var(--c-primary);
}

.remove-tag i.material-icons {
  font-size: 13px;
}

ul.suggest-tags,
ul.list-items {
  position: absolute;
  top: 40px;
  z-index: 10;
  background: #fff;
  width: 100%;
  -webkit-box-shadow: 0px 8px 24px rgba(51, 51, 51, 0.07);
  box-shadow: 0px 8px 24px rgba(51, 51, 51, 0.07);
  border-radius: 6px;
  max-height: 220px;
  overflow: auto;
  margin-bottom: 24px;
}

ul > li .input-room-tags ul.suggest-tags li {
  margin-bottom: 0;
  text-transform: capitalize;
  padding: 0;
}

ul > li .input-room-tags ul.suggest-tags li a {
  line-height: 21px;
  padding: 16px 24px;
  color: #555555;
  text-decoration: none;
  display: block;
  word-break: break-word;
}

.qs-room-tags {
  background-color: #fafafa;
  border-radius: 6px;
  gap: 12px;
  padding: 6px 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #bfbfbf;
}

.qs-room-tags .qs-room-tags-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  letter-spacing: 0.005em;
  color: #0a0a0a;
  border-right: 1px solid #bfbfbf;
  padding-right: 10px;
}

.qs-room-tags .qs-room-tags-remove {
  color: #0a0a0a;
  cursor: pointer;
  margin-bottom: -5px;
  margin-left: -5px;
}

.menu-panel ul.list-items li a:hover,
.menu-panel ul.list-items li a:focus,
ul > li .input-room-tags ul.suggest-tags li a:hover,
ul > li .input-room-tags ul.suggest-tags li a.active {
  background: #fafafa;
}

ul.list-items {
  padding: 0;
  width: 308px;
  height: auto;
  top: 100px;
  border-radius: 0;
}

#menu.menu-panel ul.list-items li.items {
  padding: 0;
}

ul.list-items li a,
ul.list-items li a:hover,
ul.list-items li a:focus {
  padding: 16px;
  color: #555555;
  display: block;
}

.no-margin {
  margin: 0;
}

.app-container {
  background: -o-linear-gradient(top, #6ac9b8, #ffffff);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#6ac9b8),
    to(#ffffff)
  );
  background: linear-gradient(to bottom, #6ac9b8, #ffffff);
}

.conversation-list-item {
  overflow: hidden;
  height: 100vh;
}

.agent-availability {
  /* position: absolute;
  top: 10px;
  right: 20px; */
  background-color: #a6b2bc;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 2;
}

.agent-availability.available {
  background-color: #64d581;
}

@media (max-width: 1366px) {
  .qcw-message-info {
    -ms-flex: 1 0 280px;
    -webkit-box-flex: 1;
    flex: 1 0 280px;
  }
}

label.container {
  line-height: 1.6;
  line-height: 1.6;
  width: auto;
  margin-top: 0;
}

p.resolve-note-title {
  font-size: 14px;
  margin: 10px;
  margin-bottom: 15px;
}

.readonly-note {
  border: 1px solid #c5c5c5;
  padding: 10px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  width: 100%;
  text-align: left;
  min-height: 150px;
}

.modal .modal-container .modal-content .readonly-note p {
  text-align: left;
}

.conversation-info .conversation-info__bottom ul li span.title-info {
  -webkit-box-flex: 1;
  -ms-flex: 1 60%;
  flex: 1 60%;
}

.conversation-info .conversation-info__bottom ul li span.badge-info {
  text-align: right;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0;
  text-transform: capitalize;
  margin-right: 8px;
}

.conversation-info
  .conversation-info__bottom
  ul
  li
  span.badge-info.additional-info-btn-notes {
  -ms-flex-preferred-size: 150px;
  flex-basis: 150px;
  border-radius: 0;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 150px;
  display: block;
}

.conversation-info .conversation-info__bottom ul li span.badge-info.active {
  color: #27b69d;
  width: 150px;
}

span.badge-info.additional-info-btn-notes.active p {
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 110px;
  height: 1.3em;
  text-transform: none;
}

.conversation-info .conversation-info__bottom ul li span.badge-info.number {
  color: #2cb79e;
  width: 20px;
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 12px;
}

.conversation-info
  .conversation-info__bottom
  ul
  li
  span.badge-info.number.active {
  background-color: #27b69d;
  color: #ffffff;
}

.conversation-bottom__participants ul li .participants-detail__info > a {
  max-width: 200px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

.unserve-customer {
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  letter-spacing: 0.005em;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;

  color: #565656;
}

.unserve-info-box {
  line-height: 10px;
}

.unserve-info-box .unserve-icon {
  -webkit-mask: url("/img/icon_info_solid.svg") no-repeat top;
  mask: url("/img/icon_info_solid.svg") no-repeat top;
  cursor: pointer;
  width: 22px;
  height: 22px;
  display: block;
  background-color: #565656;
}

.unserve-customer img {
  cursor: pointer;
}

.unserve-info,
.tooltip {
  position: absolute;
  top: -45px;
  right: 28px;
  padding: 10px 16px;
  background: #2c353b;
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  -webkit-box-shadow: 0px 2px 4px rgba(90, 111, 86, 0.25);
  box-shadow: 0px 2px 4px rgba(90, 111, 86, 0.25);
  max-width: 303px;
  display: none;
}

.unserve-info:after,
.tooltip:after {
  top: 100%;
  left: 130px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: 0;
  border-top-color: #2c353b;
  border-width: 10px;
  margin-left: 109px;
}

.tooltip.top-center::after {
  top: -20px;
  left: 50%;
  margin-left: unset;
  border-top-color: transparent;
  border-bottom-color: #2c353b;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.unserve-info-box:hover .unserve-info,
.unserve-customer > .unserve-info-box:hover .unserve-info {
  display: block;
}

li.search-result .conversation-list__info {
  max-width: 350px;
}

.qcw-comment__buttons .action_buttons:hover a,
.qcw-comment__buttons .action_buttons:hover button {
  color: var(--c-primary);
}

.qcw-comment__message.sticker {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.qcw-comment__message.sticker .qcw-image-container {
  height: 135px !important;
}

.qcw-comment__message.sticker .tip {
  display: none;
}

.heading-filter-bot {
  margin-bottom: 15px;
}

.filter-bot {
  margin-bottom: 32px;
}

.filter-bot > button:first-child {
  margin-right: 12px;
}

button.button.disabled-filter-bot {
  border-radius: 0px 4px 4px 0px !important;
  border-width: 2px;
  padding: 5px 20px;
  margin-left: -2px;
}

button.button.enabled-filter-bot {
  border-radius: 4px 0px 0px 4px !important;
  border-width: 2px;
  padding: 5px 20px;
}

.button-group button {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.qcw-comments,
.inner,
.qcw-load-comment-indicator {
  min-width: 100%;
  width: 100%;
  background: var(--c-gray);
}

.qcw-load-comment-indicator > .loader {
  position: fixed;
  left: 50%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.box-button-hsm {
  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;
}

.box-button-hsm > a {
  margin-bottom: 20px;
}

.info-status-label-hsm {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}

.info-status-btn-hsm {
  height: 18px;
}

.info-status-btn-hsm .tooltip:after {
  top: 20px;
  left: 100%;
  margin-left: 0px;
  border-top-color: transparent;
  border-left-color: #2c353b;
}

.info-status-btn-hsm:hover .tooltip {
  display: block;
  top: 190px;
  right: 65px;
  width: 260px;
}

.info-status-btn-hsm:hover .tooltip.expiring {
  top: 305px;
  right: 180px;
}

.agent-roles-tooltip {
  visibility: hidden;
  padding: 11px 16px;
  position: absolute;
  width: 220px;
  background: #2c353b;
  border-radius: 4px;
  display: block;
  top: 60px;
  right: -20px;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
  word-break: break-word;
  z-index: 999;
  white-space: normal;
}

.agent-roles-tooltip::before {
  content: "";
  position: absolute;
  top: -20px;
  right: 80px;
  margin-left: -5px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #2c353b transparent;
}

.agent-info:hover .agent-roles-tooltip {
  visibility: visible;
  opacity: 1;
}

.chat-area-expired {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 16px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 17px;
  background: #ffffff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-right: 1px solid #ececec;
  border-left: 1px solid #ececec;
  border-top: 1px solid #ececec;
  line-height: 1;
  height: 72px;
}

.chat-area-expired .close-chat-area-expired {
  position: absolute;
  top: 12px;
  right: 12px;
}

.chat-area-expired .unserve-info {
  top: -70px;
  left: -45px;
  font-weight: normal;
}

.disabled-hsm-admin {
  line-height: 19px;
  text-align: center;
}

.chat-area-expired .disabled-hsm-agent {
  line-height: 19px;
  text-align: center;
  width: 100%;
}

.is-unstable-connection {
  position: relative;
  padding: 14px 32px;
  font-size: 11px;
  line-height: 16px;
  color: #777777;
  background: #ffecb0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: 0;
  text-align: center;
}

.is-unstable-connection.visible {
  opacity: 1;
}

.is-unstable-connection > svg {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.is-unstable-connection > strong {
  font-size: 14px;
  line-height: 17px;
}

.is-unstable-connection > p {
  margin-top: 8px;
  margin-bottom: 8px;
}

.conversation-not-realtime {
  position: absolute;
  width: 100%;
  height: 72px;
  top: 0;
  font-size: 12px;
  color: rgb(119, 119, 119);
  -webkit-box-shadow: 0px -6px 13px rgba(166, 166, 166, 0.15);
  box-shadow: 0px -6px 13px rgba(166, 166, 166, 0.15);
  background-color: #ffffff;
  padding: 0 34px;
  text-align: center;
  z-index: 1;
  line-height: 18px;
}

.qcw-dropzone-area {
  height: calc(100% - 64px);
}

.qcw-interactive__header {
  font-weight: bold;
  margin: 5px;
}

.qcw-interactive__body {
  margin: 5px;
}

.qcw-interactive__footer {
  margin: 5px;
  font-size: 11px;
  margin-bottom: 15px;
}

.qcw-interactive__btn {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  text-align: center;
  padding: 10px 0;
  margin: 15px 5px;
}

.qcw-interactive__btn--reply {
  border-top: 1px solid #fff;
  text-align: center;
  padding: 10px 0;
  margin: 0 5px;
}

.qcw-interactive__section {
  list-style: none;
  padding: 0 10px !important;
}

.qcw-interactive__section li {
  padding-left: 20px;
}

.qcw-interactive__section li:last-child {
  margin-bottom: 15px;
}

.qcw-interactive__row--title {
  font-weight: bold;
}

.qcw-interactive__bulleted--item {
  list-style: disc inside none;
  padding: 0 !important;
}

.file-name-color {
  color: #666;
}

.top-shadow {
  -webkit-box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.08);
  box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.08);
}

table.table-modal tr > * {
  border-bottom: 1px solid #f4f4f4;
  padding: 12px;
}

table.table-modal tr > *:first-child {
  padding-left: 0;
}

table.table-modal tr > *:last-child {
  padding-right: 0;
}

.unread-room-count {
  position: absolute;
  background: #eb5757;
  top: 10px;
  left: 90px;
  padding: 2px 5px;
  border-radius: 9px;
  color: #fff;
}

.selected-item {
  color: #8c8c8c;
  padding: 10px 14px;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 7px 17px rgba(51, 51, 51, 0.07);
  box-shadow: 0px 7px 17px rgba(51, 51, 51, 0.07);
  border-radius: 6px;
  border: 1px solid transparent;
  outline: none;
  font-size: 14px;
  line-height: 16px;
}

.group-list {
  /* position: absolute; */
  /* top: 70px; */
  width: 100%;
  /* z-index: 100; */
  background: #ffffff;
  border-radius: 6px;
  -webkit-box-shadow: 0px 8px 24px rgba(51, 51, 51, 0.07);
  box-shadow: 0px 8px 24px rgba(51, 51, 51, 0.07);
}

ul.list-message-template {
  position: relative;
  top: 0;
  z-index: 10;
  background: #fff;
  width: 100%;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 6px;
  max-height: 300px;
  overflow: auto;
  margin-bottom: 0;
  padding: 0;
  font-size: 14px;
  max-width: 390px;
}

ul.list-message-template li a:hover,
ul.list-message-template li a:focus {
  background: #fafafa;
}

ul.list-message-template li a,
ul.list-message-template li a:hover,
ul.list-message-template li a:focus {
  padding: 16px;
  color: #555555;
  word-break: break-word;
  display: block;
}

h3.followup-title {
  font-size: 24px;
  line-height: 36px;
  color: #595959;
  margin-bottom: 16px;
}

/* customer properties */
.empty-properties {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: white;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border-left: 1px solid #e2e2e2;
  z-index: 1;
  color: var(--c-primary);
}

.empty-properties img {
  width: 161px;
}

.empty-properties p {
  padding-top: 40px;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  color: #454545;
}

.label-secure {
  background: #e4f8f4;
  color: var(--c-primary);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  margin: -12px 24px 24px;
  padding: 4px 0;
  border-radius: 40px;
}

/* end customer properties */
/* WA top up credit */
.swal-custom-confirm {
  border-radius: 12px !important;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 416px;
  flex: 0 0 416px;
  min-height: 409px;
  overflow: hidden !important;
}

.agent-leave {
  min-height: unset;
}

.swal-custom-confirm .swal2-buttonswrapper {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.swal-custom-confirm button.swal2-confirm {
  color: rgb(35, 176, 152);
  font-weight: 600;
  font-size: 16px;
  margin-top: 20px;
}

.swal-custom-confirm button.swal2-cancel.swal2-styled {
  width: 100%;
  padding: 13px 32px;
}

.swal-custom-confirm .swal2-warning.swal2-icon {
  margin-top: 0;
  margin-bottom: 24px;
  color: #f6bf31;
  border-color: #f6bf31;
  height: 53px;
  width: 53px;
  line-height: 53px;
  font-size: 40px;
}

.swal-custom-confirm.agent-leave button.swal2-confirm:hover {
  background-color: #ffffff !important;
}

.swal-custom-confirm.session-chat button.swal2-confirm {
  width: 100%;
  color: #ffffff;
}

.swal-custom-confirm.wag {
  min-height: -webkit-fit-content !important;
  min-height: -moz-fit-content !important;
  min-height: fit-content !important;
  height: -webkit-max-content !important;
  height: -moz-max-content !important;
  height: max-content !important;
}

.swal-custom-confirm.wag button.swal2-confirm {
  color: var(--company-base-color, #27b199) !important;
  font-weight: bold;
  background-color: #ffffff !important;
  margin-top: 12px;
}

.swal-custom-confirm.wag button.swal2-cancel.swal2-styled {
  width: 100%;
  color: #ffffff;
  background: var(--company-base-color, #27b199) !important;
}

.swal-custom-confirm.wag button.swal2-confirm:hover {
  background-color: #ffffff !important;
}

.swal-custom-confirm.session-chat button.swal2-cancel.swal2-styled {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  color: var(--c-primary);
  font-weight: bold;
}

.swal-custom-confirm.session-chat button.swal2-cancel:hover {
  background-color: #ffffff !important;
}

.swal-custom-confirm.session-chat .swal2-close {
  color: #555555;
}

.swal-custom-failed {
  min-height: 336px;
  width: 440px !important;
  padding: 48px !important;
  border-radius: 12px !important;
}

.swal-custom-failed .swal2-confirm {
  background: var(--c-primary);
  min-width: 314px;
}

.swal-custom-failed .swal2-icon.swal2-error {
  margin-top: 0;
  margin-bottom: 24px;
  height: 64px;
  width: 64px;
  line-height: 63px;
  border-color: #eb5757;
  font-size: 40px;
}

.swal-custom-failed .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  width: 31px;
  top: 29px;
  background-color: #eb5757;
}

/* ACW */
.ACW__trigger {
  position: absolute;
  top: 8px;
  right: 0;
  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: 48px;
  height: 48px;
  background-color: var(--company-base-color, #27b199);
  border-radius: 50% 0 0 50%;
  cursor: pointer;
  z-index: 98;
}

.ACW__trigger.chat-info-collapsed {
  top: 74px;
}

.ACW__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  padding: 16px 12px;
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  cursor: pointer;
  color: #555555;
  border: 1px solid #ffffff;
}

.ACW__button__icon {
  width: 24px;
  height: 24px;
  margin-right: 20px;
}

.ACW__button:hover {
  background: #f2f2f6;
  color: var(--c-primary);
  border: 1px solid var(--company-base-color, #27b199);
  border-radius: 8px;
}

.ACW__menu {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  background-color: #fff;
  border-left: 1px solid #f2f2f2;
  z-index: 99;

  /* Transition */
  opacity: 0;
  -webkit-transform: translateX(500px);
  -ms-transform: translateX(500px);
  transform: translateX(500px);
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.ACW__menu--is-open {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.ACW__menu .ACW__menu-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 64px;
  font-size: 14px;
  border-bottom: 1px solid #f2f2f2;
}

.ACW__menu .close-btn {
  font-size: 32px;
  color: #979797;
  margin: -4px 16px 0;
  text-align: center;
  cursor: pointer;
}

.ACW__menu .back-btn {
  width: 17px;
  height: 8px;
  margin-right: 16px;
  margin-left: auto;
  cursor: pointer;
}

.ACW__menu .close-btn:hover {
  color: var(--company-base-color, #27b199);
}

.ACW__menu .ACW__menu-content {
  height: calc(100% - 64px);
  overflow: auto;
}

.ACW__menu .ACW__menu-iframe {
  width: 100%;
  height: calc(100% - 4px);
  border: 0;
}

.ACW__menu .ACW__menu-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 4px 12px;
}

.ACW__menu .ACW__menu-list-separator {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 1px;
  margin: 8px 0px;
  background: #e8e8e8;
}

.ACW__menu .ACW__menu-list .ACW__button {
  margin: 4px;
}

.ACW__widget-iframe {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background-color: #fff;
  border-radius: 8px;
  -webkit-box-shadow: 0 7px 17px rgb(51 51 51 / 7%);
  box-shadow: 0 7px 17px rgb(51 51 51 / 7%);
  z-index: 3;
}

.ACW__widget-iframe-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  font-size: 14px;
  border-bottom: 1px solid #f2f2f2;
}

.ACW__widget-iframe-header .close-btn {
  color: #979797;
  margin-left: auto;
  font-size: 22px;
  cursor: pointer;
}

.ACW__widget-iframe iframe {
  width: 400px;
  height: 600px;
  border: 0;
}

/* end ACW */

.link-underline {
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.additional-info__body .assistant-summarize {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 24px;
  gap: 18px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  border-bottom: 1px solid #ececec;
}

.additional-info__body .assistant-summarize-result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 24px;
  gap: 12px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  border-bottom: 1px solid #ececec;
}

.additional-info__body .assistant-summarize-result .title {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: 0.005em;
}

.additional-info__body .assistant-summarize-result .content {
  padding: 9px 16px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: 0.005em;
}

.additional-info__body .assistant-summarize-result textarea {
  padding: 9px 16px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: 0.005em;
}

li.room-item {
  padding: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: 8px;
  border-bottom: solid 1px #ececec;
}

li.room-item .avatar {
  background-color: #dedede;
  border-radius: 100%;
  aspect-ratio: 1/1;
  width: 40px;
  height: 40px;
  overflow: hidden;
}

li.room-item .room-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  width: 100%;
}

li.room-item .room-detail .room-detail__name {
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  letter-spacing: 0.005em;
  color: #0a0a0a;

  max-width: 170px;
  min-width: 134px;
  white-space: nowrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  gap: 8px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

li.room-item .room-detail .room-detail__message {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  letter-spacing: 0.005em;
  color: #565656;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  gap: 8px;
  max-width: 170px;
}

li.room-item .room-detail .room-detail__message img {
  min-width: 16px;
  width: 16px;
  height: 16px;
}

li.room-item .room-detail .room-detail__oncall {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 4px;
  border-radius: 8px;
  border: 1px solid #bfbfbf;
  padding: 2px 8px;
}

li.room-item .room-detail .room-detail__oncall img {
  min-width: 12px;
  width: 12px;
  height: 12px;
}

li.room-item .room-detail .room-detail__oncall span {
  font-size: 12px;
  font-weight: 500;
}

li.room-item .room-detail .room-detail__name.unread,
li.room-item .room-detail .room-detail__message.unread {
  font-weight: 700 !important;
}

li.room-item .room-detail .room-detail__time {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.005em;
  color: #a0a0a0;
  text-wrap: nowrap;
}

li.room-item .room-detail .room-detail__status {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.005em;
}

li.room-item .room-detail .room-detail__status .waiting-active {
  color: #eb5757;
}

li.room-item .room-detail .room-detail__status .waiting {
  color: var(--c-primary);
}

li.room-item .room-detail .unread-dot {
  width: 8px;
  min-width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: red;
}

li.room-item .room-detail .resolved,
li.room-item .room-detail .robot,
li.room-item .room-detail .pin,
li.room-item .room-detail .wag {
  width: 16px;
  min-width: 16px;
  height: 16px;
}

li.room-item .room-detail .resolved {
  background: url("/img/icon_solved_flag.png") no-repeat center;
  background-size: cover;
}

.app-chat-area
  .qcw-header
  .qcw-header__actions
  a.link.bot-header.bot-enable
  > .switch.switch:before,
.app-chat-area
  .qcw-header
  .qcw-header__actions
  a.link.bot-header.bot-enable
  > .switch.switch-on:before,
.app-chat-area
  .qcw-header
  .qcw-header__actions
  a.link.bot-header.bot-enable
  > .switch.switch--on:before,
li.room-item .room-detail .robot {
  background: url("/img/bot_badge.svg") no-repeat center;
  background-size: cover;
}

li.room-item .room-detail .pin {
  background: url("/img/icon_pin.svg") no-repeat center;
  background-size: cover;
}

li.room-item .room-detail .wag {
  background: url("/img/wag_badge.svg") no-repeat center;
  background-size: cover;
}

.conversation-list .expired,
.conversation-list .expired_in,
.conversation-list .wa_group {
  width: 16px;
  height: 16px;
  position: absolute;
  bottom: 0;
}

.conversation-list .wa_group {
  background: url("/img/wa-group.svg") no-repeat center;
}

.conversation-list .expired {
  background: url("/img/expired.svg") no-repeat center;
}

.conversation-list .expired_in {
  background: url("/img/expired-in.svg") no-repeat center;
}

.wa-call-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid #ececec;
  background-color: #fafafa;
  border-radius: 12px;
}

.wa-call-info .info-call,
.wa-call-info .date,
.wa-call-info .description {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.wa-call-info .info-call,
.wa-call-info .date {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.wa-call-info .description {
  border-top: 1px solid #ececec;
  padding-top: 12px;
}

.wa-call-info .info-call small,
.wa-call-info .date small,
.wa-call-info .description small {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  text-transform: none;
}

.qs-skeleton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;

  div {
    height: 16px;
    width: 100%;
    border-radius: 12px;

    -webkit-mask-repeat: no-repeat;
    background: -o-linear-gradient(
        left,
        var(--c-disable) 40%,
        #fffa,
        var(--c-disable) 60%
      )
      right/300% 100%;
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(40%, var(--c-disable)),
        color-stop(#fffa),
        color-stop(60%, var(--c-disable))
      )
      right/300% 100%;
    background: linear-gradient(
        90deg,
        var(--c-disable) 40%,
        #fffa,
        var(--c-disable) 60%
      )
      right/300% 100%;
    -webkit-animation: skeletonAnimation 1s linear infinite;
    animation: skeletonAnimation 1s linear infinite;
  }

  div:first-child {
    width: 50% !important;
  }
}

.qs-skeleton-cs {
  height: 100%;
  padding: 24px 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 24px;

  & .profile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    & .avatar {
      min-width: 56px;
      width: 56px;
      height: 56px;
      aspect-ratio: 1/1;
      border-radius: 100%;
      background-color: var(--c-disable, #ececec);
      -webkit-mask-repeat: no-repeat;
      background: -o-linear-gradient(
          left,
          var(--c-disable) 40%,
          #fffa,
          var(--c-disable) 60%
        )
        right/300% 100%;
      background: -webkit-gradient(
          linear,
          left top,
          right top,
          color-stop(40%, var(--c-disable)),
          color-stop(#fffa),
          color-stop(60%, var(--c-disable))
        )
        right/300% 100%;
      background: linear-gradient(
          90deg,
          var(--c-disable) 40%,
          #fffa,
          var(--c-disable) 60%
        )
        right/300% 100%;
      -webkit-animation: skeletonAnimation 1s linear infinite;
      animation: skeletonAnimation 1s linear infinite;
    }
  }

  & .loading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    width: 100%;

    & div {
      height: 16px;
      width: 100%;
      border-radius: 12px;
      -webkit-mask-repeat: no-repeat;
      background: -o-linear-gradient(
          left,
          var(--c-disable) 40%,
          #fffa,
          var(--c-disable) 60%
        )
        right/300% 100%;
      background: -webkit-gradient(
          linear,
          left top,
          right top,
          color-stop(40%, var(--c-disable)),
          color-stop(#fffa),
          color-stop(60%, var(--c-disable))
        )
        right/300% 100%;
      background: linear-gradient(
          90deg,
          var(--c-disable) 40%,
          #fffa,
          var(--c-disable) 60%
        )
        right/300% 100%;
      -webkit-animation: skeletonAnimation 1s linear infinite;
      animation: skeletonAnimation 1s linear infinite;
    }

    & div:first-child {
      width: 50% !important;
    }
  }

  & .loading-2 {
    height: 72px;
    width: 100%;
    border-radius: 16px;
    -webkit-mask-repeat: no-repeat;
    background: -o-linear-gradient(
        left,
        var(--c-disable) 40%,
        #fffa,
        var(--c-disable) 60%
      )
      right/300% 100%;
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(40%, var(--c-disable)),
        color-stop(#fffa),
        color-stop(60%, var(--c-disable))
      )
      right/300% 100%;
    background: linear-gradient(
        90deg,
        var(--c-disable) 40%,
        #fffa,
        var(--c-disable) 60%
      )
      right/300% 100%;
    -webkit-animation: skeletonAnimation 1s linear infinite;
    animation: skeletonAnimation 1s linear infinite;
  }
}

@-webkit-keyframes skeletonAnimation {
  to {
    background-position: left;
  }
}

@keyframes skeletonAnimation {
  to {
    background-position: left;
  }
}

.input-with__counter {
  position: relative;
  padding: 14px 16px 0;
  background: #fff;
  -webkit-box-shadow: 0px 2px 8px 0px #0a0a0a1a;
  box-shadow: 0px 2px 8px 0px #0a0a0a1a;
  border-radius: 8px;
}

.input-counter__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.status__oncall {
  color: #0a0a0a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 4px;
  border-radius: 8px;
  border: 1px solid #bfbfbf;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
}