@import "variables.css";

*,
::after,
::before {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-family) !important;
  background: var(--white-color);
  overflow: hidden;
  height: 100%;
  padding: 0.5rem;
  margin: 0;
  position: relative;
  font-size: 13px;
  color: var(--dark-gray-shade2-color);
  font-weight: 400;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden !important;
}

.emoji-main {
  position: absolute;
  bottom: 50px;
  left: 0;
  z-index: 9;
  max-width: 350px;
  /* width: 100%; */
  min-width: 320px;
}

.right-0 {
  right: 0 !important;
}

.bottom-0 {
  bottom: 0 !important;
}

.left-auto {
  left: auto !important;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed !important;
}
.bg--dark {
  background-color: var(--dark-color);
}

.bg--transparent {
  background-color: var(--light-opac-color);
}

.text-orange {
  color: var(--orange-color) !important;
}
.text-orange-light {
  color: var(--orange-bar) !important;
}

.text--light {
  color: var(--extra-light-gray-color);
}

.jpeg-img {
  max-height: 85% !important;
  width: 75% !important;
  border-radius: 6px !important;
}

.border-radius {
  border-radius: var(--border-radius);
}

.border-radius-left {
  border-radius: var(--border-radius-left);
}

.border-radius-right {
  border-radius: var(--border-radius-right);
}

.border-radius-3 {
  border-radius: 3px;
}

.border-radius-0 {
  border-radius: 0 !important;
}

.top-10 {
  top: 10px;
}

.w--full {
  width: var(--full);
}

.w--30 {
  width: 30px;
}

.w--80 {
  width: 80% !important;
}

.w--half-less-ten {
  width: var(--half-less-ten);
}

.content--h-space-between {
  justify-content: space-between;
}

.content--h-end {
  justify-content: flex-end;
}

.m-0 {
  margin: 0;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-5 {
  margin-bottom: 2rem;
}

.mr-0 {
  margin-right: 0;
}

.mr-1 {
  margin-right: 0.25em !important;
}

.mr-3 {
  margin-right: 1rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mb-1 {
  margin-bottom: 1rem;
}

.ml--auto {
  margin-left: auto;
}

.ml-0 {
  margin-left: 0 !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 1rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.p-4 {
  padding: 1.4rem;
}

.p-9 {
  padding: 4rem;
}

.p-1 {
  padding: 0.25rem;
}

.text-bold {
  font-weight: var(--font-bold) !important;
}

.font--medium {
  font-weight: var(--font-medium) !important;
}

.pos--absolute {
  position: absolute;
  top: 0;
  left: 0;
}

small {
  font-size: 85%;
}

::placeholder {
  color: var(--placeholder-color);
}

button {
  position: relative;
}

#root {
  height: 100%;
}

.btn {
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  position: relative;
  border: 2px solid;
  height: 2.3rem;
  border-radius: 6px;
}

.btn-orange {
  background-color: var(--red-color);
  color: var(--white-color) !important;
  border-color: var(--red-color);
}

.btn-orange:hover,
.btn-orange:focus {
  border-color: var(--dark-red-color);
}

.btn-dark-grey {
  background-color: var(--dark-color);
  color: var(--white-color) !important;
  border-color: var(--dark-color);
}

.btn-dark-grey:hover,
.btn-dark-grey:focus {
  border-color: var(--light-gray-color);
}

.btn--block {
  width: var(--full);
}

h3 {
  font-size: 17px;
}

p {
  line-height: 1.7em;
  margin-top: 0;
}

.credential-container {
  height: 370px;
  max-width: 800px;
}

.credential-container-right {
  background: url(../images/pexels-cottonbr.png) no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.credential-container-right::before {
  background-color: var(--dark-opac-color);
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.credential-container-right .text-poweredby {
  font-size: 0.55rem;
}

.text-center {
  text-align: var(--text-center);
}

.wrapper {
  height: 100%;
}

.unread_message {
  background: antiquewhite;
}

button:focus,
a:focus {
  outline: none !important;
  box-shadow: none !important;
}

.btn {
  font-weight: var(--font-bold);
}

button,
a,
input[type="file"]::-webkit-file-upload-button,
[role="button"] {
  cursor: pointer;
}

input[type="text"],
input[type="password"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0 0 0 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.9);
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset none;
  background-color: var(--white-color);
  border-radius: 50px;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: none;
  border-radius: 50px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--light-color);
  border: none;
  border-radius: var(--border-radius);
}

h6 {
  font-weight: 500;
  font-size: 18px;
}

a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  outline: none;
}

[type="reset"],
[type="submit"],
button,
html [type="button"] {
  -webkit-appearance: button;
}

.d-flex {
  display: flex !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-center {
  justify-content: center;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

label {
  display: inline-block;
}

.form-group:last-child {
  margin-bottom: 0;
}

.text-right {
  text-align: var(--text-right) !important;
}

button {
  line-height: 1.5;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

ul {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.flex-column {
  flex-direction: column !important;
}

.pb-1 {
  padding-bottom: 10px !important;
}

.mb-1 {
  margin-bottom: 10px !important;
}

.ml-auto {
  margin-left: auto;
}

.ml-1 {
  margin-left: 0.25rem !important;
}

.navbar {
  padding: 8px;
  border: none;
  border-radius: 0;
  /* height: 54px; */
  height: 30px;
  flex-flow: row nowrap;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.navbar-toggler-icon svg {
  width: 100%;
}

.right_content_sec .top-header .navbar-toggler img {
  width: auto;
  height: 25px;
}

.right_content_sec .top-header .navbar-toggler .navbar-toggler-icon {
  width: auto;
  height: auto;
}

.navbar-btn {
  box-shadow: none;
  outline: none !important;
  border: none;
}

.top-header .navbar-brand {
  width: 320px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-header .navbar-collapse {
  width: calc(100% - 476px);
  margin-left: 8px;
  display: flex;
  justify-content: flex-start;
  margin-right: auto;
}

.top-header .navbar-collapse .navbar-btns-ico .nav-link {
  background: var(--dark-gray-color);
  border-radius: var(--border-radius);
  color: var(--light-color);
  margin-right: 8px;
  font-size: 12px;
  padding: 0 15px 0 20px;
  display: flex;
  align-items: center;
  min-width: 155px;
  justify-content: space-between;
  min-height: 38px;
  border: 1px solid transparent;
}

.top-header .navbar-collapse .navbar-btns-ico .nav-link:hover {
  opacity: 0.9;
}

.top-header .navbar-brand img {
  width: auto;
  margin-left: auto;
  position: relative;
  height: 29px;
}

.top-header .navbar-brand a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.top-header .navbar-collapse .navbar-btns-ico .nav-item:last-child .nav-link {
  margin-right: 0;
}

.cross-ico {
  display: flex;
  align-items: center;
  width: 35px;
  padding: 0;
}

.top-header .navbar-collapse .navbar-nav {
  flex-direction: row;
}

i {
  display: inline-block;
}

.login-page-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding: 8px;
  overflow-y: auto;
}

.login-main-box {
  display: flex;
  justify-content: center;
  width: 50%;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.draw-layout {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
}

.object-fit-fill {
  object-fit: fill !important;
}

.object-fit-cover {
  object-fit: cover;
}

.edit-cut {
  position: absolute;
  width: 27px;
  height: 27px;
}

.login-img-box {
  width: 50%;
  padding: 60px 50px;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  background-color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--white-color);
}

span.link-style a {
  color: var(--orange-color) !important;
}

span.link-style a:hover {
  text-decoration: underline;
}

.login-from-box {
  width: calc(100% - 50%);
  background: var(--dark-gray-color);
  padding: 30px 50px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border: 1px solid var(--dark-gray-color);
}

.login-from-box a img {
  height: 100%;
  width: 100%;
  margin-bottom: 2rem;
}

.login-from-box label {
  font-size: 13px;
  font-weight: var(--font-medium);
  margin-bottom: 5px;
  color: var(--white-color);
}

.login-from-box .login-btn {
  width: 100%;
  background: var(--orange-color);
  padding: 9px 15px;
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin: 10px 0 0;
  color: var(--white-color);
  font-size: 12px;
  cursor: pointer;
  text-transform: uppercase;
  position: relative;
  border: 2px solid var(--orange-color);
}

.login-from-box .login-btn:hover {
  background-color: var(--orange-hover-color);
  border: 2px solid var(--white-color);
}

.login-from-box .forgot-pass {
  color: var(--white-color);
}

.login-from-box .login-from-box-a {
  display: inline-flex;
  align-items: center;
  width: auto;
  justify-content: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto 2rem;
  height: 45px;
}

.login-from-box .form-control {
  height: 40px;
  padding: 0 8px;
  background: var(--white-color);
  border: 1px solid var(--white-color);
  border-radius: var(--border-radius);
  color: var(--dark-color);
  box-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat_sec .left_s ::-webkit-scrollbar-track,
.chat_sec .left_s ::-webkit-scrollbar-thumb {
  border-radius: var(--border-radius) !important;
}

.chat_sec {
  height: 100%;
  padding: 8px;
}

.chat_sec ul {
  list-style: none;
  align-items: center;
}

.chat_sec small {
  font-size: 70%;
}

.left_s {
  /* width: 320px; */
  position: relative;
  background: var(--white-color);
  color: var(--dark-color);
  border-radius: var(--border-radius);
  height: 100%;
}

.right_s {
  /* width: calc(100% - 328px); */
  background: var(--white-color);
  margin-left: 8px;
  border-radius: var(--border-radius);
  height: 100%;
  right: 0;
}

.left_s .head {
  display: flex;
}

.left_s .head .user {
  display: flex;
  width: calc(100% - 50px);
  align-items: center;
}

.left_s .head .user .avatar {
  margin-right: 8px;
  width: 40px;
  height: 40px;
  object-fit: cover;
  position: relative;
  background-color: var(--light-color);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left_s .head .user .avatar svg,
.left_s .head .user .avatar img {
  display: block;
  border-radius: var(--border-radius);
  width: 100%;
  object-fit: cover;
}

.left_s .head .user .avatar img {
  max-height: 100%;
}

.left_s .head .user .avatar .status {
  border-width: 2px;
}

.left_s .head .user .contact_info {
  width: calc(100% - 50px);
}

.left_s .chat_list .head .user .text-small {
  color: var(--dark-color);
  margin-top: 0px;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.left_s .chat_list .head .alink {
  font-size: 15px;
}

.left_s .name {
  font-size: 13px;
  font-weight: var(--font-medium);
  color: var(--dark-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 70%;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.left_s .head .bar_tool {
  display: flex;
  margin: 0;
  position: relative;
}

.left_s .head .bar_tool li {
  line-height: 15px;
}

.chat_badge {
  background-color: var(--dark-color);
  color: var(--white-color);
  min-width: 16px;
  min-height: 16px;
  border-radius: 3px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  line-height: 16px;
  padding: 0 2px;
}

.left_s .message-list-head {
  padding: 5px 5px;
  gap: 4px;
  border-radius: 6px;
}
.expend-chevron {
  height: 23px;
  width: 23px;
  border-radius: 5px;
}

.expend-chevron:hover {
  background: #edf0f4;
}

.expend-chevron.active {
  transform: rotate(270deg);
}

.speaker::after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* z-index: 1; */
  width: 100%;
  content: "";
  box-shadow: inset 0 0 1.25em #4dad43;
}

.left_s .message-list-head span {
  font-size: 13px;
  font-weight: var(--font-medium);
  color: var(--dark-color);
  text-transform: uppercase;
}

/* .left_s .message-list-head svg path{
  fill: var(--dark-color);
} */
.left_s .direct-message {
  margin-top: 7px;
}

.left_s .group-message {
  margin-bottom: 5px;
}

.left_s .head .bar_tool i {
  padding: 5px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  border: 1px solid var(--white-color);
  background-color: var(--light-color);
}

.left_s .head .status {
  position: absolute;
  right: -3px;
  bottom: -3px;
}

.bar_tool .chat_search {
  position: relative;
  display: flex;
  align-items: center;
  width: 270px;
  height: 100%;
}

.bar_tool .chat_search .form-control {
  background: var(--light-gray-color);
  min-height: 40px;
  border-radius: 7px;
  color: var(--extra-light-gray-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 40px 0 8px;
  width: 270px;
  height: 100%;
}

.left_s .chat_search,
.chat_search {
  position: relative;
  height: 3.1rem;
  display: flex;
  align-items: center;
}

.left_s .chat_search input,
.chat_search input {
  height: 100%;
  padding: 0 45px 0 10px;
  background: var(--white-color);
  border: 2px solid var(--light-color);
  border-radius: var(--border-radius);
  color: var(--dark-color);
  box-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn_search {
  position: absolute;
  /* width: 17px; */
  right: 10px;
  top: auto;
  left: auto;
  cursor: pointer;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left_s .chat_list {
  height: calc(100% - 10.7rem);
  overflow-y: auto;
  overflow-y: overlay;
}

.left_s.schedule-call .chat_list {
  height: calc(100% - 13.5rem);
}

.left_s .chat_list .head {
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  border-radius: var(--border-radius);
  justify-content: space-between;
  margin-bottom: 3px;
}

.left_s .chat_list .head:hover,
.left_s .chat_list .head.selected,
.left_s .message-list-head:hover {
  background: var(--light-color);
}

.left_s .chat_list .head:last-child {
  margin-bottom: 0;
}

.right_s ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.right_s .blog {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.alink {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-radius: 50%;
  min-width: 27px;
  min-height: 27px;
  width: 27px;
  height: 27px;
  padding: 0.3rem;
}

.alink:hover {
  background-color: var(--light-gray-color);
}

.right_s input[type="text"],
.right_s button {
  outline: 0;
}

.right_s button {
  cursor: pointer;
}

.right_s .text-area-div button {
  width: 46px;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.right_s .chat_box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.right_s .search .chat_box {
  height: calc(100% - 5.2rem);
}

.right_s .head {
  display: flex;
  align-items: center;
  background: var(--dark-color);
  border-radius: var(--border-radius);
  padding: 3px 5px;
  margin: 8px;
  position: relative;
  height: 53px;
  justify-content: space-between;
}

.right_s .head .user {
  display: flex;
  align-items: center;
  width: calc(100% - 100px);
  height: 100%;
}

.right_s .head .user .avatar {
  margin-right: 8px;
  width: 43px;
  height: 43px;
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--light-color);
}

.right_s .head .user .avatar svg,
.right_s .head .user .avatar img {
  display: block;
  width: 100%;
  object-fit: cover;
  max-height: 55%;
}

.right_s .head .user .avatar img {
  max-height: 100%;
}

.right_s .head .user .contact_info {
  width: calc(100% - 70px);
}

.right_s .name {
  font-size: 17px;
  font-weight: var(--font-medium);
  color: var(--white-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.right_s .head .bar_tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 18px;
  height: 100%;
  gap: 0.5rem;
}

.right_s .head .bar_tool i {
  padding: 5px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right_s .head .bar_tool .d-flex span:last-child {
  padding-top: 10px;
  padding-bottom: 10px;
}

.right_s .head .bar_tool .links {
  display: flex;
  align-items: center;
  font-size: 1rem;
  gap: 0.1rem;
  cursor: pointer;
  border: 1px solid var(--extra-light-gray-color);
  padding: 0.1rem 0.3rem;
  border-radius: var(--border-radius);
  min-height: 30px;
  min-width: 30px;
}

.right_s .head .bar_tool .links:hover {
  background-color: var(--light-gray-color);
}

.right_s .head .status {
  margin-right: 2px;
  display: inline-flex;
}

.right_s .body {
  flex-grow: 1;
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
  padding: 8px;
}

.right_s .body-inner {
  height: calc(100% - 270px - 54px);
  position: relative;
}

.right_s .body .chat-feed {
  display: flex;
  flex-direction: column;
  width: 100%;
  scrollbar-gutter: stable;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.h-80 {
  height: 80px;
}

.right_s .body .bubble,
.pinned-msg .body .bubble {
  display: flex;
  border-radius: var(--border-radius);
  flex-direction: column;
  justify-content: center;
}

.right_s .body .bubble p,
.pinned-msg .body .bubble p {
  color: var(--dark-color);
  font-size: 12.5px;
  text-align: left;
  line-height: 1.4;
  margin: 0;
  font-weight: normal;
}

.right_s .body .chat_row,
.pinned-msg .body .chat_row {
  text-align: left;
  margin-bottom: 8px;
  padding: 4px;
  border-radius: var(--border-radius);
  position: relative;
}

.pinned-msg .body .chat_row {
  cursor: pointer;
}

.right_s .body .chat_row .avatar,
.pinned-msg .body .chat_row .avatar {
  margin-right: 2px;
}

.right_s .body .chat_actions {
  position: absolute;
  right: 3px;
  top: -8px;
}

.right_s .body .chat_actions_span {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dim-grey-color);
  min-width: 28px;
  min-height: 28px;
  border-radius: 5px;
  background-color: var(--white-color);
}

.right_s .body .chat_actions_dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--light-color);
  min-width: 60px;
  width: max-content;
  border-radius: 5px;
  background-color: var(--light-color);
  position: absolute;
  right: 0;
  bottom: 145%;
  padding: 3px;
  z-index: 1;
  border: 1px solid var(--light-shade2-color);
  box-shadow: 0 0 5px var(--light-dim-grey-color);
}

.right_s .body .chat-custom-dropdown .chat_actions_dropdown {
  min-width: 150px;
  bottom: auto;
  top: 35px;
}

.right_s .body .chat-custom-dropdown.position-bottom .chat_actions_dropdown {
  bottom: 35px;
  top: auto;
}

.right_s .body .chat-custom-dropdown .chat_actions_dropdown::after {
  display: none;
}

.display_none {
  display: none;
}

.display_flex {
  display: flex !important;
}

.edit_message_display {
  color: var(--extra-light-gray-color) !important;
}

.right_s .body .chat_actions_dropdown::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--light-color);
  position: absolute;
  bottom: -9px;
  right: 7px;
}

.right_s .body .chat_actions_dropdown .chat_actions_li {
  min-height: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.right_s .body .chat_actions_dropdown .chat_actions_li:hover {
  background-color: rgba(184, 192, 201, 0.2);
}

.right_s .body .chat_row:hover .chat_actions {
  display: flex;
}

.right_s .body .chat_row:hover .foot {
  border-color: var(--placeholder-opac-fill-color);
}

.right_s .body .chat_row:hover .btn-light:hover {
  border-color: var(--dark-color);
}

.right_s .body .avatar img {
  border-radius: 100%;
  width: 100%;
  object-fit: none;
}

.right_s .body .avatar {
  width: 35px;
  height: 35px;
  min-width: 35px;
  border-radius: 100%;
}

.right_s .time,
.pinned-msg .time {
  font-size: 11px;
  margin-bottom: 10px;
  color: var(--extra-light-gray-color);
  font-weight: 400;
  margin-top: 0px;
}

.right_s .body .chat_row:last-child .bubble {
  margin-bottom: 0;
}

.right_s .body .chat_row .time {
  margin-left: 0px;
}

.right_s .body .chat_row:hover {
  background-color: var(--light-color);
}

.right_s .body .bubble .name {
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--extra-light-gray-color);
  font-weight: 400;
  margin-top: 0px;
}

.max-w-450 {
  max-width: 50%;
}

.max-w-100 {
  max-width: 100%;
}

.right_s .foot {
  border-radius: var(--border-radius);
  border: 2px solid var(--light-color);
  padding: 8px;
  margin: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.right_s .foot_focus {
  border-color: var(--light-shade2-color);
}

.text-area-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 13px;
}

.right_s .foot .text-area-div {
  display: flex;
  position: relative;
  z-index: 1;
}

.right_s .foot .text-area-div button svg {
  width: auto;
  height: 15px;
}

.right_s .foot .text-area-actions .btn-icon {
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: 28px;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}

.right_s .foot .text-area-actions button:last-child {
  margin-right: 0;
}

.right_s .foot .text-area-actions button svg {
  width: auto;
}

.right_s .foot .text-area-actions button.active {
  background-color: var(--orange-color);
}

.right_s .foot .text-area-actions button.active svg path,
.right_s .foot .text-area-actions button.active:hover svg path {
  fill: var(--white-color);
}

.right_s .foot .text-area-actions button input[type="file"] {
  opacity: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  cursor: pointer;
  position: absolute;
}

.right_s .foot .msg .form-control {
  color: var(--silver-grey-color) !important;
}

.right_s .foot textarea,
.right_s .foot .msg__wrapper textarea {
  border: none;
  outline: none;
  padding: 0;
  color: var(--dark-color);
  left: 0 !important;
  top: 0 !important;
  width: calc(100% - 16px) !important;
  max-height: 100px !important;
  overflow: auto !important;
  padding-right: 5px;
}

.right_s .foot .msg__wrapper textarea {
  width: 100% !important;
  position: relative !important;
}

.right_s .foot .msg__wrapper textarea,
.msg__wrapper div div div {
  scrollbar-gutter: stable;
}

.right_s .foot .msg__suggestions,
.right_s .foot .msg__wrapper div:first-child div:nth-child(2) {
  bottom: 124% !important;
  top: auto !important;
  width: calc(100% + 16px);
  left: -8px;
  border: 2px solid var(--light-color);
  border-radius: var(--border-radius);
  margin: 0 !important;
  padding: 8px;
  position: absolute;
  max-height: 500px;
  overflow: auto;
}
.right_s
  .thread_box_inner
  .foot
  .msg__wrapper
  div:first-child
  div:nth-child(2) {
  max-height: 150px;
}
.right_s
  .thread_box_inner
  .foot
  .msg__wrapper.thread_msg__wrapper
  div:first-child
  div:nth-child(2) {
  max-height: 73px;
}
.right_s .foot .msg__wrapper .css-4-0-1-9,
.right_s .foot .msg__wrapper .css-4-0-1-13 {
  max-height: 150px;
}

.right_s .foot .msg__suggestions li,
.right_s .foot .msg__wrapper li {
  margin-bottom: 3px;
  padding: 5px;
  border-radius: 8px;
  font-weight: 700;
}

.right_s .foot .msg__suggestions li:last-child,
.right_s .foot .msg__wrapper li:last-child {
  margin-bottom: 0;
}

.right_s .foot .msg__suggestions li:hover,
.right_s .foot .msg__wrapper li:hover {
  background-color: var(--light-color);
}

.msg__suggestions__item__display {
  font-weight: 700;
}

.right_s .body .chat_row .avatar,
.pinned-msg .body .chat_row .avatar,
.files .avatar {
  margin-right: 8px;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 7px;
  position: relative;
  background-color: var(--light-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.object-contain {
  object-fit: contain;
}

.right_s .body .chat_row .avatar svg,
.right_s .body .chat_row .avatar img,
.pinned-msg .body .chat_row .avatar svg,
.pinned-msg .body .chat_row .avatar img,
.files .avatar svg,
.files .avatar img {
  display: block;
  border-radius: var(--border-radius);
  width: 100%;
  object-fit: cover;
  max-height: 55%;
  overflow: hidden;
}

.right_s .body .chat_row .avatar img,
.pinned-msg .body .chat_row .avatar img {
  max-height: 100%;
}

.pinned-msg .body .chat_row:first-child .chat_actions_dropdown {
  top: 145%;
  bottom: auto;
}

.pinned-msg .body .chat_row:first-child .chat_actions {
  top: 0;
}

.right_s .body .Name-messenger,
.pinned-msg .body .Name-messenger {
  color: var(--dark-color);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  font-weight: var(--font-medium);
  margin-bottom: 2px;
  margin-top: 0;
  font-weight: bold;
}

.right_s .body .Name-messenger .time,
.pinned-msg .body .Name-messenger .time {
  margin-right: 0px;
  margin-bottom: -2px;
  margin-left: 10px;
}

.pinned-msg .body .chat_row:first-child .chat_actions_dropdown::after {
  display: none;
}

.head .designation {
  color: var(--white-color);
  font-size: 12px;
  font-weight: 300;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.right_s .foot .msg {
  flex-grow: 1;
  width: 100%;
  font-size: 13px;
  padding: 0;
  border: none;
  outline: none;
  resize: none;
  background-color: transparent;
  color: var(--dark-color);
  overflow: hidden;
  text-overflow: ellipsis;
  position: inherit !important;
  margin-bottom: 3px;
  max-height: 100px;
}

textarea.form-control {
  height: auto;
  min-height: 90px;
}

.open_sidebar {
  display: none;
  position: absolute;
  top: 80px;
  z-index: 1;
  left: 27px;
  border: none;
  background-color: transparent;
}

.open_sidebar svg {
  height: 17px;
}

.with_circle {
  border: 1px solid var(--white-color);
  border-radius: 50%;
  margin-left: 15px;
  height: 18px;
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes bounce {
  50% {
    transform: translate(0, 5px);
  }

  100% {
    transform: translate(0, 0);
  }
}

.navbar-toggler {
  display: none;
}

.navbar-toggler-icon {
  display: flex;
  align-items: center;
}

.spinner {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
}

.spin {
  border: 10px solid var(--white-color);
  border-top: 10px solid var(--orange-color);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.toolbar__tag .spin {
  border: 3px solid var(--white-color);
  border-top: 3px solid var(--orange-color);
  width: 20px;
  height: 20px;
}

.dot-flashing {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: var(--border-radius);
  background-color: var(--orange-color);
  color: var(--orange-color);
  animation: dotFlashing 1s infinite linear alternate;
  animation-delay: 0.5s;
}

.dot-flashing::before,
.dot-flashing::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}

.dot-flashing::before {
  left: -15px;
  width: 10px;
  height: 10px;
  border-radius: var(--border-radius);
  background-color: var(--orange-color);
  color: var(--orange-color);
  animation: dotFlashing 1s infinite alternate;
  animation-delay: 0s;
}

.dot-flashing::after {
  left: 15px;
  width: 10px;
  height: 10px;
  border-radius: var(--border-radius);
  background-color: var(--orange-color);
  color: var(--orange-color);
  animation: dotFlashing 1s infinite alternate;
  animation-delay: 1s;
}

@keyframes dotFlashing {
  0% {
    background-color: var(--orange-color);
  }

  50%,
  100% {
    background-color: var(--opac-orange-color);
  }
}

.filter_blur {
  filter: blur(8px);
}

.text-highlight {
  color: var(--orange-color) !important;
}

.text-link:hover {
  color: var(--orange-color) !important;
}

.text-link:hover svg path {
  fill: var(--orange-color) !important;
}

.text-highlight:hover,
.text-highlight:focus {
  color: var(--orange-hover-color);
}

aside.emoji-picker-react {
  position: absolute !important;
  bottom: 100% !important;
  top: auto !important;
  left: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--dim-grey-color) !important;
  border-radius: var(--border-radius) !important;
  z-index: 1;
}

.emoji-picker-react input.emoji-search {
  background-color: transparent !important;
  border: 2px solid var(--light-color) !important;
  color: var(--dark-color) !important;
  border-radius: var(--border-radius) !important;
}

.emoji-picker-react .emoji-group:before,
.content-wrapper[data-name] {
  color: var(--dark-color) !important;
}

.emoji-picker-react .emoji button {
  border-radius: var(--border-radius) !important;
}

.modal {
  height: 100%;
  width: 100%;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  right: 0;
  bottom: 0;
  z-index: 1050;
  outline: 0;
}

.modal.show {
  display: flex;
}

.modal-dialog {
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: auto;
  pointer-events: none;
  max-width: 550px;
}

.modal-content {
  background-color: var(--white-color);
  border-radius: 15px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-clip: padding-box;
  outline: 0;
  max-height: 99%;
  overflow-y: auto;
}

.modal-header {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  background-color: var(--white-color);
}

.modal-title {
  font-size: 16px;
  font-weight: var(--font-bold);
  margin-bottom: 0;
  line-height: 18px;
  width: 100%;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 17px;
  min-height: 200px;
  height: calc(100% - 56px);
  /* overflow-y: auto; */
}

.modal-footer {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  font-size: 13px;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal .css-26l3qy-menu {
  bottom: auto;
  top: 100% !important;
}

.modal-lg {
  max-width: 800px;
}

.modal-full .modal-dialog {
  width: 100%;
  max-width: 100%;
}

.modal-full .modal-content {
  height: 100%;
  max-height: 100%;
}

.modal-body-sm {
  height: calc(100% - 70px);
  margin-bottom: 15px;
}

.text-label {
  font-weight: var(--font-bold);
  margin-bottom: 5px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
  margin-bottom: 0;
}

.switch input,
.modal-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--dim-grey-color);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 4px;
  bottom: 4px;
  background-color: var(--white-color);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--green-color);
}

input:focus + .slider {
  box-shadow: none;
}

input:checked + .slider:before {
  -webkit-transform: translateX(25px);
  -ms-transform: translateX(25px);
  transform: translateX(25px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-tabs {
  border-bottom: 1px solid var(--light-color);
}

.nav-tabs .nav-item {
  margin-right: 1.5rem;
}

.nav-tabs .nav-link {
  margin-bottom: -1px;
  background: 0 0;
  border: none;
  border-bottom: 2px solid transparent;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  display: block;
  padding: 0.5rem 0;
  color: var(--dark-gray-shade2-color);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--dark-gray-shade2-color);
  border-color: var(--orange-color);
}

.nav-tabs .nav-link:hover {
  color: var(--orange-color);
}

.nav-tabs .nav-link.active:hover {
  color: var(--dark-gray-shade2-color) !important;
  opacity: 1 !important;
}

.select-menu-custom__placeholder,
.select-menu-custom__single-value {
  color: var(--dark-gray-shade2-color) !important;
  opacity: 1 !important;
  margin: 0 !important;
  line-height: 3;
}

.tab-content {
  padding: 1rem 0 0;
}

.tab-content > .tab-pane {
  display: none;
}

.tab-content > .active {
  display: block;
}

.tab-content-min {
  min-height: 65vh;
}

.tab-content-max {
  max-height: 65vh;
  overflow-y: auto;
}

.border_block {
  border: 1px solid var(--light-color);
  border-radius: var(--border-radius);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-direction: column;
}

.border_block:last-child {
  margin-bottom: 0;
}

.border_block__inner {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.border_block__inner:last-child {
  border-bottom: none;
}

.no-border {
  border: none;
}

.font--sm {
  font-size: var(--font-sm);
}

.btm-border {
  border-bottom: 1px solid var(--light-color);
}

.top-border {
  border-top: 1px solid var(--light-color);
}

.list {
  padding: 0 0 10px;
  border-radius: var(--border-radius);
  justify-content: space-between;
  display: flex;
  align-items: center;
}

.list .avatar {
  margin-right: 8px;
  width: 40px;
  height: 40px;
  object-fit: cover;
  position: relative;
  background-color: var(--light-color);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list .avatar svg,
.list .avatar img {
  display: block;
  border-radius: var(--border-radius);
  width: 100%;
  object-fit: cover;
  max-height: 80%;
}

.list .avatar img {
  max-height: 100%;
}

.list .info {
  width: calc(100% - 48px);
}

.list .info .name {
  font-size: 13px;
  font-weight: var(--font-medium);
  color: var(--dark-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.list .info .text-small {
  color: var(--silver-grey-color);
  margin-top: 0px;
  font-size: 11px;
  font-weight: 300;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tab-pane .list .avatar .status {
  position: absolute;
  left: 0px;
  bottom: -3px;
}

.css-1s2u09g-control,
.css-1pahdxg-control {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

.css-1okebmr-indicatorSeparator {
  display: none !important;
}

.css-tlfecz-indicatorContainer svg,
.css-1gtu0rj-indicatorContainer svg {
  width: 15px !important;
}

.css-tlfecz-indicatorContainer svg path,
.css-1gtu0rj-indicatorContainer svg path {
  fill: var(--dark-color) !important;
}

.css-1d8n9bt,
.css-tlfecz-indicatorContainer,
.css-1gtu0rj-indicatorContainer,
.css-1hwfws3 {
  padding: 0 !important;
}

.css-14el2xx-placeholder,
.css-1g14k7y,
.css-vwja0k {
  color: var(--dark-color) !important;
}

.css-1rhbuit-multiValue {
  margin: 0 3px 0 0 !important;
}

.css-1rhbuit-multiValue {
  background-color: var(--light-dim-grey-color) !important;
}

.css-xb97g8:hover {
  background-color: var(--light-orange-color) !important;
  color: var(--orange-color) !important;
}

.css-xb97g8:hover svg path {
  fill: var(--orange-color) !important;
}

.online {
  background-color: var(--green-color) !important;
}

.offline {
  background-color: var(--red-dull-color) !important;
}

.css-26l3qy-menu {
  left: 0;
  border-radius: var(--border-radius) !important;
  overflow-y: auto;
  box-shadow: none !important;
  border: 1px solid var(--dim-grey-color);
  bottom: 100%;
  top: auto !important;
}

.css-11unzgr {
  padding: 0 !important;
  max-height: 120px !important;
}

.css-1n7v3ny-option {
  background-color: transparent !important;
  color: var(--dark-color) !important;
  cursor: pointer !important;
}

.css-1n7v3ny-option:hover {
  background-color: var(--light-dim-grey-color) !important;
}

.css-ackcql {
  color: var(--dark-color) !important;
}

.select_userlist {
  border: none;
  padding: 0;
  position: absolute !important;
  width: 100%;
  left: 0;
}

.select_userlist .css-1s2u09g-control {
  opacity: 0;
}

.right_s .body .attached_file,
.pinned-msg .body .attached_file {
  background-color: var(--light-dim-grey-color);
  display: flex;
  border-radius: var(--border-radius);
  padding: 5px;
  display: flex;
  align-items: center;
  position: relative;
}

.right_s .body .attached_file .Name-messenger,
.pinned-msg .body .attached_file .Name-messenger {
  color: var(--white-color);
}

.right_s .body .attached_file .avatar svg,
.pinned-msg .body .attached_file .avatar svg,
.files .avatar svg {
  max-height: 75%;
}

.right_s .body .attached_file .avatar,
.pinned-msg .body .attached_file .avatar,
.right_s .body .files .avatar {
  width: 40px;
  height: 40px;
  align-items: center;
  border-radius: 7px;
  overflow: hidden;
}

.right_s .body .bubble .attached_file p,
.pinned-msg .body .bubble .attached_file p {
  color: var(--silver-grey-color);
}

.right_s .body .attached_file .actions,
.pinned-msg .body .attached_file .actions,
.files .actions {
  position: absolute;
  right: 5px;
  border-radius: 7px;
  top: 5px;
  min-width: 29px;
  align-items: center;
  justify-content: center;
  padding: 3px;
  background-color: var(--dark-gray-color);
  display: flex;
  min-height: 24px;
  width: auto;
  height: auto;
}

.right_s .body .attached_file .actions a,
.pinned-msg .body .attached_file .actions a,
.files .actions a {
  line-height: 1;
}

.right_s .body .attached_file .actions a:hover,
.pinned-msg .body .attached_file .actions a:hover,
.files .actions a:hover {
  opacity: 0.9;
}

.logo_loader {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: url(../images/background-image.jpg) no-repeat;
  background-size: cover;
  position: relative;
  border-radius: var(--border-radius);
}

.logo_loader::after {
  background-color: var(--dark-color);
  opacity: 0.9;
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  border-radius: var(--border-radius);
}

.no-whitespace {
  white-space: nowrap;
}

.pointertab {
  cursor: pointer;
}

.mentionbar {
  position: absolute;
  width: 200px;
  border-radius: 6px;
  background: rgb(207, 221, 235);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px;
  height: 60px;
  color: black;
}

[contentEditable="true"]:empty:not(:focus):before {
  content: attr(data-ph);
  color: var(--silver-grey-color);
}

.attachment_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.attachment__container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.attached__icon {
  background-color: var(--light-color);
  color: var(--dark-color);
  border-radius: var(--border-radius);
  padding: 5px;
  font-size: 13px;
  font-weight: var(--font-medium);
  cursor: pointer;
  min-height: 65px;
  max-height: 65px;
  max-width: 65px;
  min-width: 65px;
  line-height: 3;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-right: 10px;
}

.attached__icon img,
.attached__icon svg {
  object-fit: contain;
  max-height: 95%;
}

.attached__icon button {
  border-radius: 50%;
  background-color: var(--placeholder-opac-fill-color);
  border: 2px solid var(--white-color);
  position: absolute;
  right: -10px;
  top: -10px;
  width: 23px;
  height: 23px;
  padding: 0 5px;
  line-height: 0.4;
  display: none;
}

.attached__icon::before {
  background-color: var(--placeholder-opac-color);
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  display: none;
}

.attached__icon:hover::before,
.attached__icon:hover button {
  display: block;
}

.attached__icon button:hover {
  background-color: var(--light-color);
}

.btn-green {
  background-color: var(--green-color) !important;
  color: var(--white-color);
  border: 2px solid transparent;
}

.btn-red {
  background-color: var(--red-color) !important;
  color: var(--white-color);
  border: 2px solid transparent;
}

.btn-light {
  background-color: var(--light-color);
  color: var(--dark-color);
  border-color: var(--light-color);
}

.btn-light2 {
  background-color: var(--light-shade3-color);
  color: var(--dark-gray-shade2-color);
  border-color: var(--light-shade3-color);
}

.btn-white {
  background-color: var(--white-color);
  color: var(--dark-color);
  border-color: var(--white-color);
}

.btn-sm {
  min-width: 85px;
}

.btn-xs {
  min-width: 85px;
  font-size: 12px;
  height: 2rem;
}

.btn-green:hover {
  border-color: var(--dark-green-color);
}

.btn-light:hover,
.btn-light2:hover,
.btn-white:hover {
  border-color: var(--dark-color);
}

.rotate--320 {
  transform: rotate(320deg);
}

.rotate-55 {
  transform: rotate(55deg);
}

@-webkit-keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}

.uploading {
  font-size: 13px;
  font-weight: var(--font-medium);
  color: var(--silver-grey-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: -8px;
}

.timeline-loader-background {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
  animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  background: linear-gradient(
    to right,
    var(--light-color) 8%,
    var(--extra-light-gray-color) 18%,
    var(--light-color) 33%
  );
  -webkit-background-size: 800px 104px;
  background-size: 800px 104px;
  height: 96px;
  position: relative;
  margin: 1rem 0 0;
}

.timeline-loader-background-masker {
  background: var(--white-color);
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.timeline-loader-background-masker.header-top,
.timeline-loader-background-masker.header-bottom,
.timeline-loader-background-masker.subheader-bottom {
  top: 0;
  left: 40px;
  right: 0;
  height: 10px;
}

.timeline-loader-background-masker.header-left,
.timeline-loader-background-masker.subheader-left,
.timeline-loader-background-masker.header-right,
.timeline-loader-background-masker.subheader-right {
  top: 10px;
  left: 40px;
  height: 8px;
  width: 10px;
}

.timeline-loader-background-masker.header-bottom {
  top: 18px;
  height: 6px;
}

.timeline-loader-background-masker.subheader-left,
.timeline-loader-background-masker.subheader-right {
  top: 24px;
  height: 6px;
}

.timeline-loader-background-masker.header-right,
.timeline-loader-background-masker.subheader-right {
  width: auto;
  left: 300px;
  right: 0;
}

.timeline-loader-background-masker.subheader-right {
  left: 230px;
}

.timeline-loader-background-masker.subheader-bottom {
  top: 30px;
  height: 10px;
}

.timeline-loader-background-masker.content-top,
.timeline-loader-background-masker.content-second-line,
.timeline-loader-background-masker.content-third-line,
.timeline-loader-background-masker.content-second-end,
.timeline-loader-background-masker.content-third-end,
.timeline-loader-background-masker.content-first-end {
  top: 40px;
  left: 0;
  right: 0;
  height: 6px;
}

.timeline-loader-background-masker.content-top {
  height: 20px;
}

.timeline-loader-background-masker.content-first-end,
.timeline-loader-background-masker.content-second-end,
.timeline-loader-background-masker.content-third-end {
  width: auto;
  left: 380px;
  right: 0;
  top: 60px;
  height: 8px;
}

.timeline-loader-background-masker.content-second-line {
  top: 68px;
}

.timeline-loader-background-masker.content-second-end {
  left: 420px;
  top: 74px;
}

.timeline-loader-background-masker.content-third-line {
  top: 82px;
}

.timeline-loader-background-masker.content-third-end {
  left: 300px;
  top: 88px;
}

.right_s .foot .text-area-actions .emoji-picker-react .emoji-categories button {
  height: 40px;
  width: 20px;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.right_s
  .foot
  .text-area-actions
  .emoji-picker-react
  .emoji-categories
  button.active,
.right_s
  .foot
  .text-area-actions
  .emoji-picker-react
  .emoji-categories
  button:hover {
  background-color: transparent;
}

.emoji-picker-react
  .active-category-indicator-wrapper
  .active-category-indicator {
  background: var(--orange-color) !important;
}

.loader_spinner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow-y: auto;
  background-color: var(--light-color);
  border-radius: var(--border-radius);
  position: absolute;
  top: 0px;
  left: 0px;
}

.loader_spinner__box {
  width: 340px;
  background: var(--white-color);
  padding: 30px 50px;
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 340px;
  align-items: center;
}

.attached__icon__sm {
  height: 60px;
  width: 60px;
}

.loader_spinner__box__sm {
  width: 55px;
  height: 55px;
  background: var(--white-color);
  padding: 5px;
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 50%;
  align-items: center;
}

.loader_spinner__box__sm .spin {
  border: 2px solid var(--white-color);
  border-top: 3px solid var(--orange-color);
  width: 30px;
  height: 30px;
}

.loader_spinner__box__xs {
  width: 20px;
  height: 20px;
  background: var(--white-color);
  padding: 0px;
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 50%;
  align-items: center;
}

.loader_spinner__box__xs .spin {
  border: 2px solid #b8c0c9;
  border-top: 3px solid #f05a28;
  width: 20px;
  height: 20px;
}

.loader_spinner__box .logo {
  width: 180px;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.accordion-item {
  border: 1px solid var(--light-color);
  border-bottom: none;
  transition: all ease 0.5s;
}

.accordion-item:last-child {
  border-bottom: 1px solid var(--light-color);
}

.accordion-item:first-of-type {
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.accordion-header {
  margin: 0;
}

.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: calc(var(--border-radius) - 1px);
  border-top-right-radius: calc(var(--border-radius) - 1px);
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem;
  font-size: 14px;
  color: var(--dark-color);
  text-align: left;
  background-color: var(--white-color);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
}

.accordion-button svg {
  flex-shrink: 0;
  margin-left: auto;
  transform: rotate(180deg);
  transition: all ease 0.5s;
}

.accordion-button.collapsed svg {
  transform: rotate(0deg);
  transition: all ease 0.5s;
}

.accordion-body {
  padding: 0 1rem 1rem;
  transition: all ease 0.5s;
}

.accordion-collapse {
  display: none;
  background-color: var(--white-color);
}

.accordion-collapse.show {
  display: block;
}

.chat_sec .right_s .body small {
  font-size: 85%;
}

.icon_download {
  position: absolute;
  width: 17px;
  left: 13px;
  top: 20px;
  cursor: pointer;
  bottom: auto;
  /* display: flex; */
  align-items: center;
  justify-content: center;
}

.icon_download svg {
  fill: var(--dark-color);
}

.downloading-loader {
  width: calc(100% - 48px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.downloading-loader .spin {
  width: 30px;
  height: 30px;
  border-width: 3px;
  border-top-width: 3px;
}

.downloading-loader.actions .spin {
  width: 17px;
  height: 17px;
  border-width: 2px;
  border-top-width: 2px;
}

.text-green,
a.text-green:hover {
  color: var(--green-color);
}

.right_s .foot .msg__wrapper .css-5-0-1-6 {
  display: initial;
}

.right_s .foot .msg__wrapper .msg__highlighter {
  max-height: 100px;
  overflow-y: auto;
  line-height: initial;
  display: none;
}

.right_s .foot .msg__wrapper .css-3-0-1-4::-webkit-scrollbar {
  width: 0;
}

.ChatBoardFooter_mentions__mention__okZLg {
  background: transparent !important;
}

.icon_container {
  min-width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon_container:hover svg path,
.btn_search.icon_container:hover .cross path,
.right_s .foot .text-area-actions button:hover svg circle,
.right_s .foot .text-area-actions button:hover svg path,
.right_s .body .chat_actions_span button:hover svg path,
.right_s .body .chat_actions_span button:hover svg circle,
.right_s .body .chat_actions_span a:hover svg path,
.right_s .body .chat_actions_span a:hover svg circle,
.reactions-tag:hover svg path,
.reactions-tag:hover svg circle,
.foot-close-svg:hover svg path {
  fill: var(--dark-color);
  stroke: none;
}

.btn_search.icon_container:hover svg path,
.maximize-restore-icons.icon_container:hover svg path,
.maximize-restore-icons.icon_container:hover svg polyline,
.maximize-restore-icons.icon_container:hover svg line {
  stroke: var(--dark-color);
  fill: none;
}

.hand-raised.icon_container:hover svg path {
  stroke: var(--extra-light-gray-color);
}

.alink.three-dot.icon_container:hover svg path {
  fill: var(--placeholder-opac-fill-color);
}

.icon-add.icon_container:hover svg path:first-child {
  fill: none;
}

.right_s .head .btn_search {
  right: 8px;
}

.bg_leave:hover {
  background-color: var(--light-color);
}

.menu-upside .css-26l3qy-menu {
  bottom: 100%;
  top: auto !important;
}

.css-4ljt47-MenuList {
  max-height: 150px !important;
}

.user-setting-select .css-4ljt47-MenuList {
  max-height: 120px !important;
}

.css-g1d714-ValueContainer {
  padding: 3px 5px 0 0 !important;
}

.css-1rhbuit-multiValue {
  margin-bottom: 3px !important;
}

.min-width-100 {
  min-width: 100px !important;
}

.css-1n7v3ny-option:hover {
  background-color: var(--light-color) !important;
}

.css-319lph-ValueContainer {
  padding: 0 !important;
}

.css-12jo7m5 {
  max-width: 75px;
}

.css-xb97g8 {
  margin-left: 2px;
}

.p-3 {
  padding: 1rem !important;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mb-3 {
  margin-bottom: 1rem;
}

.pl-3 {
  padding-left: 1rem;
}

.pl-7 {
  padding-left: 3rem;
}

.pr-2 {
  padding-right: 0.5rem;
}
.pr-3 {
  padding-right: 1rem;
}

.pl-3 {
  padding-right: 0.75rem;
}

.w-300 {
  width: 300px;
}

.w-auto {
  width: auto !important;
}

.w-50 {
  width: 50%;
}

.form-label {
  margin-bottom: 0.3rem;
}

.css-1hb7zxy-IndicatorsContainer {
  padding-top: 0.5rem;
}

.shadow {
  box-shadow: 0 0 0.5rem rgb(0 0 0 / 20%);
}

.index-1 {
  z-index: 1;
}

.index-2 {
  z-index: 2;
}

.index-3 {
  z-index: 3;
}

.justify-content-start {
  justify-content: start;
}

.call-cut-div .minimize-restore-icons:hover svg:last-child {
  color: var(--placeholder-opac-fill-color);
}

.moni-icon {
  margin-right: 8px;
}

.record-duration {
  bottom: auto;
  top: 1.1rem;
  margin: 0;
  padding: 0.5em 0.8em;
  background-color: rgba(0, 0, 0, 0.5);
  width: auto;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  left: 7rem;
}

.attendees-count {
  left: 1rem;
  bottom: auto;
  top: 1.1rem;
  margin: 0;
  padding: 0.5em 0.8em;
  background-color: rgba(0, 0, 0, 0.5);
  width: auto;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.user-on-call-name {
  top: 20px;
  margin: 0;
  padding: 0.5em 0.8em;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  right: -25px;
  height: auto;
  width: auto;
  transform: translate(-50%, 0%);
  border-radius: 2px;
  position: absolute;
  display: flex;
  align-items: center;
  z-index: 1;
}

.mute-user-icon {
  display: block;
  margin-left: 5px;
  border-left: 1px solid #ddd;
  padding-left: 5px;
  width: 21px;
  height: 15px;
}

.delete-icon {
  min-width: 35px;
}

.chat_actions_span a,
.chat_actions_span .btn-icon {
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  width: 100%;
}

.chat_actions_span .emoji-picker-react {
  width: 280px !important;
  right: 0 !important;
  left: auto !important;
  margin-bottom: 12px !important;
  height: 300px !important;
  min-height: 300px !important;
}

.css-1okxp8x-option,
.Invite-People-drop {
  cursor: pointer !important;
}

.css-11e6wws-option {
  background-color: var(--light-color) !important;
  color: var(--dark-color) !important;
}

.css-1okxp8x-option:hover,
.Invite-People-drop:hover,
.select-menu-custom__menu .select-menu-custom__option:hover {
  background-color: var(--light-opac-color) !important;
}

.Invite-People-drop {
  padding: 5px 10px;
}

.right_s .btn_search.icon_container:hover svg path {
  stroke: var(--placeholder-opac-fill-color);
  fill: none;
}

.right_s .btn_search.icon_container:hover .cross path {
  fill: var(--placeholder-opac-fill-color);
  stroke: none;
}

.emoji-picker-react .emoji-categories button:focus-visible,
.emoji-picker-react .emoji-categories button:focus:where(:not(.active)) {
  background: transparent !important;
}

.emoji-picker-react .emoji-categories button:hover {
  opacity: 1 !important;
}

.emoji-picker-react .emoji-group:before {
  font-size: 12px !important;
  text-transform: capitalize !important;
}

.inner-bubble {
  width: calc(100% - 60px);
}

.inner-bubble .foot {
  margin: 8px 0;
  background-color: var(--white-color);
  border-width: 1px;
}

.btn-icon .recent-emoji {
  font-size: 20px;
}

.inner-bubble .foot .text-area-actions .btn-icon {
  font-size: 13px;
  min-height: 30px;
  height: auto;
  width: auto;
}

.left_s .chat_list .loader_spinner__box__sm {
  background-color: transparent;
}

.btn-disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

.btn-disabled:hover svg path {
  fill: var(--extra-light-gray-color) !important;
}

.cursor-intials {
  cursor: initial !important;
}

.nav-fill .nav-item,
.nav-fill > .nav-link {
  flex: 1 1 auto;
  text-align: center;
  margin-right: 0;
}

.nav-fill .nav-item .nav-link {
  width: 100%;
}

.monitor-tab .nav-item .nav-link {
  width: auto;
}

.share__container {
  width: 85%;
  margin: 0 auto;
}

.share__box {
  width: 31.9%;
  border: 1px solid var(--light-color);
  border-radius: var(--border-radius);
  margin-right: 1em;
  margin-bottom: 1em;
  overflow: hidden;
  height: 150px;
  padding: 1em;
  cursor: pointer;
}

.share__box:nth-child(3n) {
  margin-right: 0;
}

.share__box:hover {
  border-color: var(--orange-color);
}

.share__box.selected {
  background-color: var(--orange-color);
  border-color: var(--orange-color);
  cursor: default;
}

.video__thumbnail .icon__svg {
  width: 15px;
  height: 15px;
  bottom: -5px;
  left: 0;
}

.text-white {
  color: var(--white-color);
}

.icon__container--first {
  margin-left: 3.8rem;
  padding-left: 0;
}

/* .video__container__box:first-child .icon__container--first {
  margin-left: 6.4rem;
} */
.icon__container--first .icon__tag:first-child {
  margin-left: 0 !important;
}

.rotate-45 {
  transform: rotate(45deg);
}

.displayBlock {
  display: block !important;
}

.displayNone {
  display: none !important;
}

.btn--download {
  margin-bottom: 8px;
}

.video-call {
  display: flex;
  height: 100%;
  width: 100%;
  padding-left: 75px;
}

.width-modal.modal-full .modal-dialog {
  width: 100%;
  max-width: 100%;
  height: 100%;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.width-modal.show {
  display: flex !important;
}

.user-another-call-popup {
  justify-content: center;
}

.user-another-call-popup h6 {
  margin-bottom: 15px;
  margin-top: 0px;
}

.attachment_info .modal-body {
  min-height: 130px;
}

.justify-content-end {
  justify-content: end !important;
}

.w-100 {
  width: 100%;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-3 {
  gap: 1rem;
}

.gap-10 {
  gap: 10px;
}
.file_send_info_inner {
  width: 100%;
  border: 2px solid var(--light-shade2-color);
  background-color: var(--white-color);
  border-radius: var(--border-radius);
  padding: 8px;
  gap: 7px;
  display: flex;
  flex-direction: column;
}
.file_send_info .w-100 {
  max-width: 14.28%;
  min-width: 10rem;
}
.file_send_info .file_send_info_inner .w-100 {
  /* max-width: 100%; */
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.file_send_info .file_send_info_inner .w-100 .attached_file {
  max-width: 95%;
}
.js-conference {
  height: 100%;
  width: 100%;
}

.call-cut-div {
  background: hsl(211deg 28% 36%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 21px 17px 17px;
  border-radius: 50px;
  min-width: 250px;
  cursor: grab;
  box-shadow: 0 0 8px rgb(0 0 0 / 30%);
  transform: translateX("-50%");
  /* position: absolute; */
  /* z-index: 9;
  bottom: 17px;
  right: 17px; */
}

.call-cut-div .caller-name {
  font-size: 16px;
  margin-right: 15px;
  color: #fff;
}

.call-cut-div-icons {
  background: #fff;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50px;
  margin-right: 15px;
  align-items: center;
  display: flex;
  justify-content: center;
}

.call-cut-div-icons:last-child svg {
  fill: #ffffff;
}

.call-cut-div-icons i {
  font-size: 20px;
  color: #c42a2a;
}

.call-cut-div .minimize-restore-icons {
  display: flex;
  cursor: pointer;
}

.call-cut-div .minimize-restore-icons svg:first-child {
  width: 16px;
  fill: #fff;
}

.call-cut-div .minimize-restore-icons svg:last-child {
  width: 16px;
  fill: #fff;
  color: var(--extra-light-gray-color);
}

.minimizePopupButton {
  border: none;
  background: none;
}

.end-call-style {
  position: absolute;
  bottom: 20px;
}

.visibility-hidden {
  visibility: hidden;
}

.icon_forward {
  position: absolute;
  width: 17px;
  left: 35px;
  top: auto;
  cursor: pointer;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon_forward svg {
  fill: var(--dark-color);
}

.mt-3 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 2rem;
}

.srv-validation-message {
  color: #c42a2a;
}

.current-date-div {
  position: relative;
}

.current-date-inner {
  border: 0px solid var(--light-color);
  height: 0px;
  width: 100%;
  margin-top: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.current-date-inner .dropdown {
  margin: 0 auto;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -16px;
}

.current-date-inner .current-date {
  color: #425b76;
  border: 1px solid var(--light-color);
  background: #fff;
  border-radius: 50px;
  z-index: 999;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 5px 12px 5px 18px;
}

.current-date-inner .dropdown-menu {
  min-width: 250px !important;
  margin-top: 5px;
  margin-bottom: 5px;
}

.current-date-inner .dropdown-menu .chat_actions_tag {
  width: 100%;
  text-align: left;
}

.current-date-inner .dropdown-menu hr {
  border: none;
  border-top: 1px solid var(--light-shade2-color);
  width: 100%;
  margin: 5px 0;
}

.company-logo-container {
  padding: 5px 10px;
  display: flex;
  background-color: var(--dark-color);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  height: 3.3rem;
  z-index: 1;
}

.company-logo-container-btm {
  height: 2.8rem;
}

.cursor-pointer {
  cursor: pointer;
}

.company-logo {
  width: 100%;
  max-width: 180px;
  margin: auto;
  max-height: 100%;
  height: auto;
  width: auto;
}

.logo_loader .company-logo-container {
  background-color: var(--white-color);
  padding: 10px 25px;
  height: auto;
  min-height: 53px;
  min-width: 53px;
}

.logo_loader__footer {
  bottom: 1rem;
}

.m-8 {
  margin: 8px;
}

.mt-0 {
  margin-top: 0;
}

.alert-pop .modal-dialog {
  width: 20%;
}

.tooltip {
  font-family: sans-serif;
  text-align: center;
  opacity: 1;
  position: inherit;
}

.status {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  border: 1px solid var(--white-color);
  background-color: var(--dark-color);
  position: absolute;
  right: -3px;
  bottom: -3px;
}

.status-group {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.count-badge-small {
  top: -0.3rem;
  right: -0.3rem;
}

.count-badge {
  width: auto;
  min-width: 15px;
  height: 15px;
  border-radius: 4px;
  border: none;
  background-color: var(--dark-color);
  color: var(--white-color);
  padding: 2px;
}

.count-badge-sidebar {
  width: auto;
  min-width: 13px;
  height: 13px;
  border-radius: 4px;
  border: none;
  background-color: var(--dark-color);
  color: var(--white-color);
  padding: 2px;
}

a {
  cursor: pointer;
}

a:hover {
  text-decoration: none;
}

.justify-content-center {
  justify-content: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.video__wrapper {
  height: 100%;
  width: 100%;
  position: relative;
}

.white-board-style {
  background-color: #ffffff;
}

.white-board-style .video__container {
  width: 20%;
  margin-right: auto;
}

.white-board-style .video__container .video__container__box {
  height: auto;
  width: 100%;
  margin: 0;
}

.white-board-style .video__container .two_video__container__box {
  height: 50%;
}

.white-board-style .video__container .twoBYtwo_video__container__box {
  height: 33.33%;
}

.white-board-style .video__container .twoBYtwo_video__container__box.four_part {
  height: 25%;
}

.white-board-style .video__container .threeBYtwo_video__container__box {
  height: 20%;
}

.white-board-style .video__container .video__container__box img {
  object-fit: contain;
}

.call-modal
  .modal-content
  > .modal-resizable
  .white-board-style
  .video__container
  .active_speaker_video__container__box {
  padding: 0 !important;
}

.call-modal
  .modal-content
  > .modal-resizable
  .white-board-style
  .video__container
  .active_speaker_video__container__box
  video,
.call-modal
  .modal-content
  > .modal-resizable
  .white-board-style
  .video__container
  .active_speaker_video__container__box
  img {
  object-fit: contain;
}

.white-board-style .video__toolbar {
  margin-bottom: 1rem;
  height: 3.8rem;
}

.white-board-style .video__container .two_video__container__box,
.white-board-style .video__container .twoBYtwo_video__container__box,
.white-board-style .video__container .threeBYtwo_video__container__box,
.white-board-style .video__container .threeBYthree_video__container__box {
  padding: 0 !important;
  padding-bottom: 1px !important;
}

.excalidraw .App-bottom-bar > .Island {
  background-color: transparent;
  box-shadow: none;
}

.excalidraw .App-toolbar-content button:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.625rem;
  width: var(--button-width, var(--default-button-size));
  height: var(--button-height, var(--default-button-size));
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: var(--button-border, var(--default-border-color));
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  background-color: var(--button-bg, var(--island-bg-color));
  color: var(--button-color, var(--text-primary-color));
  background-color: var(--island-bg-color);
  width: var(--lg-button-size);
  height: var(--lg-button-size);
}

.excalidraw .dropdown-menu {
  width: 227px !important;
}

.video__container {
  width: 100%;
  background-color: #161616;
}

.video__container .video__container__box {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.video__container .video__container__box video,
.video__container .video__container__box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* background-color: #000000; */
}

.video__container .video__container__box .overlay {
  position: absolute;
  z-index: 1;
  /* width:100%;
  height:100%; */
  /* margin: 30px; */
  /* background-color: #000000; */
}

.video__container .two_video__container__box {
  height: 100%;
  width: 50%;
  margin: auto;
}

.video__container .twoBYtwo_video__container__box {
  height: 50%;
  width: 50%;
}

.video__container .threeBYtwo_video__container__box {
  height: 50%;
  width: 33.33%;
}

.video__container .threeBYthree_video__container__box {
  height: 33.33%;
  width: 33.33%;
}

.video__container .fourBYthree_video__container__box {
  height: 33.33%;
  width: 25%;
}

.video__container .fourBYfour_video__container__box {
  height: 25%;
  width: 25%;
}

.video__container .two_video__container__box:first-child,
.video__container .twoBYtwo_video__container__box:first-child,
.video__container .twoBYtwo_video__container__box:nth-child(3),
.video__container .threeBYtwo_video__container__box:first-child,
.video__container .threeBYtwo_video__container__box:nth-child(2),
.video__container .threeBYtwo_video__container__box:nth-child(4),
.video__container .threeBYthree_video__container__box:first-child,
.video__container .threeBYthree_video__container__box:nth-child(2),
.video__container .threeBYthree_video__container__box:nth-child(4),
.video__container .threeBYthree_video__container__box:nth-child(5) {
  padding-right: 1px;
}

.video__container .two_video__container__box:last-child,
.video__container .twoBYtwo_video__container__box:nth-child(2),
.video__container .twoBYtwo_video__container__box:last-child,
.video__container .threeBYtwo_video__container__box:nth-child(2),
.video__container .threeBYtwo_video__container__box:nth-child(3),
.video__container .threeBYtwo_video__container__box:last-child,
.video__container .threeBYthree_video__container__box:nth-child(2),
.video__container .threeBYthree_video__container__box:nth-child(3),
.video__container .threeBYthree_video__container__box:nth-child(5),
.video__container .threeBYthree_video__container__box:last-child {
  padding-left: 1px;
}

.video__container .twoBYtwo_video__container__box:first-child,
.video__container .twoBYtwo_video__container__box:nth-child(2),
.video__container .threeBYtwo_video__container__box:first-child,
.video__container .threeBYtwo_video__container__box:nth-child(2),
.video__container .threeBYtwo_video__container__box:nth-child(3),
.video__container .threeBYthree_video__container__box:first-child,
.video__container .threeBYthree_video__container__box:nth-child(2),
.video__container .threeBYthree_video__container__box:nth-child(3) {
  padding-bottom: 1px;
}

.video__container .twoBYtwo_video__container__box:nth-child(3),
.video__container .twoBYtwo_video__container__box:last-child,
.video__container .threeBYtwo_video__container__box:nth-child(4),
.video__container .threeBYtwo_video__container__box:last-child,
.video__container .threeBYthree_video__container__box:nth-child(4),
.video__container .threeBYthree_video__container__box:nth-child(5),
.video__container .threeBYthree_video__container__box:last-child {
  padding-top: 1px;
}

.video__toolbar {
  z-index: 2;
  position: absolute;
  margin: 0 auto;
  bottom: 1rem;
  background-color: var(--dark-bg);
  padding: 0.3rem;
  border-radius: 10px;
  color: var(--white-color);
  display: flex;
  align-items: center;
  cursor: grab;
}

.toolbar__tag {
  display: flex;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
}

.toolbar__tag:hover {
  background-color: #292929;
}

.toolbar__tag.selected {
  background-color: #fa0000;
}

.toolbar__tag:last-child {
  margin-right: 0;
}

.flipY-180 {
  position: absolute;
  transform: rotatey(180deg);
}

.bg-red {
  background-color: var(--red-color);
}

.bg-red:hover {
  background-color: var(--dark-red-color);
}

.rotate-135 {
  transform: rotate(135deg);
}

.pos-relative {
  position: relative;
}

.align-items-center {
  align-items: center;
}

.mt-share {
  margin-top: -2.4px;
}

.chat_count {
  color: var(--white-color);
  min-width: 1.5rem;
  background: var(--dark-color);
  border-radius: 9.5px;
  height: 1.1rem;
  font-size: 12px;
}

.align-self-center {
  align-self: center;
}

.align-items-start {
  align-items: flex-start !important;
}

.call-modal .modal-content {
  /* this is because we can resize this background so we'll hide it. The coloring will
  now be maintained by the modal-resizable class */
  background: transparent !important;
}

/* .call-modal .modal-content > .modal-resizable {
  background-color: white;
  background-clip: padding-box;
  border: 1px solid #ebedee;
  border: 0;
  border-radius: var(--border-radius);
  box-shadow: 0 0 0 1px rgba(101, 108, 126, 0.5) inset, 0 1px 3px 1px rgba(64, 64, 64, 0.5);  
  height: 100% !important;
    max-height: 100% !important;
    overflow: hidden;
    max-width: 100% !important;
    width: 100% !important;
}
.call-modal .modal-content > .modal-resizable.margin-auto {
  height: 75% !important;
    max-height: 75% !important;
    max-width: 50% !important;
    width: 50% !important;
} */
.margin-auto {
  margin: auto;
}

.call-modal .modal-resizable > .modal-body {
  /* This is to account for the height of the footer */
  /* /* /* padding: 1em 1em 5em 1em; */
  padding: 0;
  background-color: var(--light-color);
}

.modal-resizable .loader_spinner {
  border-radius: 0;
}

.call-modal .modal-footer {
  /* this is to keep the footer pinned to the bottom when we resize */
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 10;
}

.bg-dark {
  background-color: var(--dark-bg);
}

.bg-light {
  background-color: var(--light-color);
}
.bg-light-10 {
  background-color: rgb(231, 234, 239, 0.3);
}
.bg-white {
  background-color: var(--white-color);
}

.icon__tag {
  width: 35px;
  height: 35px;
  border-radius: 5px;
}

.position-absolute {
  position: absolute;
}

.position-relative {
  position: relative !important;
}

.modal-backdrop {
  display: none;
}

.h-100 {
  height: 100%;
}

.order-3 {
  order: 3;
}

.word-break {
  word-break: break-all;
}

.break-words {
  word-break: break-word;
}

.emoji-style {
  font-size: 25px;
}

.fw-700 {
  font-weight: 700;
}

.mb-4 {
  margin-bottom: 1.4rem;
}

.network-message {
  padding-left: 16px;
  font-weight: 500;
  color: var(--dim-dark-grey-color);
}

.trying-connect {
  position: relative;
}

.trying-connect .trying-connect-loader {
  position: absolute;
  top: 2px;
  left: 130px;
}

.trying-connect .loader_spinner__box__sm {
  height: auto;
  width: auto;
  padding: 0px;
}

.trying-connect .loader_spinner__box__sm .spin {
  height: 20px;
  width: 20px;
}

.video-container__loader .loader_spinner__box {
  margin-top: -55px;
}

.status_drop {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  border: 1px solid var(--white-color);
  background-color: var(--green-color);
  margin-left: 8px;
  border-width: 2px;
}

.top-left {
  top: 0;
  left: 0;
}

.bottom-left {
  bottom: 0;
  left: 0;
}

.bg-pin-icon {
  background: #e3e3e3;
}

.z-index-9999 {
  z-index: 99999;
}

.py-3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.active_speaker_video__container__box .icon__container.p-3 {
  padding: 1rem 0;
  margin-left: 60px;
}

.active_speaker_video__container__box .icon-kickout.icon__container.p-3 {
  margin-left: 104px;
}

.call-modal
  .modal-content
  > .modal-resizable
  .video__container
  .active_speaker_video__container__box {
  padding: 0 8rem;
  height: 100%;
}

.call-modal
  .modal-content
  > .modal-resizable.margin-auto
  .video__container
  .active_speaker_video__container__box {
  padding: 0 5rem;
}

.pinUserArea .active_speaker_video__container__box .icon__container.p-3 {
  margin-left: 1rem;
}

.pinUserArea
  .active_speaker_video__container__box
  .icon__container.p-3.icon-kickout {
  margin-left: 3.8rem;
}

.h-45 {
  height: 45px;
}

.max-w-130 {
  max-width: 130px;
}

.font-75 {
  font-size: 75% !important;
}

.marginLeft-4 {
  margin-left: 4px;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 25%;
}

.mainIframe {
  width: 100%;
  height: 100%;
}

.container {
  text-align: center;
}

.toggle-switch {
  position: relative;
  width: 58px;
  display: inline-block;
  text-align: left;
}

.checkbox {
  display: none;
}

.chat-img {
  padding: 0 !important;
}

.chat-img img {
  width: 100% !important;
  height: 100% !important;
  max-height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border-radius: 20px;
  font-weight: bold;
  font-size: 11px;
}

.inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin 0.2s ease-in 0s;
}

.inner:before,
.inner:after {
  float: left;
  width: 50%;
  height: 27px;
  padding: 0;
  line-height: 27px;
  color: #fff;
  box-sizing: border-box;
}

.inner:before {
  content: "ON";
  padding-left: 9px;
  background-color: var(--dark-color);
  color: #fff;
}

.inner:after {
  content: "OFF";
  padding-right: 8px;
  background-color: var(--light-color);
  color: var(--dark-color);
  text-align: right;
}

.switch {
  display: block;
  height: 23px;
  width: 23px;
  margin: 0 5px 0px 0px;
  background: #fff;
  position: absolute;
  top: 2px;
  bottom: 0;
  right: 28px;
  border: 0 solid #bbb;
  border-radius: 20px;
  transition: all 0.2s ease-in 0s;
}

.checkbox:checked + .label .inner {
  margin-left: 0;
}

.checkbox:checked + .label .switch {
  right: -3px;
}

.h-60 {
  height: 60%;
}

.btn-icon {
  background-color: transparent;
  border: 0;
  padding: 0;
}

.mainIframeModal .modal-dialog {
  max-width: 100% !important;
  height: 100%;
  align-items: flex-start;
}

.mainIframeModal .modal-body {
  height: 100% !important;
}

.mainIframeModal .modal-content {
  height: 100% !important;
}

.checkwrap {
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-left: 1.7em;
  margin-bottom: 0.9em;
  font-size: 14px;
  margin-right: 1em;
}

.checkwrap input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  left: 0;
  background-color: var(--white-color);
  border: 0.1em solid var(--silver-grey-color);
  top: 0.2em;
  height: 1.2em;
  width: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3em;
}

.checkwrap .checkmark:after {
  width: 0.3em;
  height: 0.65em;
  border: solid var(--white-color);
  border-width: 0 0.1em 0.1em 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: -0.17em;
  content: "";
  position: absolute;
}

.userSetting-btn {
  z-index: 1;
  font-size: 18px;
  min-height: 53px;
  min-width: 53px;
  width: 230px;
  margin-top: 1rem;
}

.checkwrap input:checked ~ .checkmark {
  background-color: var(--dark-red-color);
  border-color: var(--dark-red-color);
}

.checkwrap input:checked ~ .checkmark:after {
  display: block;
}

.reactions {
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;
}

.reactions-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dim-grey-color);
  min-width: 32px;
  min-height: 24px;
  border-radius: 10px;
  background-color: var(--white-color);
  margin-right: 5px;
  line-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
}

.reactions-tag svg {
  margin-right: 3px;
}

.reactions {
  padding-left: 60px;
}

.reactions .emoji-picker-react {
  width: 280px !important;
  min-height: 250px !important;
  margin-bottom: 6px;
}

.reactions-tag .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.reactions-tag .btn-icon svg {
  margin-right: 0;
}

.reactions-tag.active {
  background-color: var(--light-color) !important;
  border-color: var(--dark-color) !important;
  color: var(--dark-color) !important;
}

.reactions-tag.active svg path,
.reactions-tag.active svg circle {
  fill: var(--white-color) !important;
}

.active.reactions-tag:hover {
  background-color: var(--dark-color) !important;
  border-color: var(--light-color) !important;
  color: var(--white-color) !important;
}

.chat_row:hover .btm-border {
  border-color: var(--dark-color);
}

.chat_row .reply svg {
  transform: rotateX(180deg);
  margin-bottom: 10px;
  margin-top: 10px;
}

.foot-svg {
  margin-top: 5px;
  margin-right: 20px;
  transform: rotateX(180deg);
}

.foot-close-svg {
  position: absolute;
  right: 13px;
  top: 3px;
}

.reply-inner {
  width: auto;
  background-color: var(--light-color) !important;
  border-radius: 10px;
  padding: 10px;
  margin: 8px 0;
}

.reply-inner .btm-border {
  border-color: var(--placeholder-opac-color) !important;
  word-break: break-all;
}

.foot-inner {
  word-break: break-word;
  font-size: 14px;
  padding-right: 20px;
  width: calc(100% - 20px);
}

.reply-inner .foot {
  margin: 0;
}

.chat_row .reply .foot svg {
  transform: none;
}

.chat_row_hide {
  display: none;
}

.icon-tooltip {
  width: 14px;
}

.group-tooltip {
  text-transform: initial;
}

.form-control {
  font-size: 13px;
  padding: 8px 10px;
  height: 37px;
  background: var(--light-color);
  border-radius: 6px;
  color: var(--dark-gray-shade2-color);
  box-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.5;
  width: 100%;
  display: block;
  border: none;
}

.form-control:focus {
  box-shadow: none;
}

.css-b62m3t-container {
  overflow: visible;
  min-height: 37px;
  height: auto;
}

.select-menu-custom__control {
  padding: 0 !important;
}

.select-menu-custom__control div {
  padding: 0;
  margin: 0;
}

.select-menu-custom__menu svg {
  margin-left: 8px;
  cursor: pointer;
  margin-top: 9px;
}

.select-menu-custom__menu .select-menu-custom__option {
  padding: 5px 10px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-setting .btn-green {
  min-width: 140px;
}

.w-40 {
  width: 40%;
}

.w-45 {
  width: 45%;
}

.w-60 {
  width: 60%;
}

.w-76 {
  width: 76%;
}

.btnSettings-container {
  height: 200px;
}

.select-menu-custom__menu .select-menu-custom__option--is-selected,
.select-menu-custom__menu .select-menu-custom__option--is-selected:hover {
  padding: 5px 10px;
  cursor: pointer;
  background-color: var(--dark-color) !important;
  color: var(--white-color) !important;
}

.user-setting .modal-header {
  padding-left: 28px;
}

.title-span {
  border-bottom: 1px solid var(--light-shade3-color);
  padding-bottom: 11px;
  display: flex;
}

.icon-close {
  position: absolute;
  right: 17px;
  padding-bottom: 11px;
  font-weight: bold;
  z-index: 1;
  background-color: transparent;
  border: none;
}

.user-setting .btn-light2 {
  font-size: 13px;
  margin-left: 6px;
  font-weight: normal;
  padding: 0;
  min-width: 95px;
}

.user-setting-select {
  min-height: 55px;
}

.user-setting-select-sm {
  width: calc(100% - 101px);
}

.user-setting .nav-tabs-column .tab-content-height {
  min-height: 14rem;
}

.user-setting .nav-tabs-column .tab-content-height-lg {
  min-height: 283.5px;
}

.nav-tabs-column {
  display: flex;
}

.nav-tabs-column .nav-tabs {
  border-bottom: none;
  width: 17%;
}

.nav-tabs-column .nav-item {
  margin-right: 0;
}

.nav-tabs-column .nav-link {
  padding: 0;
  min-height: 37px;
  min-width: 152px;
  text-align: left;
  margin-bottom: 0;
  padding-left: 11px;
  line-height: 30px;
  border-bottom: none;
}

.nav-tabs-column .nav-link:hover {
  color: var(--dark-color);
}

.nav-tabs-column .nav-link.active {
  background-color: var(--light-shade3-color);
  border-radius: 6px;
  border: none;
}

.nav-tabs-column-img-container {
  min-width: 13px;
  margin-right: 9px;
}

.nav-tabs-column .tab-content {
  padding-left: 15px;
  padding-top: 12px;
  width: 83%;
  min-height: 350px;
}

.lineH-20 {
  line-height: 20px;
}

.user-setting .icon_container:hover svg path {
  fill: var(--dark-gray-shade2-color);
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.outerStyle {
  transition: "all .5s ease-in";
  height: calc(100% - 5.8rem);
  width: calc(100% - 20%);
  z-index: 1;
  overflow: hidden;
  padding-top: 1rem;
}

.outerStyle-canvas-container {
  height: 2.8rem;
}

#outerStyleId {
  height: calc(100% - 2.8rem);
  width: 100%;
}

.outerStyle-canvas {
  background-color: var(--light-color);
  border-radius: 10px;
  padding: 0.25rem;
}

.outerStyle-canvas button {
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.4em;
  font-size: 1vw;
}

.outerStyle-canvas button svg {
  width: 2em;
  height: 1.15em;
}

.outerStyle-canvas button .arrow {
  width: 1.5em;
  height: auto;
  margin: 0 0 0 0.4em;
}

.outerStyle-canvas button .line {
  width: 1.3em;
  height: auto;
  margin: 0 0.4em 0 0.7em;
}

.Stack_horizontal {
  display: flex;
  justify-content: center;
}

.excalidraw .excalidraw-container {
  overflow: hidden !important;
}

.excalidraw .ToolIcon__icon svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  color: #000000 !important;
}

.excalidraw .App-menu_top {
  grid-template-columns: 1fr !important;
}

.excalidraw .Stack {
  gap: 1.1rem !important;
}

.excalidraw .App-toolbar-content button:first-child {
  display: flex !important;
  width: 100%;
  height: 2rem;
}

.excalidraw .App-menu_bottom,
.excalidraw .dropdown-menu-group,
.excalidraw .dropdown-menu-group + div,
.excalidraw .library-button,
.excalidraw .App-menu_top__left,
.excalidraw .HintViewer,
.excalidraw .App-toolbar__divider,
.excalidraw .ToolIcon__keybinding,
.excalidraw .ToolIcon__lock,
.excalidraw .App-toolbar-content button:first-child,
.excalidraw .App-toolbar-content button:nth-child(3),
.excalidraw .App-toolbar-content button:nth-child(4),
.excalidraw .mobile-misc-tools-container .ToolIcon__icon,
.excalidraw .Stack_horizontal .ToolIcon:first-child,
.excalidraw .Stack_horizontal label:nth-child(2),
.excalidraw .Stack_horizontal label:nth-child(3),
.excalidraw .Stack_horizontal label:nth-child(4),
.excalidraw .Stack_horizontal label:nth-last-child(2) {
  display: none !important;
}

.excalidraw--mobile .Stack_horizontal label:nth-child(2),
.excalidraw--mobile .Stack_horizontal label:nth-child(3),
.excalidraw--mobile .Stack_horizontal label:nth-child(4) {
  display: flex !important;
}

.excalidraw .App-bottom-bar > .Island {
  width: auto !important;
  min-width: 10px !important;
}

.excalidraw .dropdown-menu--mobile .dropdown-menu-container {
  height: 210px;
}

.left_s .head .user .avatar.person-typing {
  background-color: unset;
}

.avatar.person-typing .status {
  display: none;
}

.typing #typing_bubble {
  width: 52px;
  margin-left: -7px;
}

.typing-dot {
  fill: var(--dark-color);
  transform-origin: 50% 50%;
  animation: ball-beat 1.1s 0s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.typing-dot:nth-child(2) {
  animation-delay: 0.3s !important;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.6s !important;
}

.msg__wrapper div div div {
  position: absolute;
  line-height: 1.39;
  height: 100%;
  overflow: auto !important;
  padding-right: 10px;
  border: none;
}

@keyframes ball-beat {
  0% {
    opacity: 0.7;
  }

  33.33% {
    opacity: 0.55;
  }

  66.67% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

.marginRight-5 {
  margin-right: 5px;
}

.marginLeft-5 {
  margin-left: 5px;
}

.group-message-popup-body p {
  font-size: 16px;
  font-weight: 400;
}

.gap--4 {
  gap: 4px;
}

.gap--20 {
  gap: 20px;
}

.gap-50 {
  gap: 50px;
}

.mt--35 {
  margin-top: 35px;
}

.group-message-popup-body .btn-green {
  width: 190px;
  height: 47px;
}

.group-message-popup-body .btn-green svg {
  position: unset;
  margin-right: -5px;
}

.group-message-popup-body .btn-green:last-child svg,
.rotate-317 {
  transform: rotate(317deg);
}

.text-uppercase {
  text-transform: uppercase;
}

.flex-1 {
  flex: 1;
}

.create-standard-group .form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

.create-standard-group .form-group input::placeholder {
  color: transparent;
}

.form-floating > .form-control:focus {
  box-shadow: none;
  background: var(--light-color);
  border: none;
  padding-top: 7px;
}

.form-floating > .form-control,
.form-floating > .form-select {
  min-height: calc(3.5rem + -4px);
  line-height: 1.25;
  height: auto;
}

.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 8px !important;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.7rem) translateX(0.15rem);
}

.css-t3ipsp-control .menu-upside .css-1jqq78o-placeholder,
.user-setting .css-1v6as4q-singleValue {
  font-weight: 500;
  color: var(--dark-gray-shade2-color) !important;
}

.menu-upside .css-13cymwt-control,
.user-setting .css-13cymwt-control,
.select-menu-custom__control {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  min-height: 10px !important;
  box-shadow: none !important;
}

.menu-upside .css-13cymwt-control .css-1fdsijx-ValueContainer {
  padding: 0;
}

.menu-upside
  .css-13cymwt-control
  .css-1fdsijx-ValueContainer
  .css-qbdosj-Input {
  margin: 0;
  padding: 0;
}

.menu-upside .css-3w2yfm-ValueContainer {
  padding: 0;
}

.select-menu-custom__control .select-menu-custom__indicator {
  padding: 8px 0 8px 8px;
  height: 37px;
  align-items: center;
}

.menu-upside .css-1u9des2-indicatorSeparator,
.select-menu-custom__indicator-separator {
  display: none;
}

.menu-upside .css-t3ipsp-control,
.user-setting .css-t3ipsp-control {
  border: none;
  box-shadow: none;
  outline: none;
  background: transparent;
}

.create-standard-group .css-1nmdiq5-menu,
.select-menu-custom__menu {
  max-height: 80px;
  overflow: hidden;
  box-shadow: none !important;
  left: 0;
  border: 1px solid var(--dim-grey-color);
  border-radius: 6px !important;
  margin-top: 5px;
  margin-bottom: 5px;
}

.user-setting .css-1n6sfyn-MenuList {
  max-height: 99px;
  overflow: auto;
}

.create-standard-group-footer svg {
  position: unset;
  margin-left: -5px;
  margin-right: -5px;
}

.fw--500 {
  font-weight: 500;
}

.form-group {
  position: relative;
  margin-bottom: 16px;
}

.w-fit-content {
  width: fit-content !important;
}

.p-0 {
  padding: 0 !important;
}

.select-menu-custom__value-container {
  padding: 0 !important;
}

.select-menu-custom__menu .select-menu-custom__menu-list {
  padding: 0;
  max-height: 80px;
  overflow-y: auto;
}

.create-standard-group .form-group:last-child .select-menu-custom__menu {
  top: auto;
  bottom: 100%;
}

.btn-span {
  line-height: 0;
}

.select-menu-custom__control .select-menu-custom__multi-value {
  margin-right: 4px;
  padding: 4px;
  margin-bottom: 4px;
}

.select-menu-custom__control .select-menu-custom__multi-value__label {
  padding-right: 4px;
}

.select-menu-custom__menu .select-menu-custom__menu-notice,
.select-menu-custom__control .select-menu-custom__input-container {
  color: var(--dark-gray-shade2-color) !important;
}

.progress-container {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 9999;
}

.progress-inner {
  height: 24px;
  margin-bottom: 20px;
  background-color: #1264a3;
  border-radius: var(--border-radius);
  -webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
  width: 315px;
  position: relative;
}

.progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #1264a3;
  -webkit-box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
  -webkit-transition: width 0.6s ease;
  -o-transition: width 0.6s ease;
  transition: width 0.6s ease;
  background-color: #1264a3;
  border-radius: var(--border-radius);
}

.progress-bar-striped,
.progress-bar {
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(11, 76, 140, 1) 25%,
    transparent 25%,
    transparent 50%,
    rgba(11, 76, 140, 1) 50%,
    rgba(11, 76, 140, 1) 75%,
    transparent 75%,
    transparent
  );
  background-image: -o-linear-gradient(
    45deg,
    rgba(11, 76, 140, 1) 25%,
    transparent 25%,
    transparent 50%,
    rgba(11, 76, 140, 1) 50%,
    rgba(11, 76, 140, 1) 75%,
    transparent 75%,
    transparent
  );
  background-image: linear-gradient(
    45deg,
    rgba(11, 76, 140, 1) 25%,
    transparent 25%,
    transparent 50%,
    rgba(11, 76, 140, 1) 50%,
    rgba(11, 76, 140, 1) 75%,
    transparent 75%,
    transparent
  );
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}

.progress-count,
.progress-name {
  position: absolute;
  right: 10px;
  color: #ffffff;
  font-weight: bold;
  height: 100%;
  display: flex;
  align-items: center;
}

.progress-name {
  right: auto;
  left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 78%;
}

.progress-name-inner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-xl {
  max-width: 98%;
  max-height: 98%;
  padding-top: 1%;
}

.modal-xs {
  max-width: 450px;
}

.modal-xs .modal-body {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.modal-xl .modal-content {
  height: 100%;
}

.img-preview .modal-header {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}

.img-preview .modal-body {
  padding: 0;
  height: 100%;
  min-height: 10px;
  overflow: hidden;
}

.height-100 {
  height: 100%;
}

.max-height-100 {
  max-height: 100%;
}

.cursor-zoomIn {
  cursor: zoom-in;
}

.dropdown-container:hover .dropdown-custom {
  display: block;
}

.dropdown-custom {
  position: absolute;
  top: 100%;
  z-index: 1;
  left: 0;
  padding-top: 5px;
}

.dropdown-inner {
  background-color: var(--white-color);
  border: 1px solid var(--light-color);
  border-radius: var(--border-radius);
  padding: 10px 0;
  box-shadow: 0 2px 5px var(--placeholder-opac-color);
}

.chat_row:nth-last-child(1) .dropdown-custom,
.chat_row:nth-last-child(2) .dropdown-custom,
.chat_row:nth-last-child(3) .dropdown-custom,
.chat_row:nth-last-child(4) .dropdown-custom {
  top: auto;
  bottom: 100%;
}

.chat_row:nth-child(1) .dropdown-custom,
.chat_row:nth-child(2) .dropdown-custom,
.chat_row:nth-child(3) .dropdown-custom,
.chat_row:nth-child(4) .dropdown-custom {
  top: 100%;
  bottom: auto;
}

.chat-user-profile {
  top: auto;
  bottom: 100%;
}

.chat_row:nth-child(1) .emoji-picker-react,
.chat_row:nth-child(2) .emoji-picker-react,
.chat_row:nth-child(3) .emoji-picker-react,
.chat_row:nth-child(4) .emoji-picker-react,
.chat_row:nth-child(5) .emoji-picker-react {
  top: 100% !important;
  bottom: auto !important;
}

.chat_row:nth-last-child(1) .emoji-picker-react,
.chat_row:nth-last-child(2) .emoji-picker-react,
.chat_row:nth-last-child(3) .emoji-picker-react,
.chat_row:nth-last-child(4) .emoji-picker-react,
.chat_row:nth-last-child(5) .emoji-picker-react {
  top: auto !important;
  bottom: 100% !important;
}

.chat_row_hr:hover {
  background-color: transparent !important;
}

.user-name {
  color: var(--dark-color);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  font-weight: var(--font-medium);
  margin-bottom: 2px;
  margin-top: 0;
  font-weight: bold;
}

.user-role {
  color: var(--dark-color);
  margin-top: 0px;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

hr {
  border: 1px solid var(--light-color);
  margin-top: 15px;
  margin-bottom: 15px;
}
.border-transparent {
  border-color: transparent !important;
}

.px-10 {
  padding-left: 10px;
  padding-right: 10px;
}

.pl-2 {
  padding-left: 0.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.w-15 {
  width: 15%;
}

.w-30 {
  width: 30%;
}

.w-70 {
  width: 70%;
}

.h-70 {
  height: 70px;
}

.text-lg {
  font-size: 1.4rem;
}

svg path.ext {
  fill: var(--light-color);
}

.file_send_info .profile-pic {
  min-width: 100%;
  max-width: 100%;
}

.right_s .body .dropdown .chat_actions_dropdown {
  bottom: auto;
  display: none;
}

.right_s .body .dropdown.show .chat_actions_dropdown {
  display: flex;
}

.right_s .body .dropdown .chat_actions_dropdown::after {
  display: none;
}

.right_s .body .attached_file .actions .attached_file_btn,
.pinned-msg .body .attached_file .actions .attached_file_btn,
.files .actions .attached_file_btn {
  line-height: 1;
  background-color: transparent;
  border: none;
}

.pinned-msg .body-inner {
  flex-direction: row;
  padding: 0;
}

.no-msg {
  align-items: center;
  justify-content: center;
}

.overflow-x-auto {
  overflow-x: auto;
}

.no_hover:hover {
  background-color: transparent !important;
}

.btn-transparent {
  background-color: transparent;
  border: none;
  padding: 0;
  color: var(--green-color);
}

.text-grey {
  color: var(--dim-dark-grey-color) !important;
}

.reactions-popup-container {
  bottom: 100%;
  position: absolute;
}

.reactions-popup {
  position: relative;
  min-width: 200px;
  max-width: 260px;
  width: max-content;
  border-radius: 5px;
  background-color: var(--dark-color);
  border: 1px solid var(--light-color);
  padding: 5px;
  margin-bottom: 10px;
  color: var(--white-color);
  display: flex;
  justify-content: center;
}

.reactions-popup::after {
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid var(--dark-color);
  content: "";
  position: absolute;
  bottom: -7px;
}

.reactions .position-relative:first-child .reactions-popup-container {
  left: -60px;
}

.reactions .position-relative:first-child .reactions-popup::after {
  left: 4rem;
}

.reactions-icon {
  background-color: var(--white-color);
  border-radius: 10px;
  width: 55px;
  height: 55px;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  margin-bottom: 3px;
}

.reactions-username {
  font-size: 12.5px;
}

.reactions-name {
  font-size: 12px;
  color: var(--extra-light-gray-color);
}

.px-3 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.top-100 {
  top: 100%;
}

.whiteboard-form-control .css-13cymwt-control,
.whiteboard-form-control .css-t3ipsp-control,
.whiteboard-form-control .css-t3ipsp-control:focus {
  background-color: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
}

.whiteboard-form-control .css-1jqq78o-placeholder,
.whiteboard-form-control .css-1xc3v61-indicatorContainer svg,
.whiteboard-form-control .css-15lsz6c-indicatorContainer svg {
  color: var(--dark-gray-shade2-color);
}

.whiteboard-form-control .css-1hb7zxy-IndicatorsContainer,
.whiteboard-form-control .css-1n6sfyn-MenuList {
  padding: 0;
}

.whiteboard-form-control .css-1u9des2-indicatorSeparator {
  display: none;
}

.whiteboard-form-control .css-1xc3v61-indicatorContainer {
  cursor: pointer;
}

.mx-1 {
  margin-right: 0.25rem;
  margin-left: 0.25rem;
}

.text-red {
  color: var(--red-color);
}

.m-auto {
  margin: auto;
}

.text-thin {
  font-weight: var(--font-thin);
}

.r-1 {
  right: 0.25rem;
}

.b-0 {
  bottom: 0;
}

.z-index-1 {
  z-index: 1;
}

.Toastify__toast-theme--dark {
  background-color: var(--white-color) !important;
  color: var(--dark-gray-shade2-color) !important;
}

.Toastify__close-button {
  color: var(--dark-gray-shade2-color) !important;
  margin: auto 0;
}

.Toastify__progress-bar-theme--dark {
  background: var(--dark-color) !important;
}

.p-2 {
  padding: 0.5rem;
}

.pt-0 {
  padding-top: 0 !important;
}

.d-inline-flex {
  display: inline-flex;
}

.swal-modal {
  background-color: var(--white-color);
  border-radius: 15px;
}

.swal-text {
  color: var(--dark-gray-shade2-color);
  margin-top: 10px;
  padding: 15px;
  font-size: 15px;
  line-height: 1.6;
}

.swal-button {
  border: 2px solid transparent;
  min-width: 80px;
  font-weight: var(--font-bold);
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  position: relative;
  height: 2.3rem;
  border-radius: 6px;
  line-height: 1.5;
}

.swal-button--confirm {
  background-color: var(--green-color) !important;
  color: var(--white-color);
}

.swal-button--confirm:hover {
  border-color: var(--dark-green-color);
}

.swal-button--cancel {
  background-color: var(--light-color) !important;
  color: var(--dark-color);
  border-color: var(--light-color) !important;
}

.swal-button--cancel:hover {
  border-color: var(--dark-color) !important;
}

.swal-button--later {
  background-color: var(--dark-color) !important;
  color: var(--white-color);
  border-color: var(--dark-color) !important;
}

.swal-button--later:hover {
  border-color: var(--dark-shade2-color) !important;
}

.swal-footer {
  margin: 0;
  padding: 15px;
}

.audio-img-container {
  z-index: 1;
  bottom: 5rem;
  left: 0;
  width: 100%;
  background-color: transparent;
  box-shadow: 0 -0.5rem 0.5rem var(--light-opac-color);
  padding: 0.5rem;
}

.audio-img {
  width: 3.5rem;
  height: 3.5rem;
}

.text-sm {
  font-size: 0.75rem;
}

.icon-pause {
  bottom: 6.5rem;
  left: 1rem;
}

.opacity-0 {
  opacity: 0;
}

.opacity-5 {
  opacity: 0.5;
}

.btn-file {
  font-size: 12px;
  height: 2rem;
}

.progress {
  height: 15px;
  position: relative;
}

.border-left {
  border-left: 1px solid;
}
.text-dark {
  color: var(--dark-color);
}

.user-setting .modal-dialog {
  max-width: 1140px;
}

/* .user-setting .modal-dialog{
  max-width: 765px;
} */
.user-setting .modal-body {
  padding: 20px;
}

.video-preview {
  background-color: var(--dark-gray-shade2-color);
  border-radius: var(--border-radius);
  height: 158px;
}

.video-preview-inner video {
  object-fit: cover;
  height: 100%;
  overflow: hidden;
  width: 100%;
  border-radius: var(--border-radius);
}

.video-preview-error b {
  font-size: 18px;
}

.video-input-preview-error .spin {
  border: 5px solid var(--white-color);
  border-top: 5px solid var(--orange-color);
  width: 50px;
  height: 50px;
}

.modal-switch {
  width: auto;
  height: auto;
  position: relative;
  right: 0;
  top: 0;
  margin: 0;
  display: flex;
  cursor: pointer;
  margin-right: 15px;
  min-width: 50px;
  min-height: 25px;
}

.modal-switch .slider {
  width: 50px;
  height: 25px;
}

.modal-switch .slider-text {
  padding-left: 58px;
  padding-top: 1px;
  font-size: 14px;
}

.virtual-thumbnail-container {
  color: var(--light-black-color);
  width: 113px;
  margin-top: 0;
  border: 2px solid var(--light-black-color);
  border-radius: 6px;
  background-color: var(--white-color);
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  height: 84px;
  padding: 2px;
  margin-bottom: 4px;
  margin-right: 5px;
  cursor: pointer;
}

.virtual-thumbnail {
  height: 100%;
  width: 100%;
  border-radius: 3px;
}

.virtual-thumbnail-container:has(.virtual-thumbnail-selected) {
  border-color: var(--green-color);
}

.nav-tabs-column .tab-content > .active {
  display: flex;
}

.modal-header .video__toolbar {
  top: auto;
  bottom: auto;
}

.modal-header .toolbar__tag {
  width: 40px;
  height: 35px;
}

.microphone-progress {
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: initial;
  background: url(../images/microphone-bar.png) no-repeat;
  background-size: 100% 100%;
  height: 40px;
  width: 100%;
  border-radius: 8px;
}

.w-33 {
  width: 33%;
}

.w-66 {
  width: 66%;
}

.play-testsound {
  margin-top: 3.3rem;
  margin-bottom: 2.5rem;
  height: 50px;
}

.bg-green-bar {
  background-color: var(--green-bar);
  background-image: none;
}

.bg-orange-bar {
  background-color: var(--orange-bar);
  background-image: none;
}

.bg-red-bar {
  background-color: var(--red-bar);
  background-image: none;
}

.bg-light-dim-grey-color {
  background-color: var(--light-dim-grey-color);
}

.participantsCase {
  width: 20rem;
  transition: all ease 0.5s;
  display: none;
  align-content: flex-start;
  overflow: auto;
  display: flex;
  height: 100%;
}

.participantsCase .thumbnail {
  width: 48.3%;
  height: 5rem;
  border: 0.15rem solid #ffffff;
  border-radius: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  position: relative;
  overflow: hidden;
}

.participantsCase .thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.participantsCase .thumbnail:nth-child(2n) {
  margin-right: 0;
}

.participantsCase .thumbnail.handRaised {
  border-color: var(--dark-color);
}

.participantsCase .small-tags {
  background-color: var(--dark-color);
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 0.35rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.15rem solid var(--dark-color);
}

.participantsCase .handRaised-icon {
  max-height: 1rem;
}

.participantsCase .kickOut {
  border-color: var(--dark-color);
}

.participantsCase .kickOut-tag {
  background-color: #ffffff;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.35rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.15rem solid #7589a0;
  position: absolute;
  left: 0.3rem;
  top: 0.3rem;
}

.participantsCase .kickOut-tag svg {
  color: var(--dark-color);
  transform: rotate(180deg);
}

.participantsCase .attendees-name {
  background: url(../images/shadow.png) no-repeat;
  background-size: 100% 100%;
  height: 2.3rem;
  width: 100%;
  font-size: 0.7rem;
  line-height: 2.5;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
}

.participantsCase .attendees-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 10px;
}

.min-h-6 {
  min-height: 2rem;
}

.switch-select {
  min-height: 25px;
}

.switch-select .select-menu-custom__single-value {
  line-height: inherit;
}

.switch-select .select-menu-custom__indicator {
  padding: 0;
  height: 1.5rem;
}

.switch-select .select-menu-custom__single-value {
  font-size: 14px;
  font-weight: normal;
}

.right--1 {
  right: -0.25em;
}

.right--2 {
  right: -0.5em;
}

.top--1 {
  top: -0.25em;
}

.top--0-5 {
  top: -0.5em;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.top-2 {
  top: 0.5rem;
}

.right-2 {
  right: 0.5rem;
}

.text-pin,
.text-pin:hover {
  color: var(--white-color);
}

.block-files {
  border-radius: 7px;
  height: 8rem;
  width: 9.37rem;
  overflow: hidden;
  position: relative;
}

.files .list-group {
  border: 1px solid var(--light-color);
  border-radius: 7px;
}

.files .list-group .list-group-item {
  padding: 0.5rem;
  border-bottom: 1px solid var(--light-shade2-color);
}

.files .list-group .list-group-item:last-child {
  border-bottom: 0;
}

.files .block-files .actions,
.files .list-group .list-group-item .actions {
  display: none;
}

.files .block-files:hover .actions,
.files .list-group .list-group-item:hover .actions {
  display: flex;
}
.block-files .downloading-loader{
width: 30px;
    height: 30px;
}
.block-files .downloading-loader .spin{
width: 20px;
    height: 20px;
}
.files,
.search {
  overflow-y: auto;
  height: 100%;
}

.search {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.search .chat_search {
  width: 30%;
  margin: auto;
}

.search .chat-search-hr {
  width: 100%;
  border-top: none;
  margin: 0;
}

.top-0 {
  top: 0 !important;
}

.flex-row {
  flex-direction: row !important;
}

.pt-3 {
  padding-top: 1rem;
}

.pinned-icon {
  width: 48px;
  margin-right: 8px;
  text-align: right;
}

.border {
  border: 1px solid;
}
.border-light {
  border-color: var(--light-color);
}
.unpin .right_s .body .chat_row:hover {
  background-color: transparent !important;
}
.epr-search-container input:focus {
  border: none !important;
}
.right_s .thread_box .name,
.right_s .thread_box .head svg {
  color: var(--white-color);
}
.right_s .thread_box .body-inner {
  flex-direction: column;
  overflow-y: auto;
}
.text-extra-light-gray-color {
  color: var(--extra-light-gray-color);
}
.thread_box_inner {
  height: calc(100% - 53px - 16px);
  overflow-y: auto;
}
.thread_box_inner .body {
  padding-top: 0;
}
.thread_box_inner hr {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
}
.thread_box_inner .nav-tabs .nav-link:hover {
  color: var(--white-color);
}
.thread_box .progress-container {
  top: 135px;
}
.rounded {
  border-radius: 7px;
}

.theme-dark .create-standard-group .form-control:focus {
  background-color: var(--theme-dark-dark-color);
  color: var(--placeholder-color);
}

.theme-dark .expend-chevron:hover svg path {
  fill: var(--theme-dark-white-color) !important;
}

.theme-dark .reply-inner,
.theme-dark .dropdown-inner {
  background-color: var(--light-gray-color) !important;
}

.theme-dark .dropdown-inner,
.theme-dark .reactions-tag {
  border-color: var(--light-gray-color) !important;
}

.theme-dark .icon-white svg,
.theme-dark .right_s .foot .text-area-actions button.active svg path,
.theme-dark .right_s .foot .text-area-actions button.active:hover svg path,
.theme-dark .foot-close-svg:hover svg path {
  fill: var(--white-color);
}

body.theme-dark,
.theme-dark .loader_spinner {
  background-color: var(--black-color);
}

.theme-dark .bg-light,
.theme-dark .bg--dark,
.theme-dark .bg-light-dim-grey-color,
.theme-dark .loader_spinner__box {
  background-color: var(--theme-dark-light-color);
}

.theme-dark .bg-white,
.theme-dark .left_s,
.theme-dark .right_s,
.theme-dark .top-header .navbar-collapse .navbar-btns-ico .nav-link,
.theme-dark .timeline-loader-background-masker,
.theme-dark .modal-content,
.theme-dark ::-webkit-scrollbar-track,
.theme-dark .modal-dialog .modal-header,
.theme-dark .modal-dialog .modal-body,
.theme-dark .modal-resizable .loader_spinner__box,
.theme-dark .right_s .body .chat_actions_span,
.theme-dark .current-date-inner .current-date,
.theme-dark .foot .overflow-x-auto::-webkit-scrollbar-thumb {
  background-color: var(--theme-dark-white-color);
}

.theme-dark .Toastify__toast-theme--dark {
  background-color: var(--theme-dark-white-color) !important;
}

.theme-dark .form-control,
.theme-dark .left_s .chat_search input,
.theme-dark .chat_search input,
.theme-dark .right_s .foot,
.theme-dark aside.emoji-picker-react,
.theme-dark .right_s .body .attached_file,
.theme-dark .pinned-msg .body .attached_file,
.theme-dark .accordion-button,
.theme-dark .accordion-collapse,
.theme-dark ::-webkit-scrollbar-thumb,
.theme-dark .btn-light,
.theme-dark .modal-resizable .loader_spinner,
.theme-dark .call-modal .modal-resizable > .modal-body,
.theme-dark .foot .overflow-x-auto::-webkit-scrollbar-track,
.theme-dark .file_send_info_inner {
  background-color: var(--theme-dark-dark-color);
}

.theme-dark .left_s .chat_list .head:hover,
.theme-dark .left_s .chat_list .head.selected,
.theme-dark .right_s .head,
.theme-dark .right_s .body .chat_row:hover,
.theme-dark .attached__icon,
.theme-dark .status,
.theme-dark .right_s .foot .msg__suggestions li:hover,
.theme-dark .attached__icon button:hover,
.theme-dark .bg_leave:hover,
.theme-dark .bg-light,
.theme-dark .bg-light-dim-grey-color,
.theme-dark .logo_loader .company-logo-container,
.theme-dark .right_s .body .chat_actions_dropdown,
.theme-dark .right_s .body .chat_row .attached_file .avatar,
.theme-dark .pinned-msg .body .chat_row .attached_file .avatar,
.theme-dark .files .avatar,
.theme-dark .user-setting .css-1xers4s-option,
.theme-dark .outerStyle-canvas,
.theme-dark .left_s .message-list-head:hover {
  background-color: var(--dark-color);
}

.theme-dark .attached__icon button {
  background-color: var(--theme-dark-placeholder-opac-fill-color);
}

.theme-dark .right_s .body .chat_row:hover .foot {
  border-color: var(--theme-dark-placeholder-opac-fill-color);
}

.theme-dark .left_s .head .user .avatar,
.theme-dark .right_s .head .user .avatar,
.theme-dark .right_s .body .chat_row .avatar,
.theme-dark .pinned-msg .body .chat_row .avatar,
.theme-dark .inner:after {
  background-color: var(--extra-light-gray-color);
}

body.theme-dark,
.theme-dark ::placeholder,
.theme-dark .left_s .chat_search input,
.theme-dark .chat_search input,
.theme-dark .left_s .name,
.theme-dark .left_s .chat_list .head .user .text-small,
.theme-dark .right_s .foot,
.theme-dark aside.emoji-picker-react,
.theme-dark .accordion-button,
.theme-dark .right_s .foot textarea,
.theme-dark .top-header .text-white,
.theme-dark .maximize-restore-icons svg {
  color: var(--extra-light-gray-color);
}

.theme-dark .left_s .message-list-head span,
.theme-dark .right_s .body .Name-messenger,
.theme-dark .pinned-msg .body .Name-messenger,
.theme-dark .right_s .body .bubble p,
.theme-dark .pinned-msg .body .bubble p,
.theme-dark .modal-header,
.theme-dark .user-another-call-popup h6,
.theme-dark .btn-light,
.theme-dark .current-date-inner .current-date,
.theme-dark .nav-tabs .nav-link.active,
.theme-dark .nav-tabs .nav-link,
.theme-dark .nav-tabs .nav-link.active:hover,
.theme-dark .user-name,
.theme-dark .user-role,
.theme-dark .right_s .foot .msg,
.theme-dark .text-dark,
.theme-dark .switch-select .select-menu-custom__indicator,
.theme-dark
  .select-menu-custom__control
  .select-menu-custom__multi-value__label,
.theme-dark .left_s {
  color: var(--white-color);
}

.theme-dark .left_s .chat_search input,
.theme-dark .chat_search input,
.theme-dark .right_s .foot,
.theme-dark .accordion-item,
.theme-dark .top-header .navbar-collapse .navbar-btns-ico .nav-link:hover,
.theme-dark .right_s .foot .msg__suggestions,
.theme-dark .css-26l3qy-menu,
.theme-dark .right_s .body .chat_actions_span,
.theme-dark .reactions-tag,
.theme-dark .current-date-inner .current-date,
.theme-dark hr,
.theme-dark .files .list-group,
.theme-dark .files .list-group-item {
  border-color: var(--dark-color);
}

.theme-dark .status {
  border-color: var(--theme-dark-white-color);
}

.theme-dark .attached__icon button,
.theme-dark .btn-light {
  border-color: var(--theme-dark-dark-color);
}

.theme-dark .reactions-popup::after {
  border-top-color: var(--theme-dark-dark-color);
}

.theme-dark .icon-add svg path:first-child,
.theme-dark .maximize-restore-icons svg polyline,
.theme-dark .maximize-restore-icons svg line,
.theme-dark .maximize-restore-icons svg path {
  fill: none;
}

.theme-dark aside.emoji-picker-react,
.theme-dark .emoji-picker-react input.emoji-search,
.theme-dark .active.reactions-tag:hover,
.theme-dark .reactions-popup {
  border-color: var(--dark-color) !important;
}

.theme-dark .emoji-picker-react input.emoji-search,
.theme-dark .text-grey,
.theme-dark .reactions-tag,
.theme-dark .outerStyle-canvas button svg {
  color: var(--extra-light-gray-color) !important;
}

.theme-dark .outerStyle-canvas button svg line {
  stroke: var(--extra-light-gray-color) !important;
}

.theme-dark .emoji-picker-react .emoji-group:before {
  background-color: transparent !important;
}

.theme-dark .right_s .foot .msg__suggestions,
.theme-dark .active.reactions-tag:hover,
.theme-dark .reactions-popup {
  background-color: var(--theme-dark-dark-color) !important;
}

.theme-dark .top-header .navbar-collapse .navbar-btns-ico .nav-link:hover {
  opacity: 1;
}

.theme-dark .timeline-loader-background {
  background: linear-gradient(
    to right,
    var(--theme-dark-dark-color) 8%,
    var(--theme-dark-dark-color) 18%,
    var(--theme-dark-dark-color) 33%
  );
}

.theme-dark .slider {
  background: var(--light-black-color);
}

.theme-dark .css-26l3qy-menu {
  background: var(--theme-dark-dark-color);
  color: var(--placeholder-color);
}

.theme-dark .nav-tabs .nav-link:hover {
  color: var(--orange-color) !important;
}

.theme-dark .login-from-box label,
.theme-dark .login-from-box .forgot-pass,
.theme-dark .emoji-picker-react .emoji-group:before,
.theme-dark .content-wrapper[data-name],
.theme-dark [contentEditable="true"]:empty:not(:focus):before,
.theme-dark .right_s .body .bubble .name,
.theme-dark .nav-tabs .nav-item.show .nav-link,
.theme-dark .modal-footer,
.theme-dark .modal-body p {
  color: var(--extra-light-gray-color) !important;
}

.theme-dark .right_s .head .user .avatar,
.theme-dark .nav-tabs,
.theme-dark .border_block,
.theme-dark .btm-border,
.theme-dark .top-border,
.theme-dark .right_s .body .chat_row .btn-light,
.theme-dark .border-light {
  border-color: var(--dark-color);
}

.theme-dark .right_s .foot .text-area-div button svg path,
.theme-dark .right_s .foot .text-area-actions button svg circle,
.theme-dark .icon-lock svg path {
  fill: var(--whitish-grey-color);
}

.theme-dark .outerStyle {
  color: var(--dark-gray-shade2-color) !important;
}

.theme-dark .emoji-picker-react .emoji-categories button.icn-smileys_people {
  background: url(../images/smileys-1.svg) no-repeat !important;
  background-size: 20px !important;
  background-position: center !important;
}

.theme-dark .emoji-picker-react .emoji-categories button.icn-animals_nature {
  background: url(../images/smileys-2.svg) no-repeat !important;
  background-size: 20px !important;
  background-position: center !important;
}

.theme-dark .emoji-picker-react .emoji-categories button.icn-food_drink {
  background: url(../images/smileys-3.svg) no-repeat !important;
  background-size: 20px !important;
  background-position: center !important;
}

.theme-dark .emoji-picker-react .emoji-categories button.icn-travel_places {
  background: url(../images/smileys-4.svg) no-repeat !important;
  background-size: 20px !important;
  background-position: center !important;
}

.theme-dark .emoji-picker-react .emoji-categories button.icn-activities {
  background: url(../images/smileys-5.svg) no-repeat !important;
  background-size: 20px !important;
  background-position: center !important;
}

.theme-dark .emoji-picker-react .emoji-categories button.icn-objects {
  background: url(../images/smileys-6.svg) no-repeat !important;
  background-size: 20px !important;
  background-position: center !important;
}

.theme-dark .emoji-picker-react .emoji-categories button.icn-symbols {
  background: url(../images/smileys-7.svg) no-repeat !important;
  background-size: 20px !important;
  background-position: center !important;
}

.theme-dark .emoji-picker-react .emoji-categories button.icn-flags {
  background: url(../images/smileys-8.svg) no-repeat !important;
  background-size: 20px !important;
  background-position: center !important;
}

.theme-dark .border_block__inner .text-highlight svg path {
  fill: var(--orange-color);
}

.theme-dark .right_s .body .attached_file .avatar svg path,
.theme-dark .pinned-msg .body .attached_file .avatar svg path,
.theme-dark svg path.ext {
  fill: var(--dark-color);
}

.theme-dark .css-14el2xx-placeholder,
.theme-dark .css-1g14k7y,
.theme-dark .css-1n7v3ny-option,
.theme-dark .css-vwja0k,
.theme-dark .css-12jo7m5,
.theme-dark .css-yt9ioa-option,
.theme-dark .css-wsp0cs-MultiValueGeneric,
.theme-dark .select-menu-custom__menu,
.theme-dark .css-1nmdiq5-menu {
  color: var(--whitish-grey-color) !important;
}

.theme-dark .css-tlfecz-indicatorContainer svg path,
.theme-dark .css-1gtu0rj-indicatorContainer svg path {
  fill: var(--whitish-grey-color) !important;
}

.theme-dark .bg--transparent {
  background-color: var(--black-opac-color);
}

.theme-dark .btn-light:hover,
.theme-dark .btn-light2:hover,
.theme-dark .chat_row:hover .btm-border,
.theme-dark .btn-light:hover,
.theme-dark .btn-light2:hover,
.theme-dark .btn-white:hover {
  border-color: var(--white-color);
}

.theme-dark .right_s .foot .msg__suggestions li:hover,
.theme-dark .right_s .foot .msg__wrapper li:hover {
  background-color: var(--dark-color);
}

.theme-dark .right_s .body .chat_actions_dropdown::after {
  border-top-color: var(--dark-color);
}

.theme-dark .right_s .foot .msg__suggestions li,
.theme-dark .right_s .foot .msg__wrapper li,
.theme-dark .list .info .name {
  color: var(--extra-light-gray-color);
}

.theme-dark .right_s .foot .msg__wrapper div:first-child div:nth-child(2) {
  background: var(--theme-dark-white-color);
}

.theme-dark .css-1n7v3ny-option:hover,
.theme-dark .css-1rhbuit-multiValue,
.theme-dark .css-11e6wws-option,
.theme-dark .css-1p3m7a8-multiValue,
.theme-dark .reactions-tag {
  background-color: var(--dark-color) !important;
}

.theme-dark .chat_count {
  color: var(--dark-color);
}

.theme-dark .icon_container:hover svg path,
.theme-dark .right_s .foot .text-area-actions button:hover svg path,
.theme-dark .reactions-tag:hover svg path,
.theme-dark .reactions-tag:hover svg circle,
.theme-dark .btn_search.icon_container:hover .cross path,
.theme-dark .right_s .body .chat_actions_span button:hover svg path,
.theme-dark .right_s .body .chat_actions_span button:hover svg circle,
.theme-dark .right_s .body .chat_actions_span a:hover svg path,
.theme-dark .right_s .body .chat_actions_span a:hover svg circle {
  fill: var(--placeholder-opac-fill-color);
}

.theme-dark .btn_search.icon_container:hover .cross path {
  stroke: none;
}

.theme-dark .btn_search.icon_container:hover svg path,
.theme-dark .maximize-restore-icons.icon_container:hover svg path,
.theme-dark .maximize-restore-icons.icon_container:hover svg polyline,
.theme-dark .maximize-restore-icons.icon_container:hover svg line {
  stroke: var(--placeholder-opac-fill-color);
  fill: none;
}

.theme-dark .text-link svg path,
.theme-dark .attached__icon svg path,
.theme-dark .right_s .body .chat_row .attached_file .avatar svg path,
.theme-dark .pinned-msg .body .chat_row .attached_file .avatar svg path {
  fill: var(--extra-light-gray-color);
}

.theme-dark .right_s .body .chat_actions_dropdown .chat_actions_li:hover,
.theme-dark .pinned-msg .body .chat_actions_dropdown .chat_actions_li:hover {
  background-color: rgba(30, 40, 52, 0.2);
}

.theme-dark .css-1okxp8x-option:hover,
.theme-dark .Invite-People-drop:hover,
.theme-dark .css-oawgso-option:hover {
  background-color: var(--dark-opac-color) !important;
}

.theme-dark .css-11e6wws-option,
.theme-dark .text-label,
.theme-dark .nav-tabs-column .nav-link:hover,
.theme-dark .btn-light2,
.theme-dark .modal-body,
.theme-dark .select-menu-custom__menu .css-1jwi8f4-singleValue,
.theme-dark .dropdown-custom .user-timezone,
.theme-dark .Toastify__toast-theme--dark,
.theme-dark .Toastify__close-button,
.theme-dark .switch-select .select-menu-custom__single-value,
.theme-dark .right_s .thread_box .name,
.theme-dark .thread_box_inner .nav-tabs .nav-link:hover {
  color: var(--white-color) !important;
}

.theme-dark .chat_count {
  background-color: var(--light-color);
}

.theme-dark .right_s .foot_focus,
.theme-dark .right_s .body .chat_actions_dropdown,
.theme-dark .current-date-inner .dropdown-menu hr,
.theme-dark .file_send_info_inner {
  border-color: var(--dark-shade2-color);
}

.theme-dark .right_s .body .chat_row .btn-light:hover {
  border-color: var(--extra-light-gray-color);
}

.theme-dark .user-setting .css-1nmdiq5-menu,
.theme-dark .select-menu-custom__menu,
.theme-dark .css-1nmdiq5-menu {
  box-shadow: none;
  border: 1px solid var(--dark-shade4-color);
}

.theme-dark .user-setting .css-oawgso-option:hover {
  background-color: var(--dark-opac-color) !important;
}

.theme-dark .create-standard-group input:-webkit-autofill,
.theme-dark .create-standard-group input:-webkit-autofill:hover,
.theme-dark .create-standard-group input:-webkit-autofill:focus,
.theme-dark .create-standard-group input:-webkit-autofill:active {
  -webkit-box-shadow: -147px 56px 0px 0px #1e2834 inset !important;
  -webkit-text-fill-color: var(--placeholder-color) !important;
}

.theme-dark .create-standard-group .css-1nmdiq5-menu,
.theme-dark .select-menu-custom__menu,
.theme-dark .css-1nmdiq5-menu {
  background-color: var(--theme-dark-dark-color);
}

.theme-dark .create-standard-group-footer .btn-light {
  color: var(--extra-light-gray-color) !important;
}

.theme-dark .nav-tabs-column .nav-link.active,
.theme-dark .btn-light2 {
  background-color: var(--dark-shade3-color);
}

.theme-dark .btn-light2 {
  border-color: var(--dark-shade3-color);
}

.theme-dark .nav-tabs-column-img-container svg path,
.theme-dark .dropdown-custom .user-timezone svg path,
.theme-dark .current-date-inner .current-date svg path {
  fill: var(--white-color);
}

.theme-dark .select-menu-custom__placeholder,
.theme-dark .select-menu-custom__single-value,
.theme-dark .form-floating > label,
.theme-dark .form-control,
.theme-dark .select-menu-custom__menu .select-menu-custom__menu-notice,
.theme-dark .select-menu-custom__control .select-menu-custom__input-container,
.theme-dark .whiteboard-form-control .css-1jqq78o-placeholder,
.theme-dark .whiteboard-form-control .css-1xc3v61-indicatorContainer svg,
.theme-dark .whiteboard-form-control .css-15lsz6c-indicatorContainer svg {
  color: var(--dim-dark-grey-shade2-color) !important;
}

.theme-dark .icon-close svg path,
.theme-dark .icon-close:hover svg path,
.theme-dark
  .select-menu-custom__control
  .select-menu-custom__indicator
  svg
  path {
  fill: var(--dim-dark-grey-shade3-color);
}

.theme-dark .title-span {
  border-color: var(--dark-shade5-color);
}

.theme-dark .right_s .body .chat_actions_dropdown {
  box-shadow: 0 0 5px var(--dark-grey-color);
}

.theme-dark .highlight {
  background-color: var(--dark-shade4-color) !important;
}

.theme-dark .right_s .body .attached_file {
  background-color: var(--dark-shade2-color);
}
.theme-dark .bg-light-10 {
  background-color: rgb(30, 40, 52, 0.3);
}

.modal-resizable {
  overflow: hidden;
}

.pagination_custom {
  position: absolute;
  bottom: 1rem;
  top: auto;
  right: 1em;
  background: var(--dark-bg);
  display: flex;
  padding: 0.4em 0.8em;
  border-radius: 10px;
  min-width: 8em;
  justify-content: space-between;
  align-items: center;
  color: var(--white-color);
  font-size: 1.1vw;
  z-index: 1;
  min-height: 2.8em;
}

.pagi-left,
.pagi-right {
  color: var(--white-color);
  width: 1em;
  height: 1.9em;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
}

.tab-container {
  padding: 8px;
}
.gap-y-10 {
  row-gap: 10px;
}
.gap-4 {
  gap: 1.5rem;
}

@media only screen and (max-width: 1450px) {
  .modal-switch {
    margin-top: 1px;
  }
}

@media only screen and (max-width: 1024px) {
  .login-main-box {
    width: 70%;
  }
}

@media only screen and (max-width: 820px) {
  .top-header .navbar-brand,
  .left_s {
    width: 205px;
  }

  .right_s {
    width: calc(100% - 213px);
  }

  .top-header .navbar-collapse .navbar-btns-ico .nav-link {
    min-width: 100px;
  }

  .cross-ico {
    width: 21px;
  }

  .top-header .navbar-collapse {
    width: calc(100% - 234px);
  }

  .login-main-box {
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .top-header .navbar-brand {
    width: auto;
  }

  .navbar-toggler {
    display: flex;
    margin-right: 10px;
  }

  .top-header .navbar-collapse {
    position: absolute;
    top: 54px;
    z-index: 2;
    margin: 0;
    width: 100%;
    background-color: var(--dark-color);
    padding: 0 8px 15px;
    left: 0;
    display: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
  }

  .theme-dark .top-header .navbar-collapse {
    background-color: var(--black-color);
  }

  .top-header .navbar-collapse.show {
    display: flex;
  }

  .top-header .navbar-collapse .navbar-nav {
    width: 100%;
    flex-direction: column;
  }

  .navbar-toggler-icon {
    width: 1.1em;
    height: 1.1em;
  }

  .top-header .navbar-collapse .navbar-btns-ico .nav-link {
    min-width: 100px;
    width: 100%;
    padding: 10px 15px;
  }

  .top-header .navbar-collapse .navbar-btns-ico .nav-item {
    margin-bottom: 5px;
  }

  .top-header .navbar-collapse .navbar-btns-ico .nav-item:last-child {
    margin-bottom: 0;
  }

  .left_s {
    width: 320px;
    position: absolute;
    left: -320px;
    z-index: 1;
    top: 0;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    height: calc(100% - 8px);
  }

  .left_s.open {
    left: 0;
    z-index: 2;
  }

  .right_s {
    width: 100%;
    margin-left: 0;
  }

  .right_s .body {
    margin-top: 5px;
    padding-top: 0;
    padding-bottom: 5px;
  }

  .right_s .head .bar_tool {
    justify-content: flex-end;
    width: auto;
  }

  .open_sidebar {
    display: flex;
  }

  .right_s .head .user {
    padding-left: 35px;
  }

  .video-call-join-chat-thum {
    min-width: 200px;
    justify-content: flex-start;
  }

  .help-chat-thum {
    width: auto;
    flex-direction: column-reverse;
    align-items: flex-end;
  }

  .help-chat-thum img {
    margin-bottom: 5px;
  }

  .right_s .head {
    padding: 4px 15px;
  }

  .login-page-wrapper {
    padding: 8px;
  }

  .login-main-box {
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    border-radius: var(--border-radius);
  }

  .login-img-box {
    width: 100%;
    height: 35%;
    border-radius: var(--border-radius);
    padding: 8px;
  }

  .login-img-box img {
    height: 100%;
  }

  .login-from-box {
    width: 100%;
    height: calc(100% - 36%);
    padding: 30px;
    border-radius: var(--border-radius);
    overflow-y: auto;
    justify-content: flex-start;
  }

  .login-from-box a img {
    width: 70%;
  }
}

@media only screen and (max-width: 500px) {
  .right_s .head {
    flex-direction: column-reverse;
    height: 104px;
    align-items: flex-end;
    padding: 8px;
  }

  .right_s .head .user {
    width: 100%;
    padding: 0;
    margin-top: 8px;
  }

  .right_s .head .user .avatar {
    width: 40px;
    height: 40px;
  }

  .open_sidebar {
    top: 130px;
    right: 23px;
    left: auto;
    padding-left: 0;
  }

  .bar_tool .chat_search {
    width: calc(100% - 80px);
    position: relative;
    top: 0;
  }

  .right_s .head .user .contact_info {
    width: calc(100% - 87px);
  }

  .right_s .head .bar_tool {
    justify-content: space-between;
    width: 100%;
    padding-right: 5px;
  }

  .right_s .alink:first-child {
    margin-left: 0;
  }

  .left_s {
    width: 300px;
  }
}

@media only screen and (max-width: 320px) {
  .right_s .body .Name-messenger {
    flex-direction: column;
    align-items: baseline;
  }

  .right_s .body .Name-messenger .time {
    margin-left: 0;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .left_s {
    width: 250px;
  }
}

@media only screen and (max-width: 280px) {
  .video-call-join-chat-thum {
    min-width: 150px;
  }

  .video-call-join-chat-thum img {
    display: none;
  }
}

@media only screen and (max-width: 1400px) {
  .toolbar__tag {
    width: 45px;
    height: 45px;
  }

  .icon-audio svg {
    width: 20px !important;
    height: 20px !important;
  }

  .icon-video svg {
    width: 21px !important;
    height: 21px !important;
  }

  .icon-edit svg {
    width: 17px !important;
    height: 17px !important;
  }

  .icon-record svg {
    width: 18px !important;
    height: 18px !important;
  }

  .icon-share svg {
    width: 22px !important;
    height: 22px !important;
  }

  .icon-share svg.mt-share {
    width: 9px !important;
    height: 9px !important;
  }

  .icon-end svg {
    width: 17px !important;
    height: 17px !important;
  }
}

@media only screen and (max-width: 767px) {
  .video__container .active-speaker-video__container__box {
    max-width: 100%;
  }
}

.kickout_position {
  left: 50px;
}

.callsidebar-presentation {
  position: absolute;
  top: 2px;
  right: 4px;
}

.head-online {
  bottom: -3px;
  left: 36px;
  border-width: 2px;
}

.highlight {
  background-color: var(--light-shade2-color) !important;
  transition: background-color 0.5s ease;
}

.pin-highlight {
  background-color: #968b5b !important;
  transition: background-color 0.5s ease;
}

.highlight.pin-highlight,
.pin-highlight.highlight {
  background-color: #968b5b !important;
}

.flip-icon {
  transform: scaleX(-1);
}

mark {
  background: yellow;
  padding: 0 2px;
  border-radius: 2px;
}

.search_highlight {
  background-color: #a073002e;
  color: #dea700;
}

.resize-handle {
  width: 3px; /* hover area */
  cursor: col-resize;
  position: relative;
  z-index: 10;
}

.resize-handle::before {
  content: "";
  position: absolute;
  right: -2px;
  top: 0;
  width: 3px;
  height: 100%;
  background-color: #1e90ff;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* show only on hover */
.resize-handle:hover::before {
  opacity: 1;
}

.emoji-portal {
  position: absolute;
  z-index: 99999;
}