@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Manrope:300,400,500,600,700&display=swap&subset=latin-ext");

div.content {
    all: revert;
}

html.content {
    all: revert;
}

body.content {
    all:revert;
}

img, svg {
    vertical-align: middle !important;
}

:root {
  --body-bg-color: #e5ecef;
  --theme-bg-color: #fff;
  --settings-icon-hover: #9fa7ac;
  --developer-color: #f9fafb;
  --input-bg: #f8f8fa;
  --input-chat-color: #a2a2a2;
  --border-color: #eef2f4;
  --body-font: "Manrope", sans-serif;
  --body-color: #273346;
  --settings-icon-color: #c1c7cd;
  --msg-message: #969eaa;
  --chat-text-bg: #f1f2f6;
  --theme-color: #0086ff;
  --msg-date: #c0c7d2;
  --button-bg-color: #f0f7ff;
  --button-color: var(--theme-color);
  --detail-font-color: #919ca2;
  --msg-hover-bg: rgba(238, 242, 244, 0.4);
  --active-conversation-bg: linear-gradient(
   to right,
   rgba(238, 242, 244, 0.4) 0%,
   rgba(238, 242, 244, 0) 100%
  );
  --overlay-bg: linear-gradient(
   to bottom,
   rgba(255, 255, 255, 0) 0%,
   rgba(255, 255, 255, 1) 65%,
   rgba(255, 255, 255, 1) 100%
  );
  --chat-header-bg: linear-gradient(
   to bottom,
   rgba(255, 255, 255, 1) 0%,
   rgba(255, 255, 255, 1) 78%,
   rgba(255, 255, 255, 0) 100%
  );
}

[data-theme=purple] {
  --theme-color: #9f7aea !important;
  --button-color: #9f7aea !important;
  --button-bg-color: rgba(159, 122, 234, 0.12) !important;
}

[data-theme=green] {
  --theme-color: #38b2ac !important;
  --button-color: #38b2ac !important;
  --button-bg-color: rgba(56, 178, 171, 0.15) !important;
}

[data-theme=orange] {
  --theme-color: #ed8936 !important;
  --button-color: #ed8936 !important;
  --button-bg-color: rgba(237, 137, 54, 0.12) !important;
}

button html {
    background-color: transparent;
}

.ebsss-widget-dark-mode {
  --body-bg-color: #1d1d1d !important;
  --theme-bg-color: #27292d !important;
  --border-color: #323336 !important;
  --body-color: #d1d1d2 !important;
  --active-conversation-bg: linear-gradient(
   to right,
   rgba(47, 50, 56, 0.54),
   rgba(238, 242, 244, 0) 100%
  ) !important;
  --msg-hover-bg: rgba(47, 50, 56, 0.54) !important;
  --chat-text-bg: #383b40 !important;
  --chat-text-color: #b5b7ba !important;
  --msg-date: #626466 !important;
  --msg-message: var(--msg-date) !important;
  --overlay-bg: linear-gradient(
   to bottom,
   rgba(0, 0, 0, 0) 0%,
   #27292d 65%,
   #27292d 100%
  ) !important;
  --input-bg: #2f3236 !important;
  --chat-header-bg: linear-gradient(
   to bottom,
   #27292d 0%,
   #27292d 78%,
   rgba(255, 255, 255, 0) 100%
  ) !important;
  --settings-icon-color: #7c7e80 !important;
  --developer-color: var(--border-color) !important;
  --button-bg-color: #393b40 !important;
  --button-color: var(--body-color) !important;
  --input-chat-color: #6f7073 !important;
  --detail-font-color: var(--input-chat-color) !important;
}

.ebsss-widget-blue {
  background-color: #0086ff !important;
}

.ebsss-widget-purple {
  background-color: #9f7aea !important;
}

.ebsss-widget-green {
  background-color: #38b2ac !important;
}

.ebsss-widget-orange {
  background-color: #ed8936 !important;
}

* {
  outline: none !important;
  box-sizing: border-box !important;
}

img {
  max-width: 100% !important;
}

body {
  font-family: var(--body-font) !important;
  color: var(--body-color) !important;
}

html {
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased !important;
}

.ebsss-widget-app {
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--theme-bg-color) !important;
  max-width: 1600px !important;
  height: 100vh !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

.ebsss-widget-header {
  height: 80px !important;
  width: 100% !important;
  border-bottom: 1px solid var(--border-color) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
}

.ebsss-widget-wrapper {
  width: 100% !important;
  display: flex !important;
  flex-grow: 1 !important;
  overflow: hidden !important;
}

.ebsss-widget-conversation-area,
.ebsss-widget-detail-area {
  width: 340px !important;
  flex-shrink: 0 !important;
}

.ebsss-widget-detail-area {
  border-left: 1px solid var(--border-color) !important;
  margin-left: auto !important;
  padding: 30px 30px 0 30px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: auto !important;
}

.ebsss-widget-chat-area {
  flex-grow: 1 !important;
}

.ebsss-widget-search-bar {
  height: 80px !important;
  z-index: 3 !important;
  position: relative !important;
  margin-left: 280px !important;
}
.ebsss-widget-search-bar input {
  height: 100% !important;
  width: 100% !important;
  display: block !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--body-color) !important;
  padding: 0 54px !important;
  background-image: url("data:image/svg+xml !important;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.966 56.966" fill="%23c1c7cd"%3e%3cpath d="M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z"/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  background-position: 25px 48% !important;
  font-family: var(--body-font) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}
.ebsss-widget-search-bar input::placeholder {
  color: var(--input-chat-color) !important;
}

.ebsss-widget-logo {
  color: var(--theme-color) !important;
  width: 38px !important;
  flex-shrink: 0 !important;
}
.ebsss-widget-logo svg {
  width: 100% !important;
}

.ebsss-widget-user-settings {
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
.ebsss-widget-user-settings > * + * {
  margin-left: 14px !important;
}

.ebsss-widget-dark-light {
  width: 22px !important;
  height: 22px !important;
  color: var(--settings-icon-color) !important;
  flex-shrink: 0 !important;
}
.ebsss-widget-dark-light svg {
  width: 100% !important;
  fill: transparent !important;
  transition: 0.5s !important;
}

.ebsss-widget-user-profile {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
}

.ebsss-widget-settings {
  color: var(--settings-icon-color) !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
}

.ebsss-widget-conversation-area {
  border-right: 1px solid var(--border-color) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

.ebsss-widget-msg-profile {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin-right: 15px !important;
}
.ebsss-widget-msg-profile.group {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: var(--border-color) !important;
}
.ebsss-widget-msg-profile.group svg {
  width: 60% !important;
}

.ebsss-widget-msg {
  display: flex !important;
  align-items: center !important;
  padding: 20px !important;
  cursor: pointer !important;
  transition: 0.2s !important;
  position: relative !important;
}
.ebsss-widget-msg:hover {
  background-color: var(--msg-hover-bg) !important;
}
.ebsss-widget-msg.active {
  background: var(--active-conversation-bg) !important;
  border-left: 4px solid var(--theme-color) !important;
}
.ebsss-widget-msg.online:before {
  content: "" !important;
  position: absolute !important;
  background-color: #23be7e !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  border: 2px solid var(--theme-bg-color) !important;
  left: 50px !important;
  bottom: 19px !important;
}

.ebsss-widget-msg-username {
  margin-bottom: 4px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

.ebsss-widget-msg-detail {
  overflow: hidden !important;
}

.ebsss-widget-msg-content {
  font-weight: 500 !important;
  font-size: 13px !important;
  display: flex !important;
}

.ebsss-widget-msg-message {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--msg-message) !important;
}

.ebsss-widget-msg-date {
  font-size: 14px !important;
  color: var(--msg-date) !important;
  margin-left: 3px !important;
}
.ebsss-widget-msg-date:before {
  content: "•" !important;
  margin-right: 2px !important;
}

.ebsss-widget-add {
  position: sticky !important;
  bottom: 25px !important;
  background-color: var(--theme-color) !important;
  width: 60px !important;
  height: 60px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-image: url("data:image/svg+xml !important;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="feather feather-plus"%3e%3cpath d="M12 5v14M5 12h14"/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: 50% !important;
  background-size: 28px !important;
  box-shadow: 0 0 16px var(--theme-color) !important;
  margin: auto auto -55px !important;
  flex-shrink: 0 !important;
  z-index: 1 !important;
  cursor: pointer !important;
}

.ebsss-widget-overlay {
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 340px !important;
  flex-shrink: 0 !important;
  background: var(--overlay-bg) !important;
  height: 80px !important;
}

.ebsss-widget-chat-area {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden auto !important;
}
.ebsss-widget-chat-area-header {
  display: flex !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px !important;
  background: var(--chat-header-bg) !important;
}
.ebsss-widget-chat-area-profile {
  width: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
.ebsss-widget-chat-area-title {
  font-size: 18px !important;
  font-weight: 600 !important;
}
.ebsss-widget-chat-area-main {
  flex-grow: 1 !important;
}

.ebsss-widget-chat-msg-img {
  height: 40px !important;
  width: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.ebsss-widget-chat-msg-profile {
  flex-shrink: 0 !important;
  margin-top: auto !important;
  margin-bottom: -20px !important;
  position: relative !important;
}

.ebsss-widget-chat-msg-profile-form {
  flex-shrink: 0 !important;
  margin-top: auto !important;
  position: relative !important;
}

.ebsss-widget-chat-msg-date {
  position: absolute !important;
  left: calc(100% + 12px) !important;
  bottom: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--msg-date) !important;
  white-space: nowrap !important;
}

.ebsss-widget-chat-msg {
  display: flex !important;
  padding: 0 5px 45px !important;
}

.ebsss-widget-chat-msg-ai {
  display: flex !important;
  padding: 0 5px !important;
}

.ebsss-widget-chat-msg-content {
  margin-left: 12px !important;
  max-width: 70% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.ebsss-widget-chat-msg-text {
  background-color: var(--chat-text-bg);
  padding: 15px !important;
  border-radius: 20px 20px 20px 0 !important;
  line-height: 1.5 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.ebsss-widget-chat-msg-text + .ebsss-widget-chat-msg-text {
  margin-top: 10px !important;
}

.ebsss-widget-chat-msg-text {
  color: var(--chat-text-color) !important;
  word-break: break-word;
}

.ebsss-widget-owner {
  flex-direction: row-reverse !important;
}
.ebsss-widget-owner .ebsss-widget-chat-msg-content {
  margin-left: 0 !important;
  margin-right: 12px !important;
  align-items: flex-end !important;
}
.ebsss-widget-owner .ebsss-widget-chat-msg-text {
  background-color: var(--theme-color);
  color: #fff !important;
  border-radius: 20px 20px 0 20px !important;
}
.ebsss-widget-owner .ebsss-widget-chat-msg-date {
  left: auto !important;
  right: calc(100% + 12px) !important;
}

.ebsss-widget-chat-msg-text img {
  max-width: 300px !important;
  width: 100% !important;
}

.ebsss-widget-chat-area-footer {
  display: flex !important;
  border-top: 1px solid var(--border-color) !important;
  width: 100% !important;
  padding: 10px 20px !important;
  align-items: center !important;
  background-color: var(--theme-bg-color) !important;
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
}

.ebsss-widget-chat-area-footer svg {
  color: var(--settings-icon-color) !important;
  width: 20px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}
.ebsss-widget-chat-area-footer svg:hover {
  color: var(--settings-icon-hover) !important;
}
.ebsss-widget-chat-area-footer svg + svg {
  margin-left: 8px !important;
}

.ebsss-widget-chat-area-footer input {
  border: none !important;
  color: var(--body-color) !important;
  background-color: var(--input-bg) !important;
  padding: 12px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  margin: 0 0px !important;
  width: 100% !important;
  height: 45px !important;
}
.ebsss-widget-chat-area-footer input::placeholder {
  color: var(--input-chat-color) !important;
}

.ebsss-widget-detail-area-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.ebsss-widget-detail-area-header .ebsss-widget-msg-profile {
  margin-right: 0 !important;
  width: 60px !important;
  height: 60px !important;
  margin-bottom: 15px !important;
}

.ebsss-widget-detail-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}

.ebsss-widget-detail-subtitle {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--msg-date) !important;
}

.ebsss-widget-detail-button {
  border: 0 !important;
  background-color: var(--button-bg-color) !important;
  padding: 10px 14px !important;
  border-radius: 5px !important;
  color: var(--button-color) !important;
  display: flex !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-grow: 1 !important;
  font-weight: 500 !important;
  height: 45px !important;
}
.ebsss-widget-detail-button svg {
  width: 26px !important;
  margin-right: 10px !important;
}
.ebsss-widget-detail-button:last-child {
  margin-left: 8px !important;
}

.ebsss-widget-detail-buttons {
  margin-top: 20px !important;
  display: flex !important;
  width: 100% !important;
}

.ebsss-widget-detail-area input {
  background-color: transparent !important;
  border: none !important;
  width: 100% !important;
  color: var(--body-color) !important;
  background-image: url("data:image/svg+xml !important;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.966 56.966" fill="%23c1c7cd"%3e%3cpath d="M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z"/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  background-position: 100% !important;
  font-family: var(--body-font) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 14px 0 !important;
}
.ebsss-widget-detail-area input::placeholder {
  color: var(--detail-font-color) !important;
}

.ebsss-widget-detail-changes {
  margin-top: 40px !important;
}

.ebsss-widget-detail-change {
  color: var(--detail-font-color) !important;
  font-family: var(--body-font) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 14px 0 !important;
  display: flex !important;
}
.ebsss-widget-detail-change svg {
  width: 24px !important;
  margin-left: auto !important;
}

.ebsss-widget-colors {
  display: flex !important;
  margin-left: auto !important;
}

.ebsss-widget-color {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}
.ebsss-widget-color.selected {
  background-image: url("data:image/svg+xml !important;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" stroke="%23fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" className="css-i6dzq1" viewBox="0 0 24 24"%3E%3Cpath d="M20 6L9 17l-5-5"/%3E%3C/svg%3E") !important;
  background-size: 10px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.ebsss-widget-color:not(:last-child) {
  margin-right: 4px !important;
}

.ebsss-widget-detail-photo-title {
  display: flex !important;
  align-items: center !important;
}
.ebsss-widget-detail-photo-title svg {
  width: 16px !important;
}

.ebsss-widget-detail-photos {
  margin-top: 30px !important;
  text-align: center !important;
}

.ebsss-widget-detail-photo-title {
  color: var(--detail-font-color) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin-bottom: 20px !important;
}
.ebsss-widget-detail-photo-title svg {
  margin-right: 8px !important;
}

.ebsss-widget-detail-photo-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-column-gap: 6px !important;
  grid-row-gap: 6px !important;
  grid-template-rows: repeat(3, 60px) !important;
}
.ebsss-widget-detail-photo-grid img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  object-position: center !important;
}

.ebsss-widget-view-more {
  color: var(--theme-color) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  margin: 25px 0 !important;
}

.ebsss-widget-follow-me {
  text-decoration: none !important;
  font-size: 14px !important;
  width: calc(100% + 60px) !important;
  margin-left: -30px !important;
  display: flex !important;
  align-items: center !important;
  margin-top: auto !important;
  overflow: hidden !important;
  color: #9c9cab !important;
  padding: 0 20px !important;
  height: 52px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  justify-content: center !important;
}
.ebsss-widget-follow-me svg {
  width: 16px !important;
  height: 16px !important;
  margin-right: 8px !important;
}

.ebsss-widget-follow-text {
  display: flex !important;
  align-items: center !important;
  transition: 0.3s !important;
}

.ebsss-widget-follow-me:hover .ebsss-widget-follow-text {
  transform: translateY(100%) !important;
}
.ebsss-widget-follow-me:hover .ebsss-widget-developer {
  top: 0 !important;
}

.ebsss-widget-developer {
  position: absolute !important;
  color: var(--detail-font-color) !important;
  font-weight: 600 !important;
  left: 0 !important;
  top: -100% !important;
  display: flex !important;
  transition: 0.3s !important;
  padding: 0 20px !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--developer-color) !important;
  width: 100% !important;
  height: 100% !important;
}

.ebsss-widget-developer img {
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
  object-fit: cover !important;
  margin-right: 10px !important;
}

.ebsss-widget-dark-mode .ebsss-widget-search-bar input,
.ebsss-widget-dark-mode .ebsss-widget-detail-area input {
  background-image: url("data:image/svg+xml !important;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.966 56.966" fill="%236f7073"%3e%3cpath d="M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z"/%3e%3c/svg%3e") !important;
}
.ebsss-widget-dark-mode .ebsss-widget-dark-light svg {
  fill: #ffce45 !important;
  stroke: #ffce45 !important;
}
.ebsss-widget-dark-mode .ebsss-widget-chat-area-group span {
  color: #d1d1d2 !important;
}

.ebsss-widget-chat-area-group {
  flex-shrink: 0 !important;
  display: flex !important;
}
.ebsss-widget-chat-area-group * {
  border: 2px solid var(--theme-bg-color) !important;
}
.ebsss-widget-chat-area-group * + * {
  margin-left: -5px !important;
}
.ebsss-widget-chat-area-group span {
  width: 32px !important;
  height: 32px !important;
  background-color: var(--button-bg-color) !important;
  color: var(--theme-color) !important;
  border-radius: 50% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

@media (max-width: 1120px) {
  .ebsss-widget-detail-area {
    display: none !important;
  }
}
@media (max-width: 780px) {
  .ebsss-widget-conversation-area {
    display: none !important;
  }

  .ebsss-widget-search-bar {
    margin-left: 0 !important;
    flex-grow: 1 !important;
  }
  .ebsss-widget-search-bar input {
    padding-right: 10px !important;
  }
}

/* Default styles for .ebsss-widget-chat-area-wrapper */
.ebsss-widget-chat-area-wrapper {
  height: 415px; /* Default height */
}

/* Media query for screens with a width of 400 pixels or less */
@media only screen and (max-width: 400px) {
  .ebsss-widget-chat-area-wrapper {
    height: 525px; /* Adjusted height for smaller screens */
  }
}

/* Media query for screens with a width between 401px and 768px 
@media only screen and (min-width: 401px) and (max-width: 768px) {
  .ebsss-widget-chat-area-wrapper {
    height: 395px;
  }
}*/

.tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  color: white;
  font-size: 10px;
  background-color: #192733;
  border-radius: 10px;
  padding: 5px 7.5px 5px 7.5px;
}

.hover-text:hover .tooltip-text {
  visibility: visible;
}

#tooltip-left {
  top: -8px;
  right: 120%;
}

.hover-text {
  position: relative;
  display: inline-block;
  font-family: Arial;
  text-align: center;
}

.ebsss-chat-initial-hover-container-start {
  /* Styles for the container */
  background-color: #fff;
  border: 1px solid #00000000;
  transition: background-color 0.3s ease;
  transition: border 0.3s ease;
}

.ebsss-chat-initial-hover-container-start:hover {
  /* Styles when hovered */
  background-color: #00000005;
  border: 1px solid #ccc;
}

.ebsss-chat-initial-welcome {
  height: 300px !important;
  margin-right: 10px !important;
  flex-direction: column !important;
  display: flex !important;
  gap: 5px !important;
  align-items: center !important;
  justify-content: center !important;
}

.ebsss-chat-initial-welcome-container {
  height: 275px !important;
  padding-top: 30px !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  flex-direction: row !important;
  display: flex !important;
  justify-content: space-between !important;
  background-position: center !important;
  background-size: cover !important;
}

.ebsss-chat-initial-welcome-header {
  margin-left: 15px !important;
}

.ebsss-chat-initial-welcome-message {
  width: 80% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
}

.ebsss-chat-initial-hover-container-start {
  padding: 2.5px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
}

.ebsss-chat-initial-start-chat-btn {
  height: auto !important;
  width: 66% !important;
  align-content: center !important;
  display: flex !important;
  flex-direction: column !important;
}

.ebsss-chat-initial-start-chat-btn .subtitle {
  font-size: 12px !important;
  font-weight: 600 !important;
}

.ebsss-chat-initial-chat-icon-container {
  border-radius: 50px !important;
  height: 35px !important;
  width: 35px !important;
  background-color: #00000050 !important;
  align-items: center !important;
  display: flex !important;
  justify-content: space-evenly !important;
}

.ebsss-chat-initial-chat-icon-container img {
  border-radius: 100px !important;
}

.ebsss-chat-initial-terms {
  color: #6c757d !important; /* text-muted */
  text-align: center !important; /* text-center */
  word-break: break-word !important; /* text-break */
  margin-bottom: 1rem !important; /* mb-3 */
  width: 80% !important;
}

.ebsss-chat-initial-flex-container {
  display: flex !important;
  flex-direction: column !important; /* flex-col */
  justify-content: center !important; /* justify-content-center */
  align-items: center !important; /* align-items-center */
}

.ebsss-chat-initial-header-container {
  text-align: left !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  margin-top: -15px !important;
}

.ebsss-chat-initial-header-profile-image {
  border-radius: 50% !important;
  width: 50px !important;
  height: 50px !important;
}

.ebsss-chat-initial-header-name {
  font-size: 24px !important;
  font-weight: 600;
  margin-left: 50px !important;
}

.ebsss-chat-initial-header-description {
  font-size: 12px !important;
  color: #666 !important;
  margin-top: -10px !important;
  font-weight: 600;
  margin-left: 50px !important;
  width: 75% !important;
}

.ebsss-chat-initial-header-text-space {
  margin-left: 15px !important;
}

.ebsss-chat-initial-title {
    font-weight: 600 !important;
    font-size: 14px !important;
}

.ebsss-chat-initial-chat-icon-spacer {
  margin-right: -15px !important;
}

.ebsss-chat-initial-chat-icon-spacer img {
  height: 100% !important;
}

.ebsss-chat-initial-header-flex {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center!important;
}

.ebsss-chat-audio-player {
  display: flex !important;
  margin-right: -15px !important;
  margin-left: -15px !important;
  align-items: center !important;
  padding: 10px !important;
}

.ebsss-chat-audio-player button {
  background-color: #00000000 !important;
  border: none !important;
  color: #fff !important;
  border-radius: 0px !important;
}

.ebsss-chat-audio-player progress {
  width: 100% !important;
}

.msg {
  display: flex !important;
  align-items: center !important;
  padding: 20px !important;
  cursor: pointer !important;
  transition: 0.2s !important;
  position: relative !important;
}
.msg:hover {
  background-color: var(--msg-hover-bg) !important;
}
.msg.active {
  background: var(--active-conversation-bg) !important;
  border-left: 4px solid var(--theme-color) !important;
}
.msg.online:before {
  content: "" !important;
  position: absolute !important;
  background-color: #23be7e !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  border: 2px solid var(--theme-bg-color) !important;
  left: 50px !important;
  bottom: 19px !important;
}

.msg-username {
  margin-bottom: 4px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  color: var(--msg-message) !important;
}

.msg-detail {
  overflow: hidden !important;
}

.msg-content {
  font-weight: 500 !important;
  font-size: 13px !important;
  display: flex !important;
}
.msg-profile {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin-right: 15px !important;
}

.msg-message {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--msg-message) !important;
}

.msg-date {
  font-size: 14px !important;
  color: var(--msg-date) !important;
  margin-left: 3px !important;
}
.msg-date:before {
  content: "•" !important;
  margin-right: 2px !important;
}
.conversation-area {
  border-right: 1px solid var(--border-color) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  height: 480px !important;
}