.App {
  text-align: center;
}
.App-logo {
  height: 40vmin;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}
.App-header {
  background-color: #282c34;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}
.App-link {
  color: #61dafb;
}
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.side-bar-clients,
.side-bar-campaigns {
  height: 100vh;
}
.side-bar-clients .ps-menu-root,
.side-bar-campaigns .ps-menu-root {
  position: fixed;
  overflow-x: hidden;
  padding-top: 40px;
  height: 100vh;
  width: 210px;
  min-width: 210px;
}
.side-bar-clients .ps-menu-root .ps-menuitem-root > .ps-menu-button:hover,
.side-bar-clients .ps-menu-root {
  background-color: #414040 !important;
  color: #f1f1f1;
}
.side-bar-campaigns .ps-menu-root .ps-menuitem-root > .ps-menu-button:hover,
.side-bar-campaigns .ps-menu-root {
  background-color: #888888 !important;
  color: #f1f1f1;
}
.side-bar-clients .ps-menu-root .ps-menuitem-root,
.side-bar-campaigns .ps-menu-root .ps-menuitem-root {
  text-decoration: none;
  font-size: 25px;
  display: block;
  transition: 0.3s;
  color: #dbdbdb;
}
.container {
  display: flex;
  height: 100vh;
}
.side-bar {
  height: 100vh;
  z-index: 9999;
}
.side-bar .ps-menu-root {
  height: 100vh;
}
.side-bar .ps-sidebar-root {
  border: none;
}
.side-bar ul {
  padding: 8px;
}
.side-bar .ps-menu-root > ul {
  background-color: #111;
}
.ps-menu-root > ul {
  padding-top: 40px;
  overflow-y: auto;
  overflow-x: hidden;
}
.side-bar .ps-menu-root,
.side-bar .ps-submenu-content {
  background-color: #111;
}
.side-bar .ps-menu-root .ps-menuitem-root,
.side-bar .ps-submenu-content .ps-menuitem-root {
  padding: 8px 0px;
  color: #818181;
}
.side-bar .ps-menu-root .ps-menuitem-root > a.ps-menu-button:hover,
.side-bar .ps-submenu-content .ps-menuitem-root > a.ps-menu-button:hover {
  background-color: #111 !important;
}
.side-bar .ps-menu-root .ps-menuitem-root:hover,
.side-bar .ps-submenu-content .ps-menuitem-root:hover,
.side-bar .ps-menu-root .ps-menuitem-root .ps-active,
.side-bar .ps-submenu-content .ps-menuitem-root .ps-active {
  color: #616161;
}
.ps-menu-root,
.ps-submenu-content {
  background-color: #111;
}
.ps-menu-root .ps-menuitem-root,
.ps-submenu-content .ps-menuitem-root {
  padding: 8px 0px;
  color: #818181;
}
.ps-menu-root .ps-menuitem-root > a.ps-menu-button:hover,
.ps-submenu-content .ps-menuitem-root > a.ps-menu-button:hover {
  background-color: #111 !important;
}
.ps-menu-root .ps-menuitem-root:hover,
.ps-submenu-content .ps-menuitem-root:hover,
.ps-menu-root .ps-menuitem-root .ps-active,
.ps-submenu-content .ps-menuitem-root .ps-active {
  color: #616161;
}
.main-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
}
.main-container .main-container__header {
  gap: 16px;
  justify-content: flex-start;
  padding: 16px 20px;
}
.main-container .main-container__header h2 {
  margin: 0;
}
.MuiFormControl-root > * {
  margin-bottom: 8px;
}
.MuiDataGrid-main.css-204u17-MuiDataGrid-main {
  flex: 1;
}
.css-5wly58-MuiDataGrid-root .MuiDataGrid-columnHeaderTitleContainer {
  gap: 6px;
}
.MuiDataGrid-row .MuiIconButton-root {
  opacity: 0.25;
}
.MuiDataGrid-row:hover .MuiIconButton-root {
  opacity: 1;
}
.MuiDataGrid-row .MuiIconButton-root[aria-label="delete"]:hover {
  color: rgba(228, 10, 74, 0.66);
}
@font-face {
  font-family: SofiaPro;
  src: url(/7978d11b00722a17ccfa.otf);
}
.app {
  max-width: 1566px;
  margin: auto;
  padding: 20px 20px 20px 100px;
  width: 100%;
}
.conversationsnapshot-container {
  width: 366px;
  min-height: 61px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px;
  margin-bottom: 3px;
}
.conversationsnapshot-container:hover {
  width: 366px;
  min-height: 61px;
  background: rgba(233, 236, 242, 0.5);
  border-radius: 10px;
}
.conversationsnapshot-container-selected {
  width: 366px;
  min-height: 61px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px;
  background: rgba(208, 211, 217, 0.5);
  border-radius: 10px;
  margin-bottom: 3px;
}
.conversationsnapshot-conversation-name {
  text-align: left;
  font: normal normal bold 16px/18px SofiaPro;
  letter-spacing: 0px;
  color: #4b5155;
  opacity: 1;
}
.conversationsnapshot-conversation-message-timestamp {
  text-align: right;
  font: normal normal bold 10px/12px SofiaPro;
  letter-spacing: 0px;
  color: #7b8793;
  opacity: 1;
}
.conversationsnapshot-conversation-message-text {
  overflow: hidden;
  text-align: left;
  font: normal normal bold 12px/14px SofiaPro;
  letter-spacing: 0px;
  color: #afbbc6;
  opacity: 1;
  width: 80%;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversationsnapshot-row-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 60%;
}
.conversations-container {
  display: flex;
  flex-direction: column;
  user-select: none;
  background-color: white;
  border: 1px solid #dbe5ed;
  border-right: 0px;
  padding-left: 20px;
  padding-left: 12px;
}
.unread-bubble {
  width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 50%;
  font-size: 11px;
  color: #fff;
  text-align: center;
  background: rgba(118, 121, 137, 0.6);
}
.initials-avatar {
  margin-left: 7px;
  width: 48px;
  height: 48px;
  cursor: pointer;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  background-color: #a2b4ff;
  display: inline-block;
  box-sizing: border-box;
}
.initials-avatar {
  margin-left: 7px;
  width: 62px;
  height: 62px;
  cursor: pointer;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  background-color: #a2b4ff;
  display: inline-block;
  box-sizing: border-box;
}
.initials-avatar-text {
  color: #364e9d;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: normal normal bold 21px/24px SofiaPro;
}
.initilas-avata-connected {
  height: 17px;
  width: 17px;
  background-color: #76c00d;
  top: -17px;
  left: 50px;
  position: relative;
  border-radius: 50%;
  border: white;
  border-style: solid;
  align-items: right;
  border-width: 3px;
}
.user-info-container {
  margin-bottom: 31px;
  user-select: none;
}
.user-info-header-username-text {
  color: #4b5155;
  margin-left: 21px;
  font: normal normal bold 19px/22px SofiaPro;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 250px;
}
.user-info-header-user {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
}
.user-info-header-container {
  width: 376px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin-top: 35px;
}
.user-info-header-settings {
  display: flex;
  position: relative;
  align-items: center;
  top: -9px;
  cursor: pointer;
}
.messages-container {
  width: 100%;
  max-width: 1200px;
  background: #f9fafc 0% 0% no-repeat padding-box;
  border: 1px solid #dbe5ed;
  padding-bottom: 21px;
}
.message-timestamp {
  font: normal normal bold 12px/14px SofiaPro;
  letter-spacing: 0px;
  color: #7b8793;
  opacity: 1;
}
.cls-1-settings {
  fill: #afbbc6;
}
.chat-container {
  background: #f9fafc;
  position: relative;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 0px 20px 24px;
}
.chat-header-container {
  align-items: center;
  padding: 0 29px;
  height: 88px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #dbe5ed;
  background: #f4f5f8 0% 0% no-repeat padding-box;
}
.chat-header-conversation-name {
  font: normal normal bold 18px/21px SofiaPro;
  color: #4b5155;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-header-view-switch {
  font: normal normal bold 14px/16px SofiaPro;
  width: auto;
  margin: auto 0px auto 0px;
}
.chat-header-right-group {
  display: flex;
  flex-direction: row;
}
.chat-header-search-button {
  width: 31px;
  height: 31px;
  background: #dddeea 0% 0% no-repeat padding-box;
  border-radius: 16px;
  opacity: 1;
  margin: auto 12px auto 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-header-search-button-activated {
  width: 31px;
  height: 31px;
  background: #4d5155 0% 0% no-repeat padding-box;
  border-radius: 16px;
  opacity: 1;
  margin: auto 12px auto 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.LeftRow {
  display: flex;
  flex-direction: column;
  justify-content: left;
  text-align: left;
  align-items: start;
}
.RightRow {
  display: flex;
  flex-direction: column;
  justify-content: right;
  text-align: right;
  align-items: end;
  margin-right: 10px;
}
.message-box {
  padding: 15px 20px 15px 20px;
  margin-bottom: 10px;
  border-radius: 2px;
  display: inline-block;
  word-break: break-word;
  font: normal normal 14px/16px SofiaPro;
  max-width: 70%;
  white-space: pre-line;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  opacity: 1;
  transition: opacity 1s ease;
}
.message-box.highlighted-Right {
  opacity: 0.5;
}
.message-box.highlighted-Left {
  background: rgba(138, 140, 144, 0.5);
}
.message-box-reply-text {
  margin-right: 20px;
  max-width: 100%;
  min-width: 100%;
}
.message-box-text {
  max-width: 100%;
  min-width: 100%;
}
.right a {
  color: #4c70dc;
}
.left a {
  color: #b5e0ff;
}
.message-box-reply {
  padding: 8px 4px 15px 8px;
  margin-bottom: 10px;
  border-radius: 2px;
  display: inline-block;
  word-break: break-word;
  font: normal normal 14px/16px SofiaPro;
  white-space: pre-line;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 70%;
  opacity: 1;
  transition: opacity 1s ease;
}
.message-box-reply.highlighted-Right {
  opacity: 0.5;
}
.message-box-reply.highlighted-Left {
  background: rgba(138, 140, 144, 0.5);
}
.left:hover {
  background: #344561;
}
.right:hover {
  background-color: #eee;
}
.left {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #506177;
  color: #ffffff;
}
.right {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: #ffffff;
  color: #7b8793;
}
.right-deleted {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: #506177;
  color: #ffffff;
}
.leftFirst {
  border-top-left-radius: 10px;
}
.leftLast {
  border-bottom-left-radius: 10px;
}
.rightFirst {
  border-top-right-radius: 10px;
}
.rightLast {
  border-bottom-right-radius: 10px;
}
.three-dots-typing {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #dbe5ed;
  font: normal normal normal 12px/14px SofiaPro;
  color: #7b8793;
  height: 24px;
  border-radius: 10px 10px 10px 0px;
  padding: 0 18px 0 21px;
}
.dot {
  font-size: 24px;
  opacity: 0.3;
  animation-name: dotFade;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin: 0 1px;
}
.dot.active {
  opacity: 1;
}
@keyframes dotFade {
  0%,
  80%,
  100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}
.rich-text-editor-container {
  background-color: #f9fafc;
  margin: 0 21px;
}
.rich-text-horizontal-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  align-items: end;
}
.rich-text-horizontal-buttons-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.rich-text-editor {
  border: 1px solid #dbe5ed;
  border-radius: 33px;
  background: #ffffff;
  min-height: auto;
  padding: 7px 0px 7px 0px;
  max-height: 390px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  max-width: 747px;
  margin: auto;
  position: sticky;
  bottom: 0px;
  flex-direction: column;
}
.rich-text-editor-input {
  flex-grow: 1;
  margin-left: 20px;
  border: none;
  font: normal normal 16px/18px SofiaPro;
  outline: 0px solid transparent;
  z-index: 10;
  background: transparent;
  max-width: 610px;
  display: block;
  white-space: pre-line;
  overflow-y: auto;
  max-height: 300px;
  min-height: 35px;
}
.rich-text-editor-placeholder {
  color: #7b8793;
  opacity: 0.5;
  text-align: left;
  font: normal normal 16px/18px SofiaPro;
  letter-spacing: 0px;
  position: absolute;
  margin-left: 20px;
  border: none;
  user-select: none;
  height: 50px;
  text-align: center;
  align-items: center;
  display: flex;
}
.rich-text-editor-send-button-container {
  width: 50px;
  height: 50px;
  background: #37414e 0% 0% no-repeat padding-box;
  border-radius: 25px;
  font-size: 28px;
  float: right;
  margin-right: 7px;
  align-items: center;
  display: flex;
  justify-content: center;
  cursor: pointer;
  font-size: "25px";
  color: "white";
}
.rich-text-editor-actions-container {
  margin-right: 30px;
  display: flex;
  align-items: center;
}
.rich-text-editor-attachment-button-container {
  width: 28px;
  margin-top: 6px;
  cursor: pointer;
}
.rich-text-editor-attachment-button-container:hover {
  opacity: 0.6;
}
.rich-text-editor-send-button-container:hover {
  opacity: 0.6;
}
.switch {
  width: 171px;
  height: 35px;
  background-color: #dddeeb;
  border-radius: 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.4s;
  position: relative;
  font: normal normal bold 14px/16px SofiaPro;
  opacity: 1;
  user-select: none;
}
.switch-right-text.active {
  opacity: 1 !important;
}
.switch-left-text.active {
  opacity: 1 !important;
}
.switch-toggle {
  width: 70px;
  height: 30px;
  background-color: #fff;
  border-radius: 16px;
  transition: transform 0.4s;
  position: absolute;
  margin: 5px 2px;
}
.switch-left-text {
  position: absolute;
  float: left;
  text-align: left;
  color: #4b5155;
  z-index: 10;
  left: 20px;
  opacity: 0.5;
  transition: opacity 0.4s;
}
.switch-right-text {
  position: absolute;
  text-align: right;
  right: 20px;
  color: #4b5155;
  z-index: 10;
  opacity: 0.5;
  transition: opacity 0.4s;
}
.switch-toggle.active {
  transform: translateX(65px);
  /* Move the toggle to the right for active state */
  width: 102px;
}
.cls-1-chat-place-holder {
  fill: none;
}
.cls-2-chat-place-holder {
  clip-path: url(#clippath);
}
.cls-3-chat-place-holder {
  fill: #69bc73;
}
.cls-4-chat-place-holder {
  fill: #f77a66;
}
.cls-5-chat-place-holder {
  fill: #fff;
}
.cls-6-chat-place-holder {
  fill: #ffe8d7;
}
.cls-7-chat-place-holder {
  fill: #e5e5e5;
}
.cls-8-chat-place-holder {
  fill: #b6ccd8;
}
.cls-9-chat-place-holder {
  fill: #a3bfcc;
}
.cls-10-chat-place-holder {
  fill: #cfdce5;
}
.cls-11-chat-place-holder {
  fill: #10202f;
}
.cls-12-chat-place-holder {
  fill: #427da5;
}
.cls-13-chat-place-holder {
  fill: #9b362c;
}
.cls-14-chat-place-holder {
  fill: #485760;
}
.cls-15-chat-place-holder {
  fill: #5ca7e5;
}
.cls-16-chat-place-holder {
  fill: #f4591c;
  opacity: 0.5;
}
.chat-place-holder {
  width: 55vh;
  margin: auto;
}
.chat-place-holder-heading {
  text-align: center;
  font: normal normal bold 38px/44px SofiaPro;
  letter-spacing: 0px;
  color: #4b5155;
  opacity: 1;
  margin-bottom: 20px;
}
.chat-place-holder-text {
  text-align: center;
  font: normal normal normal 20px/23px SofiaPro;
  letter-spacing: 0px;
  color: #4b5155;
  opacity: 1;
  margin-bottom: 60px;
}
.chat-place-holder-container {
  height: calc(100vh - 218px);
}
.cls-1-send-button {
  fill: #fff;
}
.file-drag-overlay-container {
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 40px);
  height: calc(100% - 20px);
  margin: 20px 20px 0px 20px;
  position: absolute;
  border-radius: 20px;
  opacity: 0.93;
  border: 1px solid #dbe5ed;
  background: #ffffff 0% 0% no-repeat padding-box;
}
.file-drag-attachment-icon-container {
  width: 157px;
  height: 157px;
  border-radius: 50%;
  background: #37414e 0% 0% no-repeat padding-box;
  opacity: 1;
  font-size: "67px";
  padding: 32px;
}
.file-drag-text-container {
  display: flex;
  flex-direction: column;
}
.file-drag-text-heading {
  text-align: center;
  font: normal normal bold 37px/43px SofiaPro;
  letter-spacing: 0px;
  color: #37414e;
  opacity: 1;
  margin-bottom: 12px;
  margin-top: 24px;
}
.file-drag-text-drag {
  text-align: center;
  font: normal normal bold 14px/16px SofiaPro;
  letter-spacing: 0px;
  color: #37414e;
  opacity: 1;
  margin-bottom: 12px;
}
.file-drag-text-supported {
  text-align: center;
  font: normal normal normal 14px/16px SofiaPro;
  letter-spacing: 0px;
  color: #4b5155;
  opacity: 1;
}
.chat-resizable-container {
  position: relative;
}
.files-container {
  display: flex;
  flex-direction: column;
}
.file-box-container {
  width: 231px;
  height: 194px;
  background: #dcdfe666 0% 0% no-repeat padding-box;
  border-radius: 10px;
  opacity: 1;
  display: flex;
  flex-direction: column;
}
.file-box-container-selected {
  width: 231px;
  height: 194px;
  background: #db683b41 0% 0% no-repeat padding-box;
  border-radius: 10px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.file-box-preview {
  width: 204px;
  height: 139px;
}
.options-menu {
  position: fixed;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-width: 150px;
  border-radius: 6px;
  font: normal 16px/18px SofiaPro;
  margin: 5px 0px;
  padding: 10px 0px;
  color: #000;
  z-index: 100;
}
.options-menu-option {
  padding: 4px 8px;
  display: flex;
  align-items: center;
  margin: auto 0;
  background-color: #fff;
  color: #000;
}
.options-menu-option:hover {
  background-color: #dcdfe666;
  cursor: pointer;
}
.file-box-header {
  padding-top: 13px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  margin-left: 14px;
  margin-right: 14px;
}
.file-box-header-text {
  text-align: left;
  font: normal 16px/18px SofiaPro;
  letter-spacing: 0px;
  color: #4b5155;
  opacity: 1;
  width: 160px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.file-box-header-icon {
  width: 14px;
  margin-right: 8px;
  display: flex;
  align-items: center;
}
.file-box-preview {
  width: 204px;
  height: 139px;
  object-fit: cover;
}
.file-box-preview-container {
  margin: auto;
}
.cls-1-file-icon {
  fill: #afbbc6;
  stroke-width: 0px;
}
.cls-1-check-mark {
  fill: #fff;
}
.edit-dots {
  display: flex;
  flex-direction: column;
  font: normal normal normal 12px/14px SofiaPro;
  color: #7b8793;
  position: relative;
  bottom: 10px;
  justify-content: space-around;
  height: 15px;
  user-select: none;
}
.edit-dot {
  font-size: 25px;
  cursor: pointer;
  height: 5.5px;
  width: 4px;
  user-select: none;
}
.edit-dots:hover {
  opacity: 0.6;
}
.file-view-header-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 28px;
  margin-bottom: 24px;
  margin-top: 34px;
}
.file-view-header-text {
  text-align: left;
  font: normal normal bold 18px/21px SofiaPro;
  letter-spacing: 0px;
  color: #4b5155;
  opacity: 1;
}
.file-view-header-button {
  background: #dddeea 0% 0% no-repeat padding-box;
  border-radius: 12px;
  opacity: 1;
  font: normal normal bold 14px/16px SofiaPro;
  letter-spacing: 0px;
  color: #4b5155;
  text-align: center;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 11px;
  width: fit-content;
  user-select: none;
}
.file-view-header-dropdown {
  background: #dddeea 0% 0% no-repeat padding-box;
  border-radius: 12px;
  opacity: 1;
  font: normal normal bold 14px/16px SofiaPro;
  letter-spacing: 0px;
  color: #4b5155;
  text-align: center;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 11px;
  width: 100px;
  user-select: none;
  cursor: pointer;
  border: none;
}
.file-view-header-button:hover {
  opacity: 0.6;
}
.file-view-header-buttons-container {
  display: flex;
  justify-content: row;
}
.file-selection-radio {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #e1e2e6;
  cursor: pointer;
  align-items: center;
  display: flex;
}
.file-selection-radio-selected {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ec5f2a;
  cursor: pointer;
  align-items: center;
  display: flex;
}
.chat-messages-container {
  max-width: 777px;
  margin: auto auto 0px auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
.chat-messages-input-container {
  width: 100%;
  position: sticky;
  bottom: 0px;
  background-color: #f9fafc;
  padding-top: 20px;
}
.rich-text-reply-box-container {
  width: 100%;
  height: 49px;
  background-color: #f4f6f8;
  border-radius: 9px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 7px 15px 7px 8px;
  justify-content: space-between;
  margin-left: 12px;
  margin-right: 60px;
}
.rich-text-reply-box-right-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.rich-text-reply-box-preview-line {
  width: 3px;
  height: 35px;
  background: #61c2ed 0% 0% no-repeat padding-box;
  border-radius: 3px 3px 3px 3px;
}
.rich-text-reply-box-text-container {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: left;
  max-width: 620px;
}
.rich-text-reply-box-name {
  text-align: left;
  font: normal normal bold 12px/25px SofiaPro;
  letter-spacing: 0px;
  color: #4b5155;
  width: 150px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.rich-text-reply-box-text {
  text-align: left;
  font: normal normal normal 12px/25px SofiaPro;
  letter-spacing: 0px;
  color: #4b5155;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 600px;
}
.message-box-reply-box-container {
  width: fit-content;
  max-height: 80px;
  background-color: #f4f6f8;
  border-radius: 9px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 6px 6px 6px 6px;
  justify-content: space-between;
  margin-bottom: 15px;
  max-width: 100%;
  cursor: pointer;
}
.message-box-reply-box-right-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.message-box-reply-box-preview-line {
  width: 10px;
  height: 30px;
  background: #61c2ed 0% 0% no-repeat padding-box;
  border-radius: 3px 3px 3px 3px;
}
.message-box-reply-box-text-container {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: left;
}
.message-box-reply-box-name {
  text-align: left;
  font: normal normal bold 12px/18px SofiaPro;
  letter-spacing: 0px;
  color: #4b5155;
  width: 150px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.message-box-reply-box-text {
  text-align: left;
  font: normal normal normal 12px/18px SofiaPro;
  letter-spacing: 0px;
  color: #4b5155;
  display: flex;
  align-items: flex-start;
  max-height: 1.3em;
  overflow: hidden;
}
.rich-text-file-box-text-remove-button {
  width: 20px;
  cursor: pointer;
  display: flex;
}
.rich-text-reply {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: left;
  padding: 0px 22px 7px 22px;
}
.rich-text-reply-line {
  width: 95%;
  height: 0.6px;
  background-color: #afbbc6;
  opacity: 0.7;
  margin-left: 20px;
  margin-bottom: 7px;
}
.rich-text-file-box-container {
  width: 242px;
  height: 49px;
  background-color: #f4f6f8;
  border-radius: 9px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 7px 15px 7px 8px;
  justify-content: space-between;
  margin-left: 12px;
  margin-bottom: 7px;
}
.rich-text-file-box-preview-container {
  display: flex;
}
.rich-text-file-box-preview-line {
  width: 3px;
  height: 35px;
  background: #61c2ed 0% 0% no-repeat padding-box;
  border-radius: 3px 0px 0px 3px;
}
.rich-text-file-box-preview-file-wrap {
  width: 35px;
  height: 35px;
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 0px 3px 3px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.rich-text-file-box-text-container {
  display: flex;
  flex-direction: column;
  justify-content: left;
}
.rich-text-file-box-text-filename {
  text-align: left;
  font: normal normal bold 12px/25px SofiaPro;
  letter-spacing: 0px;
  color: #4b5155;
  width: 150px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.rich-text-file-box-text-dimension {
  text-align: left;
  font: normal normal normal 12px/25px SofiaPro;
  letter-spacing: 0px;
  color: #4b5155;
}
.rich-text-file-box-text-file-icon {
  width: 20px;
  height: 24px;
}
.rich-text-file-box-text-remove-button {
  width: 20px;
  cursor: pointer;
  display: flex;
}
.rich-text-file-box-text-remove-button:hover {
  opacity: 0.7;
}
.cls-1-cross-icon {
  fill: #afbbc6;
  stroke-width: 0px;
}
.rich-text-files {
  display: flex;
  flex-direction: row;
  width: auto;
  justify-content: left;
  margin: 0px 22px 7px 22px;
  overflow: auto;
  border-radius: 9px;
}
.rich-text-files-line {
  width: 95%;
  height: 0.6px;
  background-color: #afbbc6;
  opacity: 0.7;
  margin-left: 20px;
  margin-bottom: 7px;
}
.rich-text-file-box-right-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.file-view-boxes-container {
  margin: 19px auto auto auto;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(241px, 241px));
  grid-gap: 8px;
  padding-left: 20px;
}
.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.2s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.1s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.alert-box {
  position: absolute;
  min-width: 87px;
  background: hsl(225, 9.52%, 91.76%) 0% 0% no-repeat padding-box;
  border-radius: 6px;
  top: 11px;
  left: 50%;
  transform: translate(-50%, 0%);
  text-align: left;
  font: normal normal bold 14px/16px SofiaPro;
  letter-spacing: 0px;
  color: #536075;
  opacity: 1;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  text-align: center;
  padding: 5px;
  transition: opacity 0.5s ease-in-out;
}
.alert-box.visible {
  display: flex;
  animation: fadeInOut 4s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  20%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes shineAndFade {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 1;
    transform: scale(1.05);
  }
  80% {
    opacity: 1;
    transform: scale(0.95);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}
.search-bar-input {
  font: normal normal bold 16px/18px SofiaPro;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 0px solid #dbe5ed;
  border-radius: 9px 0px 0px 9px;
  opacity: 1;
  width: 100%;
  height: 34px;
  color: #506177;
  user-select: "text";
}
.search-bar-input::placeholder {
  font: normal normal bold 16px/18px SofiaPro;
  color: #50617775;
}
.search-bar-input:focus {
  border: 0px solid #dbe5ed;
  outline: none;
  box-shadow: 0;
}
.search-bar-container {
  background: #f4f5f8 0% 0% no-repeat padding-box;
  display: flex;
  flex-direction: row;
  padding: 8px 21px;
  align-items: center;
  margin: auto;
  border-bottom: 1px solid #dbe5ed;
}
.search-bar-button-wrap {
  font: normal normal bold 16px/18px SofiaPro;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #dbe5ed;
  border-radius: 9px;
  opacity: 1;
  width: 100%;
  height: 36px;
  display: flex;
  flex-direction: row;
  padding: 0px 20px 0px 20px;
}
.search-button {
  border: 0px;
  background: #ffffff 0% 0% no-repeat padding-box;
  font: normal normal bold 16px/18px SofiaPro;
  color: #506177;
  text-align: right;
  min-width: 68px;
  height: auto;
  user-select: none;
}
.search-button:hover {
  cursor: pointer;
}
.search-arrow-circle {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin: auto 10px auto 0px;
  background-color: #dbe5ed;
}
.search-occurences-container {
  width: 27px;
  height: 18px;
  margin: auto;
  padding: 0px 10px 0px 10px;
}
.search-arrow-circle:hover {
  cursor: pointer;
}
.highlighted-word {
  background-color: #ff5733;
  color: white;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
}
.file-view-boxes-container.demo-links {
  display: flex;
  flex-direction: column;
  gap: 1em;
  box-sizing: border-box;
}
.demo-link-box-container {
  padding: 0.8em;
  border-radius: 0.8em;
  background: #e8e9ec;
}
.demo-link-box-container.pinned {
  background: #d0d3dd;
}
.demo-link-box-container.pinned a {
  color: #294bb2;
}
.demo-link-box-header a {
  color: #4c70dc;
}
.demo-link-timestamp {
  font-size: 0.8em;
}
.demo-link-box-container .edit-dots {
  padding: 0 0.8em;
}
.app {
  display: flex;
  flex-direction: row;
  padding: 20px 20px 20px 100px;
  width: 100%;
}
.custom-scrollbars__container {
  display: flex;
  height: 100%;
  overflow: hidden;
  position: relative;
  justify-content: space-between;
  scroll-behavior: smooth;
}
.custom-scrollbars__content {
  /*max-width: 777px;*/
  margin: auto;
  -ms-overflow-style: none;
  overflow: auto;
  scrollbar-width: none;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.custom-scrollbars__content::-webkit-scrollbar {
  display: none;
}
.custom-scrollbars__scrollbar {
  display: grid;
  gap: 1rem;
  grid-auto-flow: row;
  grid-template: auto 1fr auto / 1fr;
  place-items: center;
}
.custom-scrollbars__track-and-thumb {
  display: block;
  height: 100%;
  position: relative;
  width: 8px;
}
.custom-scrollbars__track {
  background-color: #fff;
  border-radius: 10px;
  bottom: 0;
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 6px;
}
.custom-scrollbars__thumb {
  border-radius: 10px;
  background-color: #DBE5ED;
  position: absolute;
  width: 6px;
}
.banner {
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.banner-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
.banner-message {
  display: inline-block;
  font-size: 16px;
  line-height: 50px;
  vertical-align: middle;
}
.banner-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 16px;
  cursor: pointer;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}