:root {
    --dark-color: #2b2f3f;
}

.dark-mode {
    transition: 0.3s;
}
.dark-mode {
    background: linear-gradient(#2b2f3f94, #2b2f3f94), url(/images/db-bg-1.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: auto;
}

.dark-mode .header-container {
    background: var(--dark-color) !important;
    border: none;
}

.dark-mode #sidebar .theme-brand,
.dark-mode .sidebar-theme,
.dark-mode .sidebar-wrapper .profile-info {
    background: var(--dark-color);
}

.dark-mode #sidebar ul.menu-categories li.menu > .dropdown-toggle {
    color: #fff;
}

.dark-mode #sidebar ul.menu-categories li.menu > .dropdown-toggle {
    color: #fff;
}

.dark-mode #sidebar ul.menu-categories li.menu > .dropdown-toggle:hover {
    color: #e41e26;
}

.dark-mode
    #sidebar
    ul.menu-categories
    li.menu
    > .dropdown-toggle
    svg:not(.badge-icon) {
    color: #fff;
    fill: #888ea81a;
}

.dark-mode
    #sidebar
    ul.menu-categories
    li.menu
    > .dropdown-toggle:hover
    svg:not(.badge-icon) {
    color: #e41e26;
    fill: #e41e260a;
}

.dark-mode #sidebar ul.menu-categories ul.submenu > li a {
    color: #c8cdff;
}

.dark-mode #sidebar ul.menu-categories li.menu ul.submenu > li a:hover {
    color: #e41e26;
}

.dark-mode .menuCollapse {
    background: white !important;
    border-radius: 5px;
}

.dark-mode .widget.widget-card-five,
.dark-mode .widget-one_hybrid {
    background: var(--dark-color);
    border: 1px solid var(--dark-color);
}

.dark-mode .widget.widget-card-five .account-box .info-box .balance-info p {
    color: #fff;
}

.dark-mode .widget-one_hybrid .widget-heading .w-value {
    color: #e41e26;
}

.dark-mode .widget-one_hybrid .widget-heading h5 {
    color: #ffffff;
}

.dark-mode .breadcrumb .breadcrumb-item a {
    color: #fff;
}

.dark-mode .breadcrumb .breadcrumb-item.active {
    color: #e41e26;
    font-weight: 600;
}
.avatar-indicators:before {
    z-index: 1;
}

.dark-mode .avatar-sm {
    background: white;
    border-radius: 50%;
}

.dark-mode .page-meta h2 {
    color: white;
}

.dark-mode .user-info .profile-content {
    color: #fff;
}

.dark-mode
    .original-menu.hide-sidemenu
    ~ .main-content-custom
    .header-cover-div,
.dark-mode .side-menu-div {
    background: #2b2f3f !important;
}

.dark-mode .form-control,
.dark-mode .form-control:invalid,
.dark-mode .form-control:valid,
.dark-mode input:valid,
.dark-mode input:invalid {
    background: #fff !important;
}

@media (max-width: 768px) {
    .dark-mode .original-menu ~ .main-content-custom .header-cover-div {
        background: #2b2f3f !important;
    }
}