.darkmode {
  --dm-bg: #0f1113;
  --dm-surface: #14191f;
  --dm-surface-2: #242f3d;
  --dm-border: rgb(60 62 72);
  --dm-border-soft: rgba(78, 80, 114, 0.3);
  --dm-text: #e6e6e6;
  --dm-text-muted: #c2c8cf;
  --dm-accent: #1b9ce9;
  --dm-accent-strong: #1c9dea;
  --dm-hover: rgba(78, 80, 114, 0.3);
  --dm-scroll-track: #0f1113;
  --dm-scroll-thumb: rgba(200, 208, 217, 0.28);
  --dm-scroll-thumb-hover: rgba(200, 208, 217, 0.58);

  color-scheme: dark;
  background: var(--dm-bg) !important;
  color: var(--dm-text);
}

.darkmode main .bg-body-tertiary,
.darkmode .chat-area,
.darkmode .rightbar .nav-pills .nav-link.active,
.darkmode .rightbar .nav-pills .show > .nav-link,
.darkmode .rightbar .nav-pills .nav-link:hover {
  background: var(--dm-bg) !important;
}
.chat-list {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.darkmode .chat-list h3 {
  color: #fff;
}

.searchMessage {
  background-color: #cdd2d6;
  border-left: 4px solid #42a5f5;
  color: #fffcfc;
  padding: 10px 14px;
  border-radius: 6px;
}
.darkmode .searchMessage {
  background-color: #1e2a38;
  border-left: 4px solid #42a5f5;
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
}

.darkmode .user-list li .users-list-body p,
.darkmode .user-list li .users-list-body .last-chat-time .text-muted,
.darkmode .chat-pin i {
  color: #9e9e9e !important;
}

.darkmode .onelinetext.text66 {
  color: #9e9e9e !important;
}

.darkmode .user-list li a,
.darkmode .user-list li .list-user-blk {
  border: 0.91px solid var(--dm-border-soft);
}

.darkmode .user-list li a {
  background: var(--dm-surface);
}

.darkmode .chat-list a.d-flex {
  border-bottom: 1px solid rgba(19, 19, 20, 0);
  padding: 7px 15px;
  /* margin: 5px;
  border-radius: 5px; */
}

.darkmode .chat-list a.d-flex:hover {
  background: transparent;
}

.darkmode .chat-area .nav-tabs .nav-link {
  width: 100%;
  color: #ffffff;
}
.darkmode .blurGroup {
  background: #0f1113;
}

.darkmode .userName {
  color: #fff;
}

.forwardmsg{
  height: 90%;
}

.darkmode #groupdeletemsg .modal-content,
.darkmode #ExitGroupmsg .modal-content {
  background: #1a1b1b;
}
.darkmode .settinghndl {
  border-top: 1px solid rgb(60 62 72);
}
.darkmode .chatlist .userName {
  max-width: 130px;
  margin: auto;
}

.darkmode .border-right {
  border-right: 1px solid var(--dm-border);
}

.darkmode .border {
  border: 0.91px solid var(--dm-border) !important;
}

.darkmode .border-left,
.darkmode .border-start {
  border-left: 1px solid var(--dm-border);
}

.darkmode .border-right,
.darkmode .border-end {
  border-right: 1px solid var(--dm-border);
}

.darkmode .chat-area .form-control {
  background: var(--dm-surface-2);
  box-shadow: none;
  color: var(--dm-text);
}

.darkmode .msg-search {
  background: var(--dm-surface-2);
  border: 0.91px solid var(--dm-border-soft);
  border-radius: 10px;
}

.darkmode input::-ms-input-placeholder,
.darkmode textarea::-ms-input-placeholder {
  /* Edge 12-18 */
  color: var(--dm-text-muted);
}

.darkmode input::placeholder,
.darkmode textarea::placeholder {
  color: var(--dm-text-muted);
}

.darkmode .msg-search button {
  color: var(--dm-text-muted);
}

.darkmode .msg-head {
  padding: 15px;
  border-bottom: 1px solid var(--dm-border);
  background: var(--dm-bg);
}

.darkmode .tiptap.ProseMirror.input-box-tip {
  background: var(--dm-surface);
}
.darkmode .tiptap.ProseMirror.input-box-tip:focus,
.darkmode .tiptap.ProseMirror.input-box-tip:focus-within,
.darkmode .tiptap.ProseMirror.input-box-tip:focus-visible,
.darkmode .custom-editor-content .ProseMirror:focus,
.darkmode .custom-editor-content .ProseMirror:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.darkmode .sendbtn--inline {
  background: #1c9dea;
}
.darkmode .sendbtn--inline:hover {
  background: #0e8fd8;
}

.darkmode .textb3 {
  color: #9e9e9e !important;
  font-size: 12px !important;
}
.darkmode #deletemsg h4 {
  color: #fff;
}

.darkmode .tiptap p,
.darkmode .tiptap a,
.darkmode .tiptap li,
.darkmode .tiptap ul li,
.darkmode .tiptap ul li a,
.darkmode .tiptap ol li,
.darkmode .tiptap ol li a,
.darkmode .tiptap h1,
.darkmode .tiptap h2,
.darkmode .tiptap h3,
.darkmode .tiptap h4,
.darkmode .tiptap h5,
.darkmode .tiptap h6 {
  color: #9e9e9e !important;
}
.tiptap li[data-empty="true"]::before {
  content: "​"; /* Zero-width space */
  display: inline-block;
  width: 0;
}

.darkmode .msg-head h3 {
  color: #e0e0e0;
}

.darkmode .refrshbtn button {
  color: #e0e0e0;
}

.darkmode .totalmember.font-14 {
  color: #9e9e9e;
}

.darkmode i.mdi-18px.mdi.mdi-volume-high.active {
  color: #9e9e9e;
}

.darkmode .send-btns .button-wrapper,
.darkmode .ql-formats button,
.darkmode .sendbtnright button,
.darkmode .moreoption li button {
  border: 0.91px solid #32333e;
  background: #14191f;
  color: #9e9e9e;
}
.darkmode .ql-formats button.is-active {
  background: #0056b3;
}
.darkmode .send-btns .button-wrapper span.label {
  color: #9e9e9e;
}

.darkmode .ql-formats .button-wrapper:hover i {
  color: #fff;
}

.darkmode .selectedChatBox {
  opacity: 1;
  background: #2b5278 !important;
}

.darkmode .selectedChatBox a {
  background: rgba(78, 80, 114, 0.3);
}

.darkmode .deletedMessageStyle {
  border: 0.91px solid var(--dm-border-soft);
  background: var(--dm-surface);
  color: var(--dm-text-muted);
}

.darkmode .activeusertop a {
  color: #9e9e9e;
}

.darkmode .leftbar .nav-pills .nav-link {
  border: 0.91px solid #32333e !important;
  background: #14191f;
  color: #9e9e9e;
}

.darkmode .leftbar .nav-pills .nav-link.active,
.darkmode .leftbar .nav-pills .show > .nav-link,
.darkmode .leftbar .nav-pills .nav-link:hover {
  color: #fff;
  background: var(--dm-accent);
}

.darkmode .chatbox {
  border-left: 1px solid var(--dm-border);
}

.darkmode .chat-area .chatlist.resizable {
  border-left: 0px solid var(--dm-border);
  background: var(--dm-bg);
  resize: horizontal; /* or vertical, or both */
  overflow: auto; /* required for resize handle to appear */
  overscroll-behavior: contain;
  min-width: 150px; /* optional */
  max-width: 600px; /* optional */
}
.darkmode .chatbox,
.darkmode .modal-dialog-scrollable {
  overscroll-behavior: contain;
}

.darkmode,
.darkmode .chat-area .chatlist.resizable,
.darkmode .chatbox,
.darkmode .modal-dialog-scrollable {
  scrollbar-width: thin;
  scrollbar-color: var(--dm-scroll-thumb) var(--dm-scroll-track);
}

.darkmode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.darkmode ::-webkit-scrollbar-track {
  background-color: var(--dm-scroll-track) !important;
}

.darkmode ::-webkit-scrollbar-thumb {
  background-color: var(--dm-scroll-thumb) !important;
  border-radius: 12px;
}

.darkmode :hover::-webkit-scrollbar-thumb {
  background-color: var(--dm-scroll-thumb-hover) !important;
}

.darkmode ::-webkit-scrollbar-thumb:active {
  background-color: var(--dm-scroll-thumb-hover) !important;
}
.darkmode .editor-wrapper div {
  color: #fff;
}
.darkmode #single-body {
  background-size: cover !important;
}
.darkmode .openew {
  color: #0d6efc;
}


.chat-user-status {
  display: flex;
  margin-top: 8px !important;
  margin-left: 15px !important;
  justify-content: center;
  padding: 8px 12px;
  background: #e6f4ea;
  width: 90% !important;
  color: #1b5e20;
  border-radius: 8px;
  font-weight: 500;
}

.darkmode div#msg-body p,
.darkmode div#msg-body h1,
.darkmode div#msg-body h2,
.darkmode div#msg-body h3,
.darkmode div#msg-body h4,
.darkmode div#msg-body h5,
.darkmode div#msg-body h6 {
  color: white;
}

.darkmode .send-box {
  border-top: 0.09px solid;
  
}

.darkmode .chat-area .nav-tabs {
  border-bottom: none;
  align-items: center;
  justify-content: space-around;
  padding: 0 7px;
}

.darkmode .chat-area .nav-tabs .nav-link,
.darkmode .nav-tabs .nav-item .nav-link,
.darkmode .nav-tabs .nav-link {
  border-radius: 50px;
  border: 0.91px solid #32333e !important;
  background: var(--dm-surface);
  color: var(--dm-text-muted) !important;
  position: relative;
}

.darkmode .nav-tabs {
  border-bottom: none !important;
}
.darkmode #forward-nav{
  padding-bottom: 10px;
  border-bottom: 0.91px solid var(--dm-border) !important;
}

button#users-tab, button#groups-tab {
    border: none !important;
}
.darkmode .chat-area .nav-tabs .nav-item.show .nav-link,
.darkmode .chat-area .nav-tabs .nav-link.active,
.darkmode .filetabs .nav-item.show .nav-link,
.darkmode .filetabs .nav-link.active {
  color: #ffffff !important;
  background-color: #1c9dea;
}

.darkmode .chat-header {
  padding: 15px 0 10px 0px;
}

.darkmode .slide-header {
  padding: 15px 15px 15px 15px;
}

.darkmode .chat-area .nav-tabs .nav-item.show .nav-link span,
.darkmode .chat-area .nav-tabs .nav-link.active span {
  background: #ed5353;
  color: #fff;
  position: absolute;
  top: -8px;
  right: -1px;
}

.darkmode .chat-area .nav-tabs .nav-link span {
  background: #ed5353;
  color: #fff;
  position: absolute;
  top: -8px;
  right: -1px;
}

.darkmode .msg-body li.divider h6 {
  border-radius: 50px;
  background: #1a222a;
  color: #e0e0e0;
  border: 0.91px solid #313536;
  padding: 3px 10px;
  width: 110px;
}

.darkmode .msg-body li.divider,
.darkmode .msg-body li.dividerNotification {
  position: sticky;
  top: 0;
  padding: 6px 0;
  z-index: 1;
}

.darkmode .msg-body li.divider::before,
.darkmode .msg-body li.divider::after,
.darkmode .msg-body li.dividerNotification::before,
.darkmode .msg-body li.dividerNotification::after {
  border-top-color: #313536;
}

.darkmode .msg-body ul li .bgretext {
  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.03);
  background: #14191f;
  color: #9e9e9e;
  border: none !important;
  min-width: 100px;
}

.darkmode .bgreplds {
  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.03);
  background: #14191f;
  color: #9e9e9e;
  border: none !important;
}

.darkmode .msg-body ul li.sender .bgretext {
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.darkmode .msg-body ul li.repaly .bgretext {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.darkmode .time {
  color: #9e9e9e;
}

.darkmode li.repaly .time {
  margin-right: 5px;
  color: #9e9e9e;
}

.darkmode .msg-body ul li .bgretext a,
.darkmode .mentionShow {
  color: white;
}

.darkmode .msg-body ul li .bgreplds .bgretext {
  background: #0f1113;
}

.darkmode .color1a {
  color: #e0e0e0 !important;
}

.darkmode .toggledots i {
  font-size: 24px !important;
  color: #9e9e9e;
}

.darkmode .filebgn1 {
  background: #14191f;
  border: none !important;
}

.darkmode .filebgntext .text,
.darkmode .btnsforwopennew button i {
  color: #9e9e9e;
}

.darkmode .filebgntext .format button {
  background: #14191f;
}

.darkmode .filebgn1 a img {
  object-fit: contain;
}

.darkmode .vippmsg .filebgn1 a {
  background: #14191f;
  border: 0.91px solid #14191f;
}

.darkmode .usserchbg,
.usserchbg {
  background: #242f3d;
  width: 85%;
  height: 75%;
}
.language-javascript {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}
.darkmode .usserchbg .magnify {
  color: #9e9e9e;
}

.darkmode .chat-sidebar {
  background-color: var(--dm-bg);
}

.darkmode .slist {
  border: 0.91px solid var(--dm-border-soft);
  padding: 7px 15px;
  margin: 5px;
  border-radius: 5px;
}

.darkmode .slist:hover {
  background: var(--dm-hover);
  border: 0.91px solid var(--dm-border-soft);
}

.darkmode .fixedtop,
.darkmode .accordion-item {
  background: #0f1113 !important;
}

.darkmode .Achpaswd .accordion-button:not(.collapsed) {
  background: #2b2c37;
  color: #fff;
}

.darkmode .settinghndl .p15 {
  padding: 0px !important;
}

.darkmode .Achpaswd,
.darkmode .createnotes {
  padding: 10px 7px;
}

.darkmode .accordion-button {
  background: #0f1113;
  border: 0.91px solid rgba(78, 80, 114, 0.3) !important;
  padding: 10px 10px !important;
  border-radius: 5px !important;
  margin: 5px 0;
  color: #e0e0e0;
}

.darkmode .Achpaswd .accordion-header .accordion-button:hover {
  color: #ffffff;
  background: #2b2c37;
}

.darkmode .Achpaswd .accordion-header {
  top: 49px;
}

.darkmode .Achpaswd .accordion-item {
  border-bottom: 0 !important;
}

.darkmode .HeadSlidName button {
  background: transparent;
  font-size: 30px;
  color: #e0e0e0;
  border: none;
}

.darkmode .usergrid .usrlist {
  border-radius: 7px;
  padding: 15px;
  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.03);
  background: #14191f;
  color: #9e9e9e;
  border: none !important;
}

.darkmode .usrlist .img {
  color: #e0e0e0;
}

.darkmode .list-group-item {
  background-color: transparent !important;
}

.darkmode .onofbtnwx .btn-toggle {
  background: #242f3d;
  border: 0.91px solid rgba(78, 80, 114, 0.3);
}

.darkmode .onofbtnwx .btn-toggle > .handle {
  background: #e0e0e0;
}

.darkmode .onofbtnwx .btn-toggle.active > .handle {
  background: #1b9ce9 !important;
}

.darkmode .allnumuser {
  font-size: 14px;
  font-weight: 600;
  color: #e6e6e6;
}

.darkmode .allSelectadd .cstCheck {
  color: #e6e6e6;
}

.darkmode .avatar-upload .avatar-preview {
  background: #242f3d;
}

.darkmode .bgFE {
  background: #242f3d;
}

.zipfile img {
  width: 17px !important;
}

.darkmode .msg-body ul li .dropdown-menu {
  background: #0f1113;
  border: 0.91px solid #4e50724d;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0px 4px 3px 0px #0000001a;
}

.darkmode .msg-body ul li .dropdown-menu li a {
  padding: 0px 14px;
  color: #e0e0e0;
}

.darkmode .msg-body ul li .dropdown-menu li a:hover {
  background: #242f3d !important;
}

.darkmode .useractive button {
  color: #e0e0e0;
}

.darkmode .toggleBtns .dropdown-menu,
.darkmode .useractive .dropdown-menu {
  background: #0f1113;
  border: 0.91px solid #4e50724d;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0px 4px 3px 0px #0000001a;
}

.darkmode .toggleBtns .dropdown-menu li a,
.darkmode .useractive .dropdown-menu li a {
  padding: 0px 14px;
  color: #e0e0e0;
}

.darkmode .toggleBtns .dropdown-menu li a:hover,
.darkmode .useractive .dropdown-menu li a:hover {
  background: #242f3d !important;
}

.darkmode .chat-sidebar .possktopnew {
  background: #0f1113;
}

.usertypetext .mdi-pin-outline {
  padding: 7px 5px;
}

.usertypetext ul li a .mdi-pin-outline {
  padding: 0;
}

.darkmode .usertypetext .mdi-pin-outline {
  color: #e0e0e0 !important;
}

.darkmode .HeadSlidName .slidName span {
  color: #e0e0e0 !important;
}

.darkmode main {
  background: #0f1113;
}

.darkmode #messageInfo p {
  max-width: 260px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #e6e6e6;
}

.darkmode #myMediaStorage .filetabstext .img.mw330 a .video-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.darkmode .activeusertop i {
  font-size: 18px;
  color: #9e9e9e;
}

.darkmode .logoHder {
  display: none;
}

.darkmode .logowHder {
  display: block !important;
}

.darkmode header {
  background: var(--dm-surface);
  border-bottom: 1px solid var(--dm-border);
}

.darkmode .slidName {
  color: #e0e0e0;
}

.darkmode .filetabstext .img.mw330 a .video-container {
  background: #14191f;
  color: #9e9e9e;
  border-radius: 5px;
  padding: 5px;
}

.darkmode .filevewmg button.toggledots {
  color: #9e9e9e !important;
  background: none !important;
  position: relative;
  top: -30px;
  transform: rotate(90deg);
}
.darkmode #scroll-container-file .filevewmg button.toggledots {
  color: #9e9e9e !important;
  position: relative;
  top: -10px;
  transform: rotate(90deg);
  background: #14191f !important;
}
.darkmode .css-1160xiw-MuiPaper-root-MuiDrawer-paper {
  background-color: #15161b !important;
}
.darkmode .PinMessages h4 {
  color: #e6e6e6;
}
.darkmode .PinMessages,.darkmode .PinMessagesItem {
  --pin-placeholder-text: #c9c9c9;
  --pin-placeholder-border-orange: #ff8a2a;
  --pin-placeholder-border-blue: #4cc0ff;
}
.darkmode .PinClosed {
  background: #2a2d36;
  color: #e6e6e6;
}
.darkmode .PinClosed:hover {
  background: #df4b4b;
  color: #fff;
}
.darkmode .textwing span {
  color: #e6e6e6;
}
.darkmode .textwing a {
  color: #e6e6e6;
}
.darkmode .textwdate span {
  color: #9e9e9e;
}

.darkmode button.toggledots.show,
.darkmode button.toggledots.show i {
  color: #1c9dea !important;
}

.darkmode .desdisbg .important h3,
.darkmode .desdis p {
  color: #ffffff;
}
.darkmode .notesTags {
  border: 0.91px solid #3b3e48;
}
.darkmode .dropNotes,
.darkmode .notesTags input {
  border-bottom: 1px solid #3b3e48;
}
.darkmode .selected-option {
  color: #e9e9e9;
}

.darkmode .chat-sidebar input,
.darkmode .chat-sidebar textarea,
.darkmode .chat-sidebar select {
  color: var(--dm-text) !important;
  background: var(--dm-surface-2);
  border: 0.91px solid var(--dm-border-soft);
  box-shadow: none;
}
.darkmode #myTodoCreate input.form-control,
.darkmode #myTodoCreate textarea.form-control {
  border: 0.91px solid rgb(60 62 72) !important;
}

.darkmode #myTodoCreate .form-control:focus {
  background: none !important;
}
.darkmode .tabslalsnmn ul {
  background: #0f1113;
  border: 0.91px solid #4e50724d;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0px 4px 3px 0px #0000001a;
}

.darkmode .tabslalsnmn ul li a,
.darkmode .tabslalsnmn ul li button {
  color: #e0e0e0;
}

.darkmode .tabslalsnmn ul li a:hover,
.darkmode .tabslalsnmn ul li button:hover {
  background: #242f3d !important;
}

.darkmode .desdis button {
  color: #e9e9e9;
}

.darkmode .form-control {
  background: #181f29;
  box-shadow: none;
  color: #9e9e9e !important;
  /* border: 0.91px solid rgb(60 62 72) !important; */
}
#myProfile textarea {
  padding: 10px;
  border-radius: 5px;
}
.darkmode #myProfile textarea {
  background: #242f3d;
  box-shadow: none;
  padding: 10px;
  color: #9e9e9e !important;
}

.darkmode .reportrange {
  border: 0.91px solid rgb(60 62 72) !important;
}

.usserchmnd {
  display: flex;
}
.darkmode .daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #313536;
  border-radius: 4px;
  border: 0.91px solid #3c3e48;
}

.darkmode .daterangepicker .calendar-table table {
  background: #313536;
  color: #fff;
}

.darkmode .daterangepicker td.off,
.darkmode .daterangepicker td.off.in-range,
.darkmode .daterangepicker td.off.start-date,
.darkmode .daterangepicker td.off.end-date {
  background-color: transparent;
}

.darkmode .daterangepicker td.in-range {
  background-color: #475358;
  border-color: transparent;
  color: #e6e6e6;
}

.darkmode .daterangepicker td.active,
.darkmode .daterangepicker td.active:hover {
  background-color: #1b9ce9;
}

.darkmode .daterangepicker td.available:hover,
.darkmode .daterangepicker th.available:hover {
  background-color: #3e4042;
}

.darkmode .daterangepicker .calendar-table .next span,
.darkmode .daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid white;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}

.darkmode .daterangepicker .calendar-table {
  border: none;
  border-radius: 4px;
  background-color: #313536;
}

.darkmode .daterangepicker .drp-selected {
  color: #e6e6e6;
}

.darkmode button.cancelBtn.btn.btn-sm.btn-default {
  background-color: #313536;
  border-radius: 4px;
  color: #e6e6e6;
  border: 0.91px solid #3c3e48;
}

.darkmode .daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid #3c3e48 !important;
}

.darkmode .desdis {
  box-shadow: 0 0 0 1px #3b3e48;
}

.darkmode .selecreplydv {
  background: #14191f;
}

.darkmode .selecreplydv button:nth-child(2) {
  background: #df4b4b;
}

.darkmode .selecreplydv button {
  border: none !important;
}

.darkmode .daterangepicker .ranges {
  background: #0f1113;
  border: 0.91px solid #4e50724d;
  overflow: hidden;
  box-shadow: 0px 4px 3px 0px #0000001a;
}

.darkmode .daterangepicker .ranges li {
  color: #e0e0e0 !important;
}

.darkmode .daterangepicker .ranges li:hover {
  background-color: #242f3d !important;
}

.darkmode #deletemsg .modal-content,
.darkmode .userSerchNct1 .modal-content {
  background: #14191f;
}

.darkmode .lbtk h5 {
  color: #e9e9e9;
}

.darkmode .forwordmsgs .bg-body {
  background: transparent !important;
}

.darkmode .list-group-item + .list-group-item,
.darkmode .list-group-item:first-child {
  border-top-width: 0;
  margin: 5px 0;
}

.darkmode .list-group-item + .list-group-item:hover,
.darkmode .list-group-item:first-child:hover {
  background-color: #242f3d !important;
}

.darkmode .list-group-item + .list-group-item .text-body-secondary,
.darkmode .list-group-item:first-child .text-body-secondary {
  --bs-text-opacity: 1;
  color: rgb(165 165 165) !important;
}
.darkmode .modal-header {
  border: none;
}
.darkmode .modal-footer {
  border-top: 1px solid #4e50724d !important;
}
.darkmode .modal-header .btn-close {
  position: absolute;
  right: 7px;
  top: 0;
  color: #fff;
}
.close-icon{
  color: #000;
}

.close-icon:hover {
  color: #1b9ce9;
}

.darkmode .close-icon:hover {
  color: #e93a1b;
}
.close-icon {
    display: flex;
    justify-content: end;
    background: #fff;
    font-size: 22px;
}
.darkmode .close-icon {
  background: #14191f;
}
.close-icon:before {
    color: #fff;
    background: red;
    border: 0.91px solid red;
    width: 32px;
}
.darkmode .close-icon:before {
    color: #fff;
    background: red;
    border: 0.91px solid red;
    width: 32px;
}


.darkmode .dividerNotification {
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.darkmode .dividerNotification p {
  margin: 0 auto;
  background: #242f3d !important;
  max-width: 100%;
  display: inline-block;
  border-radius: 50px;
  padding: 4px 15px;
}
.darkmode .dividerNotification p a {
  color: #1b9ce9;
}
.darkmode .ListBtnPin button {
  border: 0.91px solid #32333e;
  background: #14191f;
  color: #9e9e9e;
}
.darkmode .css-1nxmd3h-MuiListItem-root {
  border-bottom: 1px solid #1e1f24;
}
.darkmode .ListBtnPin button:hover {
  background: #0056b3;
  color: #fff;
}
.darkmode .editor-wrapper .css-1jzq0dw-MuiChip-label {
  color: #fff;
}
.darkmode
  .editor-wrapper
  .css-1hq9413-MuiButtonBase-root-MuiChip-root
  .MuiChip-deleteIcon {
  fill: #fff !important;
}

.darkmode .emoji-mart {
  background: #0f1113 !important;
}

.darkmode .emoji-mart-search input {
  background: #242f3d;
  box-shadow: none;
  color: #9e9e9e;
  border: 0.91px solid rgb(60 62 72) !important;
}
.darkmode .emoji-mart-category-label span {
  background-color: rgb(28 29 30);
  color: #fff;
}
.darkmode .emoji-mart-search-icon svg path {
  fill: #fff;
}
.darkmode .hoverable {
  background: none;
}
.darkmode .droplistNew h5 {
  color: #e9e9e9;
}
.darkmode .droplistNew li:first-child {
  background: #14191f;
  box-shadow: none;
  color: #9e9e9e;
}
.darkmode .droplistNew {
  background: #14191f;
}
.darkmode .droplistNew li label:hover {
  background: #242f3d !important;
}
.darkmode .bggradint {
  background: #242f3d;
}
.darkmode .loginQRcode .scaner {
  background: #242f3d;
}
.darkmode .loginForm .form-check.form-switch {
  color: #e6e6e6;
}
.darkmode .msg-body ul li .multipleFileWithMessage {
  color: #9e9e9e;
}
.msg-body ul li img {
  max-width: 100%;
  height: auto;
}
.darkmode #OrangeMember h5 {
  color: #9e9e9e;
}
.darkmode button.showPassword {
  color: #fff;
  background: #354046;
}

.darkmode .deletFilebtn svg path {
  fill: #9e9e9e;
}
.darkmode .deletFilebtn:hover svg path {
  fill: #e6e6e6;
}

.darkmode .editor-wrapper .clientDocShow .cleDocContent {
  display: inline-flex;
  width: auto;
  margin: 5px 5px;
  background: #14191f;
  border: 0.91px solid #32333e;
  height: fit-content;
  padding: 10px;
}
.darkmode .cleDocContent .FileName {
  font-size: 14px;
  font-weight: 600;
  color: #e9e9e9;
}
.darkmode span.bgFilesg svg {
  fill: #575d6a;
}
.darkmode .filefmttext {
  background: #fb8080;
  color: #fff;
  border: 0.91px solid #fb8080;
}
.darkmode .sendbtnright button.sendbtn {
  color: #fff;
  background: #1c9dea;
}
.darkmode .sendbtnright button.sendbtn:hover {
  background: #0883cd;
}
.darkmode .cleDocContent {
  border: none !important;
  border-radius: 15px;
}
/* *************************************** */
/* Default */
:root {
  --transDur: 0.25s;
  --bg: hsl(0, 0%, 95%);
  --primary: hsl(38, 100%, 45%);
  --primaryT: hsl(38, 100%, 45%);
}

/* Default */
.theme {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}

.theme__fill,
.theme__icon {
  transition: transform var(--transDur) ease-in-out;
}

.theme__fill {
  background-color: var(--bg);
  display: block;
  mix-blend-mode: difference;
  position: fixed;
  inset: 0;
  height: 100%;
  transform: translateX(-100%);
}

.theme__icon,
.theme__toggle {
  z-index: 1;
}
#chat-container {
  display: flex;
  flex-direction: column;
  min-height: 50vh;
  overflow-y: auto;
  
}

.topsearchIcon{
  margin-right: 10px ;
}
.darkmode .msg-body li.divider {
  position: sticky;
  top: 0;
  padding: 6px 0;
  z-index: 1;
}
.theme__icon,
.theme__icon-part {
  position: absolute;
}

.theme__icon {
  display: block;
  top: 9px;
  left: 8px;
  width: 1.5em;
  height: 1.5em;
}

.theme__icon-part {
  border-radius: 50%;
  box-shadow: 0.4em -0.4em 0 0.5em hsl(0, 0%, 100%) inset;
  top: calc(50% - 0.5em);
  left: calc(50% - 0.5em);
  width: 1em;
  height: 1em;
  transition: box-shadow var(--transDur) ease-in-out,
    opacity var(--transDur) ease-in-out, transform var(--transDur) ease-in-out;
  transform: scale(0.5);
}

.theme__icon-part ~ .theme__icon-part {
  background-color: hsl(0, 0%, 100%);
  border-radius: 0.05em;
  box-shadow: none;
  top: 50%;
  left: calc(50% - 0.05em);
  transform: rotate(0deg) translateY(0.5em);
  transform-origin: 50% 0;
  width: 0.1em;
  height: 0.2em;
}

.theme__icon-part:nth-child(3) {
  transform: rotate(45deg) translateY(0.5em);
}

.theme__icon-part:nth-child(4) {
  transform: rotate(90deg) translateY(0.5em);
}

.theme__icon-part:nth-child(5) {
  transform: rotate(135deg) translateY(0.5em);
}

.theme__icon-part:nth-child(6) {
  transform: rotate(180deg) translateY(0.5em);
}

.theme__icon-part:nth-child(7) {
  transform: rotate(225deg) translateY(0.5em);
}

.theme__icon-part:nth-child(8) {
  transform: rotate(270deg) translateY(0.5em);
}

.theme__icon-part:nth-child(9) {
  transform: rotate(315deg) translateY(0.5em);
}

.theme__label,
.theme__toggle,
.theme__toggle-wrap {
  position: relative;
}

.theme__toggle,
.theme__toggle:before {
  display: block;
}

.theme__toggle {
  background-color: hsl(48, 90%, 85%);
  border-radius: 50% / 50%;
  /*	box-shadow: 0 0 0 0.125em var(--primaryT);*/
  padding: 0em;
  width: 40px;
  height: 40px;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--transDur) ease-in-out,
    box-shadow 0.15s ease-in-out, transform var(--transDur) ease-in-out;
}

.theme__toggle:before {
  background-color: hsl(38, 100%, 45%);
  border-radius: 50%;
  content: "";
  width: 2.5em;
  height: 2.5em;
  transition: background-color var(--transDur) ease-in-out,
    transform var(--transDur) ease-in-out;
}

.theme__toggle:focus {
  box-shadow: 0 0 0 0.125em var(--primaryT);
  outline: none;
}

.theme__toggle:focus-visible {
  box-shadow: 0 0 0 0.125em var(--primary);
}

/* Checked */
.theme__toggle:checked {
  background-color: hsl(198, 90%, 15%);
}

.theme__toggle:checked:before,
.theme__toggle:checked ~ .theme__icon {
  transform: translateX(0em);
}

.theme__toggle:checked:before {
  background-color: hsl(198, 90%, 15%);
}

.theme__toggle:checked ~ .theme__fill {
  transform: translateX(0);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(1) {
  box-shadow: 0.2em -0.2em 0 0.2em hsl(0, 0%, 100%) inset;
  transform: scale(1);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part ~ .theme__icon-part {
  opacity: 0;
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(2) {
  transform: rotate(45deg) translateY(0.8em);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(3) {
  transform: rotate(90deg) translateY(0.8em);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(4) {
  transform: rotate(135deg) translateY(0.8em);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(5) {
  transform: rotate(180deg) translateY(0.8em);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(6) {
  transform: rotate(225deg) translateY(0.8em);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(7) {
  transform: rotate(270deg) translateY(0.8em);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(8) {
  transform: rotate(315deg) translateY(0.8em);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(9) {
  transform: rotate(360deg) translateY(0.8em);
}

.theme__toggle-wrap {
  margin: 0;
  cursor: pointer;
}

.theme__toggle-wrap:hover {
  opacity: 0.8;
}

@supports selector(:focus-visible) {
  .theme__toggle:focus {
    box-shadow: none;
  }

  .theme__toggle:focus-visible {
    box-shadow: 0 0 0 0.125em var(--primary);
  }
}

@media (max-width: 991px) {
  a.d-flex.link-body-emphasis.text-decoration-none {
    width: 30px;
    height: 30px;
  }
  .theme__toggle-wrap {
    margin: 0;
    cursor: pointer;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 50px;
  }
  .theme__icon {
    display: block;
    top: 3px;
    left: 4px;
  }
}
.edit-box {
  background-color: #00796b;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 6px 0;
  font-family: sans-serif;
}

.edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  margin-bottom: 4px;
}

.edit-icon {
  margin-right: 6px;
}

.edit-label {
  font-size: 0.9rem;
  flex: 1;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  margin-left: 8px;
}

.close-btn:hover {
  color: #ffcccc;
}

.edit-content {
  font-size: 0.85rem;
  color: #e0ffe0;
}
.call-box {
  background-color: #1a62ab;
  padding: 15px 20px;
  border-radius: 12px;
  border: 0.91px solid #d1d9e6;
  display: inline-block;
  font-family: Arial, sans-serif;
  color: #333;
  max-width: 300px;
}

.call-box p {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #fff4f4;
}

.join-btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.join-btn:hover {
  background-color: #0056b3;
}

/* Call Popup Container */
.call-popup {
  bottom: 20px;
  right: 20px;
  background: #fff;
  border: 0.91px solid #e5e7eb;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  animation: slideIn 0.3s ease-out;
  font-family: "Inter", sans-serif;
}

/* Slide-in Animation */
@keyframes slideIn {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Call Info Section */
.call-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.call-info i {
  font-size: 24px;
  color: #4b5563; /* Gray-600 */
}

.call-info .name {
  font-weight: 600;
  color: #111827; /* Gray-900 */
}

.call-info .status {
  font-size: 14px;
  color: #6b7280; /* Gray-500 */
}

/* Action Buttons */
.call-actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.call-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.call-btn i {
  font-size: 18px;
}

/* Accept Button */
.call-btn.accept {
  background: #22c55e; /* Green-500 */
  color: white;
}
.call-btn.accept:hover {
  background: #16a34a; /* Green-600 */
}

/* Reject Button */
.call-btn.reject {
  background: #ef4444; /* Red-500 */
  color: white;
}
.call-btn.reject:hover {
  background: #dc2626; /* Red-600 */
}

/* 🌙 Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .call-popup {
    background: #1f2937; /* Gray-800 */
    border: 0.91px solid #374151; /* Gray-700 */
    color: #f9fafb; /* Gray-50 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  }

  .call-info i {
    color: #d1d5db; /* Gray-300 */
  }

  .call-info .name {
    color: #f9fafb; /* White */
  }

  .call-info .status {
    color: #9ca3af; /* Gray-400 */
  }

  .call-btn.accept {
    background: #22c55e;
  }
  .call-btn.accept:hover {
    background: #16a34a;
  }

  .call-btn.reject {
    background: #ef4444;
  }
  .call-btn.reject:hover {
    background: #dc2626;
  }
}
/* 
.magic-btn.clicked {
  animation: subtlePulse 2.5s ease-in-out infinite;
}

@keyframes subtlePulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(99, 102, 241, 0);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(99, 102, 241, 0);
  }
} */
.magic-btn .spinner {
  border: 2px solid grey;
  border-top: 2px solid transparent;
  border-radius: 50%;
  width: 19px;
  height: 19px;
  animation: spin 0.6s linear infinite;
  margin-left: 6px; /* optional spacing */
}
.magic-btn.clicked {
  pointer-events: none; /* Disable further clicks */
  opacity: 0.3; /* Optional visual feedback */
}
.schedule-button.active {
  background:
    linear-gradient(90deg, #6365f191, #818cf8) !important;
  color: #fff;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.sidebar-hover {
  width: 0.1px !important;
  transition: width 0.3s ease;
  overflow: hidden; /* prevent content overflow when collapsed */
}

.sidebar-hover:hover {
  width: 110px !important;
}

.hide {
  display: none !important;
}

.mdi-phone.active {
  box-shadow: 0 0 8px 2px rgba(0, 255, 0, 0.7);
  border-radius: 50%;
}

.schedulerText {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scheduler {
  background-color: #e5edf5;
  color: white;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 10px;
  width: fit-content;
  min-width: 100px;
  align-self: flex-end; /* looks like incoming */
  position: relative;
  
}

.darkmode .scheduler {
  background: #14191f; /* light gray */
}

.savedmsg {
  display: flex;
  gap: 10px;
  background-color: #ffffff;
  color: #000000;
  padding: 10px 14px;
  border: 0.91px solid #e0e0e0;
  margin: 8px 0;
  font-size: 14px;
  cursor: pointer;
}
.savedmsg.active{
  background-color: #86b5d2 !important;
  color: #ffffff !important;
}

.darkmode .savedmsg.active{
  background-color: #2b5278 !important;
}

/* Dark mode version */
.darkmode .savedmsg {
  padding: 20px;
  padding-bottom: 10px;
  background-color: #071e2c;
  color: #f5f5f5;
  border: 0.91px solid #2a2f36;
}
.scheduler::after {
  position: absolute;
  bottom: -16px;
  right: 12px;
  font-size: 11px;
  color: #6b7280;
  font-style: italic;
}

.suggestionText {
  cursor: pointer;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 10px;
  padding: 8px 12px;
  background-color: grey;
  color: white;
  transition: background-color 0.2s ease, color 0.2s ease;
}

li.suggestionText:hover {
  background-color:#313348;
}

.darkmode li.suggestionText:hover {
  background-color: #1c1d29;
}

.darkmode .suggestionText {
  background-color: #212335;
}

.specialMessage {
  font-style: italic;
  display: initial;
  color: grey !important;
}

.darkmode .laptop-img{
  background-color: white;
}

/* ===== Dark Mode: Edit Message Box ===== */

.darkmode .edit-box {
  background: #020617;
  border: 0.91px solid #1e293b;
  border-radius: 12px;
  padding: 0;
  max-width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* Header */
.darkmode .edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 14px;
  border-bottom: 1px solid #1e293b;
  background: #020617;
  border-radius: 12px 12px 0 0;
}

.darkmode .edit-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 600;
}

.darkmode .edit-title i {
  font-size: 16px;
  color: #60a5fa;
}

/* Close Button */
.darkmode .close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
}

.darkmode .close-btn:hover {
  background: #1e293b;
  color: #e5e7eb;
}

/* Content */
.darkmode .edit-content {
  padding: 12px 14px;
  background: #020617;
}

/* Preview */
.darkmode .edit-preview {
  margin: 0 0 6px 0;
  padding: 10px 12px;

  background: #0f172a;
  border: 0.91px solid #1e293b;
  border-radius: 8px;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5;

  white-space: pre-wrap;
  word-break: break-word;
  max-height: 160px;
  overflow-y: auto;

  color: #e5e7eb;
}

/* Hint Text */
.darkmode .edit-hint {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
}

/* Scrollbar */
.darkmode .edit-preview::-webkit-scrollbar {
  width: 6px;
}

.darkmode .edit-preview::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

.darkmode .edit-preview::-webkit-scrollbar-track {
  background: transparent;
}

/* Focus / Active states */
.darkmode .edit-box:focus-within {
  border-color: #60a5fa;
}

.darkmode .bglonMan{
  color: #fff;
  background: rgba(255, 0, 0, 0.1);
  border: 0.91px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  text-align: center;
  font-size: 0.95rem;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 10px auto;
  width: fit-content;
  max-width: 80%;
  z-index: 2;
  position: relative;
  font-weight: 500;
}
/* ===== DEFAULT (LIGHT) ===== */
.head {
  width: 24px;
  height: 24px;
  background: #f1c27d; /* light skin */
  border-radius: 50%;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.eyes {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.eye {
  width: 4px;
  height: 4px;
  background: #222;
  border-radius: 50%;
  animation: lookAround 4s infinite;
}

.mouth {
  width: 7px;
  height: 2px;
  margin-top: 4px;
  background: #222;
  border-radius: 2px;
}

.watching-person::before {
  width: 40px;
  height: 40px;
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
}