@import '../variable.css';

body.darkMode {
    background: var(--primary-black-darkest) !important;
}

/* for header */

body.darkMode .maxlife-header-navbar {
    background: var(--primary-black) !important;
}

body.darkMode .maxlife-header-navbar .searchInput,
body.darkMode .searchCollapse .searchInputResponsive {
    background: var(--primary-black-darkest) !important;
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-header-navbar .searching-img {
    background: var(--primary-black-darkest) !important;
}

body.darkMode .maxlife-header-navbar .toggleModeSwitch:before {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(40px);
}

body.darkMode .maxlife-header-navbar .searchInput::placeholder {
    color: var(--secondary-gray-darkest) !important;
}

body.darkMode .maxlife-sidebar .sidemenuText {
    color: var(--secondary-gray-darkest) !important;
}

body.darkMode .light-mode {
    display: none;
}

.light-mode {
    display: inline;
}

body.darkMode .dark-mode {
    display: inline;
}

.dark-mode {
    display: none;
}

body.darkMode .maxlife-header-navbar .user-profile-dropdown .profileDropdownMenu {
    background: var(--primary-black-darkest) !important;
}

body.darkMode .maxlife-header-navbar .user-profile-dropdown .dropdown-item,
body.darkMode .maxlife-header-navbar .user-profile-dropdown .username-text {
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-header-navbar .user-profile-dropdown .dropdown-item:hover {
    color: var(--primary-black-dark) !important;
}

body.darkMode .maxlife-header-navbar .user-profile-dropdown .dropdown-item.disabled {
    color: var(--secondary-gray-darkest) !important;
}

/* for sidebar */

body.darkMode .sidebar.show .sidebar-logoImg {
    display: none !important;
}

.sidebar.show .dark-sidebar-logoImg {
    display: none !important;
}

.maxlife-sidebar.sidebar .dark-sidebar-logoImg {
    display: none;
}

body.darkMode .maxlife-sidebar {
    background: var(--primary-black);
    border-right: 1px solid var(--primary-black-light);
    box-shadow: 0px 52px 218px rgba(0, 0, 0, 0.04), 0px 11.6149px 48.6932px rgba(0, 0, 0, 0.0238443), 0px 3.45805px 14.4972px rgba(0, 0, 0, 0.0161557);
}

body.darkMode .sidebar.show .dark-mode {
    display: inline-block !important;
}

body.darkMode .sidebar.show .light-mode {
    display: none !important;
}

body.darkMode .maxlife-sidebar .sidemenuIcon:hover .dark-mode,
body.darkMode .maxlife-sidebar .sidemenuIcon:active .dark-mode,
body.darkMode .maxlife-sidebar .sidemenuIcon.active .dark-mode {
    display: none !important;
}

body.darkMode .maxlife-sidebar .sidemenuIcon.active,
body.darkMode .maxlife-sidebar .sidemenuIcon:hover {
    background: var(--primary-blue-darkest) !important;
}

@media only screen and (max-width:1024.98px) {
    body.darkMode .sidebar.show .dark-sidebar-logoImg {
        display: none !important;
    }
}

@media only screen and (min-width:1025px) {
    body.darkMode .sidebar.show .dark-sidebar-logoImg {
        margin: auto;
        display: inline-block !important;
        pointer-events: none;
        width: 175px;
    }
}

/* for client-list.component */

body.darkMode .maxlife-page {
    color: var(--primary-white);
}

body.darkMode .maxlife-clientlist .searchInput,
body.darkMode .maxlife-clientlist .searching-img {
    background: var(--primary-black) !important;
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-pageTitle .pageTitleName,
body.darkMode .clientsListTable .table td,
body.darkMode .maxlife-clientlist .specificationDropdown .specificationDropdownbtn {
    color: var(--primary-white) !important;
}

body.darkMode .clientsListTable .table td {
    border-color: var(--primary-black-light);
    background-color: var(--primary-black-darkest) !important;
}

body.darkMode .specificationDropdownMenu {
    background: var(--primary-black) !important;
}

body.darkMode .dropdown-item {
    color: var(--primary-white) !important;
}

body.darkMode .dropdown-item:hover {
    background-color: var(--primary-black-darkest) !important;
}


/* for coach-detail.component */
body.darkMode .maxlife-page .sortBy,
body.darkMode .maxlife-page .cardDropdown {
    color: var(--secondary-gray-darkest) !important;
}

body.darkMode .profileSection .profileName,
body.darkMode .maxlife-page .maxlife-page-content .head,
body.darkMode .maxlife-page .maxlife-page-content .dreamSortBy,
body.darkMode .otherInformationSection .joiningInfo .infoText,
body.darkMode .otherInformationSection .planInfo .infoText,
body.darkMode .clientHeading,
body.darkMode .modalText {
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-coachDetail .searchInput,
body.darkMode .maxlife-coachDetail .searching-img {
    background: var(--primary-black) !important;
    color: var(--primary-white) !important;
}

body.darkMode .profileSection .btnSection .sendMessageBtn {
    color: var(--primary-white) !important;
    border: 1px solid var(--primary-white) !important;
}

body.darkMode .profileSection .btnSection .sendMessageBtn:hover {
    background: var(--primary-blue-darkest) !important;
    border: 1px solid transparent !important;
}

body.darkMode .messageDropdownMenu {
    background: var(--primary-black) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .sortByDropdown.active {
    background: transparent !important;
}

body.darkMode .maxlife-page .maxlife-page-content .sortByDropdownBtn::after {
    content: url(../../images/darkmode-dreamboard-arrow-down.svg) !important;
}

/* for audio-playlist.component */
body.darkMode .maxlife-videoPlaylist .playlistSection .playlistCard,
body.darkMode .maxlife-audioPlaylist .playlistSection .playlistCard {
    background: var(--primary-black) !important;
}


body.darkMode .maxlife-videoPlaylist .playlistSection .playlistCard .contentDiv .card-text,
body.darkMode .maxlife-videoPlaylist .playlistSection .playlistCard .contentDiv .readMorelessLink,
body.darkMode .maxlife-videoPlaylist .playlistSection .noPlaylistInfo,
body.darkMode .maxlife-videoPlaylist .playlistSection .playlistCard .contentDiv .card-title,
body.darkMode .maxlife-audioPlaylist .playlistSection .playlistCard .contentDiv .card-title,
body.darkMode .maxlife-audioPlaylist .playlistSection .playlistCard .contentDiv .card-text,
body.darkMode .maxlife-audioPlaylist .playlistSection .playlistCard .contentDiv .readMorelessLink,
body.darkMode .maxlife-audioPlaylist .playlistSection .noPlaylistInfo {
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-videoPlaylist .playlistSection .playlistCard .contentDiv .readMorelessLink:hover,
body.darkMode .maxlife-audioPlaylist .playlistSection .playlistCard .contentDiv .readMorelessLink:hover {
    color: var(--primary-blue-darkest);
}

body.darkMode .maxlife-videoPlaylist .playlistSection .playlistCard .contentDiv .playLectureBtn,
body.darkMode .maxlife-audioPlaylist .playlistSection .playlistCard .contentDiv .playLectureBtn {
    border: 1px solid transparent !important;
    background: var(--primary-blue-darkest) !important;
}

body.darkMode .maxlife-videoPlaylist .playlistSection .playlistCard .contentDiv .playLectureBtn:hover,
body.darkMode .maxlife-audioPlaylist .playlistSection .playlistCard .contentDiv .playLectureBtn:hover {
    background: var(--secondary-blue) !important;
    border: 1px solid transparent !important;
}

/* for add-audio-playlist.component */
body.darkMode .maxlife-add-new-book .addPlaylistBtn,
body.darkMode .maxlife-add-audio-playlist .addPlaylistBtn {
    border: 1px solid transparent !important;
    background: var(--primary-blue-darkest) !important;
}

body.darkMode .maxlife-add-new-book .addPlaylistBtn:hover,
body.darkMode .maxlife-add-audio-playlist .addPlaylistBtn:hover {
    background: var(--secondary-blue) !important;
    border: 1px solid transparent !important;
}

/* for modal */
body.darkMode .modal-content {
    background: var(--primary-black) !important;
    color: var(--primary-white) !important;
}

body.darkMode .modal-content .modal-body .modal-title,
body.darkMode .addPlaylistModal .modal-content .modal-body .infoText,
body.darkMode .modal-content .modal-header .modal-title {
    color: var(--primary-white) !important;
}

body.darkMode .addPlaylistModal .modal-content .modal-body .playlist-form-input {
    background: var(--primary-black-darkest) !important;
    color: var(--primary-white) !important;
}

body.darkMode .deleteConfirmationModal .modal-content .modal-body,
body.darkMode .addPlaylistModal .modal-content .modal-body .playlist-form-input::placeholder,
body.darkMode .addPlaylistModal .modal-content .modal-body .playlist-form-input::-ms-input-placeholder,
body.darkMode .addPlaylistModal .modal-content .modal-body .playlist-form-input:-ms-input-placeholder {
    color: var(--primary-white) !important;
}

body.darkMode .goalAdd .savebtn,
body.darkMode .saveBtn {
    border: 1px solid transparent !important;
    background: var(--primary-blue-darkest) !important;
}

body.darkMode .goalAdd .savebtn:hover,
body.darkMode .saveBtn:hover {
    background: var(--secondary-blue) !important;
    border: 1px solid transparent !important;
}

body.darkMode .goalAdd .addChecklist {
    color: var(--primary-blue-darkest) !important;
}

body.darkMode .goalAdd .addChecklist:hover {
    color: var(--primary-white) !important;
}

body.drakMode .messageList .useitBtn {
    background-color: var(--primary-blue-darkest) !important;
}

body.darkMode .message-options {
    background-color: var(--primary-black-darkest) !important
}

body.darkMode .message-options .paragraph {
    background-color: #323336 !important;
    border-color: #323336 !important;
}

body.darkMode .message-options .selected-message {
    border-color: var(--primary-blue-darkest) !important;
}

body.darkMode .generate-thubnail-image-icon {
    border-color: var(--primary-blue-darkest) !important;
}

body.darkMode .generate-thubnail-image-icon:hover {
    background-color: var(--primary-blue-darkest) !important;
}

body.darkMode .generate-ai-response-btn {
    border-color: var(--primary-blue-darkest) !important;
}

body.darkMode .generate-ai-response-btn:hover {
    background-color: var(--primary-blue-darkest) !important;
}

body.darkMode .spinner>div {
    background-color: var(--primary-blue-darkest) !important;
}

body.darkMode .goalAdd .spinner>div {
    background-color: var(--primary-white) !important;
}

body.darkMode .ask-again-btn:hover {
    color: var(--primary-blue-darkest) !important;
}

body.darkMode .ask-again-btn {
    color: var(--primary-white) !important;
}

body.darkMode .cancelBtn {
    border-color: var(--primary-blue-darkest) !important;
    color: var(--primary-blue-darkest) !important;
}

body.darkMode .cancelBtn:hover {
    background: var(--primary-blue-darkest) !important;
    color: var(--primary-white) !important;
}

body.darkMode th {
    border-color: var(--primary-black-light);
    background-color: var(--primary-black-darkest) !important;
}

/* for audio-lectures-playlist.component */

body.darkMode .maxlife-lecturePlaylist .lecturePlaylistSection .lectureCard {
    background: var(--primary-black) !important;
}

body.darkMode .maxlife-lecturePlaylist .lecturePlaylistSection .lectureCard .contentDiv .card-title,
body.darkMode .maxlife-lecturePlaylist .lecturePlaylistSection .lectureCard .contentDiv .card-text,
body.darkMode .maxlife-lecturePlaylist .lecturePlaylistSection .lectureCard .contentDiv .readMorelessLink,
body.darkMode .maxlife-lecturePlaylist .playAudioSection .audioCard .audioText {
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-lecturePlaylist .playAudioSection {
    background: var(--secondary-black) !important;
    box-shadow: none !important;
}

body.darkMode .maxlife-add-video-lecture .addLectureBtn,
body.darkMode .maxlife-add-audio-lecture .addLectureBtn {
    border: 1px solid transparent !important;
    background: var(--primary-blue-darkest) !important;
}

body.darkMode .maxlife-add-video-lecture .addLectureBtn:hover,
body.darkMode .maxlife-add-audio-lecture .addLectureBtn:hover {
    background: var(--secondary-blue) !important;
    border: 1px solid transparent !important;
}

body.darkMode .maxlife-lecturePlaylist .lecturePlaylistSection .lectureCard .contentDiv .playLectureBtn {
    background: var(--primary-blue-darkest) !important;
    border: 1px solid transparent !important;
}

body.darkMode .maxlife-lecturePlaylist .lecturePlaylistSection .lectureCard .contentDiv .playLectureBtn:hover {
    background: var(--secondary-blue) !important;
    border: 1px solid transparent !important;
}

/* client-detail.component */


/* account settings */
body.darkMode .maxlife-page .maxlife-page-content .maxlife-account-details .informationSection .account-form-input {
    background: var(--primary-black) !important;
    border: none !important;
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-account-details .informationSection .account-form-input::placeholder {
    background: var(--primary-black) !important;
    border: none !important;
    color: var(--secondary-gray-darkest) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-account-details .informationSection .infoTitle {
    color: var(--primary-white) !important;
}


/* goal */

body.darkMode .maxlife-page,
body.darkMode .accordion-body,
body.darkMode .accordion-button,
body.darkMode .accordion-item {
    background: var(--primary-black-darkest) !important;
}

body.darkMode .maxlife-clientDetail .pageInfoText,
body.darkMode .maxlife-clientDetail.tab-nav-link.active,
body.darkMode .maxlife-clientDetail .goalProfile,
body.darkMode .maxlife-clientDetail .goalAccordion,
body.darkMode .goalByCategoryCol .goalHead,
body.darkMode .goalByCategoryCol .goalTimeHead,
body.darkMode .maxlife-clientDetail .strikethrough,
body.darkMode .goalDetail .strikethrough,
body.darkMode .maxlife-clientDetail .createGoal,
body.darkMode .maxlife-clientDetail .noCoach,
body.darkMode .noDataInfo,
body.darkMode .goalDetail .goalProfile {
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-clientDetail .goalCard1.pinnedCard {
    background: var(--secondary-black) !important;
    border: 1px solid var(--primary-black-light) !important;
    border-radius: 6px !important;
}

body.darkMode .maxlife-clientDetail .goalCard1.unpinnedCard {
    background: var(--primary-black) !important;
    border: 1px solid var(--primary-black-light) !important;
    border-radius: 6px !important;
}

body.darkMode .maxlife-clientDetail .tab-nav-link.active {
    border-bottom: 0.1rem solid var(--primary-white) !important;
}

body.darkMode .maxlife-clientDetail .switch-tab-ul {
    border-bottom: 1px solid var(--primary-black-light) !important;
}

body.darkMode .maxlife-clientDetail .tab-nav-link.active .countBadge {
    background: var(--primary-blue-darkest) !important;
}

body.darkMode .maxlife-clientDetail .countBadge {
    background: var(--primary-black);
}

body.darkMode .maxlife-clientDetail .goalCardCreate {
    background: var(--primary-black) !important;
    border: 2px dashed var(--primary-black-light) !important;
    border-radius: 6px;
}

body.darkMode .maxlife-clientDetail .goalProfileCoach,
body.darkMode .maxlife-clientDetail .goalTime,
body.darkMode .goalByCategoryCol .goalTime body.darkMode .maxlife-clientDetail input[type=checkbox]:checked+.strikethrough,
body.darkMode .goalDetail .goalTimeActive {
    color: var(--secondary-gray-darkest) !important;
}

body.darkMode .maxlife-clientDetail .goalNo {
    background: var(--primary-black) !important;
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-clientDetail .goalCard3 {
    background: var(--primary-black) !important;
    border: 2px dashed var(--primary-black-light) !important;
}

.maxlife-clientDetail .goalAccordionItem {
    border-bottom: 1px solid var(--secondary-gray-dark) !important;
}

body.darkMode .maxlife-clientDetail .goalAccordionItem {
    border-bottom: 1px solid var(--primary-black-light) !important;
}

body.darkMode .maxlife-clientDetail .goalDot,
body.darkMode .goalByCategoryCol .goalDot,
body.darkMode .goalByCategoryCol .goalPin,
body.darkMode .maxlife-clientDetail .goalPin {
    background: var(--primary-black-light) !important;
}

body.darkMode .maxlife-clientDetail .checkboxInput:checked~.checkmark,
body.darkMode .goalChecklist {
    background: var(--primary-blue-darkest) !important;
    border: none !important;
}

body.darkMode .maxlife-clientDetail .checkboxInput~.checkmark,
body.darkMode .goalChecklist {
    border: 1px solid var(--secondary-gray-darkest) !important;
}

body.darkMode .goalDropdownMenu {
    background: var(--primary-black-light) !important;
    box-shadow: 0px 52px 218px rgba(0, 0, 0, 0.15), 0px 11.6149px 48.6932px rgba(0, 0, 0, 0.0238443), 0px 3.45805px 14.4972px rgba(0, 0, 0, 0.0161557) !important;
}

body.darkMode .goalAdd .saveBtn {
    background: var(--primary-blue-darkest) !important;
    border: 1px solid transparent !important;
}

body.darkMode .goalAdd .saveBtn:hover {
    background: var(--secondary-blue) !important;
    border: 1px solid transparent !important;
}

body.darkMode .goalAdd .cancelBtn,
body.darkMode .goalAdd .addChecklist {
    border: 1px solid var(--primary-blue-darkest) !important;
}

body.darkMode .goalAdd .cancelBtn:hover,
body.darkMode .goalAdd .addChecklist:hover {
    background: var(--primary-blue-darkest) !important;
    border: 1px solid transparent !important;
}

body.darkMode .goalAdd .checkboxInput:checked~.checkmark,
body.darkMode .goalAdd .goalChecklist {
    background: var(--primary-blue-darkest) !important;
    border: none !important;
}

body.darkMode .goalAdd .checkboxInput~.checkmark,
body.darkMode .goalAdd .goalChecklist {
    border: 1px solid var(--secondary-gray-darkest) !important;
}

body.darkMode .maxlife-clientDetail .goalProfile,
body.darkMode .maxlife-clientDetail .goalTimeHeadActive,
body.darkMode .maxlife-clientDetail .goalText,
body.darkMode .maxlife-clientDetail .strikethrough,
body.darkMode .goalByCategoryCol .goalByCategoryColHeadText,
body.darkMode .maxlife-clientDetail .goalHead,
body.darkMode .maxlife-clientDetail .goalTimeHead,
body.darkMode .maxlife-clientDetail .goalActiveHead,
body.darkMode .goalDetail .goalActiveHead,
body.darkMode .goalDetail .goalTimeHeadActive,
body.darkMode .maxlife-clientDetail .tabSection .tab-nav-link.active {
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-clientDetail .goalProfileSpan,
body.darkMode .maxlife-clientDetail .goalTimeActive,
body.darkMode .maxlife-clientDetail input[type=checkbox]:checked+.strikethrough,
body.darkMode .maxlife-clientDetail .goalTime {
    color: var(--secondary-gray-darkest) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .homeContentRow {
    background: var(--primary-black) !important;
    border-right: 1px solid var(--primary-black-light) !important;
}

body.darkMode .maxlife-clientDetail .goalCard {
    background: var(--primary-black-darkest) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalActiveHeadRow {
    background: var(--primary-black) !important;
    border-top: 1px solid var(--primary-black-light) !important;
    box-shadow: 0px 52px 218px rgb(0 0 0 / 4%), 0px 11.6149px 48.6932px rgb(0 0 0 / 2%), 0px 3.45805px 14.4972px rgb(0 0 0 / 2%) !important;
}

body.darkMode .maxlife-clientDetail .checkboxInput:checked~.checkmark,
body.darkMode .goalChecklist,
body.darkMode .addChecklist:hover {
    background: var(--primary-blue-darkest) !important;
    border: none !important;
}

body.darkMode .maxlife-clientDetail .checkboxInput~.checkmark,
body.darkMode .goalChecklist {
    border: 1px solid var(--secondary-gray-darkest) !important;
}

body.darkMode .goalActiveHeadCol {
    background: var(--primary-black-darkest);
}

body.darkMode .maxlife-clientDetail .goalActiveHeadRow {
    background: var(--primary-black-darkest);
}

body.darkMode .goalByCategoryCol .pinnedCard.activeCard,
body.darkMode .goalByCategoryCol .unpinnedCard.activeCard,
body.darkMode .goalByCategoryCol .pinnedCard:hover,
body.darkMode .goalByCategoryCol .unpinnedCard:hover {
    background: var(--primary-gray-dark) !important;
}

body.darkMode .goalByCategoryCol .unpinnedCard {
    background: var(--primary-black-darkest) !important;
    border: 1px solid transparent !important;
}

body.darkMode .goalByCategoryCol .pinnedCard {
    background: var(--secondary-black) !important;
}

body.darkMode .goalDropdownMenu.show {
    background: var(--primary-black-light) !important;
    box-shadow: 0px 52px 218px rgb(0 0 0 / 15%), 0px 11.6149px 48.6932px rgb(0 0 0 / 2%), 0px 3.45805px 14.4972px rgb(0 0 0 / 2%) !important;
}

body.darkMode .maxlife-page .cardDropdown {
    color: var(--secondary-gray-darkest) !important;
}

body.darkMode .maxlife-page {
    background: var(--primary-black-darkest);
}

body.darkMode .goalAdd .goalSelect,
body.darkMode .goalAdd .goalInput {
    background: var(--primary-black-darkest) !important;
    border: 1px solid var(--primary-black-light) !important;
    color: var(--primary-white) !important;
}

body.darkMode .checklistInput {
    background: var(--primary-black-darkest) !important;
    border-bottom: 2px solid var(--secondary-gray-dark) !important;
    color: var(--primary-white) !important;
}

body.darkMode .goalAdd .goalInput::placeholder,
body.darkMode .checklistInput::placeholder {
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-clientDetail .goalSelect {
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 20px;
    background-image: url('../../../images/goal-arrow-down.svg');
}

body.darkMode .newGoal {
    background: var(--primary-black-darkest);
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .tab-nav-link.active {
    border-bottom: 0.1rem solid var(--primary-white) !important;
    color: var(--primary-white) !important;
}

/* delete confirmation modal */

body.darkMode .deleteConfirmationModal .modal-content .modal-body .text-title {
    color: var(--primary-white) !important;
}

body.darkMode .deleteConfirmationModal .modal-content .modal-footer .saveBtn {
    background: var(--primary-blue-darkest) !important;
    border: 1px solid transparent !important;
}

body.darkMode .deleteConfirmationModal .modal-content .modal-footer .saveBtn:hover {
    background: var(--secondary-blue) !important;
    border: 1px solid transparent !important;
}

body.darkMode .deleteConfirmationModal .modal-content .modal-footer .cancelBtn {
    border: 1px solid var(--primary-blue-darkest) !important;
}

body.darkMode .deleteConfirmationModal .modal-content .modal-footer .cancelBtn:hover {
    background: var(--primary-blue-darkest) !important;
    border: 1px solid transparent !important;
}

body.darkMode .deleteConfirmationModal .modal-content {
    background: var(--primary-black) !important;
}

body.darkMode .deleteConfirmationModal .modal-content .modal-header .modal-title {
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-account-details .uploadProfile {
    background: var(--primary-black) !important;
    border: 2px dashed var(--primary-black-light) !important;
}

body.darkMode .maxlife-account-details .editProfile {
    background: var(--primary-blue-darkest) !important;
}

/* chatroom-list component */

body.darkMode .chatroomList .messageText {
    color: var(--secondary-gray-darkest) !important;
}

body.darkMode .chatroomList .searchMessageInput,
body.darkMode .chatroomList .searchMessage {
    background: var(--primary-black-darkest) !important;
    color: var(--primary-white) !important;
}

body.darkMode .chatroomList .defaultCard {
    background: var(--primary-black-darkest) !important;
}

body.darkMode .activeCard,
body.darkMode .chatroomList .defaultCard:hover {
    background: #323336 !important;
}

body.darkMode .chatroomList .searchMessageInput::placeholder {
    color: var(--secondary-gray-darkest) !important;
}

body.darkMode .chatroomList {
    background: var(--primary-black);
}

body.darkMode .maxlife-page .maxlife-page-content .homeContentRow {
    background: var(--primary-black) !important;
}

body.darkMode .chatroomList .messageProfile,
body.darkMode .chatroomList .head {
    color: #ffffff !important;
}

/* message-list component */

body.darkMode .messageList .messageUserName {
    color: var(--primary-white) !important;
}

body.darkMode .messageList .messageTime {
    color: var(--secondary-gray-darkest) !important;
}

body.darkMode .ai-response-add-new-playlist-title,
body.darkMode .ai-response-add-lecture,
body.darkMode .ai-response-add-new-playlist-title,
body.darkMode .messageList .chatInput {
    background: var(--primary-black-darkest) !important;
    color: var(--primary-white) !important;
}

body.darkMode .messageList .receiveMessage {
    background: #1A1B1D !important;
    color: var(--primary-white) !important;
}

body.darkMode .messageList .sendMessage {
    background: var(--primary-blue-darkest) !important;
    color: var(--primary-white) !important;
}

body.darkMode .messageList .messageInput {
    background: #1A1B1D !important;
    box-shadow: none !important;
}

body.darkMode .messageList .chatText {
    background: var(--primary-black-darkest) !important;
}

body.darkMode .messageList .chatDropdown {
    background: #232527 !important;
    box-shadow: 0px 52px 218px rgba(0, 0, 0, 0.15), 0px 11.6149px 48.6932px rgba(0, 0, 0, 0.0238443), 0px 3.45805px 14.4972px rgba(0, 0, 0, 0.0161557) !important;
}


body.darkMode .messageList .chatInput::placeholder {
    color: var(--secondary-gray-darkest) !important;
}

body.darkMode .messageList .chatDropdown .dropdown-item,
body.darkMode .messageList .user1Name {
    color: var(--primary-white) !important;
}

body.darkMode .messageList .dropdown-item:hover {
    color: var(--primary-black-dark) !important;
}

body.darkMode .messageList .userMsgHead {
    border-top: 1px solid #232527 !important;
    background: #1A1B1D !important;
    box-shadow: none !important;
}

body.darkMode .messageList .sendBtn {
    background: var(--primary-blue-darkest) !important;
}

body.darkMode .messageList .messageHeader.active .searchInput,
body.darkMode .messageList .messageHeader.active .searchInput::placeholder {
    color: #ffffff !important;
}

body.darkMode .modalDropdown {
    background: var(--primary-black-darkest) !important;
    border: 1px solid var(--primary-black-light) !important;
    color: #ffffff !important;
    background-image: url(../../images/goal-arrow-down.svg) !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 20px !important;
}

body.darkMode .messageList .messageDate {
    color: #ffffff !important;
    background: #1A1B1D !important;
    box-shadow: none !important;
}

body.darkMode .messageList .modal-content .modal-body .playlist-form-input {
    background: var(--primary-black-darkest) !important;
    color: var(--primary-white) !important;
}

body.darkMode .add-dream-form-input {
    background-color: var(--primary-black-darkest) !important;
    color: var(--primary-white) !important;
    border-color: var(--secondary-gray-darkest) !important;
}

body.darkMode .dragarea {
    background-image: repeating-linear-gradient(0deg, #919294, #919294 5px, transparent 5px, transparent 15px, #919294 15px), repeating-linear-gradient(90deg, #919294, #919294 5px, transparent 5px, transparent 15px, #919294 15px), repeating-linear-gradient(180deg, #919294, #919294 5px, transparent 5px, transparent 15px, #919294 15px), repeating-linear-gradient(270deg, #919294, #919294 5px, transparent 5px, transparent 15px, #919294 15px);
    background-color: var(--primary-black-light) !important;
    color: var(--primary-white) !important;
}

body.darkMode .dragarea .browseFile,
body.darkMode .droparea .browseFile {
    text-decoration: none !important;
    color: var(--primary-blue-darkest) !important;
}

body.darkMode .messageList .modal-content .modal-body .playlist-form-input::placeholder,
body.darkMode .messageList .modal-content .modal-body .playlist-form-input::-ms-input-placeholder,
body.darkMode .messageList .modal-content .modal-body .playlist-form-input:-ms-input-placeholder {
    color: var(--primary-white) !important;
}

body.darkMode .messageList .uploadFileText {
    color: #ffffff !important;
    background: #141416 !important;
}

body.darkMode .messageList .modal-footer {
    background: #1A1B1D !important;
    border-top: 1px solid #232527 !important;
}

body.darkMode .messageList .sendImgFile {
    border: 1px solid #1A1B1D !important;
}

/* attachment list */

body.darkMode .attachmentList .attachmentsHeadDiv {
    box-shadow: 0px 52px 218px rgb(0 0 0 / 4%), 0px 11.6149px 48.6932px rgb(0 0 0 / 2%), 0px 3.45805px 14.4972px rgb(0 0 0 / 2%) !important;
    border-top: 1px solid #232527 !important;
    background: #1A1B1D !important;
}

body.darkMode .nobookinfo,
body.darkMode .nobookInfo,
body.darkMode .attachmentList .attachmentsHead,
body.darkMode .attachmentList .attachmentTime {
    color: #ffffff !important;
}

body.darkMode .attachmentCard {
    background: #141416;
}

body.darkMode .attachmentList .chatDropdown .dropdown-item,
body.darkMode .attachmentList .user1Name {
    color: var(--primary-white) !important;
}

body.darkMode .attachmentList .chatDropdown {
    background: #232527 !important;
    box-shadow: 0px 52px 218px rgba(0, 0, 0, 0.15), 0px 11.6149px 48.6932px rgba(0, 0, 0, 0.0238443), 0px 3.45805px 14.4972px rgba(0, 0, 0, 0.0161557) !important;
}


body.darkMode .messageList .playBtn,
body.darkMode .messageList .pauseBtn,
body.darkMode .messageList .audioPlayBtn,
body.darkMode .messageList .audioPauseBtn,
body.darkMode .attachmentList .audioPlayBtn,
body.darkMode .attachmentList .audioPauseBtn {
    background: var(--primary-blue-darkest) !important;
}

body.darkMode .messageList .audioDiv,
body.darkMode .attachmentList .audioDiv,
body.darkMode .messageList .searchList {
    background: #1A1B1D !important;
}

body.darkMode .audioDivFromHome {
    background: var(--primary-black-darkest) !important;
}

body.darkMode .nouserInfo,
body.darkMode .messageList .searchTime,
body.darkMode .messageList .messageProfile,
body.darkMode .messageList mark {
    color: #FFFFFF !important;
}

body.darkMode .messageList .searchList {
    border-top: 1px solid #232527 !important;
}

body.darkMode .messageList .searchList:hover {
    background: #323336 !important;
}

body.darkMode .maxlife-page .dreamboardDropdownMenu.show {
    background: var(--primary-black-light) !important;
    box-shadow: 0px 52px 218px rgba(0, 0, 0, 0.15), 0px 11.6149px 48.6932px rgba(0, 0, 0, 0.0238443), 0px 3.45805px 14.4972px rgba(0, 0, 0, 0.0161557) !important;
}

/* for playlist-modal */

body.darkMode .addPlaylistModal .modal-content {
    background: var(--primary-black) !important;
}

body.darkMode .addPlaylistModal .modal-content .modal-header .modal-title {
    color: var(--primary-white) !important;
}

body.darkMode .addPlaylistModal .modal-content .modal-footer .cancelBtn:hover {
    background: var(--primary-blue-darkest) !important;
    border: 1px solid transparent !important;
}

body.darkMode .addPlaylistModal .modal-content .modal-footer .saveBtn {
    border: none;
    background: var(--primary-blue-darkest) !important;
}

body.darkMode .use-it-btn {
    border: 1px solid transparent !important;
    background-color: var(--primary-blue-darkest) !important;
}

body.darkMode .messageList .sendBtn:hover {
    background-color: var(--secondary-blue) !important;
}

body.darkMode .use-it-btn:hover,
body.darkMode .addPlaylistModal .modal-content .modal-footer .saveBtn:hover {
    background: var(--secondary-blue) !important;
    border: 1px solid transparent !important;
}

/* for audio lecture upload file radio button */
body.darkMode .maxlife-add-video-lecture .radio-container .check:after,
body.darkMode .maxlife-add-audio-lecture .radio-container .check:after {
    background: var(--primary-blue-darkest);
}

body.darkMode .maxlife-add-video-lecture .check,
body.darkMode .maxlife-add-audio-lecture .check {
    background-color: transparent;
}

body.darkMode .addPlaylistModal .modal-content .modal-body .chunk-select {
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-image: url('../../../../../assets/images/goal-arrow-down.svg') !important;
}

body.darkMode .maxlife-previewpage .text-controler-container {
    background-color: var(--primary-blue-darkest) !important;
}

body.darkMode .maxlife-previewpage .form-check-input:checked {
    background-color: var(--primary-blue-darkest) !important;
    border-color: var(--primary-blue-darkest) !important;
}

body.darkMode .maxlife-book-list .dreamboardImgPage-wrapper {
    border-color: var(--primary-blue-darkest) !important;
}

body.darkMode .maxlife-add-video-lecture .goal-by-select,
body.darkMode .maxlife-add-video-lecture .goal-select,
body.darkMode .maxlife-add-audio-lecture .group-by-select,
body.darkMode .maxlife-add-audio-lecture .goalSelect {
    background: var(--primary-black-darkest) !important;
    border: 1px solid var(--primary-black-light);
    color: #ffffff !important;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 20px;
    background-image: url('../../../images/goal-arrow-down.svg');
}

body.darkMode .dropdown:hover .ask-ai-btn {
    border-color: var(--primary-blue-darkest) !important;
}

body.darkMode .assign-container {
    background-color: #1A1B1D !important;
}

body.darkMode .assign-container .assign-container-header .pageTitle {
    color: var(--primary-white) !important;
}

body.darkMode .assign-container .searching-img,
body.darkMode .assign-container .searchInput {
    background: var(--primary-black-darkest) !important;
    color: var(--primary-white) !important;
}

body.darkMode .dragarea {
    background-image: repeating-linear-gradient(0deg, #919294, #919294 5px, transparent 5px, transparent 15px, #919294 15px), repeating-linear-gradient(90deg, #919294, #919294 5px, transparent 5px, transparent 15px, #919294 15px), repeating-linear-gradient(180deg, #919294, #919294 5px, transparent 5px, transparent 15px, #919294 15px), repeating-linear-gradient(270deg, #919294, #919294 5px, transparent 5px, transparent 15px, #919294 15px);
    background-color: var(--primary-black-light) !important;
    color: var(--primary-white) !important;
}

body.darkMode .dragarea .browseFile,
body.darkMode .droparea .browseFile {
    text-decoration: none !important;
    color: var(--primary-blue-darkest) !important;
}

body.darkMode .dragOver {
    box-shadow: rgb(163 163 163 / 25%) 0px 30px 60px -12px inset, rgb(33 28 28 / 30%) 0px 18px 36px -18px inset !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-dreamboardpage .newDream {
    background: var(--primary-blue-darkest) !important;
    border: 1px solid transparent !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-dreamboardpage .newDream:hover {
    background: var(--secondary-blue) !important;
    border: 1px solid transparent !important;
}

body.darkMode .loader.progress::before {
    background-image: linear-gradient(90deg, hsl(0deg 1.53% 17.98% / 0%), hsl(0deg 0.61% 1.71% / 14%), hsla(0, 0%, 100%, 0)) !important;
}