body:not(.dark-mode) {
    --body-color: #f7f8fc;
    /* #F7F8FC */
    /* #EEF0FF */
    /* #E5F3F7 */
    /* #ECFBFF */
    /* #E0E8FF */
    --sidebar-color: black;
    --primary-color: #151515;
    --primary-color-light: #463a7c;
    --toggle-color: #ddd;
    --text-color: white;
    --dark-color: #dee2e6;
    --text-another-color: #ecf2f9;
    --menu-color: #151515;
    --input-color: white;
    --menu-home-color: white;
}

.dark-mode {
    --body-color: #151515;
    --sidebar-color: #2c2c2c;
    --primary-color: #efefef;
    --primary-color-light: white;
    --toggle-color: #ddd;
    --text-color: #2c2c2c;
    --dark-color: #dee2e6;
    --text-another-color: #ecf2f9;
    --menu-color: white;
    --input-color: #151515;
    --menu-home-color: #2c2c2c;
}
.card p,
.profile-title,
.sub-mission {
    color: var(--primary-color-light);
}
.sub-mission {
    color: var(--primary-color-light) !important;
}
.card-name {
    color: black;
}
.card-text,
.bottom-footer p {
    color: var(--primary-color-light);
}

body,
.contactus-bg,
.contactUsForm,
#sidebar ul li a:hover,
.btn-style,
.blog-header .cap-blog,
.profits,
.Tasks-details {
    background: var(--body-color);
}
.navbar {
    background-color: var(--text-color);
}
.card,
.profile-details,
.additional,
.login-item {
    background-color: var(--text-color);
}
.nav-link,
.contact-us-info span,
.articalTitle,
.artical-data span,
.cap h2,
.card-bod,
.artical-public li,
.addtaskdetails p,
.react span,
.additional span,
.addTaskMession .form-group label,
.additional p,
.registery h2 {
    color: var(--primary-color);
}
.subTitle,
.small-data,
.worker span,
.circle-big .text,
.addtaskdetails h5,
.summary h5,
.footer-item,
a,
.center-value p {
    color: var(--primary-color);
}
.center-value p {
    color: var(--primary-color) !important;
}
.card-title2,
.data-people,
.profile-title y {
    background-color: var(--text-color);
}
#sidebar ul li.active {
    color: var(--primary-color);
    line-height: 35px;
}
#sidebar ul li.active .list-unstyled li a {
    background-color: transparent;
}
#PrivilageRuler tbody tr {
    border-color: var(--dark-color);
}
.empty-circle {
    background-color: var(--text-color);
    border: 3px solid var(--primary-color-light);
}
.react i,
.btn-style,
.PrivilageRuler .page-link {
    color: var(--primary-color-light);
}
.summary button {
    background-color: var(--text-color);
}
.blog-data a {
    background: var(--text-another-color);
}
.PrivilageRuler,
.Tasks-details {
    box-shadow: 4px 4px 4px 4px var(--text-another-color);
}
.info-blog span {
    background: var(--text-another-color);
}
.card2 {
    background-color: var(--text-color);
}
.opioion p {
    color: var(--primary-color);
}
.view-task-card {
    background-color: var(--text-color);
}
.opioion textarea {
    background-color: var(--body-color);
}
.additional {
    background-color: var(--body-color);
}
.additional input[type="number"] {
    background-color: var(--body-color);
    border-radius: 10px;
}
.Title {
    color: var(--primary-color-light);
}
.sub-profile-details {
    background-color: var(--body-color);
}
.sub-profile-details span {
    color: var(--menu-color);
}
.category select {
    background-color: var(--input-color);
    color: var(--menu-color);
}
.list-group-item {
    background-color: transparent;
}
.table.dataTable tbody tr {
    background-color: var(--input-color);
}
.sub-profits h2,
.sub-task li {
    color: var(--menu-color);
}
.sub-profits .btn-style {
    background-color: var(--input-color);
}
.text-dark {
    color: var(--menu-color) !important;
}
.lang-border {
    color: var(--primary-color-light);
}
@media (max-width: 767px) {
    body {
        background-color: var(--body-color);
    }
    .navbar-collapse {
        background: var(--text-color);
    }
    #sidebar {
        background-color: var(--body-color) !important;
    }
    #sidebar ul li a {
        color: var(--menu-color) !important;
    }
    .navbar-toggler i {
        color: var(--menu-color);
    }
    .nav-small-collapse {
        background-color: var(--menu-home-color) !important;
    }
}