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

.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: #0f1113 !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: 1px solid rgba(78, 80, 114, 0.3);
}

.darkmode .user-list li a {
  background: #14191f;
}

.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: #2b5278;
}

.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 rgb(60 62 72);
}

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

.darkmode .border-left,
.darkmode .border-start {
  border-left: 1px solid rgb(60 62 72);
}

.darkmode .border-right,
.darkmode .border-end {
  border-right: 1px solid rgb(60 62 72);
}

.darkmode .chat-area .form-control {
  background: #242f3d;
  box-shadow: none;
  color: #9e9e9e;
}

.darkmode .msg-search {
  background: #242f3d;
  border: 1px solid rgba(78, 80, 114, 0.3);
  border-radius: 10px;
}

.darkmode input::-ms-input-placeholder,
.darkmode textarea::-ms-input-placeholder {
  /* Edge 12-18 */
  color: #9e9e9e;
}

.darkmode input::placeholder,
.darkmode textarea::placeholder {
  color: #9e9e9e;
}

.darkmode .msg-search button {
  color: #9e9e9e;
}

.darkmode .msg-head {
  padding: 15px;
  border-bottom: 1px solid rgb(60 62 72);
  background: #0f1113;
}

.darkmode .tiptap.ProseMirror.input-box-tip {
  border: 1px solid #32333e;
  background: #14191f;
}

.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: 1px 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;
}

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

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

.darkmode .leftbar .nav-pills .nav-link {
  border: 1px 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: #1b9ce9;
}

.darkmode .chatbox {
  border-left: 1px solid rgb(60 62 72);
}

.darkmode .chat-area .chatlist.resizable {
  border-left: 0px solid rgb(60 62 72);
  background: #0f1113;
  resize: horizontal; /* or vertical, or both */
  overflow: auto; /* required for resize handle to appear */
  min-width: 150px; /* optional */
  max-width: 600px; /* optional */
}

.darkmode ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  transition: 0.6s;
}

.darkmode ::-webkit-scrollbar-track {
  background-color: #0f1113 !important;
  transition: 0.6s;
}

.darkmode ::-webkit-scrollbar-thumb {
  background-color: transparent !important;
  transition: 0.6s;
}

.darkmode ::-webkit-scrollbar-track,
.darkmode ::-webkit-scrollbar-thumb {
  border-radius: 12px;
}

.darkmode .chat-area .chatlist.resizable:hover ::-webkit-scrollbar-thumb,
.darkmode .chatbox:hover ::-webkit-scrollbar-thumb,
.darkmode .modal-dialog-scrollable:hover ::-webkit-scrollbar-thumb {
  .editor-wrapper div {
    color: #fff;
  }
  background-color: #c8d0d9 !important;
}
.darkmode .editor-wrapper div {
  color: #fff;
}
.darkmode #single-body {
  background-size: cover !important;
}
.darkmode .openew {
  color: #0d6efc;
}

.darkmode div#msg-body,
.darkmode #single-body {
  background: #0f1113 !important;
}

.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: 1px solid #3c3e48;
}

.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: 1px solid #32333e !important;
  background: #14191f;
  color: #9e9e9e !important;
  position: relative;
}

.darkmode .nav-tabs {
  border-bottom: none !important;
}
.darkmode #forward-nav{
  padding-bottom: 10px;
  border-bottom: 1px solid black !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: 1px solid #313536;
  padding: 3px 10px;
  width: 110px;
}

.divider:after {
  border-top: none
}

.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: 1px 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: #0f1113;
}

.darkmode .slist {
  border: 1px solid rgba(78, 80, 114, 0.3);
  padding: 7px 15px;
  margin: 5px;
  border-radius: 5px;
}

.darkmode .slist:hover {
  background: rgba(78, 80, 114, 0.3);
  border: 1px solid rgba(78, 80, 114, 0.3);
}

.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: 1px 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: 1px 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: 1px 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: 1px 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: #354046;
}

.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 .textwing span {
  color: #e6e6e6;
}
.darkmode .textwing a {
  color: #e6e6e6;
}

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

.darkmode .desdisbg .important h3,
.darkmode .desdis p {
  color: #ffffff;
}
.darkmode .notesTags {
  border: 1px 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: #fff !important;
  /* background: #242f3d; */
  box-shadow: none;
  color: #9e9e9e;
  /* border: 1px solid rgb(60 62 72) !important; */
}
.darkmode #myTodoCreate input.form-control,
.darkmode #myTodoCreate textarea.form-control {
  border: 1px solid rgb(60 62 72) !important;
}

.darkmode #myTodoCreate .form-control:focus {
  background: none !important;
}
.darkmode .tabslalsnmn ul {
  background: #0f1113;
  border: 1px 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: 1px 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: 1px solid rgb(60 62 72) !important;
}

.usserchmnd {
  display: flex;
}
.darkmode .daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #313536;
  border-radius: 4px;
  border: 1px 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: 1px 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: 1px 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: 1px solid red;
    width: 32px;
}
.darkmode .close-icon:before {
    color: #fff;
    background: red;
    border: 1px 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: 1px 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: 1px 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: 1px 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: 1px 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 ;
}
.divider {
  position: sticky;
  top: 0;
  text-align: center;
  padding: 4px 0;
  z-index: 10;
  border-radius: 0 0 6px 6px;
}
.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(--primary); */
  outline: transparent;
}

/* 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: 0 0 0 0.125em var(--primaryT); */
  }

  .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: 1px 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: 1px 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: 1px 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: 1px 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: 1px 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;
}