.content-section .chat-card-box {
  margin-bottom: 0 !important;
  height: calc(100vh - 190px);
  margin-bottom: 0 !important;
}
.content-section .chat-card-box .box-body {
  height: 100%;
  padding: 0 !important;
  flex-direction: row !important;
}
.content-section .chat-card-box .box-body .chat-left-list {
  width: 280px;
  border-right: 1px solid #e8e8e8;
  height: 100%;
  overflow: auto;
}
@media screen and (max-width: 1099.98px) {
  .content-section .chat-card-box .box-body .chat-left-list {
    width: 70px;
  }
}
.content-section .chat-card-box .box-body .chat-left-list .chat-user {
  display: flex;
  padding: 10px 15px;
  border-bottom: 1px solid #e8e8e8;
  gap: 15px;
  cursor: pointer;
  align-items: center;
  text-decoration: none;
}
.content-section .chat-card-box .box-body .chat-left-list .chat-user .user-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.content-section .chat-card-box .box-body .chat-left-list .chat-user .data {
  display: flex;
  flex-direction: column;
  width: calc(100% - 50px);
}
.content-section .chat-card-box .box-body .chat-left-list .chat-user .data .top {
  display: flex;
  justify-content: space-between;
}
.content-section .chat-card-box .box-body .chat-left-list .chat-user .data .top .name {
  font-weight: bold;
  color: #101828;
  display: flex;
  align-items: center;
  gap: 10px;
}
.content-section .chat-card-box .box-body .chat-left-list .chat-user .data .top .time {
  font-size: 12px;
  color: #475467;
}
.content-section .chat-card-box .box-body .chat-left-list .chat-user .data .top .notification {
  width: -moz-max-content;
  width: max-content;
  /* padding: 5px 10px; */
  border-radius: 50%;
  aspect-ratio: 1/1;
  width: 20px;
  height: 20px;
  display: flex;
  text-align: center;
  background: var(--Colors-Background-bg-brand-solid, #A830E8);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--Font-family-font-family-body, Poppins);
  font-size: var(--Font-size-text-xs, 12px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--Line-height-text-xs, 18px);
  /* position: absolute; */
}
.content-section .chat-card-box .box-body .chat-left-list .chat-user .data .sub-text {
  font-size: 12px;
  color: #475467;
  height: 24px;
  overflow: hidden;
  max-width: calc(100% - 80px);
}
.content-section .chat-card-box .box-body .chat-right-data {
  width: calc(100% - 280px);
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1099.98px) {
  .content-section .chat-card-box .box-body .chat-right-data {
    width: calc(100% - 70px);
  }
}
.content-section .chat-card-box .box-body .chat-right-data .top-user-data-section {
  display: flex;
  padding: 15px 24px;
  height: 80px;
  align-items: center;
  border-bottom: 1px solid var(--Colors-Border-border-primary, #D0D5DD);
  background: var(--Colors-Background-bg-primary, #FFF);
  /* Shadows/shadow-sm */
  box-shadow: 0px 1px 3px 0px var(--Colors-Effects-Shadows-shadow-sm_01, rgba(16, 24, 40, 0.1)), 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-sm_02, rgba(16, 24, 40, 0.06));
}
.content-section .chat-card-box .box-body .chat-right-data .top-user-data-section .user-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.content-section .chat-card-box .box-body .chat-right-data .top-user-data-section .data {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  width: calc(100% - 50px);
}
.content-section .chat-card-box .box-body .chat-right-data .top-user-data-section .data .name {
  font-weight: bold;
  color: #101828;
}
.content-section .chat-card-box .box-body .chat-right-data .top-user-data-section .data .email {
  font-size: 12px;
  color: #475467;
}
.content-section .chat-card-box .box-body .chat-right-data .message-list-section {
  height: calc(100% - 180px);
  overflow: auto;
  padding: 10px 24px;
}
.content-section .chat-card-box .box-body .chat-right-data .message-list-section .message {
  display: flex;
  flex-direction: column;
}
.content-section .chat-card-box .box-body .chat-right-data .message-list-section .message .message-data {
  display: flex;
  gap: 10px;
  width: 100%;
}
.content-section .chat-card-box .box-body .chat-right-data .message-list-section .message .message-data .user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.content-section .chat-card-box .box-body .chat-right-data .message-list-section .message .message-data .message-content {
  border-radius: var(--radius-none, 0px) var(--radius-md, 8px) var(--radius-md, 8px) var(--radius-md, 8px);
  border: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
  background: var(--Colors-Background-bg-secondary, #F9FAFB);
  color: var(--colors-text-text-primary-900, #101828);
  /*Textmd/Regular*/
  font-family: var(--Font-family-font-family-body, Poppins);
  font-size: var(--Font-size-text-md, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--Line-height-text-md, 24px);
  /*150%*/
  padding: 10px 15px;
  width: calc(100% - 50px);
  max-width: -moz-max-content;
  max-width: max-content;
  -webkit-border-radius: var(--radius-none, 0px) var(--radius-md, 8px) var(--radius-md, 8px) var(--radius-md, 8px);
  -moz-border-radius: var(--radius-none, 0px) var(--radius-md, 8px) var(--radius-md, 8px) var(--radius-md, 8px);
  -ms-border-radius: var(--radius-none, 0px) var(--radius-md, 8px) var(--radius-md, 8px) var(--radius-md, 8px);
  -o-border-radius: var(--radius-none, 0px) var(--radius-md, 8px) var(--radius-md, 8px) var(--radius-md, 8px);
}
.content-section .chat-card-box .box-body .chat-right-data .message-list-section .message .message-time {
  width: 100%;
  text-align: center;
  color: var(--colors-text-text-tertiary-600, #475467);
  /* Text xs/Regular */
  font-family: var(--Font-family-font-family-body, Poppins);
  font-size: var(--Font-size-text-xs, 12px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--Line-height-text-xs, 18px);
  position: relative;
  margin: 10px 0px;
  /* 150% */
}
.content-section .chat-card-box .box-body .chat-right-data .message-list-section .message .message-time .text {
  background-color: white;
  padding: 0 10px;
  z-index: 2;
  position: relative;
}
.content-section .chat-card-box .box-body .chat-right-data .message-list-section .message .message-time::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #e8e8e8;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.content-section .chat-card-box .box-body .chat-right-data .message-list-section .message.sender .message-data {
  justify-content: flex-end;
}
.content-section .chat-card-box .box-body .chat-right-data .message-list-section .message.sender .message-data .message-content {
  border-radius: var(--radius-md, 8px) var(--radius-none, 0px) var(--radius-md, 8px) var(--radius-md, 8px);
  background: var(--Colors-Background-bg-brand-solid, #A830E8);
  color: white;
}
.content-section .chat-card-box .box-body .chat-right-data .message-list-section .message.receiver .message-data {
  justify-content: flex-start;
}
.content-section .chat-card-box .box-body .chat-right-data .send-message-section {
  height: 100px;
  padding: 10px 24px;
}
.content-section .chat-card-box .box-body .chat-right-data .send-message-section .send-message-box {
  position: relative;
}
.content-section .chat-card-box .box-body .chat-right-data .send-message-section .send-message-box .message-box {
  padding-right: 100px;
  resize: none;
  height: 100%;
}
.content-section .chat-card-box .box-body .chat-right-data .send-message-section .send-message-box .message-box:focus {
  border-color: inherit;
  box-shadow: none;
}
.content-section .chat-card-box .box-body .chat-right-data .send-message-section .send-message-box .send-btn {
  border-radius: var(--radius-md, 8px);
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: var(--Component-colors-Components-Buttons-Primary-button-primary-bg, #121926);
  /* Shadows/shadow-xs-skeuomorphic */
  box-shadow: 0px 0px 0px 1px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner-border, rgba(16, 24, 40, 0.18)) inset, 0px -2px 0px 0px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner, rgba(16, 24, 40, 0.05)) inset, 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(16, 24, 40, 0.05));
  color: var(--Component-colors-Components-Buttons-Primary-button-primary-fg, #FFF);
  /* Text sm/Semibold */
  font-family: var(--Font-family-font-family-body, Poppins);
  font-size: var(--Font-size-text-sm, 14px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--Line-height-text-sm, 20px);
  /* 142.857% */
  position: absolute;
  right: 8px;
  bottom: 8px;
}/*# sourceMappingURL=message.css.map */