.darkmode,
.darkmode section#dashboard-template {
    background-color: var(--light-black-v2);
}
.darkmode .sideBarHeadrer{
    background-color: var(--popup);
    border-right: 0.1rem solid var(--light-brown);
    border-bottom: 0.1rem solid var(--light-brown);
}
.darkmode .navbarHeader{
    background-color: var(--popup);
}
.darkmode .navbarHeader,
.darkmode .globaListMsg li:before{
    border-bottom: 0.1rem solid var(--light-brown);
}
.darkmode .headerSearchBarMiddleInput,
.darkmode .fileMangerRight input[type=text]:active,
.darkmode input[type=text]:focus,
.darkmode .common-input-label-meeting,
.darkmode .common-bg-dropdown,
.darkmode .toggle-availbe-list,
.darkmode .meeting-popup-section #quillMeetingEditor,
.darkmode .meeting-popup-section #quillMeetingEditor.ql-container.ql-snow,
.darkmode .meeting-popup-section .ql-toolbar.ql-snow,
.darkmode .editor-main-section .ql-toolbar.ql-snow,
.darkmode .uplaodfileMonthView,
.darkmode #timeZoneInput,
.darkmode #timeZoneInputCreate,
.darkmode .calendar-in-meeting-schedule,
.darkmode .main-upload-body-section,
.darkmode .calenderMsgBar{
    background-color: var(--light-slate-brown-v2) !important;
    color: var(--white) !important;
}
.darkmode input.headerSearchBarMiddleInput::placeholder,
.darkmode .uploaded-label-name,
.darkmode .uploaded-label-size,
.darkmode .forwardedMessage,
.darkmode .workingHoursColumLeft h2,
.darkmode .workingHoursColumMiddleRow h3,
.darkmode .timeSlot1,
.darkmode .subCalenderTabs li span.active,
.darkmode .subCalenderTabs li span{
    color: var(--white);
}
.darkmode .navbar-title{
    color: var(--white);
}

.darkmode .editor-heading{
    color: var(--white);
}
.darkmode #sidebar-container{
    background-color: var(--popup);
}
.darkmode .list-group-item:hover,
.darkmode .panel-body,
.darkmode .divider,
.darkmode .common-dropdown-account-ul li:hover, .darkmode ul.userTopDropDown li:hover,
.darkmode .open .accordionItemContent{
    background-color: var(--light-slate-brown-v2);
}
.darkmode .list-group-item.active:hover{
    background-color: var(--red);
}
.darkmode .list-group-item ul{
    background-color: var(--light-slate-brown-v2);
}
.darkmode .list-group-item ul li,
.darkmode .collapse-team-title,
.darkmode .team-message-name,
.darkmode .team-message-body,
.darkmode .selected-member-title,
.darkmode .common-modal-header,
.darkmode .all-contact-title,
.darkmode .trancate-text-pinned,
.darkmode .cloudTest{
    color: var(--white);
}

.darkmode .middle-section,
.darkmode .common-acc-ul-section,
.darkmode .selected-member-list,
.darkmode .selectedMemberCommonBg,
.darkmode .meetingpopup-attending,
.darkmode .availble-inner-part,
.darkmode .addtoCallBody,
.darkmode .columCallScreen.inviteCallBtn{
    background-color: var(--light-black-v2);
}
.darkmode .common-list-header,
.darkmode .common-postion,
.darkmode .chat-header-bg,
.darkmode .common-acc-ul-section li,
.darkmode .team-innerscroll ul li,
.darkmode .accountSettingDropDownNew ul li,
.darkmode .darkmode .countryInput,
.darkmode .ChatFormHeader.msgChatHeader{
    border-bottom: 0.1rem solid var(--light-brown) !important;
    background-color: var(--popup);
}
.darkmode .middle-section{
    border-right: 0.1rem solid var(--light-brown);
}
.darkmode .common-contact-section,
.darkmode .btn-outline-danger:hover{
    background-color: unset;
}
.darkmode .date-common,
.darkmode .countdown-timer,
.darkmode .voiceRecorderTest{
    color: var(--white);
}
.darkmode .right-search-sidebar,
.darkmode .chat-inner-section,
.darkmode #chatDiv .right-sidebar,
.darkmode .chat-header-bg,
.darkmode .ChatFormHeader.msgChatHeader{
    background-color: var(--light-slate-black-v2);
}
.darkmode .emojionearea, .emojionearea.form-control,
.darkmode #chatPanel .input-chat-border{
    background-color: var(--light-slate-brown-v2);
}

.darkmode .grey-border,
.darkmode .countryNumber,
.darkmode .countryDropdownList,
.darkmode .countryInput,
.darkmode .accountSettingDropDownNew ul,
.darkmode .common-dropdown-account-ul,
.darkmode .otp-inputs,
.darkmode ul.userTopDropDown,
.darkmode .group-input,
.darkmode .group-area,
.darkmode .upload-name,
.darkmode .teamEditDropDown,
.darkmode .temaSearchOption,
.darkmode .msg-read-show-data ul li,
.darkmode .qucik-main-section,
.darkmode .fleMediaPreviewContainer .tabbable-line>.nav-tabs,
.darkmode .fleMediaPreviewContainer #chatfwdbox:focus,
.darkmode .deleteRecurrenceBody,
.darkmode .notifyInput,
.darkmode .commonNotifyDropdown,
.darkmode .notify-rsvp-dropdown-btn,
.darkmode .common-input-label-meeting,
.darkmode .common-bg-dropdown,
.darkmode .toggle-availbe-list,
.darkmode #quillMeetingEditor,
.darkmode .invitees-main-section,
.darkmode .availble-inner-part,
.darkmode .uplaodfileMonthView,
.darkmode .note-editor,
.darkmode #timeZoneInput,
.darkmode #timeZoneInputCreate,
.darkmode .dropdown-content,
.darkmode .calendar-in-meeting-schedule,
.darkmode .main-upload-body-section,
.darkmode .invitePopupbody,
.darkmode #multipleEmailInvite,
.darkmode .fileSec,
.darkmode #searchUserInvieId .search-class,
.darkmode .add-invite-main .invite-short-name,
.darkmode .emailChatBody .form-control,
.darkmode .email-description,
.darkmode .notificationPanel .common-postion{
    border: unset !important;
}
.darkmode .emojionearea .emojionearea-editor{
    color: var(--white);
}
.darkmode .emojionearea .emojionearea-editor::placeholder{
    color: var(--dropdown);
}
.darkmode .reciever-user-details, .darkmode .sender-user-details{
    background-color: var(--popup);
}
.darkmode .sender-name, .darkmode .sender-chat-time,
.darkmode .reciever-chat-time{
    color: var(--white);
}
.darkmode .sender-chat-msg, .darkmode .msgText,.darkmode .transText{
    color: var(--dark-white);
}
.darkmode .unreadbold,
.darkmode .table-condensed thead th.dow,
.darkmode .emailChatHeader h2,
.darkmode .user-designation,
.darkmode .notificationPanel span.user-team{
    color: var(--white) !important;
}
.darkmode #quillMeetingEditor .ql-editor {
    color: var(--white);
    background-color: transparent;
}
.darkmode .meeting-popup-section #calendarToolbar.custom-quill-toolbar {
    border-color: rgb(from var(--white) r g b / 15%);
    background-color: var(--light-slate-brown-v2);
}
.darkmode .meeting-popup-section #calendarToolbar .toolbar-group {
    border-right-color: rgb(from var(--white) r g b / 10%);
}
.darkmode .meeting-popup-section #calendarToolbar .toolbar-btn,
.darkmode .meeting-popup-section #calendarToolbar .style-dropdown-btn,
.darkmode .meeting-popup-section #calendarToolbar .font-size-dropdown-btn {
    border-color: rgb(from var(--white) r g b / 20%);
    background-color: transparent;
    color: var(--white);
}
.darkmode .meeting-popup-section #calendarToolbar .calendar-toolbar-dropdown {
    background-color: var(--light-slate-brown-v2);
    border-color: rgb(from var(--white) r g b / 20%);
}
.darkmode .meeting-popup-section #calendarToolbar .style-option,
.darkmode .meeting-popup-section #calendarToolbar .font-size-option,
.darkmode .meeting-popup-section #calendarToolbar .alignment-option {
    color: var(--white);
}
.darkmode .meeting-popup-section #calendarToolbar .style-option:hover,
.darkmode .meeting-popup-section #calendarToolbar .font-size-option:hover,
.darkmode .meeting-popup-section #calendarToolbar .alignment-option:hover {
    background-color: rgb(from var(--color-surface) r g b / 8%);
}
.darkmode .meeting-popup-section #calendarToolbar .color-option {
    border-color: rgb(from var(--white) r g b / 25%);
}
.darkmode .meeting-popup-section #calendarToolbar .color-bar {
    border-color: rgb(from var(--white) r g b / 40%);
}
.darkmode #quillMeetingEditor .ql-editor::placeholder {
    color: var(--dropdown);
}
.darkmode .ql-snow .ql-stroke {
    stroke: var(--white);
}
.darkmode .ql-snow .ql-fill,
.darkmode .ql-snow .ql-stroke.ql-fill {
    fill: var(--white);
}
.darkmode .ql-snow .ql-picker {
    color: var(--white);
}
.darkmode .ql-toolbar.ql-snow button:hover .ql-stroke,
.darkmode .ql-toolbar.ql-snow button.ql-active .ql-stroke,
.darkmode .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,
.darkmode .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke {
    stroke: var(--red);
}
.darkmode .ql-toolbar.ql-snow button:hover .ql-fill,
.darkmode .ql-toolbar.ql-snow button.ql-active .ql-fill,
.darkmode .ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill,
.darkmode .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-fill {
    fill: var(--red);
}
.darkmode .msg-chat-divider{
    background-color: var(--light-slate-black-v2);
}
/* `--popup` (#2c2c2c) sits a hair off the dark chat background, so the hover
   action bar vanished into the transcript. The base rule in chat.css now paints it
   with the theme-aware `--color-surface` + hairline, which is correct in both
   themes, so only the emoji-picker panel needs a dark surface here. (The old
   selector also left `.showEmojiPicker` unprefixed, applying it in light mode too.) */
.darkmode .commonHover:hover .li-hover-sender,
.darkmode .showEmojiPicker {
    background-color: var(--color-surface);
}
.darkmode .chatTime{
    background: var(--dropdown);
    color: var(--white);
}
.darkmode .msg-chat-divider:before{
    border-top: 0.1rem solid var(--dropdown);
}
.darkmode .melp-list-empty-text,
.darkmode .textempty-p, .darkmode .textempty-h,
.darkmode .gifPopup h2,
.darkmode .chatSettingPopup h2,
.darkmode .chatSettingPopup p,
.darkmode .chatSettingPopup ul li,
.darkmode .translators-subtitle,
.darkmode .translation-title,
.darkmode .language-title .common-color-black,
.darkmode .language-title .subtitle-label,
.darkmode .common-dropdown-ul li .dropdown-list-items,
.darkmode .language-ul li .list-items,
.darkmode .meetingPanelTitle p,
.darkmode .bottom-section-chat p,
.darkmode .bottom-section-chat p span,
.darkmode .descrip h2,
.darkmode .descrip p,
.darkmode .attendingColum .attending-title,
.darkmode .meetingListEmpty .first,
.darkmode .protfolioIntro h2,
.darkmode .protfolioIntro p{
    color: var(--white);
}
.darkmode .chatSettingPopup,
.darkmode .tooltip-language .tooltipInnertext,
.darkmode .chatSort ul.filter-list-item li,
.darkmode .changeMyViewMain li,
.darkmode .notify-rsvp-dropdown-btn .dropdown,
.darkmode .notify-rsvp-dropdown-btn .dropdown li,
.darkmode .common-dropdown-ul,
.darkmode .language-ul{
    background: var(--light-slate-brown-v2);
    color: var(--white);
}
.darkmode #loadGifArea,
.darkmode #loadGifArea input, .darkmode #loadGifArea input::placeholder,
.darkmode .emojionearea .emojionearea-picker, .darkmode .emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-title,
.darkmode .emojionearea .emojionearea-picker .emojionearea-search>input::placeholder,
.darkmode .common-sort-dropdown .filter-list-item li:hover,
.darkmode .changeMyViewMain li:hover,
.darkmode .search-invite-section,
.darkmode .search-invite-section::placeholder,
.darkmode .input-search-invite input,
.darkmode .input-search-invite input::placeholder,
.darkmode .otp-inputs,
.darkmode .group-input,
.darkmode .add-newteam-input,
.darkmode .upload-name,
.darkmode .group-icons-show,
.darkmode .quick-msg,
.darkmode .fleMediaPreviewContainer #chatfwdbox,
.darkmode .team-edit-label-name,
.darkmode .team-edit-label-dscription,
.darkmode .headersearchbar,
.darkmode .notifyInput,
.darkmode .commonNotifyDropdown,
.darkmode .notify-rsvp-dropdown-btn,
.darkmode .notify-rsvp-dropdown-btn .dropdown li,
.darkmode .common-dropdown-ul li,
.darkmode .language-ul li,
.darkmode #multipleEmailInvite,
.darkmode #searchUserInvieId .search-class,
.darkmode .note-editor .note-editable,
.darkmode .note-editor .note-toolbar,
.darkmode .emailChatBody .form-control,
.darkmode textarea::placeholder,
.darkmode .resportMsgBoxMsg,
.darkmode .resportMsgBox .accountDescCount,
.darkmode #uploadOption ul li{
    background: var(--light-slate-brown-v2);
    color: var(--white);
}
.darkmode .fileSearchIcon.navActive,
.darkmode .fileSearchIcon.navActive:hover{
    background: url(../../images/closeIcon.svg) no-repeat center center var(--light-slate-brown-v2) !important;
}
.darkmode .otpContainer input[type="text"].otp-phone {
    border-color: var(--color-text-inverse) !important;
    color: var(--color-text-inverse) !important;
}
.darkmode .fileSearchIcon:hover {
    background: url(../../images/icons/searchicons-active.svg) no-repeat center center var(--light-slate-brown-v2) !important;
    background-size: 30% !important;
}
.darkmode .fileForward:hover {
    background: url(../../images/icon_forwords-hover.svg) no-repeat center center var(--light-slate-brown-v2) !important;
    background-size: 37% 100% !important;
}
.darkmode .group-area,
.darkmode .email-description,
.darkmode .note-editor .btn{
    background-color: var(--light-slate-brown-v2) !important;
    color: var(--white) !important;
    border-color :var(--light-slate-gray-secondary) !important;
}
.darkmode :is([data-testid="create-team"], #createTeam) :is(
    #teamName.group-input,
    #teamDesc.group-area,
    .team-member-picker #searchUser.add-newteam-input
) {
    border: 0.1rem solid var(--color-border) !important;
}
.darkmode :is([data-testid="create-team"], #createTeam) :is(
    #teamName.group-input,
    #teamDesc.group-area,
    .team-member-picker #searchUser.add-newteam-input
):focus {
    border-color: var(--color-focus-ring) !important;
}
.darkmode .note-editor .btn{
    background-image: unset !important;
}
.darkmode .emoji-picker-list{
    background-color: var(--light-slate-black-v2);
    border: 0.66px solid var(--light-brown);
}
.darkmode .msgReactionPopup{
    background-color: var(--light-slate-black-v2);
    border: 0.66px solid var(--light-brown);
}
.darkmode .emoji-box{
    background-color: var(--popup);
    border: 0.66px solid var(--light-brown);
}
.darkmode .reactionTitel{
    color: var(--white) !important;
}
.darkmode .reactionCell{
    color: var(--white) !important;
}
.darkmode .msgProfileTitle{
    color: var(--white) !important;
}
.darkmode .msgSubTitle{
    color: var(--white) !important;
}
.darkmode .emoji-box:hover{
    background-color: var(--light-slate-black-v2);
}
.darkmode .search-invite-section,
.darkmode #recentMeetingDetails .meetingpopup-accept,
.darkmode #recentMeetingDetails .acceptMeeting,
.darkmode #recentMeetingDetails .declineMmeeting,
.darkmode #recentMeetingDetails .tentativeMeeting,
.darkmode #recentMeetingDetails .meetingpopup-decline,
.darkmode #recentMeetingDetails .meetingpopup-tentative,
.darkmode #recentMeetingDetails .cancelButtonGlobal{
    border:  0.1rem solid var(--light-brown) !important;
}
.darkmode .btn-search-invite{
    border-left:  0.1rem solid var(--light-brown);
}
.darkmode .selectedCommonIcons{
    border-right:  0.1rem solid var(--light-brown);
}
.darkmode .selectedCalls{
    border-top:  0.1rem solid var(--light-brown);
    border-bottom:  0.1rem solid var(--light-brown);
}
.darkmode #loadGifArea, .darkmode .chatSettingPopup,
.darkmode .accountSettingInfo input.accountSettingInformInput,
.darkmode .accountSettitMsg,
.darkmode .acc-common-bg-dropdown,
.darkmode .selecItems,
.darkmode .uploadfile-main-area,
.darkmode #timezone-toogleacc,
.darkmode .passwordInput,
.darkmode .verifyModal-panel,
.darkmode .quick-msg-section,
.darkmode .fleMediaPreviewContainer #chatfwdbox,
.darkmode .team-edit-label-name,
.darkmode .team-edit-label-dscription,
.darkmode .common-dropdown-ul,
.darkmode .language-ul,
.darkmode #chatPanel .input-chat-border,
.darkmode .profile:hover .uploadProfile,
.darkmode .videoSec,
.darkmode .search-listing-invite{
    border: unset;
}

.darkmode .emojionearea .emojionearea-picker .emojionearea-filters {
    background: var(--light-black-v2);
}
.darkmode .emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active,
.darkmode .languageTranslator,
.darkmode .userGroupList ul li:hover{
    background: var(--light-slate-brown-v2);
}
.darkmode .InSearchBarInput{
    background-color: var(--light-slate-brown-v2) !important;
    color: var(--white) !important;
}
.darkmode .navbar-nav li:hover,
.darkmode .navbar-nav li.navActive,
.darkmode .notify-rsvp-dropdown-btn .dropdown li:hover,
.darkmode .common-dropdown-ul li:hover,
.darkmode .language-ul li:hover,
.darkmode .currentOpenRecentMeeting,
.darkmode .meetingPanelright .meetingSearch:hover,
.darkmode .meetingPanelright .recentMeetingDetailsOption:hover,
.darkmode .meetingPanelRightSide ul li:hover{
    background-color: var(--popup) !important;
}
.darkmode .tanslator-on-of{
    background-color: var(--light-slate-brown-v2);
    border: unset;
}
.darkmode .language-main-section ul li,
.darkmode .language-title,
.darkmode .notification-label-icon,
.darkmode .notificationPanel .common-sidebar-padd,
.darkmode .activities li,
.darkmode .inner-file-main-section ul li,
.darkmode .file-main-header-fixed,
.darkmode .teamDropDown ul li:nth-child(2){
    border-bottom: 0.1rem solid var(--light-brown) !important;
}

.darkmode .selected-member-list,
.darkmode .msg-notification-cell,
.darkmode .tagTopicPepole{
    box-shadow: unset;
    border: unset;

}
.darkmode .chatSort ul.filter-list-item li,
.darkmode .common-sort-dropdown .filter-list-item li,
.darkmode .upload-options-cont li{
    border-top: 0.1rem solid var(--border-v2) !important;
    border-right: 0.1rem solid var(--border-v2) !important;
    border-left: 0.1rem solid var(--border-v2) !important;
    border-bottom: 0.1rem solid var(--border-v2) !important;
}
.darkmode .right-search-sidebar,
.darkmode .right-sidebar,
.darkmode .meetingPanelBody,
.darkmode .messageNotification{
    background-color: var(--light-black-v2);
    border-left: 0.1rem solid var(--light-brown);
    box-shadow: -0.3rem 0 0.4rem 0 var(--color-text-primary);


}
.darkmode .notifications-chat-label,
.darkmode .notificationTime,
.darkmode .common-label-emptystate,
.darkmode .fullPageloader span,
.darkmode .activities .active-teamName,
.darkmode .activeConferencepopupBody .common-active-style,
.darkmode .activeConferencepopupBody,
.darkmode .activeConferencepopupBody *:not(button):not(.ps-scrollbar-y):not(.cr-overlay):not(.cr-image):not(cr-boundary):not(.cr-viewport):not(.switch):not(.slider):not(.tabprofsel):not(i),
.darkmode .addcolor-message,
.darkmode .file-commmon-font,
.darkmode .file-common-style,
.darkmode .start-msg,
.darkmode .teamDropDown ul li,
.darkmode .exitBtn,
.darkmode .newevent-calendar-popup-date,
.darkmode .newevent-calendar-popup-days,
.darkmode input::placeholder,
.darkmode .headertitle,
.darkmode .notify-meeting-name,
.darkmode .notify-meeting-date,
.darkmode .notify-meeting-time,
.darkmode .notify-organizer,
.darkmode .notify-organizer-name,
.darkmode .trancate-text-pinned,
.darkmode .limitcharacter,
.darkmode .blockUserLabel,
.darkmode .reportPerson label,
.darkmode .empty-tab h1,
.darkmode .empty-tab p,
.darkmode .common-username-team,
.darkmode .translator-title,
.darkmode .common-color-black{
    color: var(--white) !important;
}
.darkmode .activities li:hover,
.darkmode .common-search-box{
    background: var(--light-slate-brown-v2);
}
.darkmode .filter-active,
.darkmode .filter-section:hover,
.darkmode .search-section:hover,
.darkmode .fr:hover,
.darkmode .search-input,
.darkmode .sort-section:hover,
.darkmode .sortActive,
.darkmode .search-connection,
.darkmode #connectionSearchRight.navActive,
.darkmode #connectionSearchRight:hover,
.darkmode .accountSettingInfo input.accountSettingInformInput,
.darkmode .accountSettitMsg,
.darkmode span.countryNumerFlag,
.darkmode .countryDropdownList,
.darkmode .countryInput,
.darkmode .accountSettingDropDownNew ul,
.darkmode .acc-common-bg-dropdown,
.darkmode .selecItems,
.darkmode .uploadfile-main-area,
.darkmode .uloadedFilesView,
.darkmode .uloadedFilesViewIneer,
.darkmode #timezone-toogleacc,
.darkmode .common-dropdown-account-ul li,
.darkmode .newEyeIcon,
.darkmode ul.userTopDropDown,
.darkmode .add-invitees-popup-main,
.darkmode .teamEditDropDown,
.darkmode .temaSearchOption,
.darkmode .temaSearchOption:focus,
.darkmode .notifyInput,
.darkmode .meetingEmtyNotification,
.darkmode .countryNumber{
    background-color: var(--light-slate-brown-v2) !important;
    color:  var(--white);
}
.darkmode .file-tab-start,
.darkmode ul.eventMoreOptionDropDown{
    background-color: var(--light-slate-black-v2);
    border: 0.1rem solid var(--light-brown);
}
.darkmode .dropdown-menu,
.darkmode .common-sort-dropdown .filter-list-item li,
.darkmode #passwordHint,
.darkmode .infoDropDown,
.darkmode ul.eventMoreOptionDropDown{
    background-color: var(--light-slate-brown-v2);
    color: var(--white);
}
.darkmode .coworker-label,
.darkmode .network-label{
    background-color: unset !important;
    color: var(--white) !important;
}
.darkmode .bot-label{
    background-color: unset !important;
    color: var(--white) !important;
}
.darkmode .group-category-section {
    background-color: var(--light-black-v2) !important;
    border-color: var(--light-slate-brown-v2) !important;
}
.darkmode .group-category-toggle {
    background: var(--light-black-v2) !important;
    border-color: var(--light-slate-brown-v2) !important;
}
.darkmode .group-category-toggle-title {
    color: var(--dark-gray) !important;
}
.darkmode .group-category-toggle-value,
.darkmode .group-category-toggle-icon {
    color: var(--white) !important;
}
.darkmode .group-category-list-wrap {
    background: var(--light-black-v2) !important;
    border-color: var(--light-slate-brown-v2) !important;
}
.darkmode .group-category-search-wrap {
    background: var(--light-black-v2) !important;
    border-color: var(--light-slate-brown-v2) !important;
}
.darkmode .group-category-search-icon,
.darkmode .group-category-search-input,
.darkmode input[type=text].group-category-search-input,
.darkmode input[type=text].group-category-search-input:focus,
.darkmode .group-category-search-input::placeholder,
.darkmode .group-category-empty {
    color: var(--white) !important;
    background: var(--light-black-v2) !important;
    background-color: var(--light-black-v2) !important;
}
.darkmode .group-category-option {
    background: transparent !important;
    color: var(--white) !important;
}
.darkmode .group-category-option:hover {
    background: var(--light-slate-brown-v2) !important;
}
.darkmode .group-category-option.active {
    background: var(--light-slate-brown-v2) !important;
    color: var(--white) !important;
}
.darkmode .group-chips-section {
    background-color: var(--light-black-v2) !important;
    border-color: var(--light-slate-brown-v2) !important;
}
.darkmode .group-chip {
    background: var(--dark-gray) !important;
    color: var(--white) !important;
}
.darkmode .group-chip.active {
    background: var(--white, var(--color-surface)) !important;
    color: var(--black) !important;
}
.darkmode .group-chips-arrow {
    background: var(--light-black-v2) !important;
    color: var(--white) !important;
    box-shadow: 0 0 0.4rem rgb(from var(--color-text-primary) r g b / 40%) !important;
}
.darkmode .meeting-popup-section{
    background-color: var(--light-black-v2) !important;
}
.darkmode .color-black,
.darkmode .meetingPanelTitle h1,
.darkmode .meetingPanelHeading h1,
.darkmode .accountDescIncCount,
.darkmode .account-time-zone-text,
.darkmode .common-dropdown-account-ul li .dropdown-list-items,
.darkmode .infoDropDown h2,
.darkmode .infoDropDown p{
    color: var(--white) !important;
}
.darkmode .color-grey{
    color:  var(--dark-white);
}

/* calendar */
.darkmode .calendarTopStrip,
.darkmode .meetingPanelLeftheader{
    background-color: var(--light-black-v2);
    border: 0.1rem solid var(--light-brown);
}
.darkmode .calenderMidBar .leftViewDate,
.darkmode .monthLeft .leftViewDate,
.darkmode #dateContainer,
.darkmode .monthLeft span.popup-days-span,
.darkmode .myMeetingLinkInside span,
.darkmode .myMeetingContent h2,
.darkmode .myMeetingContent span,
.darkmode .meetingListStatus,
.darkmode #monthviewAllMeetings .days-bg .days,
.darkmode #monthviewAllMeetings .bg .days,
.darkmode .popup-months .popup-days-span-months,
.darkmode #yearviewAllMeetings .tp .base .week-row .week-day,
.darkmode #yearviewAllMeetings .tp .base2 .week-row .week-day,
.darkmode #yearviewAllMeetings .tp .base .week-row .week-date,
.darkmode #yearviewAllMeetings .tp .base2 .week-row .week-date,
.darkmode .filemangerTab li span,
.darkmode .accountSettingNewTabs ul li,
.darkmode .logOutBtn span,
.darkmode .accountSettingNewPass span,
.darkmode .succesfullyHeading,
.darkmode .deleteConfirm p,
.darkmode .deleteConfirm b,
.darkmode .create-team-title,
.darkmode .topic-title,
.darkmode .common-username-admin-team,
.darkmode .common-color.newteam-padding-none,
.darkmode .createnew-team-padding, .common-color,
.darkmode .teamEditDropDownItem li,
.darkmode .accountSettingTittle h2,
.darkmode .popover-title,
.darkmode .popover-content,
.darkmode .create-quick-title,
.darkmode .protfolioPopHeaderDetail h1,
.darkmode .protfolioPopHeaderTop ul li,
.darkmode .protfolioPopTabsInner ul li,
.darkmode .emailStrip span,
.darkmode .protfolioPopWorkContent,
.darkmode .resumeContent .resumeIcons,
.darkmode .tabcontentInfo h2,
.darkmode .tabcontentInfo p,
.darkmode .resume-title,
.darkmode span.protfolioPopWorkIcon,
.darkmode .team-member,
.darkmode .team-sub-name,
.darkmode .team-sub-title,
.darkmode .seeAllPepoleBtn,
.darkmode .search-text-here,
.darkmode ul.globalHeaderSearcTabbing li,
.darkmode .meeting-common-label,
.darkmode .time-section,
.darkmode .dropdown-inner-label,
.darkmode .meeting-header-label,
.darkmode .inviteTitleLeft,
.darkmode .inviteTitleLeftSubTitle,
.darkmode .enterEmailInvitations,
.darkmode #yearviewAllMeetings .month-name,
.darkmode .eventTypeHeading h2{
    color: var(--white);
}
.darkmode .teamEditDropDownItem li .text {
    color: var(--color-text-inverse);
}
.darkmode span.meetingLeftCopyLinkOuterclipboard{
    color: var(--button);
}
.darkmode .todayBtn,
.darkmode .Check-Availability-Class,
.darkmode .viewDropdown,
.darkmode .monthLeft{
    background-color: var(--light-black-v2);
    color: var(--white);
    border: 0.1rem solid var(--light-brown);
}
.darkmode .monthLeft .monthView-leftContainer,
.darkmode span.meetingLeftCopyLinkOuter,
.darkmode .monthLeft .newevent-calendar-popup-days,
.darkmode #yearviewAllMeetings .tp,
.darkmode #dayviewAllMeetings .tp .row-body,
.darkmode #dayviewAllMeetings .tp .row-body .day-time-main,
.darkmode #weekviewAllMeetings .body-bg,
.darkmode #scheduleviewAllMeetings .body-bg,
.darkmode .globalMessageHeader,
.darkmode .notificationReadMsg,
.darkmode .notificationUnreadMsg{
    background-color: var(--light-black-v2);
}
.darkmode span.meetingLeftCopyLinkOuter,
.darkmode .weekviewAllMeetings .bg,
.darkmode .calenderMsgBar,
.darkmode .eventTypeColum,
.darkmode .infoDropDown,
.darkmode ul.eventMoreOptionDropDown{
    border: 0.1rem solid var(--light-brown);
}
.darkmode .myMeetingsLink,
.darkmode #scheduleviewAllMeetings .schedule-day-body{
    border-top: 0.1rem solid var(--light-brown);
}
.darkmode .upArrow:hover,
.darkmode .downArrow:hover,
.darkmode .popup-date:hover,
.darkmode .teamEditDropDownItem li:hover, .darkmode .attendingColum{
    background-color: var(--popup);
}
.darkmode .day-list.prevbase{
    background-color: var(--light-black-v2);
}
.darkmode .day-list,
.darkmode #uploadOption ul li:hover,
.darkmode .chatSort ul.filter-list-item li:hover,
.darkmode .evebtBg{
    background-color: var(--light-slate-black-v2);
}
.darkmode #uploadOption ul li{
    border-top: 0.1rem solid var(--light-brown);
    border-right: 0.1rem solid var(--light-brown);
    border-left: 0.1rem solid var(--light-brown);
}
.darkmode #uploadOption ul li:nth-child(3){
    border-bottom: 0.1rem solid var(--light-brown);
}
/* Cloud Drive Picker — dark mode */
.darkmode #uploadPreview.cloud-drive-picker {
    --chat-cloud-border: var(--light-brown);
    --chat-cloud-text: var(--white);
    --chat-cloud-muted: rgb(from var(--white) r g b / 65%);
    --chat-cloud-surface: var(--popup);
    --chat-cloud-surface-muted: var(--light-slate-black-v2);
    --chat-cloud-surface-hover: var(--light-slate-brown-v2);
    --chat-cloud-accent: var(--white);
    --chat-cloud-accent-bg: rgb(from var(--color-surface) r g b / 6%);
}
.darkmode #uploadPreview.cloud-drive-picker .commoneSec.videoSec {
    background: var(--chat-cloud-surface);
    border-color: var(--chat-cloud-border);
    box-shadow: 0 2rem 4.8rem rgb(from var(--color-text-primary) r g b / 45%);
}
.darkmode #uploadPreview.cloud-drive-picker .upload-chat-title,
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-crumbbar {
    background: var(--chat-cloud-surface);
    border-bottom-color: var(--chat-cloud-border);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-titleheading {
    color: var(--white);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-titlecopy,
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-meta {
    color: var(--chat-cloud-muted);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-provider-mark {
    background: var(--chat-cloud-surface-muted);
    border-color: var(--chat-cloud-border);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-search,
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-sort,
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-up-btn {
    background: var(--chat-cloud-surface-muted);
    border-color: var(--chat-cloud-border);
    color: var(--white);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-search-input,
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-sort-trigger {
    color: var(--white);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-search-input::placeholder {
    color: var(--chat-cloud-muted);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-search > img,
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-up-btn img,
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-open-folder img {
    filter: brightness(0) saturate(100%) invert(100%);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-view img,
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-download img {
    filter: none;
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-sort-arrow {
    color: rgb(from var(--color-text-inverse) r g b / 65%);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-sort-dropdown.is-open .chat-cloud-sort-arrow {
    color: var(--white);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-sort-menu {
    background: var(--popup);
    border-color: var(--chat-cloud-border);
    box-shadow: 0 0.8rem 2.4rem rgb(from var(--color-text-primary) r g b / 40%), 0 0.2rem 0.6rem rgb(from var(--color-text-primary) r g b / 25%);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-sort-option {
    color: var(--white);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-sort-option:hover {
    background: var(--chat-cloud-surface-hover);
    color: var(--white);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-sort-option.is-active {
    color: var(--chat-cloud-accent);
    background: var(--chat-cloud-accent-bg);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-sort-option.is-active:hover {
    background: var(--chat-cloud-surface-hover);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-search-clear {
    background: var(--chat-cloud-surface-hover);
    color: var(--white);
    border: 0.1rem solid rgb(from var(--white) r g b / 12%);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-search-clear:hover,
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-header-close:hover,
.darkmode .chat-cloud-chip-remove:hover,
.darkmode .chat-cloud-tray-overlay-close:hover {
    background: rgb(from var(--color-surface) r g b / 12%);
    color: var(--white);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-sort-label {
    color: var(--chat-cloud-muted);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-search:focus-within {
    border-color: var(--white);
    box-shadow: 0 0 0 0.2rem rgb(from var(--white) r g b / 10%);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-up-btn:hover:not(.is-disabled):not(:disabled) {
    background: var(--chat-cloud-surface-hover);
}
.darkmode #uploadPreview.cloud-drive-picker .upload-chat-section ul {
    background: var(--chat-cloud-surface);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-row,
.darkmode #uploadPreview.cloud-drive-picker .googleDriveWrap {
    background: var(--chat-cloud-surface) !important;
    border-bottom-color: var(--chat-cloud-border) !important;
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-item:hover .chat-cloud-row,
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-item:hover .googleDriveWrap {
    background: var(--chat-cloud-surface-hover) !important;
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-item.is-selected .chat-cloud-row,
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-item.is-selected .googleDriveWrap {
    background: var(--chat-cloud-accent-bg) !important;
    box-shadow: inset 0.3rem 0 0 var(--chat-cloud-accent) !important;
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-name {
    color: var(--white) !important;
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-fileicon .uploaded-icons-area {
    border-color: rgb(from var(--white) r g b / 12%);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-size {
    color: var(--chat-cloud-muted);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-view:hover,
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-download:hover,
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-open-folder:hover {
    background: rgb(from var(--color-surface) r g b / 8%);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-select.contact-check-default {
    background-image: url(../../images/filemanger/uncheckdark.svg);
    filter: none;
    opacity: 1;
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-select.contact-check-active {
    background-image: url(../../images/check-box-active.svg);
    filter: none;
    opacity: 1;
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-breadcrumb {
    color: var(--chat-cloud-muted);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-breadcrumb:hover:not(.is-active) {
    background: var(--chat-cloud-surface-hover);
    color: var(--white);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-breadcrumb.is-active {
    color: var(--white);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-breadcrumb-sep {
    color: rgb(from var(--color-text-inverse) r g b / 40%);
}

/* Empty state */
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-empty-card {
    background: var(--chat-cloud-surface-muted);
    border-color: var(--chat-cloud-border);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-empty-illu {
    background: var(--chat-cloud-surface);
    border-color: var(--chat-cloud-border);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-empty-illu img {
    filter: brightness(0) saturate(100%) invert(100%);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-empty-title {
    color: var(--white);
}
.darkmode #uploadPreview.cloud-drive-picker .chat-cloud-empty-copy {
    color: var(--chat-cloud-muted);
}

/* Footer */
.darkmode #uploadPreview.cloud-drive-picker .fileSecBtn {
    background: var(--chat-cloud-surface);
    border-top-color: var(--chat-cloud-border);
    box-shadow: none;

}
.darkmode #uploadPreview.cloud-drive-picker .cancelButtonGlobal {
    background: transparent !important;
    border-color: var(--chat-cloud-border);
    color: var(--white) !important;
}
.darkmode #uploadPreview.cloud-drive-picker .cancelButtonGlobal:hover {
    background: var(--chat-cloud-surface-muted) !important;
}

/* Selection tray (dark) */
.darkmode .chat-cloud-tray {
    background: var(--chat-cloud-surface-muted);
    border-top-color: var(--chat-cloud-border);
}
.darkmode .chat-cloud-tray-count {
    background: var(--popup);
    border-color: var(--chat-cloud-border);
    color: var(--white);
}
.darkmode .chat-cloud-chip {
    background: var(--popup);
    border-color: var(--chat-cloud-border);
    color: var(--white);
}
.darkmode .chat-cloud-chip-remove {
    color: var(--chat-cloud-muted);
}
.darkmode .chat-cloud-chip-remove:hover {
    background: rgb(from var(--color-surface) r g b / 12%);
    color: var(--white);
}
.darkmode .chat-cloud-tray-toggle,
.darkmode .chat-cloud-tray-clear,
.darkmode .self-profile-field > span{
    color: var(--white);
}
.darkmode .chat-cloud-tray-toggle:hover,
.darkmode .chat-cloud-tray-clear:hover {
    background: rgb(from var(--color-surface) r g b / 6%);
}
.darkmode .chat-cloud-tray-clear {
    color: var(--chat-cloud-muted);
}
.darkmode .chat-cloud-tray-overlay {
    background: var(--popup);
    border-color: var(--chat-cloud-border);

}
.darkmode .chat-cloud-tray-overlay-head {
    background: var(--chat-cloud-surface-muted);
    border-bottom-color: var(--chat-cloud-border);
    color: var(--white);
}
.darkmode .chat-cloud-tray-overlay-close {
    color: var(--chat-cloud-muted);
}
.darkmode .chat-cloud-tray-overlay-close:hover {
    background: rgb(from var(--color-surface) r g b / 12%);
    color: var(--white);
}
.darkmode .chat-cloud-tray-row.is-empty .chat-cloud-tray-hint {
    color: var(--chat-cloud-muted);
}

/* Skeletons (dark) */
.darkmode .chat-cloud-skeleton-row {
    border-bottom-color: var(--chat-cloud-border);
}
.darkmode .chat-cloud-skeleton {
    background: rgb(from var(--color-surface) r g b / 8%);
}
.darkmode .chat-cloud-skeleton::after {
    background: linear-gradient(90deg, rgb(from var(--color-surface) r g b / 0%) 0%, rgb(from var(--color-surface) r g b / 12%) 50%, rgb(from var(--color-surface) r g b / 0%) 100%);
}
.darkmode #monthviewAllMeetings .bg .base,
.darkmode #monthviewAllMeetings .bg .base2{
    border-bottom: 0.1rem solid var(--light-brown);
    border-right: 0.1rem solid var(--light-brown);
}
.darkmode #monthviewAllMeetings .bg,
.darkmode .weekviewAllMeetings .bg,
.darkmode #scheduleviewAllMeetings .bg{
    background-color: var(--popup);
    border-top: 0.1rem solid var(--light-brown);
    border-right: 0.1rem solid var(--light-brown);
}
.darkmode .darkmode .month-header,
.darkmode .weekviewAllMeetings .bg .base,
.darkmode #scheduleviewAllMeetings .body-bg .left{
    border-right: 0.1rem solid var(--light-brown);
}
.darkmode #monthviewAllMeetings .bg .base:nth-child(7n+1),
.darkmode .week-day-slot-bottom,
.darkmode .week-day-slot-top,
.darkmode #select-member-list{
    border-left: 0.1rem solid var(--light-brown);
}
.darkmode .event-listing-span{
    background-color: var(--light-slate-brown-v2);
    color: var(--white);
    border: 0.1rem solid var(--light-brown);
}
.darkmode #dayviewAllMeetings .tp .row-body .day-time-main .meeting-day-box-main-red{
    background-color: var(--light-slate-brown-v2);
    border: 0.1rem solid var(--light-brown);
}
.darkmode #monthviewAllMeetings .days-bg .base .days.oval,
.darkmode #monthviewAllMeetings .days-bg .base2 .days.oval,
.darkmode #leftMonthView .oval{
    background-color: var(--white);
}
.darkmode .changeMyViewMain li,
.darkmode .dont-touch{
    border-bottom: 0.1rem solid var(--light-brown);
}
.darkmode .calenderLeftDropDown{
    background-color: var(--popup);
    border: 0.1rem solid var(--light-slate-brown-v2);
}
.darkmode .headerYearView:hover,
.darkmode .popup-days-span-months:hover,
.darkmode .weekView .leftViewDate:hover,
.darkmode .invitePopupIneerSec{
    background-color: var(--light-slate-brown-v2);
}
.darkmode .popup-months .popup-days-span-months{
    border: 0.1rem solid var(--light-slate-brown-v2);
}
.darkmode span.popup-days-span-months.active{
    background: var(--red);
    border: 0.1rem solid var(--red);
}
.darkmode #yearviewAllMeetings .base,
.darkmode #yearviewAllMeetings .base2{
    background-color: var(--light-black-v2);
    border-right: 0.1rem solid var(--light-brown);
    border-top: 0.1rem solid var(--light-brown);
}
.darkmode #yearviewAllMeetings .tp,
.darkmode #dayviewAllMeetings .tp .row-body .day-time-main,
.darkmode #weekviewAllMeetings .body-bg,
.darkmode #dayviewAllMeetings .tp .row-header{
    border: 0.1rem solid var(--light-slate-brown-v2);
}
.darkmode #dayviewAllMeetings .tp .row-header{
    background-color: var(--popup);
}
.darkmode .MymeetingBg{
    background: var(--red);
}
.darkmode #dayviewAllMeetings .tp .row-header .header-date .header-date-span,
.darkmode .day-time-text,
.darkmode #dayviewAllMeetings .meeting-time,
.darkmode #dayviewAllMeetings .meeting-time,
.darkmode #dayviewAllMeetings .meeting-time,
.darkmode #dayviewAllMeetings .meeting-time,
.darkmode #dayviewAllMeetings .meeting-name,
.darkmode #dayviewAllMeetings .meeting-name,
.darkmode #dayviewAllMeetings .meeting-name,
.darkmode #dayviewAllMeetings .meeting-name,
.darkmode .week-time-text,
.darkmode .weekviewAllMeetings .bg .days,
.darkmode #scheduleviewAllMeetings .sc-day,
.darkmode #scheduleviewAllMeetings .left-time,
.darkmode #scheduleviewAllMeetings .left-duration,
.darkmode #scheduleviewAllMeetings .meeting-name,
.darkmode #scheduleviewAllMeetings .schedule-date,
.darkmode #scheduleviewAllMeetings .schedule-duration,
.darkmode .meeeting-organiser-name,
.darkmode .are-organiser,
.darkmode #scheduleviewAllMeetings .schedule-attending,
.darkmode .heading-calendar,
.darkmode .cloudEmail,
.darkmode #invite-contact .tabbable-line>.nav-tabs>li span.active,
.darkmode .tabbable-line>.nav-tabs>li>span,
.darkmode .myImortColumHeading,
.darkmode .google-invite-texts,
.darkmode .invite-social,
.darkmode #uploadTextData,
.darkmode .fullname-contact-suggestion,
.darkmode .email-contact-suggestion,
.darkmode .phone-contact-suggestion,
.darkmode .profession-heading-text,
.darkmode .single-skills-span,
.darkmode .single-service-span,
.darkmode .connection-right-header,
.darkmode .hoveremail,
.darkmode .hoverdate,
.darkmode .hoversize,
.darkmode .welcome-name,
.darkmode .connect-calendar-section h1,
.darkmode .connect-calendar-section h2,
.darkmode .calendar-link,
.darkmode .header-content,
.darkmode .accountSettingNewRight ul li,
.darkmode .accountSettingInfo span,
.darkmode .accountSettingInfo input.accountSettingInformInput,
.darkmode .accountSettitMsg,
.darkmode .accountsettingslabels,
.darkmode .accountSettingTopTittle h2,
.darkmode .accountSettingTopTittle p,
.darkmode #deleteVerifyPopup .headings,
.darkmode #verificationCodePopup .headings,
.darkmode #deleteVerifyPopup .verif-label,
.darkmode #verificationCodePopup .verif-label,
.darkmode #deleteVerifyPopup .verif-sublabel,
.darkmode #verificationCodePopup .verif-sublabel,
.darkmode .logOut,
.darkmode .cityname,
.darkmode .statename,
.darkmode .csortname,
.darkmode .filePreviewTittle h2,
.darkmode .meetingpopup-modal-content .meetingpopup-heading .meetingpopup-title,
.darkmode .meetingpopup-modal-content .meetingpopup-day .meetingpopup-date,
.darkmode .meetingpopup-user-name,
.darkmode .meetingpopup-organiser .meetingpopup-invited,
.darkmode .countAttending,
.darkmode .total-participants-style,
.darkmode .meetingpopup-user .meetingpopup-single-user .meetingpopup-user-detail .meetingpopup-user-position,
.darkmode .meetingpopup-description .meetingpopup-description-heading .meetingpopup-desc,
.darkmode .meetingpopup-description-details,
.darkmode .meetingpopup-description-heading,
.darkmode .meetingpopup-notification-content,
.darkmode .meetingpopup-attending-title,
.darkmode .deleteRecurrenceTitle,
.darkmode .instance,
.darkmode .notifyTitle,
.darkmode .notify-rsvp-dropdown-btn .dropdown li:first-child,
.darkmode .notify-rsvp-dropdown-btn .dropdown li:last-child,
.darkmode .upoladFileLabel,
.darkmode .priview-title,
.darkmode .note-subtitle,
.darkmode .belnotification-title,
.darkmode .belnotification-subtitle,
.darkmode .postChatHeader h2,
.darkmode .tagpeople-name,
.darkmode .tagpeople-designation,
.darkmode .meetingAlertsHeader h2,
.darkmode .meetingEmtyNotification h2,
.darkmode .meetingEmtyNotification p,
.darkmode .globalResultNoFound h3,
.darkmode .globalResultNoFound p,
.darkmode .documentHeader div,
.darkmode .document-name span,
.darkmode .calendar-name,
.darkmode .calendar-size,
.darkmode .calendar-date,
.darkmode .linkName,
.darkmode .inviteSelectAllTxt,
.darkmode .teamprofilepopupheading{
    color: var(--white) !important;
}
.darkmode .dot-line{
    border-bottom: 1px dashed var(--light-slate-brown-v2);
}
.darkmode .minuteslsotfirstbottom{
    border-bottom: 0.1rem solid var(--light-slate-brown-v2);
}
.darkmode #scheduleviewAllMeetings .shedule-day-main,
.darkmode #scheduleviewAllMeetings .common-acc-ul-section li{
    border-top: 0.1rem solid var(--light-slate-brown-v2);
    background-color: var(--popup);
}
.darkmode .monthRightIcon,
.darkmode .monthLeftIcon{
    border: 0.1rem solid var(--light-brown);
}
.darkmode .addevent .dvconnected .calendar-box{
    background-color: var(--popup);
    border: 0.1rem solid var(--light-brown);
}
.darkmode .addevent .calendar-box-parent .calendar-box-cont .img-icon,
.darkmode .addevent .dvconnected .calendar-box .own-acc{
    border-right: 0.1rem solid var(--light-brown);
}
.darkmode .myNetworkFullColum,
.darkmode .right-header,
.darkmode .fileManagerTopStrip{
    background-color: var(--light-black-v2);
    border-bottom: 0.1rem solid var(--light-brown);
}
.darkmode .myImportTopStrip,
.darkmode .invite-social,
.darkmode .upload-div,
.darkmode .suggestionDirectoryDiv ul .suggestion,
.darkmode .profession-heading.skill-class{
    background-color: var(--light-black-v2);
    border: 0.1rem solid var(--light-brown);
}

/* Let native controls follow the active theme; component colors use semantic tokens. */
.darkmode .network-v3-scope,
.darkmode .invitePopupV2,
.darkmode .self-profile-editor-modal {
    color-scheme: dark;
}

.darkmode .self-profile-editor-modal .mui-modal__title {
    color: var(--color-text-primary);
}

.darkmode .self-profile-editor-modal :is(
    .self-profile-field > input,
    .self-profile-field textarea,
    .self-profile-select-trigger,
    .self-profile-tags,
    #userPhoneNumber,
    .self-profile-country-trigger,
    .account_upload-wrapper
) {
    /* Override the legacy global dark-mode input rule below this section. */
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

.darkmode .self-profile-editor-modal :is(
    .self-profile-field > input,
    .self-profile-field textarea,
    #userPhoneNumber
)::placeholder {
    color: var(--color-text-muted);
}

.darkmode .self-profile-editor-modal :is(
    .self-profile-field > input,
    .self-profile-field textarea,
    .self-profile-select-trigger,
    .self-profile-tags,
    #userPhoneNumber
):focus,
.darkmode .self-profile-editor-modal .self-profile-tags:focus-within {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 0.2rem var(--color-brand-light);
}

.darkmode .self-profile-editor-modal :is(
    .self-profile-select-menu,
    .self-profile-location-results ul,
    #profileCountryList
) {
    background: var(--color-surface);
    border: 0.1rem solid var(--color-border);
    color: var(--color-text-primary);
}

.darkmode .self-profile-editor-modal .self-profile-field .account_country-search {
    background: var(--color-background) !important;
    border: 0 !important;
    border-bottom: 0.1rem solid var(--color-border-light) !important;
    color: var(--color-text-primary) !important;
}

.darkmode .self-profile-editor-modal :is(
    .self-profile-select-option,
    .self-profile-location-results li,
    .account_country-option,
    .account_option-code,
    .account_option-name
) {
    color: var(--color-text-primary);
}

.darkmode .self-profile-editor-modal .account_country-option {
    background: var(--color-surface);
    border: 0 !important;
    border-bottom: 0.1rem solid var(--color-border-light) !important;
}

.darkmode .self-profile-editor-modal .account_country-option:last-child {
    border-bottom: 0 !important;
}

.darkmode .self-profile-editor-modal :is(
    .self-profile-select-option,
    .self-profile-location-results li,
    .account_country-option
):hover,
.darkmode .self-profile-editor-modal :is(
    .self-profile-select-option,
    .self-profile-location-results li,
    .account_country-option
):focus-visible {
    background: var(--color-surface-alt);
}

.darkmode .self-profile-editor-modal .self-profile-phone-verify,
.darkmode .self-profile-editor-modal .btn-primary[data-mui-btn] {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
    color: var(--color-text-inverse);
}

.darkmode .self-profile-editor-modal .btn-secondary[data-mui-btn] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.darkmode .self-profile-editor-modal :is(
    .self-profile-country-trigger,
    .mui-modal__footer .btn[data-mui-btn]
):focus-visible {
    outline: 0.2rem solid var(--color-text-primary);
    outline-offset: 0.2rem;
}

/* .darkmode .network-v3-scope {
    background-color: var(--color-background);
} */

.darkmode .network-v3-scope #inviteFilterToggleBtn {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope .network-filter-panel__header,
.darkmode .network-v3-scope .network-filter-actions {
    background: var(--color-surface);
    border-color: var(--color-border-light);
}

.darkmode .network-v3-scope .network-filter-section {
    border-color: var(--color-border-light);
}

.darkmode .network-v3-scope :is(
    .network-filter-section__header,
    .network-filter-option,
    .inviteServiceItem,
    .network-filter-dropdown li
) {
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope :is(
    .network-filter-panel__close,
    .network-filter-section__chevron,
    .inviteServiceGroupLabel,
    .inviteServiceEmpty
) {
    color: var(--color-text-secondary);
}

.darkmode .network-v3-scope :is(
    .inviteServicesListWrap,
    .inviteFilterOptionList
) {
    background: var(--color-surface-alt);
}

.darkmode .network-v3-scope .inviteServicesList {
    scrollbar-color: var(--color-text-muted) var(--color-surface-alt);
}

.darkmode .network-v3-scope :is(
    .network-filter-option,
    .inviteServiceItem
):hover {
    background: var(--color-surface);
}

.darkmode .network-v3-scope :is(
    .network-filter-panel__close,
    .network-filter-dropdown li,
    .network-filter-button--secondary
):hover {
    background: var(--color-background);
}

.darkmode .network-v3-scope :is(
    .network-filter-input,
    .network-filter-dropdown,
    .network-filter-button--secondary
) {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope .network-filter-input::placeholder {
    color: var(--color-text-muted);
}

.darkmode .network-v3-scope .network-filter-input:focus {
    border-color: var(--color-focus-ring);
}

.darkmode .network-v3-scope .network-toolbar,
.darkmode .network-v3-scope .inviteSectionHeader {
    border-color: var(--color-border-light);
}

.darkmode .network-v3-scope .network-tab {
    color: var(--color-text-secondary);
}

.darkmode .network-v3-scope .network-tab:hover,
.darkmode .network-v3-scope .network-tab.active,
.darkmode .network-v3-scope :is(
    .inviteSectionTitle,
    .inviteSearchResultsHeader h3,
    .inviteCardName
) {
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope .network-action-button:not(.network-action-button--primary) {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope .network-action-button:not(.network-action-button--primary):hover {
    background: var(--color-background);
}

.darkmode .network-v3-scope :is(li.suggestion, .inviteCard) {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.darkmode .network-v3-scope :is(li.suggestion, .inviteCard):hover {
    border-color: var(--color-text-secondary);
}

.darkmode .network-v3-scope .inviteCardCover:not(:has(.inviteCardCoverImg)) {
    background: var(--color-surface-alt) !important;
}

.darkmode .network-v3-scope .inviteAvatar {
    background: var(--color-surface);
    border-color: var(--color-surface);
}

.darkmode .network-v3-scope :is(
    .inviteCardRole,
    .inviteCardLocation,
    .nwx-mutual__txt
) {
    color: var(--color-text-secondary);
}

.darkmode .network-v3-scope .invitePrimaryCta {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope .invitePrimaryCta:hover {
    background: var(--color-background);
    border-color: var(--color-text-secondary);
}

.darkmode .network-v3-scope .invitePrimaryCta:is(.invited, :disabled) {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-secondary) !important;
}

.darkmode .network-v3-scope .inviteCardDismiss {
    background: var(--color-surface);
    color: var(--color-text-secondary);
}

.darkmode .network-v3-scope .inviteCardDismiss:hover {
    background: var(--color-surface-alt);
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope .network-source-tabs {
    background: var(--color-surface-alt);
}

.darkmode .network-v3-scope .nwx-subtab {
    color: var(--color-text-secondary);
}

.darkmode .network-v3-scope .nwx-subtab:hover {
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope .nwx-subtab.is-active {
    background: var(--color-surface);
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope :is(
    .network-contacts-empty__title,
    .network-contacts-selection-bar__summary
) {
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope :is(
    .network-inline-empty,
    .network-contacts-empty__description,
    .network-contacts-empty__note
) {
    color: var(--color-text-secondary);
}

.darkmode .network-v3-scope .network-contacts-empty__icon {
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
}

.darkmode .network-v3-scope .network-contacts-empty__button {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope .network-contacts-empty__button:hover {
    background: var(--color-surface);
    border-color: var(--color-text-secondary);
}

.darkmode .network-v3-scope .network-contacts-selection-bar {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}

.darkmode .network-v3-scope .nwx-ctable-wrap,
.darkmode .network-v3-scope .network-contacts-table thead th {
    border-color: var(--color-border);
}

.darkmode .network-v3-scope .network-contacts-table {
    background: var(--color-surface);
}

.darkmode .network-v3-scope .network-contacts-table thead th {
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
}

.darkmode .network-v3-scope .network-contacts-table tbody tr {
    border-color: var(--color-border-light);
}

.darkmode .network-v3-scope .network-contacts-table tbody tr:hover {
    background: var(--color-surface-alt);
}

.darkmode .network-v3-scope .network-contacts-table td {
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope :is(
    .network-contacts-table .nwx-ctable__src,
    .network-contacts-table .nwx-ctd-phone
) {
    color: var(--color-text-secondary);
}

.darkmode .network-v3-scope .nwx-page {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope .nwx-page:hover:not(:disabled):not(.is-active) {
    background: var(--color-surface-alt);
    border-color: var(--color-text-secondary);
}

.darkmode .network-v3-scope .nwx-page.is-active {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-text-inverse);
}

.darkmode .network-v3-scope .nwx-page-gap {
    color: var(--color-text-secondary);
}

.darkmode .network-v3-scope .network-skeleton__row {
    border-color: var(--color-border-light);
    background: linear-gradient(100deg, var(--color-surface-alt) 30%, var(--color-surface) 50%, var(--color-surface-alt) 70%);
    background-size: 200% 100%;
}

.darkmode .mui-modal[data-testid="inviteNotePopup"] {
    background: var(--color-surface);
    border: 0.1rem solid var(--color-border);
    box-shadow: 0 0.8rem 3.2rem rgb(0 0 0 / 55%);
}

.darkmode .mui-modal[data-testid="inviteNotePopup"] :is(
    .mui-modal__header,
    .mui-modal__footer
) {
    background: var(--color-background);
    border-color: var(--color-border);
}

.darkmode .mui-modal[data-testid="inviteNotePopup"] :is(
    .nwx-notecopy,
    .nwx-notehint,
    .nwx-notecount
) {
    color: var(--color-text-secondary);
}

.darkmode .mui-modal[data-testid="inviteNotePopup"] .nwx-notearea {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.darkmode .mui-modal[data-testid="inviteNotePopup"] .nwx-notearea::placeholder {
    color: var(--color-text-muted);
}

.darkmode #networkProfileView.network-v3-scope,
.darkmode .network-profile-inline,
.darkmode .network-profile-popup__dialog {
    background: var(--color-background);
}

.darkmode .network-v3-scope :is(
    .nwx-profile-card,
    .nwx-profile-panel,
    .nwx-profile-menu
) {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.darkmode .network-v3-scope :is(
    .nwx-profile-name,
    .nwx-profile-pronoun,
    .nwx-profile-degree,
    .nwx-profile-role,
    .nwx-profile-loc,
    .nwx-profile-stats,
    .nwx-profile-panel-title,
    .nwx-profile-org-name,
    .nwx-profile-org-sub,
    .nwx-profile-sidecard-name,
    .nwx-profile-detail-value,
    .nwx-profile-more-name,
    .nwx-profile-more-role,
    .nwx-profile-menu-item
) {
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope :is(
    .nwx-profile-about,
    .nwx-profile-about.is-muted,
    .nwx-profile-detail-label,
    .nwx-profile-detail-value.is-muted,
    .nwx-profile-error
) {
    color: var(--color-text-secondary);
}

.darkmode .network-v3-scope :is(
    .nwx-profile-typebadge,
    .nwx-profile-chip,
    .nwx-profile-resume-btn
) {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope :is(
    .nwx-profile-resume-btn,
    .nwx-profile-btn--ghost,
    .nwx-profile-action-icon,
    .nwx-profile-more-topicon,
    .nwx-profile-menu-item
):hover {
    background: var(--color-surface-alt);
}

.darkmode .network-v3-scope .nwx-profile-btn--ghost {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope .nwx-profile-btn:is(.is-invited, :disabled) {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.darkmode .network-v3-scope .nwx-profile-menu {
    box-shadow: 0 1.4rem 3.6rem rgb(0 0 0 / 45%);
}

.darkmode .network-v3-scope :is(
    .nwx-profile-more-item,
    .nwx-profile-more-all
) {
    border-color: var(--color-border);
}

.darkmode .network-v3-scope .nwx-profile-more-all {
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope .nwx-profile-more-all:hover {
    background: var(--color-surface-alt);
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope .nwx-profile-back,
.darkmode .network-v3-scope :is(
    .nwx-profile-detail-ico,
    .nwx-profile-resume-btn svg,
    .nwx-profile-action-icon,
    .nwx-profile-menu-item svg,
    .nwx-profile-more-topicon
) {
    color: var(--color-text-primary);
}

.darkmode .network-v3-scope .nwx-profile-back svg {
    fill: currentColor;
}

.darkmode .network-v3-scope :is(
    .nwx-profile-loc img,
    .nwx-profile-card img[src$="locationInfo.svg"]
) {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.darkmode .network-v3-scope .nwx-profile-avatar,
.darkmode .network-v3-scope .nwx-profile-skel-avatar {
    border-color: var(--color-surface);
}

.darkmode .network-v3-scope :is(
    .nwx-profile-skel-back,
    .nwx-profile-skel-cover,
    .nwx-profile-skel-avatar,
    .nwx-profile-skel-line,
    .nwx-profile-skel-chip,
    .nwx-profile-skel-cta
) {
    background: var(--color-surface-alt);
    background-image: linear-gradient(100deg, transparent 30%, rgb(from var(--color-surface) r g b / 70%) 50%, transparent 70%);
    background-size: 200% 100%;
}

.darkmode .network-profile-popup__close {
    background: var(--color-surface-alt);
    color: var(--color-text-primary);
}

.darkmode .network-profile-popup__close:hover {
    background: var(--color-surface);
}

.darkmode .network-v3-scope svg:is([fill="#1f1f1f"], [fill="#222020"]) {
    fill: currentColor;
}

.darkmode :is(.network-v3-scope, #verifyPhonePopup) img:is([src$="locationInfo.svg"], [src$="dateChev.svg"], [src$="/edit.svg"]) {
    filter: brightness(0) invert(1);
    opacity: 0.7;
}

.darkmode .network-v3-scope img[src$="x-logo.svg"] {
    filter: invert(1);
}

.darkmode .network-v3-scope .network-empty-state__icon {
    filter: invert(1) brightness(0.55);
}

.darkmode .invitePopupV2 {
    background-color: rgb(0 0 0 / 80%);
}

.darkmode .invitePeopleModal {
    background: var(--color-surface);
    border: 0.1rem solid var(--color-border);
    box-shadow: 0 0.8rem 3.2rem rgb(0 0 0 / 55%);
    color-scheme: dark;
}

.darkmode .invitePeopleModal :is(
    .mui-modal__header,
    .mui-modal__footer
) {
    background: var(--color-background);
    border-color: var(--color-border);
}

.darkmode .invitePeopleModal .mui-modal__body {
    background: var(--color-surface);
}

.darkmode .invitePeopleModal .invitePopupV2 {
    background: transparent;
}

.darkmode .invitePeopleModal :is(
    .inviteFieldLabel,
    .inviteSplitAction,
    .inviteBulkPicker,
    .inviteSourceMenuList button
) {
    color: var(--color-text-primary);
}

.darkmode .invitePeopleModal :is(
    .inviteModeDescription,
    .inviteFieldHint,
    .inviteBulkFileName,
    .inviteBulkPicker small,
    .inviteRecipientCount
) {
    color: var(--color-text-primary);
}

.darkmode .invitePeopleModal :is(
    .inviteSplitAction,
    .inviteChipField,
    .inviteBulkPicker,
    .inviteSourceMenuList
) {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}

.darkmode .invitePeopleModal .inviteSplitMenuButton {
    border-color: var(--color-border);
}

.darkmode .invitePeopleModal :is(
    .inviteSplitMain,
    .inviteSplitMenuButton,
    .inviteSourceMenuList button
):hover,
.darkmode .invitePeopleModal :is(
    .inviteSplitMain,
    .inviteSplitMenuButton,
    .inviteSourceMenuList button
):focus-visible {
    background: var(--color-surface);
}

.darkmode .invitePeopleModal .inviteChipField:focus-within {
    border-color: var(--color-focus-ring);
}

.darkmode .invitePeopleModal .add-invite-main {
    background: var(--color-background);
    border-color: var(--color-border);
}

.darkmode .invitePeopleModal #inviteCoworkerEmail .invite-full-name {
    color: var(--color-text-primary);
}

.darkmode .invitePeopleModal .invitees-close-btn {
    color: var(--color-text-primary);
}

.darkmode .invitePeopleModal #multipleEmailInvite {
    background: transparent !important;
    color: var(--color-text-primary);
}

.darkmode .invitePeopleModal #multipleEmailInvite::placeholder {
    color: var(--color-text-primary);
    opacity: 1;
}

.darkmode .invitePeopleModal .inviteFieldHint .common-info-icons {
    filter: brightness(0) invert(1);
    opacity: 0.65;
}

.darkmode .invitePeopleModal .inviteBulkInline {
    background: var(--color-background);
    border-color: var(--color-border);
}

.darkmode .invitePeopleModal :is(
    .material-symbols-outlined,
    .btn__label::before
) {
    color: var(--color-text-primary);
}

.darkmode .invitePeopleModal #invite-copy-link {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.darkmode .invitePeopleModal #invite-copy-link:hover {
    background: var(--color-surface-alt);
}

.darkmode .invitePeopleModal #multipleInviteBtn:is(:disabled, .is-disabled),
.darkmode .invitePeopleModal #uploadCSVButton:is(:disabled, .is-disabled) {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-inverse) !important;
    opacity: 1;
}

.darkmode .invitePeopleModal :is(
    #multipleInviteBtn,
    #uploadCSVButton
) .btn__label {
    color: inherit !important;
    opacity: 1;
    visibility: visible;
}

.darkmode .inviteSectionMoreModalOverlay.network-v3-scope {
    background: rgb(0 0 0 / 58%);
}

.darkmode .network-v3-scope .inviteSectionMoreModalDialog {
    box-shadow: 0 0.8rem 3.2rem rgb(0 0 0 / 45%);
}
.darkmode .thumbnail .contentHover,
.darkmode .grey-border,
.darkmode .documentHeader,
.darkmode .documentFiles{
    background-color: var(--popup);
}
.darkmode .calendar-link-outer{
    background-color: var(--light-slate-brown-v2);
    border: unset;
}
.darkmode .header,
.darkmode .accountSettingNewLeft{
    background-color: var(--light-slate-brown-v2);
}
.darkmode .header {
    border-bottom: 0.1rem solid var(--light-brown);
}
.darkmode .connect-calendar-section{
    border-top: 0.1rem solid var(--light-brown);
}

.darkmode .dashboard1,
.darkmode .dashboard2,
.darkmode .dashboard3,
.darkmode .dashboard4{
    display: none;
}
.dashboard1-dark,
.dashboard2-dark,
.dashboard3-dark,
.dashboard4-dark{
    display: none;
}

.darkmode .dashboard1-dark,
.darkmode .dashboard2-dark,
.darkmode .dashboard3-dark,
.darkmode .dashboard4-dark{
    display: block !important;
}

.darkmode .accountSettingNewBody,
.darkmode .verifyModal-panel,
.darkmode .create-team-main-section,
.darkmode .common-popup-model,
.darkmode .popover,
.darkmode .tabbable-line>.tab-content,
.darkmode .msg-read-show-data ul li,
.darkmode .qucik-main-section,
.darkmode .protfolioPopBody,
.darkmode .successfullySection,
.darkmode .globalHeaderSearcTabbing,
.darkmode .global-msg-list-section,
.darkmode .meetingpopup-modal-content,
.darkmode .meetingpopup-modal,
.darkmode .deleteRecurrenceBody,
.darkmode .notifyModalContent,
.darkmode .invitees-main-section,
.darkmode .fileSec,
.darkmode .msg-notification-cell,
.darkmode .notification-box-popup-body,
.darkmode .postContainer,
.darkmode .emailChat,
.darkmode .tagTopicPepole,
.darkmode .meetingAlertsModalPopupBody,
.darkmode .globalResultNoFound,
.darkmode .noInternetBody,
.darkmode .notifcationBody,
.darkmode .editProfile,
.darkmode .uploadCsv,
.darkmode .videoSec,
.darkmode .globalTabDiv,
.darkmode .singleSection{
    background: var(--popup) !important;
}
.darkmode .accountSettingDropDownNew ul li,
.darkmode .accountSettingNewPass ul,
.darkmode .quick-msg-section,
.darkmode .notifyModalBody,
.darkmode .notificationPanel li.list-section,
.darkmode ul.eventMoreOptionDropDown li:hover{
    background: unset;
}
.darkmode .divider,
.darkmode .common-dropdown-account-ul li,
.darkmode ul.userTopDropDown li,
.darkmode .teamlist-item-section li,
.darkmode .msg-read-show-data ul li,
.darkmode .fleMediaPreviewContainer .tabbable-line>.nav-tabs,
.darkmode .tagTopicPepole .tagpeople-main ul li{
    border-bottom: 0.1rem solid var(--dropdown) !important;
}
.darkmode .mention-chip{
    background: rgb(from var(--color-info) r g b / 40%);
    border-color: rgb(from var(--color-info) r g b / 50%);
    color: var(--dark-white);
}
.darkmode .border-details{
    background-color: var(--dropdown);
}
.darkmode .logOutBtn{
    border-top: 0.1rem solid var(--dropdown);
}
.darkmode .selecItems:focus{
    outline: unset;
}


.darkmode .teamPopup-common,
.darkmode .accountSettingNew,
.darkmode .protfolioPop,
.darkmode .serachOpacity,
.darkmode .calendarModalPop,
.darkmode .invitePopup{
    background-color: rgb(from var(--light-slate-brown-v2t) r g b / 80%);
}
.darkmode .popover.right>.arrow:after{
    border-right-color:  var(--popup)
}
.darkmode .popover.bottom>.arrow:after {
    border-bottom-color: var(--popup) !important;

}
.darkmode .popover.left>.arrow:after {
    border-left-color: var(--popup) !important;
}
.darkmode .popover.top>.arrow:after {
    border-top-color: var(--popup) !important;;
}
.darkmode .tabbable-line>.tab-content,
.darkmode .meetingpopup-notifyme{
    border-top: unset;
}
.darkmode .meetingpopup-accept,
.darkmode .meetingpopup-decline,
.darkmode .meetingpopup-tentative{
    background: unset !important;
    border: 0.1rem solid var(--white);
    color: var(--dropdown) !important;
}
.darkmode .cancelButtonGlobal{
    background: unset !important;
    border: 0.1rem solid var(--button);
    color: var(--button) !important;
}
.darkmode .Check-Availability{
    color: var(--button) !important;
}
.darkmode .attendingActive,
.darkmode .notificationContent h2,
.darkmode .editProfileTittle h2,
.darkmode .userName,
.darkmode .uploaded-label-size-chat,
.darkmode .uploaded-label-name-chat,
.darkmode .messageNotification .user-team-label{
    color: var(--white) !important;
}
.darkmode .darkmode ul.globalHeaderSearcTabbing li{
    border: 0.1rem solid var(--white);
}
.darkmode  .notify-rsvp-dropdown-btn .dropdown:before{
    border-top: 0.6rem solid var(--light-slate-brown-v2);
    border-right: 0.6rem solid var(--light-slate-brown-v2);
    border-bottom: 0.6rem solid transparent;
    border-left: 0.6rem solid transparent;
}
.darkmode .note-editor .note-toolbar,
.darkmode .common-dropdown-ul li,
.darkmode .language-ul li{
    border-bottom: 0.1rem solid var(--light-brown);
}
.darkmode .calendar-in-meeting-schedule{
    border-top: 0.1rem solid var(--light-brown);
}
.darkmode .meeting-popup-header{
    border: 0.1rem solid var(--light-brown);
}
.darkmode .meeting-left-part{
    border-bottom: 0.1rem solid var(--light-brown);
    border-right: 0.1rem solid var(--light-brown);
}
.darkmode .meeting-popup-body-section,
.darkmode .meeting-popup-header,
.darkmode .upload-chat-section ul li{
    background-color: var(--light-black-v2);
}

.darkmode .peopleYouMayKnowEmpty,
.darkmode .new-empty-state-subtitle,
.darkmode .files-header,
.darkmode .files-chat-time,
.darkmode .upload-icon-name,
.darkmode .msgRelpyCellPhoto,
.darkmode .replybox h5,
.darkmode .replymsgnew,
.darkmode .invite-full-name,
.darkmode .emailChatBodyListingSerachEmail,
.darkmode .notificationContent h2,
.darkmode .blockUserHeadeing,
.darkmode .reportOption,
.darkmode .protectPrivacy,
.darkmode .upload-options-cont li,
.darkmode .countryDropdown .contry-code-num,
.darkmode .verification-text,
.darkmode .verificationBoxWrap .headings,
.darkmode .verificationBoxWrap span.verif-sublabel,
.darkmode .myInfoInput,
.darkmode .teamOrGroupDescCount,
.darkmode .new-empty-state-title{
    color: var(--white) !important;
}
.darkmode .teamCaret:before{
    background: url(../../images/icons/darkLeftArrow.svg);
}
.darkmode .accountSettingNewPass ul:before{
    transform: rotate(90deg);
    background: url(../../images/icons/darkLeftArrow.svg);
}

.darkmode .files,
.darkmode .msgRelpyCellImg,
.darkmode .add-invite-main,
.darkmode .invite-full-name,
.darkmode .input-search-invite input{
    background-color: rgb(from var(--color-surface) r g b / 15%) !important;
}

.darkmode .replyboxnew {
    background-color: var(--color-surface) !important;
}

.darkmode .emailWrap{
    background: var(--light-slate-brown-v2);
}
.darkmode .chatSettingPopup{
    outline: 0.1rem solid rgb(from var(--color-border) r g b / 77%);
}
.darkmode .emailChatBodyListingSerach{
    box-shadow: unset;
    border: unset;
    background-color: var(--dropdown);

}
.darkmode .blockUserPopup{
    background-color: var(--popup);
    border: unset;
}
.darkmode .uploadProfile{
    background: var(--dropdown);
}
.darkmode .datepicker thead tr:first-child th:hover{
    background: var(--border-v2);
}
.darkmode .highlight-msg-cell{
    background-color: var(--border-v2) !important;
}
.darkmode .countryDropdown,
.darkmode .upload-csv-ui,
.darkmode .uploaded-item-setion{
    background: var(--light-slate-brown-v2);
    border: unset;
}
.darkmode .conuntryContact input.myInfoInput,
.darkmode .conflictingpopup-booking-modal-content,
.darkmode .conflictingpopup-modal-content,
.darkmode .conflictingpopup-modal,
.darkmode .conflictingpopup-booking-modal{
    background-color: var(--popup);
}
.darkmode .conflictingpopup-booking-title,
.darkmode .conflictingpopup-booking-title-text-span,
.darkmode .conflictingpopup-booking-end-text-span,
.darkmode .conflictingpopup-title,
.darkmode .downloadPercentage,
.darkmode .upload-section .upload-csv-ui .fileupload-new-parent,
.darkmode .upload-hint-msg-style,
.darkmode .upload-section .download-csv-example a,
.darkmode .dragDrop,
.darkmode .UploadOr,
.darkmode .upload-section .upload-csv-ui .fileToUploadText,
.darkmode .upload-section .upload-csv-ui .fileupload-new-text,
.darkmode .document-uploading-label-file,
.darkmode .upload-chat-title{
    color: var(--white) !important;
}
.darkmode .myShareColum:before,
.darkmode .myImortColum:before{
    border: unset;
}
.darkmode .user-label{font-weight: normal}

.darkmode #file-manager-tour {
    background-color: var(--light-black-v2) !Important;
}
.darkmode .timeSlot1 {
    background: var(--red);
    border: 0.1rem solid var(--light-slate-brown-v2) !important;
    background: var(--light-slate-brown-v2) !important;
}

.darkmode .timeSlot {
    border: unset !important;
}
.darkmode .subCalenderdropdown ul,
.darkmode .timeFormatterDropDown ul {
    background: var(--light-slate-brown-v2) !important;
    border: unset !important;
}
.darkmode .subCalenderdropdown ul li,
.darkmode .timeFormatterDropDown ul li,
.darkmode .timeFormat{
    color: var(--white);
}


.darkmode .subCalenderdropdown::-webkit-scrollbar-track,
.darkmode .timeFormatterDropDown::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0.4rem transparent;
    border-radius: 0.3rem;

}

.darkmode .subCalenderdropdown ul::-webkit-scrollbar-thumb,
.darkmode .timeFormatterDropDown ul::-webkit-scrollbar-thumb {
    background: var(--light-slate-brown-v2) !important;
	border-radius: 0.3rem;
}

.darkmode .subCalenderdropdown ul::-webkit-scrollbar-thumb:hover,
.darkmode .timeFormatterDropDown ul::-webkit-scrollbar-thumb:hover {
    background: var(--light-slate-brown-v2) !important;
}
.darkmode .subCalendarOpacity{
    background: var(--light-black-v2) !important;
}
.darkmode .eventTypeMiddle ul li {
    background: var(--light-slate-brown-v2) !important;
    border: 0.1rem solid var(--light-slate-brown-v2) !important;
    color: var(--white);
}
.darkmode button.eventBottomBtnEdit{
    background: var(--light-slate-brown-v2) !important;
    border: 0.1rem solid var(--light-slate-brown-v2) !important;
    color: var(--white);
}
.darkmode .dropDownCaret:before {
    border-top: 1rem solid var(--light-slate-brown-v2);
}
.darkmode .dayNight{
    color: var(--white);
}
.darkmode .tour-title{
    color: var(--white) !important;
}

.darkmode .msgOriginalWrap{
    color: var(--dark-white);
}

.darkmode .notificationUnreadMsg {
    background: var(--popup) !important;
}
.darkmode .settingRemove {
    background: var(--popup);
}
.darkmode .team-collapse-section:hover {
        background-color: var(--light-black-v2);
}

.darkmode .notify-rsvp-dropdown .dropdown li {
        background-color: var(--light-slate-brown-v2);
    border: unset;
    color: var(--white);
}
.darkmode .notify-rsvp-dropdown .dropdown li:hover {
background-color: var(--light-slate-brown-v2) !important;}

.darkmode .msg-notification-parent {
    background-color: var(--light-slate-brown-v2) !important;
    color: var(--white);
}

.darkmode .notify-rsvp-dropdown-btn .dropdown:before, .rsvp.dropdown:before {
    border-top: 0.6rem solid var(--light-slate-brown-v2) !important;
    border-right: 0.6rem solid var(--light-slate-brown-v2) !important;
}

.darkmode .msg-notification-parent {
    background-color: var(--popup) !important;
    color: var(--white);
}

.darkmode .notification__sender, .darkmode .notification__topic, .darkmode .notification__body, .darkmode .new-toast-styling, .darkmode .notification__close-icon, .darkmode .notification__close, .darkmode .dashboard-subtitle {
    color: var(--white) !important;
}

.darkmode .characterlimitInput, .darkmode .characterlimittest, .darkmode .notification__bodyone {
    color: var(--white) !important;
}

.darkmode .emojionearea.chat-input-area.chat-input-label{
border-color: var(--light-slate-brown-v2) !important;
}

.darkmode .characterlimittest {
    color: var(--white) !important;
}
.darkmode .list-group-item ul li:hover {
    color: var(--color-brand);
}
.darkmode .common-sort-dropdown .filter-list-item li:hover {
    background: var(--light-black-v2);
}
.darkmode .businessUserDropDown{
background-color: var(--light-slate-brown-v2) !important;
}
.darkmode .businessUserDropDownItem {
    color: var(--white) !important;
    border-bottom: 0.1rem solid var(--dropdown) !important;
}
.darkmode .businessUserDropDownItem:last-child{
    border-bottom: none !important;
}

.darkmode .desktopNotificationValueNewDrop{
    background-color: var(--light-slate-brown-v2) !important;
    color: var(--white) !important;
    border:unset;}
.darkmode  .desktopNotificationValueNewDrop:focus {
    border:unset;}
.darkmode  .gifPopupPanel {
    background-color: var(--popup);
}
.darkmode .gifPopupPanel p {
    color: var(--white) !important;
}
.darkmode .coachmarks-content, .darkmode .popover-content {
    color: var(--white) !important;
}
.darkmode .skip-text {
    color: var(--white) !important;
}
.darkmode .note-dimension-display {
    color: var(--dark-black) !important;
}
.darkmode .note-editor .caret{
    border-top: 4px solid var(--white) !important;

}
.darkmode .datepicker td.day:hover{
    background-color:var(--light-slate-brown) !important;
}

.darkmode .seeAllPepoleBtn{
    border-top: 0.1rem solid var(--light-brown);
}

.darkmode .feedbackBody{
    background: var(--black);
    color: var(--white);
}

.darkmode textarea#feedBackTextBox{
    background: var(--black);
    color: var(--white);
}

/* ============================================================
   MESSAGES / WRITE & SHARE — DARK MODE
   Keep dark-mode-only fixes consolidated here.
   ============================================================ */

/* Message/file action icons visible in dark mode */
.darkmode .write-share-header .icon,
.darkmode .file-summary-close,
.darkmode .option-card-header img,
.darkmode .fmFIconF2 img,
.darkmode .fm-multi-more img,
.darkmode .fmPreviewF1 li img,
.darkmode .dropdown-menu-file-dashboard li img {
    color: var(--color-text-inverse) !important;
    fill: var(--color-text-inverse) !important;
    stroke: var(--color-text-inverse) !important;
}

.darkmode .option-card-header img,
.darkmode .fmFIconF2 img,
.darkmode .fm-multi-more img,
.darkmode .fmPreviewF1 li img,
.darkmode .dropdown-menu-file-dashboard li img,
.darkmode .file-summary-close {
    filter: brightness(0) saturate(100%) invert(100%);
}

/* Reuse the working dark search skeleton surface/border treatment */
.darkmode .melp-skeleton-container,
.darkmode .melp-sk-team-row,
.darkmode .melp-sk-group-row,
.darkmode .melp-sk-meeting-row {
    background-color: var(--light-slate-brown-v2);
}

.darkmode .melp-sk-team-row,
.darkmode .melp-sk-group-row,
.darkmode .melp-sk-meeting-row {
    border-bottom-color: var(--light-brown);
}

.darkmode .melp-skeleton,
.darkmode .skeleton-line,
.darkmode .file-summary-skeleton .skeleton-line,
.darkmode .transText-skeleton .skeleton,
.darkmode .transcription-skeleton .skeleton-line {
    background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-alt) 50%, var(--color-surface) 75%);
    background-size: 200% 100%;
}

/* Write & Share modal dark theme */
.darkmode #sharePostPopup .write-share-container,
.darkmode #sharePostPopup .write-share-container > div:first-child,
.darkmode #sharePostPopup .write-share-header,
.darkmode #sharePostPopup .file-name-container,
.darkmode #sharePostPopup .write-share-text,
.darkmode #sharePostPopup .write-share-footer,
.darkmode #sharePostPopup .editor-toolbar {
    background-color: var(--popup) !important;
    color: var(--white) !important;
    border-color: var(--light-brown) !important;
}

.darkmode #sharePostPopup .write-share-container {
    border: 0.1rem solid var(--light-brown);
    box-shadow: 0 2rem 2.5rem -0.5rem rgb(from var(--color-text-primary) r g b / 45%), 0 1rem 1rem -0.5rem rgb(from var(--color-text-primary) r g b / 25%);
}

.darkmode #sharePostPopup .write-share-header .text-21,
.darkmode #sharePostPopup .teamOrGroupDescCount,
.darkmode #sharePostPopup .limitcharacter,
.darkmode #sharePostPopup .teamOrGroupDescIncCount,
.darkmode #sharePostPopup .style-text,
.darkmode #sharePostPopup .file-selector__text,
.darkmode #sharePostPopup .file-selector__title,
.darkmode #sharePostPopup .file-selector__desc,
.darkmode #sharePostPopup .style-option,
.darkmode #sharePostPopup .alignment-option,
.darkmode #sharePostPopup .font-size-option {
    color: var(--white) !important;
}

.darkmode #sharePostPopup .ws-input-file-name,
.darkmode #sharePostPopup .file-selector__button,
.darkmode #sharePostPopup .style-dropdown-btn,
.darkmode #sharePostPopup .font-size-dropdown-btn,
.darkmode #sharePostPopup .toolbar-btn {
    background: var(--light-slate-brown-v2) !important;
    color: var(--white) !important;
    border-color: var(--light-brown) !important;
}

.darkmode #sharePostPopup .write-share-text,
.darkmode #sharePostPopup .write-share-text:focus,
.darkmode #sharePostPopup .write-share-text[contenteditable="true"] {
    background: var(--popup) !important;
    color: var(--white) !important;
}

.darkmode #sharePostPopup .ws-input-file-name::placeholder,
.darkmode #sharePostPopup .write-share-text[contenteditable="true"]:empty:before {
    color: var(--dark-gray) !important;
}

.darkmode #sharePostPopup .file-selector__menu,
.darkmode #sharePostPopup .style-dropdown,
.darkmode #sharePostPopup .alignment-dropdown,
.darkmode #sharePostPopup .font-size-dropdown,
.darkmode #sharePostPopup .text-popup {
    background: var(--light-slate-brown-v2) !important;
    border-color: var(--light-brown) !important;
    box-shadow: 0 1.2rem 2.4rem rgb(from var(--color-text-primary) r g b / 35%);
}

.darkmode #sharePostPopup .file-selector__option,
.darkmode #sharePostPopup .style-option,
.darkmode #sharePostPopup .alignment-option,
.darkmode #sharePostPopup .font-size-option {
    border-color: var(--light-brown) !important;
}

.darkmode #sharePostPopup .file-selector__option:hover,
.darkmode #sharePostPopup .style-option:hover,
.darkmode #sharePostPopup .alignment-option:hover,
.darkmode #sharePostPopup .font-size-option:hover,
.darkmode #sharePostPopup .toolbar-btn:hover,
.darkmode #sharePostPopup .style-dropdown-btn:hover,
.darkmode #sharePostPopup .font-size-dropdown-btn:hover,
.darkmode #sharePostPopup .file-selector__button:hover {
    background: var(--light-black-v2) !important;
    color: var(--white) !important;
    border-color: var(--light-brown) !important;
}

.darkmode #sharePostPopup .file-selector__option--selected,
.darkmode #sharePostPopup .style-option.active,
.darkmode #sharePostPopup .alignment-option.active,
.darkmode #sharePostPopup .font-size-option.active {
    background: rgb(from var(--color-brand-light) r g b / 12%) !important;
}

.darkmode #sharePostPopup .file-selector__arrow,
.darkmode #sharePostPopup .dropdown-icon,
.darkmode #sharePostPopup .toolbar-btn svg,
.darkmode #sharePostPopup .style-dropdown-btn svg,
.darkmode #sharePostPopup .font-size-dropdown-btn svg {
    color: var(--white) !important;
    fill: currentColor;
    stroke: currentColor;
}

.darkmode #sharePostPopup .write-share-loader {
    background: rgb(from var(--color-surface) r g b / 92%);
    color: var(--white);
}

.darkmode #sharePostPopup .write-share-header .icon:hover {
    color: var(--red) !important;
    fill: var(--red) !important;
    stroke: var(--red) !important;
}

.darkmode .feedbackBody h2{
    color: var(--white);
}


.darkmode .feedbackLike ul li.feedbackLikeFirst{
	background-image: url(../../images/Thumbnail-hover.svg);
}
.darkmode .feedbackLike ul li.feedbackLikeFirst:hover{

    background: url(../../images/Thumbnail.svg) no-repeat;
    background-position: center center !important;

}
.darkmode .feedbackLike ul li.feedbackLikeSecond:hover{

    background: url(../../images/Thumbnail2.svg) no-repeat;
    background-position: center center !important;
}
.darkmode .feedbackLike ul li.feedbackLikeSecond{
    background-image: url(../../images/Thumbnail-hover2.svg);
}
.darkmode .commonMeetingSpace {
    background-color: var(--white);
}




.darkmode .maina li .fileMangerActive path {

    fill: var(--white); /* Changes the fill color of the circle */


  }



.darkmode .maina li .fileMangerActive path {

    fill: var(--white); /* Changes the fill color of the circle */


  }

  .darkmode .maina li .fileMangerActive  {

    color: var(--white); /* Changes the fill color of the circle */


    background: var(--light-slate-brown-v2);

  }



  .darkmode .maina li path {

    fill: var(--white); /* Changes the fill color of the circle */


  }

  .darkmode .fileStorageWrap path {



        fill: var(--white); /* Changes the fill color of the circle */




  }

  .darkmode .storageTitle  {

    color: var(--white);



}

  .darkmode .leftMenuWarp ul li span {
        color: var(--white); /* Changes the fill color of the circle */
  }

  .darkmode .leftMenuWarp ul li span:hover {
    /* background: var(--light-slate-brown-v2); */
  }

  .darkmode .filesMenuIcons path {



    fill: var(--white); /* Changes the fill color of the circle */




}

  .darkmode .fileManagerTopRight img{
    filter: brightness() invert(1);
  }

  .darkmode .storageUsedText {

    color: var(--white);

  }

  .darkmode .fileManager {

    background: var(--light-black-v2);

}

.darkmode .leftMenu-file-manager {

    border-right: 0.1rem solid var(--light-brown) !important;

}

.darkmode .card-file-manager {

    background: var(--popup);

    border-color: var(--popup);

}



.darkmode .folderLabel {

    color: var(--white);

}



.darkmode .filesNewTab {

    background: var(--light-slate-brown-v2);

    color: var(--white);

}



.darkmode .filesNewTab .filesMenuIcons {

    color: var(--white);

}



.darkmode .card-file-manager-content {

    background: var(--light-slate-brown-v2);

    border-color: var(--light-slate-brown-v2);

}

.darkmode .cardFoterTitle {

    color: var(--white);

}

.darkmode .fileTypeBtn, .fileModifiedBtn {


    border-color: var(--light-slate-brown-v2) ;

    color: var(--white);

}

.darkmode .fileModifiedBtn2, .darkmode .fileTypeBtn2{
    border-color: var(--light-slate-brown-v2) ;
    color: var(--white);
    background-color: var(--light-slate-brown-v2);
    /* ../../images/filemanger/expand-more.svg */
}

.darkmode .option-card-header path {

    fill: var(--white);

}

.darkmode .cardFileHeader {

    color: var(--white);

}

.darkmode .cardFileHeader {

    color: var(--white);

}



.darkmode .fileContainerF1 {

    background: var(--light-black-v2);

    border-bottom: 0.1rem solid var(--light-brown) !important;

}
.darkmode .fileMangerExtension, .darkmode .fileItemF3, .darkmode .fileItemF4n.fm-date, .darkmode .fileItemF5nfm-size {

    color: var(--white);

}



.darkmode .filelistT3.h-name  {

    color: var(--white) !important;

}



.darkmode .fileHeaderT2 {

    border-bottom: 0.1rem solid var(--light-brown) !important;

}

/* Column-header sort indicators are SVG icons (unfoldMore / modify); invert them
   to white so they stay visible on the dark header, matching the sort dropdown. */
.darkmode .fileHeaderT2 .fmSortableHeader::after {
    filter: brightness(0) saturate(100%) invert(100%);
}

.darkmode .fileContainerF1:hover {

    background: var(--light-slate-brown-v2);

}

.darkmode .fileMagerTopLeft .breadcrumb-item.active {

    color: var(--white) !important;



}

.darkmode

 .fileMultiple ul {

    background: var(--light-slate-brown-v2);

}



/* changes by t0191 */
.darkmode .fileManagerCommonPopup2 {
    background-color: var(--light-slate-brown); /* Dark background for dark mode */
    color:var(--white); /* Light text color for readability */
    box-shadow: 0px 1px 8px var(--light-brown);
}
.darkmode .fileHeadf12 {
    color: var(--white) /* Light text color for readability */
}
.darkmode .fileMangerDropDown {
    background-color:var(--light-slate-brown); /* Dark background for dark mode */
    color: var(--white) /* Light text color for readability */

}
.darkmode .fileMangerDropDown span img{
    filter: brightness() invert(1);
}
.darkmode .fileMangerDropDown li:hover {
    background-color: var(--light-slate-brown-v2); /* Change to your desired hover color */
    color: var(--white);
  }

.darkmode .option {
    background-color: var(--light-slate-brown);
    border-top: var(--light-brown);
    border-bottom: var(--light-brown);
}
  .darkmode .typeModifiedFilter li {
    background-color: var(--light-slate-brown-v2); /* Background color for each option */
    /*Top border */
    /*Bottom border */
    color: var(--white); /* Text color */
    cursor: pointer; /* Pointer cursor on hover */
}
.darkmode .driveTest p {
    color: var(--white);
}
.darkmode .integdrive-text {
    color: var(--white);
}
.darkmode .btn-add-drive {
    filter: brightness() invert(1);
}

/* Integration drive: folder navigation breadcrumbs dark mode */
.darkmode .integration-drive-breadcrumb .breadcrumb-item span {
    color: var(--white);
    filter: none !important;
}
.darkmode .integration-drive-breadcrumb .breadcrumb-item.active span {
    color: var(--white);
    font-weight: 600;
}
.darkmode .integration-drive-breadcrumb .breadcrumb-item:not(.active):not(.integration-drive-breadcrumb__ellipsis) span {
    color: var(--dark-gray) !important;
}
.darkmode .integration-drive-breadcrumb .breadcrumb-item:not(.active):not(.integration-drive-breadcrumb__ellipsis):hover span {
    color: var(--white);
}
.darkmode .breadcRumArrowf1 img,
.darkmode .actions-container .driveBackArrow,
.darkmode .actions-container [onclick="navigateOutofFolder()"] img {
    filter: brightness(0) saturate(100%) invert(100%);
}
.darkmode .integration-drive-breadcrumb__ellipsis span {
    color: var(--dark-gray);
}

/* Integration drive: create new options dark mode */
.darkmode .actions-container.createFileGDrive .action,
.darkmode .actions-container.createFileODrive .action {
    background-color: var(--light-slate-brown-v2);
    border-color: var(--light-slate-brown);
}
.darkmode .actions-container.createFileGDrive .action:hover,
.darkmode .actions-container.createFileODrive .action:hover {
    background-color: var(--popup);
}
.darkmode .actions-container.createFileGDrive .text,
.darkmode .actions-container.createFileODrive .text {
    color: var(--white);
}
.darkmode .file-manager-dropdown2 ul li:hover{
    background: var(--popup);
    color: var(--white);
  }
  .darkmode .filterShorted-btn{
    filter: brightness(0) saturate(100%) invert(100%);
  }
  .darkmode .card-file-manager:hover {
    background: var(--light-slate-brown);
    color: var(--color-text-inverse);
  }
  .darkmode .filterIconCaret img{
    filter: brightness(0) saturate(100%) invert(100%);
  }
  .darkmode .fileSortageName{
    color: var(--white);
  }
  .darkmode .listicon{
    filter: brightness(0) saturate(100%) invert(100%);
  }
 .darkmode .file-manager-dropdown .filter-manager-item li{
    background: var(--light-slate-brown-v2);
    color: var(--color-text-inverse);
 }
 .darkmode .file-manager-dropdown .filter-manager-item li:hover {
    background-color: var(--popup);
    color: var(--white);
    cursor: pointer;
  }

  .darkmode .file-manager-dropdown .filter-manager-item li.filter-manager-active {
    background-color: var(--popup);
    color: var( --white);
    cursor: pointer;
  }
  .darkmode .leftMenuDropDown li span{
    color: var(--color-text-inverse);
    background: var(--light-slate-brown);
  }
  .darkmode .leftMenuWarp ul span.fileMangerActive {
    background: var(--light-slate-brown-v2);
  }
.darkmode .cardMoreOptionsClick{
    filter: brightness(0) saturate(100%) invert(100%);
  }
  .darkmode .cardWrap-2 .row-card-file-2 .folderIcon-2 img {
    filter: brightness(0) saturate(100%) invert(100%);
  }

  .darkmode .folderLabel-2 {
    color: var(--white);
  }

  .darkmode .card-file-manager-2 {
    background: var(--popup);
    border-color: var(--popup);
  }
 .darkmode .fileMultiple ul li span {
    filter: brightness(0) saturate(100%) invert(100%);
  }
.darkmode .option:hover {

    background-color: var(--light-slate-brown-v2);
  }
  .darkmode .Chevron{
    filter: brightness(0) saturate(100%) invert(100%);

  }

.darkmode #createMeetingPopup #invitees-section .invitees-close-new:hover {
    background: rgb(from var(--color-surface) r g b / 8%) !important;
}

.darkmode #createMeetingPopup #invitees-section .invitees-close-new:hover img,
.darkmode .cancel-fromContact-icon:hover {
    filter: brightness(0) saturate(100%) invert(86%) !important;
}

.darkmode .fmPreviewF2 ul li span {
    filter: brightness(0) saturate(100%) invert(100%) !important;
  }
  .darkmode .fmPreviewF2 ul li {
    color: var(--white) !important;
  }
  .darkmode .fm-sharedFiles-subMenu li:not(.fileMangerActive):hover {
    background: var(--light-slate-brown) !important;
  }

  .darkmode .leftMenuDropDown{
    background: var(--light-slate-brown);
  }
  .darkmode .fmPreviewF2 ul li {
    background: var(--popup) !important;
  }

  .darkmode .fmPreviewF2 ul li:hover {
    background: var(--light-slate-brown-v2) !important;
  }

  .darkmode .filesNewTab:hover{
    background: var(--light-slate-brown);
  }

  .darkmode img.empytfoldericon{
    filter: brightness(81%) saturate(70%) invert(32%);
  }

  .darkmode .gridicon{
    filter: brightness(0) saturate(100%) invert(100%);
  }

.darkmode .filetype-filterApplied{
    background:var(--light-slate-brown-v2)
}
.darkmode .title-empty1{
    color: var(--white);
}
.darkmode input::placeholder {
    color: var(--dark-gray) !important; /* Light color for visibility */
}

.darkmode .card-file-manager:hover .folderIconF1 {
    background: var(--color-surface-alt);
  }

  .darkmode .folderIconF1 {

    filter :invert(1);
    background: var(--color-surface-alt);

  }
  .darkmode span.folderIconF1.folder-showcheckbox {
    filter: none;
    background: var(--popup);
}
  .darkmode .typeModifiedFilter li :hover{
    background-color: var(--light-slate-black-v2) !important;
}

  .darkmode .fileUnCheckIconf2 {
    filter :invert(1);
    background-image: url(../../images/filemanger/uncheckbox.svg);
    background-color: var(--color-surface-alt);
  }
  .darkmode .fileCheckIconf2 {
    background: url(../../images/filemanger/checkbox.svg) no-repeat right center;
    background-color:var(--color-surface-alt);
  }
.darkmode .fileCheckIconf2
 {
    filter: none; /* Ensures check icons maintain their original color */
    background-color: var(--light-slate-brown-v2);
}
.darkmode .fileMangerCheckIcon{
    filter :invert(1);
    background-color:var(--color-surface-alt);
}
.darkmode .fileMangerCheckIcon{
    filter :invert(1);
    background-color:var(--color-surface-alt);
}
.darkmode .filelistT4.h-owner{
    color: var(--white) !important;
}
.darkmode .filelistT5.h-lastOpened{
    color: var(--white) !important;
}
.darkmode .filelistT6.h-fileSize{
    color: var(--white) !important;
}
.darkmode .fileItemF6More-Option.lv-folderOptionIcon, .darkmode .fileItemF6More-Option.lv-fileOptionIcon {
    filter: invert(1);
}

.darkmode textarea.shareFileNotifyInput.shared-to-text-area::placeholder{
    background-color: var(--white)s;
}

.darkmode .shared-to-input input[type=text]{
    border-color: var(--light-slate-brown-v2);
    background-color: var(--light-slate-brown-v2) !important;
    color: var(--white) !important; /* Ensure typed text remains white */
}

/*for share pop input*/

.darkmode .fileSharePopUp-Input input[type=text]{
    background-color: var(--light-black-v2);
    color: var(--white);
}

.darkmode .fileLabel-option{
    color: var(--white);
}

.darkmode .fileDataF2{
    background: var(--popup);
    border-color: var(--popup);
}

.darkmode .filetypeT3{
    color : var(--white);
}

.darkmode .file-lable-t3{
    background: var(--light-slate-brown-v2);
    border-color : var(--light-slate-brown-v2);
    background: url(../../images/filemanger/fileDownCaretExpand.svg) no-repeat right 0.5rem center;
}

.darkmode .fileSearchDropT2 ul li {
    background: var(--popup);
}

.darkmode .fileSearchDropT2 ul{
    border-color: var(--light-slate-black-v2);
}

.darkmode .fileSearchDropT2 ul li:hover {
    background-color: var(--light-slate-brown-v2);
}

.darkmode .fileSearchDropT2 ul li span:hover {
    background-color: var(--light-slate-brown-v2);
}

.darkmode .fileSearchDropT2 ul li span {
    color: var(--white);
}

.darkmode .fileDrop-Permanent-Option{
    background: var(--popup) !important;
}

.darkmode .fileDrop-Permanent-Option:hover{
    background: var(--light-slate-brown-v2) !important;
}

.darkmode .fileSearchDropT3 ul li span{
    background: var(--popup) !important;
}

.darkmode .fileSearchDropT3 ul li span:hover {
    background: var(--light-slate-brown-v2) !important;
}

.darkmode .fileSearchDropT2 ul{
    border-color: none;
}
.darkmode .fileSearchDropT3 ul li:hover img {
    background-color: var(--light-slate-brown-v2);
}

.darkmode textarea.shareFileNotifyInput.shared-to-text-area::placeholder{
    background-color: var(--white);
    color: var(--dark-gray);
}

.darkmode .coworker-label2{
    color: var(--dark-white) !important;
}

.darkmode .fileContainertHover:hover .chkbox-list {
    visibility: visible;
    filter: invert(1);
}

.darkmode .fileContainertHover .chkbox-list {
    filter: invert(1);
}

.darkmode .sharedWithMe:hover{
    background-color: var(--light-slate-brown-v2);
    border-radius: 0.8rem;
}

.darkmode .sharedByMe:hover{
    background-color: var(--light-slate-brown-v2);
    border-radius: 0.8rem;
}

.darkmode .listView-fmpreview ul li{
    background: var(--popup) !important;
    color: var(--white) !important;
}
.darkmode .listView-fmpreview ul li:hover{
    background: var(--light-slate-brown-v2) !important;
}
.darkmode .listView-fmpreview ul li span {
    filter: brightness(0) saturate(100%) invert(100%) !important;
}

.darkmode .option {
    background-color: var(--popup);
}

.darkmode :is(.account_language-list, .account_country-list) {
    border: var(--popup);
}

/* for upload popup */
.darkmode .uplaodStatusPopup{
    border: var(--light-slate-brown-v2) !important;
    background-color: var(--light-black-v2) !important;
}
.darkmode .uploadFileRowList{
    background-color: var(--light-slate-brown-v2);
}
.darkmode .uploadFilesHead{
    background-color: var(--light-black-v2);
    color: var(--white) !important;
}
.darkmode .uploadCaretBGTn, .darkmode .uploadcloseBtn{
    filter: brightness(0) saturate(100%) invert(100%);
}
.darkmode .uploadFilesHeading h2{
    color: var(--white) !important;
}
.darkmode .uploadSummaryRow{
    background-color: var(--light-slate-brown-v2);
}
.darkmode .uploadSummaryEta{
    color: var(--white);
}
.darkmode .uploadFileName{
    color: var(--white);
}
.darkmode .uploadFileColum:hover {
    background: none;
}
.darkmode .reciever-user-details2{
    background-color: var(--light-slate-brown-v2);
}
.darkmode .searchfromBtn, .darkmode .searchDateBtn{
    border-color: var(--light-slate-brown-v2);
    color: var(--white);
    background-color: var(--light-slate-brown-v2);
}
.darkmode .search_container_list,.darkmode .searchdateModifiedFilter{
    background-color:var(--light-slate-brown-v2);
}
.darkmode .searchfromModifiedFilter li,.darkmode .searchdateModifiedFilter li{
    border-bottom: 0.1rem solid  var(--light-slate-brown-v2) !important;
    background-color: var(--light-slate-brown-v2);
    color: var(--dark-white);
}
.darkmode .participant-name{
    color: var(--white) !important;
}
.darkmode .result-message, .darkmode .result-timestamp,.darkmode .file-info,.darkmode .centered-message, .darkmode .common-label-emptystate2{
    color: var(--dark-white);
}
.darkmode .display-flex-reciver-result{
    border-bottom: 0.1rem solid var(--light-brown) !important;
}

.darkmode .search-result:hover {
    background-color: var(--dim-gray);
}

/* Child has an opaque dark bg in dark mode — clear it on hover so the
   parent's hover colour shows through the full row width. */
.darkmode .search-result:hover .reciever-user-details2 {
    background-color: transparent;
}
.darkmode .middel-inner-section-search {
    border-bottom: 0.1rem solid var(--light-brown) !important;
}
.darkmode .In-search-section input[type="text"], .In-search-section input[type="date"] {
    border: 0.1rem solid var(--light-slate-brown-v2) !important;
}
.darkmode .adSearchFiltersWrap{
    border: 0.1rem solid var(--light-slate-brown-v2) !important;
    background: var(--light-slate-brown-v2);
}
.darkmode .cancelDateButton, .darkmode .cancelfromButton {
    background: unset !important;
    border: 0.1rem solid var(--button);
    color: var(--button) !important;
}
.darkmode .calendar{
    border-color: var(--light-slate-brown-v2);
    background-color: var(--light-slate-brown-v2);
    color: var(--white);
}
.darkmode .adFilterInputfrom,.darkmode .adFilterInputTo {
    background-color: var(--light-slate-brown-v2);
    border-color: var(--light-slate-brown-v1);
    color: var(--white);
}
.darkmode .current-date h1{
    color: var(--white);
}
.darkmode .current-date h1 .calendarSelectTrigger:hover {
    background: var(--light-slate-brown-v1);
    border-color: var(--light-slate-brown-v1);
}
.darkmode .current-date h1 .calendarSelectList {
    background: var(--light-slate-brown-v2);
    border-color: var(--light-slate-brown-v1);
}
.darkmode .current-date h1 .calendarSelectList li {
    color: var(--white);
}
.darkmode .current-date h1 .calendarSelectList li:hover {
    background: var(--light-slate-brown-v1);
}
.darkmode .week-days {
    background: var(--light-slate-brown-v2);
}
.darkmode .weeks div {
    color: var(--white);
}
.darkmode .searchMsgReasult {
    color: var(--white);
}

.darkmode .chat-search-datepicker .gs-datepicker-trigger {
    background: var(--light-slate-brown-v2);
    border-color: var(--light-slate-brown-v1);
    color: var(--white);
}

.darkmode .chat-search-datepicker .gs-datepicker-trigger:hover,
.darkmode .chat-search-datepicker.gs-datepicker-open .gs-datepicker-trigger {
    background: var(--light-slate-brown-v1);
}

.darkmode .chat-search-datepicker.gs-datepicker-has-value .gs-datepicker-trigger {
    color: var(--white);
}

.darkmode .chat-search-datepicker .gs-datepicker-dropdown,
.darkmode .chat-search-datepicker .gs-custom-select-list {
    background: var(--light-slate-brown-v2);
    border-color: var(--light-slate-brown-v1);
}

.darkmode .chat-search-datepicker .gs-custom-select-trigger,
.darkmode .chat-search-datepicker .gs-datepicker-prev,
.darkmode .chat-search-datepicker .gs-datepicker-next,
.darkmode .chat-search-datepicker .gs-datepicker-clear {
    background: var(--light-slate-brown-v2);
    border-color: var(--light-slate-brown-v1);
    color: var(--white);
}

.darkmode .chat-search-datepicker .gs-custom-select.open .gs-custom-select-trigger,
.darkmode .chat-search-datepicker .gs-custom-select-trigger:hover,
.darkmode .chat-search-datepicker .gs-datepicker-prev:hover,
.darkmode .chat-search-datepicker .gs-datepicker-next:hover,
.darkmode .chat-search-datepicker .gs-datepicker-clear:hover,
.darkmode .chat-search-datepicker .gs-custom-select-option:hover,
.darkmode .chat-search-datepicker .gs-datepicker-day:hover:not(:disabled) {
    background: var(--light-slate-brown-v1);
}

.darkmode .chat-search-datepicker .gs-custom-select-option,
.darkmode .chat-search-datepicker .gs-datepicker-day,
.darkmode .chat-search-datepicker .gs-datepicker-weekdays span {
    color: var(--white);
}

.darkmode .chat-search-datepicker .gs-custom-select-option.gs-custom-select-option-disabled,
.darkmode .chat-search-datepicker .gs-datepicker-day.gs-datepicker-day-disabled {
    color: var(--dark-white);
}

.darkmode .title-empty2 {
    color: var(--white);
}

.darkmode .fileManagerCommonPopup {
    background-color: var(--light-black-v2);
    color: var(--white);
}

.darkmode .manageDetails .fm-share-searchResults {
    background-color: var(--light-slate-brown-v2);
    color: var(--white);
}

.darkmode .text-area_wrapper {
    background-color: var(--light-slate-brown-v2);
    color: var(--white);
}

.darkmode .limitcharacter-wrapper {
    background-color: var(--light-slate-brown-v2);
    color: var(--white);
}

.darkmode .subTitleLocationWrap .userProfileTestT3 {
    color: var(--white);
}

.darkmode .userProfileTestT3 {
    color: var(--white);
}

.darkmode :is(.navPillsList li span, .copyLinkBtnShare) {
    background-color: var(--popup);
    color: var(--white);
}

.darkmode #newPassword {
    background-color: var(--light-slate-brown-v2) !important;
    color: var(--white);
}


.darkmode :is(.fileAccessHaedingT1, .eventsTextarea, .emailUserNameT2, .fileOwnerTf2, .linksSharingTitle, .fileHeadf1, .renameInputSahre, .fileFolderF4 .fileFolderIconWrap, .fileTabsF6 ul li span) {
    color: var(--white);
}

.darkmode :is(.fileTabF5 ul li span.selected, .moveState, .shareProfileTitel, .shareFileNotifyTitle, .fileViewPopupTitle, .fileViewSharedTitle, .filePropertiesTitle, .filePropertiesTitleS8, .manageaceess li, .canViewDropDown li, .meetingpopup-edit, .meetingpopup-close, .meetingPanelRightSide ul li svg) {
    color: var(--white) !important;
}
.darkmode :is(.filef4, .peopleAccess, .OwnedTittle, .filePropertiesTitleS9) {
    color: var(--dark-white);
}

.darkmode :is(.TabActive) {
    background-color: var(--dark-black) !important;
}

.darkmode :is(.fileTabsF6 ul li:hover, .access-manage-btn, .shareFileNotifyInput, .btnA2) {
    background-color: var(--black) !important;
    color: var(--white) !important;
}

.darkmode .transparentBg {
    background-color: transparent;
}

.darkmode textarea::placeholder {
    background-color: transparent !important;
}

.darkmode .fileViewPopup {
    background-color: var(--popup);
}

/* booking page */



.darkmode .SideBarBooking ul li:hover {
    background-color: var(--popup);
}

.darkmode .booking_page-fill-icon path {
    fill: var(--white);
}

.darkmode :is(.fileModifiedBtn2 path , .fileTypeBtn2 path) {
    fill: var(--white);
}
.darkmode :is(.support-arrow_icon, #melpGuideMenu svg path, .profile-dropdown-links:hover .copy-icon-svg) {
    fill: var(--white) !important;
}

.darkmode .melp-darkmode-theme {
    fill: var(--white);
}

.darkmode .booking_page-stroke-icon path {
    stroke: var(--white);
}
.darkmode .account_dropdown-arrow svg path {
    stroke: var(--white) !important;
}

.darkmode :is(.SideBarBooking ul li, .unitedFolder, .access-manage-dropdwon li, .inPersonIcon svg, .color-picker-title, .requestAddColum, .editLocation, .provideDetails, .requestResheduleBgInherit, .requestForResheduleTeaxtArea textarea, .requestResheduleTop, .CreateTypeViewAll-upcomingEvents, .close-btn, .event-title, .url-input, .SideBarBooking ul li:hover, .eventStartrDateColum, .url-prefix, .section-title,.booking_melp-logo svg, .availabilityEditTextWrap, .availableworkingHoursColumLeft h2, .availabiltyWorkingLeftWrap, .eventTimeFormat, .eventTypeUser, .BusinessDiscussion, .bookingTabsPillTabs ul li span, .limitFirstColum, .limitSecondColum, .limitBookingBox h1, .eventTitelTop, .confrenceingDrop, .availabiltyWorkingHours, .WorkingHoursItem, .activePrivatPublicColum, .privateTitle, .privateBooking, .durationTime span, .locationkBoxItem h6, .eventSetupTitle, .eventSetupColum label, .createPoupTopSec, .createEventPopupColum h1, .emptyBookingStatesHeading, .cta, .box h2, .bookingColumTitle h1, .bookingCommonDropDown ul li, .myEventsTypesTitle h1, .myEventsTypesTitle h1, .CreateTypeViewAll-eventTypes,.CreateTypeViewAll-upcomingEvents) {
    color: var(--white) !important;
}

.darkmode :is(.userProfile span, .fileSaerchTestT5, .fileResultDropT1 ul li, .rescheduleEvent, .requestResheduleBottom , .event-description, #PublicPage-url, .warning-text, .availabilityEditDateContaier, .slots-container, .eventTimeZone, .EventUserName, .minutesColum, .discussionScaling, .eventActive, .limitBookingBox span, .eventDateTitle, .createPoupBottomSec, .createEventPopupColum p, .emptyBookingStatesPara, .box p, .sidebaractive li.active, .bookingColumTitle p, .CreateTypeShare, .myEventsTypesTitle p, .myEventsTypesTitle p) {
    color: var(--dark-white);
}

.darkmode :is(.sidebaractive li.active, span.navbar-shared-dropdown, .sharePopupWrap, .fileResultDropT1 ul, .access-manage-dropdwon li:hover, .bookingCommonDropDown ul li:hover, .limitFirstColum, .limitSecondColum, .url-prefix) {
    background: var(--light-slate-brown-v2);
}

.darkmode :is(.CreateTypeShare, .fileSerachT3, .access-manage-dropdwon, .fileResultDropT1 ul li:hover, .newFoldert2, .CreateTypeViewAll-upcomingEvents, .color-picker-box, .requestResheduleWrap, .createEventPoupListing ul li, .availabiltydefaultCta, .eventSetupRightPanelColums, .privateColum, .publicColum, .emptyBookingStatesIcon, .createEventWrap, .CreateTypeMore, .bookingCommonDropDown ul, .CreateTypeViewAll-eventTypes, .cta) {
    background: var(--popup)
}

.darkmode :is(input, .box, .hFull, span.url-text, .searchListingScroll li.list-section, .fileViewPopup, .fileViewPopupS4, .filedetailBtnA1, .fileResultDropT1 ul li, .fileResultDropT1 ul, .drive__new-doc, .color-picker-box, .availble-inner-part-work, .requestForReshedulelocationItem, .requestResheduleHeader, .resheduleRequestOptionRow, .requestForResheduleTeaxtArea textarea, .requestForResheduleTeaxtArea textarea:focus, .url-prefix, .availabiltyWorkingHourListing, .oragnising-container, .dashboard_meeting-footer, .recent-activity_msg-list, .availability-content, .addParticipentAdd, .eventstratWrap, .booking-t-header, .event-row, .limitPerDay, .limitFirstColum, .limitSecondColum, .limitBookingFrequency, .durationTime, .locationkBoxItem, .WorkingHoursRow, .eventSetupRightPanelColums, .cta, .emptyBookingStatesSec, .createEventWrap, .createEventPoupTopItem){
    border-color: var(--light-brown) !important;
}

.darkmode :is(.box, .emptyBookingStatesSec, .requestForResheduleTeaxtArea textarea, .list-section:hover, .createEventPoupTopItem, .activePrivatPublicColum) {
    background-color: var(--black) !important;
}

.darkmode :is(.eventActive, .durationTime, .locationkBoxItem, input, .inputEventColumDescription, .createEventListinActive, .availabiltyWorkingMoreHorizonatl, .availble-inner-part-work, .availabiltyWorkingHourListing, .WorkingHoursRow, .limitBookingFrequency, .tabPillActive, .event-row) {
    background-color: var(--light-slate-brown-v2) !important;
}

.darkmode .createEventListinActive{
    border-color: var(--red) !important;
}

.darkmode :is(.proceedCtaCancle, .cancleCta, .requestLocation) {
    background-color: transparent;
    color: var(--white);
}

.darkmode :is(.eventSetupColum input, .eventsTextarea) {
    border: 0.1rem solid var(--light-slate-brown-v2);
    background-color: var(--light-slate-brown-v2);
}

.darkmode textarea::placeholder, input::placeholder {
    color: var(--dark-gray);
}

.darkmode :is(.more_Option span img, #advancesearch img, .fileSaerchCloseT6 img, .anyoneLinkIcon, .directionArrows img, .requestForReshedulelocationItem_ExapandMore img, .cancleIcon img, .share-icon,.copy-icon img,.selectedDuration img,.selectedBufferTime img,.location_expand_more img,.meetingLeftCopyLinkOuterclipboardBooking img,.meetingLeftCopyLinkOuterclipboard img,.cloud-icons img,.limitFrequencyColumn img,.availabiltyWorkingMoreHorizonatl img,.availabiltyWorkingMoreHorizonatl img,.iconsEdit img,.createNewF1 span img,.breadcrumb span,.ellipsis,.show-insider img, .plainingCaret img, .crmBulletsIcon){
    filter :invert(1);
}

.darkmode .recent_btn-group button {
    background-color: transparent;
    border-color: var(--white);
    color: var(--white);
}

.darkmode .recent_btn-group button:hover {
    background-color: var(--popup);
    border-color: var(--white);
    color: var(--white);
}


.darkmode :is(.cancleCta) {
    background-color: transparent;
    border-color: var(--white);
    color: var(--white);
}

.darkmode :is(.cancleCta:hover) {
    background-color: var(--popup);
    border-color: var(--white);
    color: var(--white);
}

.darkmode :is(.timeSlot) {
    border: 1px solid var(--border-v2) !important;
}



/* crm */

.darkmode :is(.crmTicketHeaderLeft, .crmIntergationNavTop ul li span, .crmTitle, .selectWrapTopHeaderTitle, .selectWrapTopHeaderContent, .selectWorkListingContent, .HubSpotTitle, .HubSpotPara, .ticketCreatedDate, .ticketId, .ticketName, .ticketCreatedDateListing, .productTicketListing, .ticketNameListing, .taskDetailHead, .taskDetailSubHead, .two-column-table th, .two-column-table td, .two-column-table tbody tr:nth-child(even), .taskDetaildeccriptionTitle, .taskDetaildeccriptionSubTitle, .taskDetailLight, .taskDetailBold, .hubspotMenu ul li span, .redesigningTitle, .crmTicketingListingMaterial ul li span, .productTicketName, .productticketId, .productticketCreatedDate, .productDetailType span, .productNameListing, .productDateListing, .crmModuleTitel, .crmModuleDecription, .projectRolesTitle, .crmProjectProfileDecription, .crmProjectActivityDetailsProfile, .crmTicketDropContent, .crmMoreOptionDropDown ul li, .crmTrayDesc, .crmAdditionalContent p, .additionContentCRM, .ticketIdListing, .corporationDetailsLeft, .corporationDetailsRight) {
    color: var(--white);
}

.darkmode :is(.selectWorkWrap, .crmTicketListingWrap:hover .two-column-table tbody tr:hover, .hubSpotActive, .outerMenuSublist > ul > li:hover, .asanaProjectListParent ul li:hover, .crmMoreOptionDropDown ul, .crmTicketActiveClass ) {
    background-color: var(--light-slate-brown-v2);
}

.darkmode :is(.two-column-table tbody tr:nth-child(even), .two-column-table tbody tr:hover, .crmTicketListingWrap:hover, .crmTicketLeftDropDown ul, .productTicketListingWrapItem:hover, .crmchevron-right-arrow) {
    background-color: var(--light-slate-black-v2) !important;
}

.darkmode .read-more-link {
    background-color: var(--light-black-v2) !important;
}

.darkmode :is(.taskDetailPhaseCta, .driveCustomCancleCta, .expand-members-btn) {
    background-color: var(--light-slate-brown-v2);
    color: var(--white);
}

.darkmode :is(.crmMoreOptionImg, .hubSpotBackArrow img, img.expandMoreOptiomImg, .expandMoreOptiomImgRotated, .crmchevron-right-arrow img, .removeAndMore img, img.expandMoreOptiomImg1, #headDiv img, .chevronicon, .dropdown-icons, .setting-event img) {
    filter: invert(1);
}

.darkmode :is(.crmTicketLeftPanel, .crmTicketListingWrap, .crmIntergationNavTop, .hubSpotContentPart, .productTicketListingWrap, .crmIntergationAppsColum, .detailBorderLine) {
    border-color: var(--light-brown) !important;
}

.darkmode .crmIntergationAppsColum:hover,
.darkmode .crmIntergationAppsColum:focus-within {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 1px var(--color-brand);
}
/* ---- user setting darkmode start ---- */
.darkmode :is(.account_title,.account_description,.account_password-container,.account_phone-input,#newPassword,#confirmPassword,.account_option-name,.account_option-code,.logout-btn,.back-icon,.account_dropdown-text ) {
    color: var(--white);
}
.darkmode :is(.account_name, .account_role,.account_country-code,.account_delete-title,.account_delete-description,.account_delete-confirmation) {
    color: var(--dark-white) !important;
}
.darkmode :is(.account_input,#preferredLanguage,#editaboutUs,.account_location-input,.account_dropdown-trigger,.settingTimeZone ,.account_dropdown-list li) {
    border-color: var(--light-slate-brown-v2) ;
    color: var(--white);
    background-color: var(--light-slate-brown-v2);
}
.darkmode :is(.account_phone-wrapper,) {
    background-color: var(--light-brown) !important;
}

.darkmode .account_password-container {
    background-color: var(--light-slate-brown-v2) !important;
}

.darkmode :is(.account_language-list,) {
    background: var(--popup)
}
.darkmode :is(.account_language-list li:hover,.account_country-dropdown:hover,.resume-download-delete span:hover,.resume-download-delete span:hover) {
    background-color: var(--light-slate-brown-v2);
}
.darkmode :is(.account_language-list li,.account_country-options li,.account_country-option,.account_country-search, .externalUserList li) {
     border: 0.1rem solid var(--light-slate-brown-v2);
}
.darkmode :is(.account_dropdown-list li:hover) {
  background-color: var(--light-slate-brown);
}

.darkmode #invitees-section .input-invite-section {
    background-color: var(--light-slate-brown-v2) !important;
    border-color: var(--light-brown) !important;
}

.darkmode #invitees-section #searchUser {
    color: var(--white) !important;
}


.darkmode :is(.ai-response-icon-btn, .help-me-write-title, .help-me-write_option-title, .help-me-write_option-item) {
    color: var(--white);
}

.darkmode :is(.help-me-write_container, .ai-container, .ai-input-field, .ai-response-icon-item:hover, .help-me-write_option-dropdown, .externalUserList li) {
    background-color: var(--light-slate-brown-v2);
    color: var(--white);
}

.darkmode :is(.ai-response-icon-dropdown, .help-me-write_option-container:hover, .help-me-write_option-item:hover) {
    background-color: var(--popup);
    color: var(--white);
}

.darkmode :is(.ai-input-container, .help-me-write_option-dropdown) {
    border-color: var(--slate-gray);
}

.darkmode :is(.ai-response-icon button svg path, .help-me-write-icon svg path) {
    fill: var(--white);
}

.darkmode .editedMessage {
    color: var(--white);
}

.darkmode .attendingNotificationTop{
    background-color: var(--light-black-v2);
}

/* In-call add-to-call panel */
.darkmode #contactPanel .add-to-call-panel {
    background: var(--light-black-v2);
    color: var(--white);
    box-shadow: -1.2rem 0 3rem rgb(from var(--color-text-primary) r g b / 28%);
}

.darkmode #contactPanel .panel-header,
.darkmode #contactPanel .panel-footer {
    background: var(--popup);
    border-color: var(--light-brown);
}

.darkmode #contactPanel .selected-participants-preview,
.darkmode #contactPanel .meeting-link-container,
.darkmode #contactPanel .call-status-wrap .cl-li,
.darkmode #contactPanel .participant-chip,
.darkmode #contactPanel .contacts-list-count,
.darkmode #contactPanel .externalUserList,
.darkmode #contactPanel .contact-checkbox {
    background: var(--light-slate-brown-v2);
    border-color: var(--light-brown);
}

.darkmode #contactPanel .panel-header-content h2,
.darkmode #contactPanel .meeting-link-url,
.darkmode #contactPanel .call-status-wrap .cl-li-name .user-label,
.darkmode #contactPanel .participant-chip,
.darkmode #contactPanel .contact-name,
.darkmode #contactPanel .contact-badge.badge-coworker,
.darkmode #contactPanel .contact-badge.badge-network,
.darkmode #contactPanel .copy-link-btn,
.darkmode #contactPanel .panel-close-btn {
    color: var(--white);
}

.darkmode #contactPanel :is(.panel-header-content p, .meeting-link-label, .selected-participants-title, .contacts-list-title, .contacts-list-count, .selected-count-display, .contact-role, .contact-location, .participant-search-icon, .participant-search-clear) {
    color: var(--dark-white);
}

.darkmode #contactPanel .panel-close-btn:hover,
.darkmode #contactPanel .participant-search-clear:hover {
    background: rgb(from var(--color-surface) r g b / 8%);
    color: var(--dark-white);
}

.darkmode #contactPanel .copy-link-btn {
    background: transparent;
    border-color: var(--light-brown);
}

.darkmode #contactPanel .panel-close-btn {
    background: var(--light-slate-brown-v2);
    border: 0.1rem solid var(--light-brown);
}

.darkmode #contactPanel .participant-search-input {
    background: var(--light-slate-brown-v2);
    border-color: var(--light-brown);
    color: var(--white);
}

.darkmode #contactPanel .participant-search-input::placeholder {
    color: var(--dropdown);
}

.darkmode #contactPanel .participant-search-input:focus {
    background: var(--popup);
    border-color: rgb(from var(--color-brand) r g b / 80%);
    box-shadow: 0 0 0 0.3rem rgb(from var(--color-brand) r g b / 14%);
}

.darkmode #contactPanel .call-status-wrap::-webkit-scrollbar-thumb {
    background: var(--light-brown);
}

.darkmode #contactPanel .call-status-wrap .call-status {
    background: rgb(from var(--color-surface) r g b / 8%);
    color: var(--white);
}

.darkmode #contactPanel .contact-item .common-postion {
    background: transparent;
    border-bottom: none !important;
}

.darkmode #contactPanel .contact-item:hover,
.darkmode #contactPanel .externalUserList li:hover {
    background: rgb(from var(--color-surface) r g b / 5%);
}

.darkmode #contactPanel .contact-item.selected {
    background: rgb(from var(--color-brand) r g b / 14%);
    border-color: rgb(from var(--color-brand) r g b / 75%);
}

.darkmode #contactPanel .contact-item.invited {
    background-color: rgb(from var(--color-surface) r g b / 4%) !important;
    border-color: rgb(from var(--white) r g b / 6%) !important;
}

.darkmode #contactPanel .contact-item.invited .contact-checkbox {
    background: rgb(from var(--color-surface) r g b / 10%);
    border-color: rgb(from var(--white) r g b / 12%);
}

.darkmode #contactPanel .contact-item.on-call {
    background-color: rgb(from var(--color-success) r g b / 14%) !important;
    border-color: rgb(from var(--color-success) r g b / 26%) !important;
}

.darkmode #contactPanel .contact-item.on-call .contact-checkbox {
    background: rgb(from var(--color-success) r g b / 20%);
    border-color: rgb(from var(--color-success) r g b / 26%);
}

.darkmode #contactPanel .contact-badge.badge-coworker {
    border-color: rgb(from var(--white) r g b / 18%);
}

.darkmode #contactPanel .contact-badge.badge-network {
    border-color: rgb(from var(--color-brand) r g b / 45%);
}





.darkmode #contactPanel .externalUserList li,
.darkmode #contactPanel .externalUserList li .user-label,
.darkmode #contactPanel .externalUserList li .color-black {
    color: var(--white) !important;
}

.darkmode #contactPanel .externalUserList li .network-label {
    color: var(--dark-white) !important;
}

.darkmode #contactPanel #addToCallemptyState {
    color: var(--dark-white);
}

/* ============================================================
   TRANSLATE POPUPS — DARK MODE
   Covers: Dashboard Doc Translate, Drive/File Translate,
           Chat Translate (fileTranslatePopup & translation.html)
   ============================================================ */

/* --- Dashboard Doc Translate Popup (ddt-*) --- */
.darkmode .ddt-dropzone {
    background: var(--light-slate-brown-v2);
    border-color: var(--border-v2);
}

.darkmode .ddt-dropzone.ddt-dragover {
    background: var(--light-black-v2);
    border-color: var(--button);
}

.darkmode .ddt-drop-text,
.darkmode .ddt-file-name {
    color: var(--white) !important;
}

.darkmode .ddt-or-browse,
.darkmode .ddt-hint-text,
.darkmode .ddt-modal .language-title .subtitle-label {
    color: var(--dark-white);
}

.darkmode .ddt-modal .language-title .support-label {
    color: var(--white);
}

.darkmode #ddt-file-languages .file-language-list-container {
    background: var(--light-slate-brown-v2);
    border-color: var(--border-v2);
    color: var(--white);
}

.darkmode #ddt-file-languages .file-language-list-container:hover {
    border-color: var(--button);
}

.darkmode #ddt-file-languages .ddt-selected-lang-label {
    color: var(--white);
}

.darkmode #ddt-file-languages .file-language-list-container svg path {
    stroke: var(--white);
}

/* --- Drive / File Translate Popup --- */
.darkmode .langDropdownTranslateFile {
    background: var(--popup);
    border-color: var(--border-v2);
    color: var(--white);
}

.darkmode .langDropdownTranslateFile li {
    color: var(--white);
}

.darkmode .langDropdownTranslateFile li:hover {
    background: var(--light-black-v2);
}

.darkmode #ddt-file-languages .language-search-li {
    background-color: var(--popup);
    border-bottom-color: var(--color-success);
}

.darkmode #ddt-file-languages .language-search-li:hover {
    background-color: var(--popup) !important;
}

.darkmode #ddt-file-languages .language-search-input {
    background-color: var(--light-black-v2);
    border-color: var(--color-success);
    color: var(--color-text-inverse);
}

.darkmode #ddt-file-languages .ddt-language-status {
    color: var(--dark-white);
}

.darkmode #ddt-file-languages .ddt-language-retry:hover,
.darkmode #ddt-file-languages .ddt-language-retry:focus {
    color: var(--red);
}

.darkmode .language-dropdown-list-section {
    background: var(--light-slate-brown-v2);
    border-color: var(--light-brown);
    color: var(--white);
}

.darkmode .language-dropdown-list-section svg path {
    stroke: var(--white);
}

.darkmode .file-language-list-container .language-label {
    color: var(--white);
}

.darkmode .file-language-list-container svg path {
    stroke: var(--white);
}

/* --- Chat & File Translate Popup shared elements --- */
.darkmode .fileTranslator .translator-body-section,
.darkmode .fileTranslator .support-language-section {
    background: var(--popup);
}

.darkmode .support-label {
    color: var(--white) !important;
}

.darkmode .subtitle-label {
    color: var(--dark-white) !important;
}

.darkmode .notification {
    background-color: transparent;
    border: none;
}


.darkmode .jiraSiteModalCard {
    background: var(--popup);
    box-shadow: 0 8px 32px rgb(from var(--color-text-primary) r g b / 50%);
}
.darkmode .jiraSiteModalTitle,
.darkmode .jiraSiteModalSiteName {
    color: var(--white);
}
.darkmode .jiraSiteModalSubtitle {
    color: var(--dark-gray);
}
.darkmode .jiraSiteModalItem:hover {
    background: var(--light-slate-brown-v2);
}

/* Header */
.darkmode .jiraSiteHeaderName {
    color: var(--white);
}

/* Task list header & rows */
.darkmode .jiraTaskKeyBadge {
    color: var(--white);
}
.darkmode .crmTicketListingHeader.jiraMyTasksHeader {
    border-bottom-color: var(--light-brown);
}
.darkmode .jiraColTaskName,
.darkmode .jiraColReporter,
.darkmode .jiraColStatus,
.darkmode .jiraColDueDate,
.darkmode .jiraColAssignee,
.darkmode .jiraColPriority {
    color: var(--dark-gray);
}
.darkmode .crmTicketListingWrap.jiraTaskRow {
    border-bottom-color: var(--light-brown);
}
.darkmode .crmTicketListingWrap.jiraTaskRow:hover {
    background: var(--light-slate-brown-v2);
}
.darkmode .jiraTaskTitleText {
    color: var(--white);
}
.darkmode .jiraTaskReporterCell,
.darkmode .jiraTaskDueDateCell {
    color: var(--white);
}
.darkmode .jiraPriorityWrap {
    color: var(--white);
}

/* Status badge — To-Do needs border color update in dark */
.darkmode .jiraStatus-to-do,
.darkmode .jiraStatus-todo {
    color: var(--dark-gray);
    border-color: var(--light-brown);
}

/* Task Detail Sidebar */
.darkmode .jiraDetailHeader {
    border-bottom-color: var(--light-brown);
}
.darkmode .jiraDetailKeyBadge {
    color: var(--dark-gray);
}
.darkmode .jiraDetailLabel {
    color: var(--dark-gray);
}
.darkmode .jiraDetailProjectKey {
    color: var(--white);
}
.darkmode .jiraDetailValue {
    color: var(--white);
}
.darkmode .jiraDetailRow {
    border-bottom-color: var(--light-brown);
}

/* Sub Tasks Table */
.darkmode .jiraSubTaskTable {
    border-color: var(--light-brown);
}
.darkmode .jiraSubTaskTable th {
    background: var(--light-slate-brown-v2);
    color: var(--dark-gray);
    border-bottom-color: var(--light-brown);
    border-right-color: var(--light-brown);
}
.darkmode .jiraSubTaskTable td {
    color: var(--white);
    border-bottom-color: var(--light-brown);
    border-right-color: var(--light-brown);
}
.darkmode .jiraSubTaskWorkKey {
    color: var(--color-info);
}

/* Description & Attachments */
.darkmode .jiraDetailDescSection {
    border-bottom-color: var(--light-brown);
}
.darkmode .jiraDetailDescLabel {
    color: var(--dark-gray);
}
.darkmode .jiraDetailDescText {
    color: var(--white);
}
.darkmode .jiraDetailDescText blockquote {
    border-left-color: var(--light-brown);
    color: var(--dark-gray);
}
.darkmode .jiraDetailDescText pre {
    background: var(--light-slate-brown-v2);
}
.darkmode .jiraDetailDescText th,
.darkmode .jiraDetailDescText td {
    border-color: var(--light-brown);
}
.darkmode .jiraDetailDescText a {
    color: var(--color-info);
}
.darkmode .jiraDetailAttachmentsSection {
    border-bottom-color: var(--light-brown);
}
.darkmode .jiraAttachmentChip {
    background: var(--light-slate-brown-v2);
    border-color: var(--light-brown);
    color: var(--white);
}
.darkmode .jiraAttachmentChip:hover {
    background: var(--dropdown);
    color: var(--white);
}
.darkmode .jiraAttachmentChip svg {
    color: var(--dark-gray);
}

/* Timestamps */
.darkmode .jiraDetailTimestamp {
    color: var(--dark-gray);
}

/* Activity */
.darkmode .jiraActivityItem {
    border-bottom-color: var(--light-brown);
}
.darkmode .jiraActivityAvatar {
    background: var(--light-slate-brown-v2);
    color: var(--white);
}
.darkmode .jiraActivityText {
    color: var(--white);
}
.darkmode .jiraActivityTime {
    color: var(--dark-gray);
}
.darkmode .jiraActivityTypeBadge,
.darkmode .jiraTypeBadge-history,
.darkmode .jiraTypeBadge-comments {
    background: var(--light-slate-brown-v2);
    border-color: var(--light-brown);
    color: var(--dark-gray);
}
.darkmode .jiraActivityArrow {
    filter: invert(1);
}
.darkmode .jiraActivityChange {
    color: var(--dark-gray);
}
.darkmode .jiraActivityChangeVal {
    background: var(--light-slate-brown-v2);
    border-color: var(--light-brown);
    color: var(--dark-gray);
}
.darkmode .jiraChangeAssignee {
    color: var(--dark-gray);
}
.darkmode .jiraChangeAvatar {
    background: var(--light-slate-brown-v2);
    color: var(--white);
}
.darkmode .jiraActivityComment {
    color: var(--dark-gray);
}

/* Project Section */
.darkmode .jiraProjectDetailTitle {
    color: var(--white);
}
.darkmode .jiraProjectTab {
    color: var(--dark-gray);
}
.darkmode .jiraProjectTab:hover {
    color: var(--white);
}
.darkmode .crmTicketListingHeader.jiraProjectTasksHeader {
    border-bottom-color: var(--light-brown);
}
.darkmode .jiraProjectTaskRow {
    border-bottom-color: var(--light-brown);
}
.darkmode .jiraProjectTaskRow:hover {
    background: var(--light-slate-brown-v2);
}
.darkmode .jiraSubtaskRow {
    background: var(--light-slate-black-v2);
}
.darkmode .jiraSubtaskRow:hover {
    background: var(--light-slate-brown-v2);
}
.darkmode .jiraProjectExpandArrow img {
    filter: invert(1);
}
.darkmode .jiraProjectExpandArrow:hover {
    background: var(--light-slate-brown-v2);
}

/* Project Overview — Stat Cards */
.darkmode .jiraStatCard {
    background: var(--popup);
    border-color: var(--light-brown);
}
.darkmode .jiraStatCardIcon {
    background: var(--light-slate-brown-v2);
    color: var(--dark-gray);
}
.darkmode .jiraStatCardIcon img {
    filter: invert(1);
}
.darkmode .jiraStatCardTitle,
.darkmode .jiraStatCardValue {
    color: var(--white);
}
.darkmode .jiraStatCardLabel {
    color: var(--dark-gray);
}

/* Project Overview — Sections */
.darkmode .jiraOverviewSection {
    background: var(--popup);
    border-color: var(--light-brown);
}
.darkmode .jiraOverviewSectionTitle {
    color: var(--white);
}
.darkmode .jiraOverviewSectionSubtitle {
    color: var(--dark-gray);
}
.darkmode .jiraStatusApexChart .apexcharts-datalabel-label,
.darkmode .jiraStatusApexChart .apexcharts-datalabel-value {
    fill: var(--white) !important;
}
.darkmode .jiraPriorityApexChart .apexcharts-xaxis-label text,
.darkmode .jiraPriorityApexChart .apexcharts-yaxis-label text,
.darkmode .jiraPriorityApexChart .apexcharts-text {
    fill: var(--white) !important;
}
.darkmode .jiraStatusLegendItem {
    color: var(--white);
}

/* Project Overview — Types / Team table */
.darkmode .jiraOverviewTableHeader {
    color: var(--dark-gray);
}
.darkmode .jiraOverviewTypeText {
    color: var(--white);
}
.darkmode .jiraOverviewTableRow:hover {
    background: var(--light-slate-brown-v2);
}
.darkmode .jiraOverviewTableRow:hover .jiraOverviewTypeText {
    color: var(--white);
}
.darkmode .jiraOverviewProgressTrack {
    background: var(--light-slate-brown-v2);
}
.darkmode .jiraOverviewNoData {
    color: var(--dark-gray);
}

/* Description in task rows */
.darkmode .jiraTaskDescription {
    color: var(--white);
}
.darkmode .jiraTaskDescription h1,
.darkmode .jiraTaskDescription h2,
.darkmode .jiraTaskDescription h3,
.darkmode .jiraTaskDescription h4,
.darkmode .jiraTaskDescription h5,
.darkmode .jiraTaskDescription h6 {
    color: var(--white);
}

/* ============================================================
   FINAL DARK MODE CLEANUP
   High-specificity overrides for component-level light styles.
   ============================================================ */

/* Categories modal */
.darkmode #categoryManagementPopup .categoryMgmtModal,
.darkmode #categoryManagementPopup .new-teamSection,
.darkmode #categoryManagementPopup .cmStep,
.darkmode #categoryManagementPopup .cmHeader,
.darkmode #categoryManagementPopup .cmBody,
.darkmode #categoryManagementPopup .cmFooter,
.darkmode #categoryManagementPopup .cmGroupPanel,
.darkmode #categoryManagementPopup .cmEmpty,
.darkmode #categoryManagementPopup .cmCatDropdown,
.darkmode #categoryManagementPopup .cmLoading {
    background: var(--popup) !important;
    color: var(--white) !important;
    border-color: var(--light-brown) !important;
}

.darkmode #categoryManagementPopup .cmCreateSectionTitle,
.darkmode #categoryManagementPopup .cmHeaderTitle,
.darkmode #categoryManagementPopup .cmSectionTitle,
.darkmode #categoryManagementPopup .cmFooterText,
.darkmode #categoryManagementPopup .cmCatName,
.darkmode #categoryManagementPopup .cmGroupName,
.darkmode #categoryManagementPopup .cmCheckbox,
.darkmode #categoryManagementPopup .cmCountText,
.darkmode #categoryManagementPopup .cmToggle.cmAssigned,
.darkmode #categoryManagementPopup .cmToggle.cmUnassigned,
.darkmode #categoryManagementPopup .cmInlineError {
    color: var(--white) !important;
}

.darkmode #categoryManagementPopup .cmInput,
.darkmode #categoryManagementPopup .cmRenameInput,
.darkmode #categoryManagementPopup .cmHeaderInput {
    background: var(--light-slate-brown-v2) !important;
    color: var(--white) !important;
    border-color: var(--light-brown) !important;
}

.darkmode #categoryManagementPopup .cmInput::placeholder,
.darkmode #categoryManagementPopup .cmRenameInput::placeholder,
.darkmode #categoryManagementPopup .cmHeaderInput::placeholder {
    color: var(--dark-gray) !important;
}

.darkmode #categoryManagementPopup .cmDivider,
.darkmode #categoryManagementPopup .cmHeader,
.darkmode #categoryManagementPopup .cmFooter,
.darkmode #categoryManagementPopup .cmGroupRow,
.darkmode #categoryManagementPopup .cmSkeletonRow {
    border-color: var(--light-brown) !important;
}

.darkmode #categoryManagementPopup .cmCatItem:hover,
.darkmode #categoryManagementPopup .cmCatItem.cmActive,
.darkmode #categoryManagementPopup .cmGroupRow:hover,
.darkmode #categoryManagementPopup .cmCatDropItem:hover,
.darkmode #categoryManagementPopup .cmNameEditBtn:hover,
.darkmode #categoryManagementPopup .cmNameSaveBtn:hover,
.darkmode #categoryManagementPopup .cmNameCancelBtn:hover,
.darkmode #categoryManagementPopup .cmRenameConfirm:hover,
.darkmode #categoryManagementPopup .cmRenameCancel:hover {
    background: var(--light-slate-brown-v2) !important;
    color: var(--white) !important;
}

.darkmode #categoryManagementPopup .cmCatIcon,
.darkmode #categoryManagementPopup .cmCatCount,
.darkmode #categoryManagementPopup .cmNameSaveBtn,
.darkmode #categoryManagementPopup .cmNameCancelBtn,
.darkmode #categoryManagementPopup .cmRenameConfirm,
.darkmode #categoryManagementPopup .cmRenameCancel {
    background: var(--light-slate-brown-v2) !important;
    color: var(--white) !important;
    border-color: var(--light-brown) !important;
}

.darkmode #categoryManagementPopup .cmCatDropdown,
.darkmode #categoryManagementPopup .cmCatDropItem,
.darkmode #categoryManagementPopup .cmRenameInput {
    color: var(--white) !important;
}

.darkmode #categoryManagementPopup .cmHeaderIcon,
.darkmode #categoryManagementPopup .cmCloseBtn img,
.darkmode #categoryManagementPopup .cmBackBtn img,
.darkmode #categoryManagementPopup .cmNameEditBtn img,
.darkmode #categoryManagementPopup .cmCatIcon img,
.darkmode #categoryManagementPopup .cmGroupWarnIcon img,
.darkmode #categoryManagementPopup .cmCatDots img {
    filter: brightness(0) saturate(100%) invert(100%) !important;
    opacity: 1 !important;
}

.darkmode .category-section:hover{
        background-color: var(--light-slate-brown-v2) !important;
    color: var(--white);
}

.darkmode #categoryManagementPopup .cmSkeletonItem,
.darkmode #categoryManagementPopup .cmSkeletonAvatar,
.darkmode #categoryManagementPopup .cmSkeletonLine,
.darkmode #categoryManagementPopup .cmSkeletonPill,
.darkmode #categoryManagementPopup .cmSkeletonRow {
    background: linear-gradient(90deg, var(--popup) 25%, var(--light-slate-brown-v2) 50%, var(--popup) 75%) !important;
    background-size: 200% 100% !important;
}

/* ── MelpSkeleton dark mode overrides ──
   Covers: team, topic, group, message, call, contact, meeting skeleton rows.
   Colors match the Global Search dark mode skeleton (var(--light-slate-black-v2) surface, var(--popup)/var(--color-text-secondary) shimmer). */
.darkmode .melp-skeleton-container {
    background: var(--light-slate-black-v2);
}

.darkmode .melp-sk-team-row,
.darkmode .melp-sk-group-row,
.darkmode .melp-sk-meeting-row {
    background: var(--light-slate-black-v2);
    border-bottom-color: var(--popup);
}

.darkmode .melp-skeleton {
    background: linear-gradient(90deg, var(--popup) 25%, var(--light-slate-brown-v2) 50%, var(--popup) 75%);
    background-size: 200% 100%;
}

.darkmode .dropdown-menu-file-dashboard {
    background-color: var(--light-slate-brown-v2);
    color: var(--color-text-inverse);
}

.darkmode .dropdown-menu-file-dashboard li:hover {
    color: var(--color-text-inverse);
    background: var(--light-black-v2);
}

.darkmode .dropdown-menu-file-dashboard li svg {
    fill: var(--dark-white) !important;
}

.darkmode .dropdown-menu-file-dashboard li svg:hover {
     fill: var(--dark-white) !important;
}
.darkmode .meeting-popup-section #quillMeetingEditor .ql-editor{
    background-color: var(--light-slate-brown-v2) !important;
    color: var(--color-text-inverse) !important;
}

.darkmode .ql-snow * {
    box-sizing: border-box;
    color: var(--color-text-inverse);
}

.darkmode #emailChatPopup #fromDate,
.darkmode #emailChatPopup #toDate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='%23ffffff' fill-rule='evenodd'%3E%3Cpath d='M2 14h12V5H2v9zM15 2h-2V0h-3v2H6V0H3v2H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z'/%3E%3Cpath d='M4 9h2V7H4zM7 9h2V7H7zM4 12h2v-2H4zM7 12h2v-2H7zM10 9h2V7h-2zM10 12h2v-2h-2z'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-position-x: 98% !important;
}

.darkmode .fileViewPopup1{
    background-color: var(--light-black-v2);
    border-left: 0.1rem solid var(--light-brown);
    box-shadow: -0.3rem 0 0.4rem 0 var(--color-text-primary);
}

/* Nav rows (css/design-system/components.css) colour their hover/active state
   from --color-background. Dark mode is driven by this .darkmode class rather
   than the html.dark selector tokens.css overrides, so that variable still
   resolves to its light value here — these rules supply the dark equivalent. */
.darkmode .mui-nav-item:hover,
.darkmode .mui-nav-item.active,
.darkmode .nav-item:hover {
    background-color: var(--black);
    color: var(--white);
}

/* Nav icons are white in dark mode. Both icon systems are coloured from --brown
   at rest in the light sheets (components.css `.mui-nav .mui-nav-item__icon
   .mui-icon` and svg-states.css `.nav-icon .material-symbols-outlined`), which is
   all but invisible against the dark sidebar. Inline-SVG glyphs paint from
   currentColor, so they follow these rules for free. */
.darkmode .mui-nav .mui-nav-item__icon .mui-icon,
.darkmode .nav-icon .material-symbols-outlined,
.darkmode .mui-nav .mui-nav-item:hover .mui-nav-item__icon .mui-icon,
.darkmode .mui-nav .mui-nav-item.active .mui-nav-item__icon .mui-icon,
.darkmode .nav-item:hover .nav-icon .material-symbols-outlined,
.darkmode .nav-item.active .nav-icon .material-symbols-outlined {
    color: var(--white);
}

/* Dropdown chevrons are icons too, and are set from --brown at (0,4,0) in
   components.css — this needs the extra .mui-nav to outweigh it. */
.darkmode .mui-nav.mui-nav .mui-nav-item .mui-nav-item__chevron {
    color: var(--white);
}

/* The component's label has no dark-mode colour of its own — `.darkmode
   .nav-title` (newdashboard.css) only covers the legacy markup — so the row text
   would stay --brown next to a white icon. */
.darkmode .mui-nav-item,
.darkmode .mui-nav-item .mui-nav-item__label {
    color: var(--white);
}