@import '../variable.css';

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

/* for header */

body.darkMode .maxlife-header-navbar .toggleModeSwitch span:before {
    content: url('../../../../assets/images/moon.svg') !important;
    top: -4px;
    left: -4px;
    transform: scale(1);
    opacity: 1;
    transition: all 0.4s ease;
}

body.darkMode .maxlife-header-navbar #modeSwitch:checked+.toggleModeSwitch span {
    transform: translateX(0px) !important;
}

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 {
    background: 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;
    }
}

/* dreamboard */

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

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

body.darkMode .maxlife-page .maxlife-page-content .maxlife-dreamboardpage .dreamSortBy,
body.darkMode .maxlife-page .maxlife-page-content .head,
body.darkMode .noDreamboardInfo,
body.darkMode .modal-title,
body.darkMode .modalText,
body.darkMode .infoText {
    color: var(--primary-white) !important;
}

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

body.darkMode .nobookInfo,
body.darkMode .dropdown-item,
body.darkMode .maxlife-book-list .specificationDropdown .specificationDropdownbtn {
    color: var(--primary-white) !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 .card .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;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-dreamboardpage .dreamSortBy .dreamboardDropdownMenu.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 .maxlife-page-content .maxlife-dreamboardpage .sortByDropdown {
    color: var(--secondary-gray-darkest);
}

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

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

body.darkMode .maxlife-page .maxlife-page-content .maxlife-dreamboardpage .dreamboardCarousel {
    background: rgba(26, 27, 29, 0.8) !important;
}

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

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

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

body.darkMode .maxlife-page .maxlife-page-content .maxlife-dreamboardpage .dreamboardCarousel {
    background: rgba(26, 27, 29, 0.8) !important;
}

/* audio */

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

body.darkMode .maxlife-lecturePlaylist .lecturePlaylistSection .lectureCard .dateText {
    color: var(--secondary-gray-darkest) !important;
}

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

body.darkMode .maxlife-lecturePlaylist .lecturePlaylistSection .lectureCard .contentDiv .playLectureBtn,
body.darkMode .maxlife-lecturePlaylist .addLectureBtn {
    background: var(--primary-blue-darkest) !important;
}

body.darkMode .maxlife-lecturePlaylist .lecturePlaylistSection .lectureCard {
    background-color: transparent;
}

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

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

body.darkMode .maxlife-videoPlaylist .playlistSection .playlistCard,
body.darkMode .maxlife-audioPlaylist .playlistSection .playlistCard {
    background: var(--primary-black) !important;
}

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

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

body.darkMode .maxlife-videoPlaylist .addPlaylistBtn:hover,
body.darkMode .maxlife-audioPlaylist .addPlaylistBtn:hover,
body.darkMode .maxlife-lecturePlaylist .lecturePlaylistSection .lectureCard .contentDiv .playLectureBtn:hover,
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;
}

/* dashboard */

body.darkMode .maxlife-page .maxlife-page-content .head,
body.darkMode .maxlife-page .maxlife-page-content .audioText,
body.darkMode .maxlife-page .maxlife-page-content .noteText,
body.darkMode .maxlife-page .maxlife-page-content .textHead,
body.darkMode .maxlife-page .maxlife-page-content .goalHead,
body.darkMode .maxlife-page .maxlife-page-content .fitnessDetails,
body.darkMode .maxlife-page .noCoachInfo {
    color: var(--primary-white) !important;
}

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

body.darkMode .maxlife-page .maxlife-page-content .noteDate,
body.darkMode .maxlife-page .maxlife-page-content .fitnessDetailsValue {
    color: var(--secondary-gray-darkest) !important;
}

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

/* body.darkMode .maxlife-page .maxlife-page-content .myGoalCard {
    background: var(--primary-black-darkest) !important;
} */

body.darkMode .maxlife-page .maxlife-page-content .goalSection {
    border-left: 1px solid var(--primary-black-light) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .playBtnAudio {
    background-color: var(--primary-blue-darkest) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-homepage .newDream {
    background: var(--primary-blue-darkest) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-homepage .newDream:hover {
    background: var(--secondary-blue) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-homepage .readMorelessLink {
    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-page .maxlife-page-content .maxlife-goalpage .pageInfoText,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .tab-nav-link.active,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalProfile,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalAccordion,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalHead,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalCardSubHead,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .strikethrough,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .createGoal,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .noCoach,
body.darkMode .noDataInfo {
    color: var(--primary-white) !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 .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 .use-it-btn {
    border: 1px solid transparent !important;
    background-color: var(--primary-blue-darkest) !important;
}

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

body.darkMode .dropdown:hover .ask-ai-btn {
    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 .ai-response-add-new-playlist-title,
body.darkMode .ai-response-add-lecture {
    background: var(--primary-black-darkest) !important;
    color: var(--primary-white) !important;
}

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

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

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

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

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

body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .homeContentRow .GoalListCard.pinnedCard {
    background: var(--secondary-black-darkest) !important;
    border: 1px solid var(--primary-black-light) !important;
    border-radius: 6px !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalList .goalListCard.pinnedCard:hover,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalList .goalListCard.unpinnedCard:hover {
    background: var(--primary-gray-dark) !important;
}


body.darkMode .maxlife-page .homeContentRow .goalByCategoryCol .unpinnedCard,
body.darkMode .maxlife-page .homeContentRow .goalByCategoryCol .pinnedCard {
    border: 1px solid var(--primary-black-light) !important;
    border-radius: 6px !important;
}

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

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

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

body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .switch-tab-ul,
body.darkMode .messageList .userMsgHeadFromHome {
    border-bottom: 1px solid var(--primary-black-light) !important;
}

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

body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .countBadge {
    background: var(--primary-black);
    color: var(--primary-white);
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalCardCreate {
    background: #1A1B1D !important;
    border: 2px dashed #232527 !important;
    border-radius: 6px;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalProfileCoach,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalText,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage input[type=checkbox]:checked+.strikethrough {
    color: var(--secondary-gray-darkest) !important;
}

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

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

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

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

body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalDropdownIcon,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalPin {
    background: var(--primary-black-light) !important;
}

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

body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .checkboxInput~.checkmark,
body.darkMode .goalChecklist,
body.darkMode .goalAdd .checkboxInput~.checkmark,
body.darkMode .goalAdd .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 .cancelBtn {
    border-color: var(--primary-blue-darkest) !important;
    color: var(--primary-blue-darkest) !important;
}

body.darkMode .cancelBtn:hover {
    color: var(--primary-white) !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 .maxlife-page .maxlife-page-content .maxlife-goalpage .goalProfile,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalTimeHeadActive,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .strikethrough,
body.darkMode .goalByCategoryCol .goalByCategoryColHeadText,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalHead,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalCardSubHead,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalActiveHead {
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalProfileSpan,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalTimeActive,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage input[type=checkbox]:checked+.strikethrough,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalText {
    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-page .maxlife-page-content .maxlife-goalpage .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-page .maxlife-page-content .maxlife-goalpage .checkboxInput:checked~.checkmark,
body.darkMode .goalChecklist {
    background: var(--primary-blue-darkest) !important;
    border: none !important;
}

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

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

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


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


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

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

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

body.darkMode .goalByCategoryCol .pinnedCard:hover,
body.darkMode .goalByCategoryCol .unpinnedCard:hover {
    background: var(--primary-gray-dark) !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 .maxlife-page .maxlife-page-content .maxlife-goalpage .goalSelect,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalInput,
body.darkMode .checklistInput {
    background-repeat: no-repeat !important;
    background: var(--primary-black-darkest) !important;
    border: 1px solid var(--primary-black-light);
    /* color: var(--secondary-gray-darkest) !important; */
    color: #ffffff !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalInput::placeholder,
body.darkMode .checklistInput::placeholder {
    /* color: var(--secondary-gray-darkest) !important; */
    color: #ffffff !important;
}

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

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

/* notes */

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

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

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .notePinned,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .pinnedHead,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .head,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .createNote,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .nhlText {
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .pinnedCard {
    background: var(--secondary-black) !important;
}

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

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .noteTime,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .nameInput {
    color: var(--secondary-gray-darkest) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .dropdown-menu.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 .maxlife-page-content .maxlife-notepage .noteDotsImg {
    background: var(--primary-black-light) !important;
}

/* body.darkMode .maxlife-page .maxlife-page-content .pinnedCard:hover .noteDotsImg{
    background-color: var(--primary-black-darkest) !important;
} */

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

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .noteCreateBtn {
    background: var(--primary-blue-darkest) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .pinnedCard-selected {
    background: var(--primary-gray-dark) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .nhlHead,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .nameInput {
    border-bottom: 1px solid var(--primary-black-light) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .noteCard:hover {
    background: var(--primary-gray-dark) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .pinnedCard:hover {
    background: var(--primary-gray-dark) !important;
}

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

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

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .noteCreateBtn:hover {
    background: var(--secondary-blue) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .nameInputfield {
    border-color: var(--secondary-gray-light) !important;
    color: var(--primary-white) !important;
}

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

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .angular-editor .angular-editor-wrapper .angular-editor-textarea {
    color: var(--primary-white) !important;
    border-color: var(--secondary-gray-light) !important;
}

/* For angular editor */
body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .angular-editor-toolbar {
    background-color: var(--secondary-black) !important;
    border-color: var(--secondary-gray-light) !important;
    box-shadow: none !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button {
    background: var(--secondary-black) !important;
    border-color: var(--secondary-gray-light) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.active {
    background: var(--primary-black-darkest) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button .fa {
    color: var(--secondary-gray-darkest) !important;
    border-color: var(--secondary-gray-light) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .angular-editor-toolbar .angular-editor-toolbar-set .ae-font .ae-picker-label {
    background: var(--secondary-black) !important;
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .ae-font .ae-picker-options {
    background-color: var(--secondary-black) !important;
    border-color: var(--primary-gray-dark) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .ae-font .ae-picker-options .ae-picker-item {
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .ae-font .ae-picker-options .ae-picker-item.focused,
body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .ae-font .ae-picker-options .ae-picker-item:hover {
    background-color: var(--primary-gray-dark) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-notepage .ae-font .ae-picker-label:before {
    background: var(--primary-gray-dark) !important;
}

/* Account  */
body.darkMode .maxlife-page .maxlife-page-content .maxlife-main-account-container .account-list-div {
    background: var(--primary-black) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-main-account-container .account-title {
    color: var(--primary-white) !important;
}

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

body.darkMode .maxlife-page .maxlife-page-content .maxlife-main-account-container .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-main-account-container .maxlife-account-details .informationSection .account-form-input::placeholder {
    background: var(--primary-black) !important;
    border: none !important;
    color: #707277 !important;
}

body.darkMode .maxlife-page .maxlife-page-content .accountPage .accountmenuIcon.active,
body.darkMode .maxlife-page .maxlife-page-content .accountPage .accountmenuIcon:hover {
    background: var(--primary-blue-darkest) !important;
}

/* For payment method */
body.darkMode .billingHistoryTable .table td {
    color: var(--primary-white) !important;
    border-color: var(--primary-black-light);
}

body.darkMode .billingHistoryTable .table>thead {
    border-bottom: 1px solid var(--secondary-gray-darkest) !important;
}

body.darkMode .maxlife-payment-method-details .billing-title,
body.darkMode .maxlife-payment-method-list .pageTitleName,
body.darkMode .maxlife-payment-method-list .card-holder-name,
body.darkMode .maxlife-payment-method-list .card-number-text {
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-payment-method-list .payment-card {
    background: var(--primary-black) !important;
    border: 1px solid var(--primary-black-light) !important;
}

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

body.darkMode .mat-form-field-wrapper {
    background: var(--primary-black-darkest) !important;
    color: var(--primary-white) !important;
    border: 1px solid var(--secondary-gray-dark) !important;
}

body.darkMode .mat-datepicker-toggle-default-icon {
    color: var(--primary-white) !important;
}

/* for plan list */
body.darkMode .maxlife-plan-list .maxlife-pageTitle .pageTitleName,
body.darkMode .maxlife-plan-list .pageListTitleName,
body.darkMode .maxlife-plan-list .plan-card-list-section .plan-card .plan-title,
body.darkMode .maxlife-plan-list .plan-card-list-section .plan-card .plan-amount,
body.darkMode .maxlife-plan-list .plan-renew-section .renew-title,
body.darkMode .maxlife-plan-list .plan-renew-section .renew-description {
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-plan-list .plan-card-list-section .plan-card {
    background: var(--primary-black) !important;
    border: 1px solid var(--primary-black-light) !important;
}

body.darkMode .maxlife-plan-list .plan-card-list-section .selected-plan-card {
    background: var(--secondary-black) !important;
    border: none !important;
}

body.darkMode .maxlife-plan-list .plan-card-list-section .plan-card .upgradeBtn {
    border: 1px solid transparent !important;
    background: var(--primary-blue-darkest) !important;
}

body.darkMode .maxlife-plan-list .plan-card-list-section .plan-card .upgradeBtn:hover {
    background: var(--secondary-blue) !important;
    border: 1px solid transparent !important;
}

body.darkMode .maxlife-plan-list .plan-card-list-section .plan-card .subscriptionBtn {
    background: transparent !important;
    color: var(--primary-white) !important;
    border: 1px solid var(--primary-white) !important;
}

body.darkMode .maxlife-plan-list .plan-card-list-section .plan-card .subscriptionBtn:hover {
    background: var(--primary-blue-darkest) !important;
    border: 1px solid transparent !important;
}

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

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

body.darkMode .maxlife-account-details .uploadProfile {
    background: var(--primary-black) !important;
    border: 2px dashed var(--primary-black-light) !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;
}

/* 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,
body.darkMode .maxlife-homepage .messageSection,
body.darkMode .goalSectionCol {
    background: var(--primary-black) !important;
} */


body.darkMode .chatroomList,
body.darkMode .maxlife-homepage .messageSection {
    background: #1A1B1D !important;
}

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

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

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

/* message-list component */

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

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


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 .receiveMessage .link {
    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 .userMsgHead {
    border-top: 1px solid #232527 !important;
    background: #1A1B1D !important;
    box-shadow: none !important;
}

body.darkMode .senderParagraph {
    font-weight: 100;
}

body.darkMode pre code {
    background-color: var(--primary-black-light) !important;
    color: var(--primary-white) !important;
}

body.darkMode .messageList .HomePageHead {
    background-color: #1A1B1D !important;
}

body.darkMode .maxlife-plan-list .plan-renew-section .renew-switch {
    background-color: var(--primary-blue-darkest) !important;
    border-color: var(--primary-blue-darkest) !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 .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;
}

body.darkMode .messageList .messageInputFromHome {
    background: #232527 !important;
}

body.darkMode .messageList .receiveMessageFromHome {
    background: #141416 !important;
    color: #ffffff !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 .attachmentList .attachmentsHead,
body.darkMode .attachmentList .attachmentTime {
    color: #ffffff !important;
}

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

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

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 .goalSectionCol .messagaeListCol {
    border-left: 1px solid var(--primary-black-light) !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 .messageList .audioDivFromHome {
    background: var(--primary-black-darkest) !important;
}

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;
}

/* for add audio modal */
body.darkMode .modal-content .modal-body {
    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 .saveBtn {
    border: 1px solid transparent !important;
    background: var(--primary-blue-darkest) !important;
}

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

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

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

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-homepage .view-more-link {
    color: var(--primary-blue) !important;
}

body.darkMode .maxlife-homepage .view-more-link:hover {
    color: var(--secondary-gray-light) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-goalpage .goalDot {
    background-color: var(--primary-black-light) !important;
}

body.darkMode .maxlife-page .maxlife-page-content .maxlife-homepage .pinnedCard {
    background-color: var(--secondary-black) !important;
}

body.darkMode .skeleton-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;
}

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 .maxlife-book-list .dreamboardImgPage-wrapper {
    background-color: var(--primary-gray-dark) !important;
}

body.darkMode .maxlife-book-list .book-title {
    color: var(--primary-white) !important;
}

body.darkMode .maxlife-book-list .dreamboardImgPage-wrapper .dreamImgDots {
    background-color: var(--primary-black-light) !important;
}

body.darkMode audio::-webkit-media-controls-panel {
    background-color: var(--secondary-black) !important;
}

body.darkMode audio::-webkit-media-controls-timeline-container,
body.darkMode audio::-webkit-media-controls-current-time-display,
body.darkMode audio::-webkit-media-controls-time-remaining-display,
body.darkMode audio::-webkit-media-controls-timeline {
    color: var(--primary-white) !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 .messageList .messageImg,
body.darkMode .messageList .messageImgFromHome {
    background-color: var(--primary-black) !important;
}

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