/*========================================================
                  DARK & LIGHT MODE CSS
==========================================================*/
/*add light & normal color*/
:root {
    --bg-color: #FDF1F1;
    --navbar-color:#fff6ef;
    --card-bg-color:#fff6ef;
    --silver: #eeeeee;
    --bodytext-color:#222222;
    --bg-panel-color#faecee;
    --joining-earners-color:#6c757d;
    --theme-panel-content-bg-color:#faecee;
    --profile-header-color:#ffffff;
    --home-news-update-news-card-bg-color:#f9f9f9;
    --dropdown-menu-bg-color:#faecee;
    --dropdown-item-color:#484848;
    --media-heading-color:#222222;
    --genealogy-tree-a-color:#666666;
    --table-font-color:#333333;
    --table-profile-field-color:#222222;
    --form-control-bg-color:#faecee;
    --form-control-border-color:#c8c8c8;
    --border-color:#c8c8c8;
    --panel-heading-bg-color:#0f0f0f;
    --modal-content-bg-color:#faecee;
    --table-striped-bg-color:#f3f3f3;
    --nav-pills-color:#6f6f6f;
    --sidebar-minify-btn-bg-color:#181818;
    --bg-white-bg-color:#ffffff;
    --mail-system-bg-color:#eeeeee;
    --nav-link-font-color:#222222;
    --vertical-bg-color: #e4e7e8;
    --widget-chat-color: #d5d5d5;
    --bg-color-white: #fff;
    --bg-color-form-field: #fff;
    --bg-color-btn-blue: #7B2CBF !important;
    --border-color-blue-btn-hvr: #9D4EDD;
    --bg-color-btn-blue: #1e1e1e;
    --bg-color-eyes: #fff;
    --bg-color-btn-blue-hvr: #7B2CBF !important;
    --border-color-blue-btn: #0000;
    --bg-e-header: #faecee;
    --bg-e-body: #faecee;
    --bg-infobox: #f9f9f9;
    --navtext-color:#000;
    --navtexthover-color:#ff910a;
    --menutext-color:#000;
    --sidebar: #fff6ef;
    --bg-sidebar: #fff6ef;

}
/*add dark mode color*/
[data-theme=dark] {
    /* ============================================
       DATA SECTIONS BACKGROUND COLOR - EASY ROLLBACK
       ============================================
       To change all data section backgrounds, simply modify the value below.
       Current: #10002B (Dark Purple/Maroon)
       Previous: #0f192f (Dark Blue-Gray)
       ============================================ */
    --data-section-bg-color: #10002B;
    
    --bg-infobox: var(--data-section-bg-color);
    --bg-e-body: var(--data-section-bg-color);
    --bg-e-header: var(--data-section-bg-color);
    --bg-color: #1B003A;
    --bg-secondary-color: var(--data-section-bg-color);
    --navbar-color: var(--data-section-bg-color);
    --navbarlink-color:#ffffffcc;
    --bodytext-color:#adb7be;
    --sidebar-bg-color:#230328;
    --card-bg-color: var(--data-section-bg-color);
    --card-font-color:#919ea7;
    --inverse: #919ea7;
    --silver: #919ea7;
    --bg-panel-color: var(--data-section-bg-color);
    --joining-earners-color: var(--data-section-bg-color);
    --theme-panel-content-bg-color: var(--data-section-bg-color);
    --profile-header-color: var(--data-section-bg-color);
    --home-news-update-news-card-bg-color: var(--data-section-bg-color);
    --dropdown-menu-bg-color: var(--data-section-bg-color);
    --dropdown-item-color:#adb7be;
    --media-heading-color:#adb7be;
    --footer-color:#adb7be;
    --genealogy-tree-a-color:#adb7be;
    --table-font-color:#adb7be;
    --table-profile-field-color:#ced4d9;
    --form-control-bg-color: var(--data-section-bg-color);
    --form-control-border-color:#424a58;
    --border-color:#424a58;
    --list-group-item-bg-color: var(--data-section-bg-color);
    --panel-heading-bg-color: var(--data-section-bg-color);
    --modal-content-bg-color: var(--data-section-bg-color);
    --table-striped-bg-color: var(--data-section-bg-color);
    --nav-pills-color:#adb7be;
    --bg-white-bg-color: var(--data-section-bg-color);
    --text-dark-color:#adb7be;
    --sidebar-minify-btn-bg-color:#1c2c50;
    --table-pagination-btn-color: var(--data-section-bg-color);
    --mail-system-bg-color: var(--data-section-bg-color);
    --nav-link-font-color:#adb7be;
    --logo-image-filter: brightness(0) invert(1);
    --vertical-bg-color: var(--data-section-bg-color);
    --widget-chat-color: var(--data-section-bg-color);
    --bg-color-white: var(--data-section-bg-color) !important;
    --bg-color-btn-blue: #9D4EDD;
    --border-color-blue-btn: #9D4EDD;
    --bg-color-btn-blue: #9D4EDD !important;
    --border-color-blue-btn-hvr: #7B2CBF;
    --bg-color-form-field: #17181b;
    --bg-color-eyes: #fff;
    --bg-color-btn-blue-hvr: #7B2CBF !important;
    --border-color-blue-btn: #0000;
    --navtext-color:#adb7be;
    --navtexthover-color:#adb7be;
    --menutext-color:#fff;
    --bg-sidebar: #230328;

}
.sidebar{
    background-color: var(--bg-sidebar) !important;
}
.sidebar .nav>li>a i{
    color: var(--menutext-color) !important;
}
.panel-body{
    background-color: var(--navbar-color);
}

/* Panel body in dark mode should use data section background */
[data-theme=dark] .panel-body {
    background-color: var(--data-section-bg-color) !important;
}
.sidebar .nav>li.active>a {
    color: #fff !important;
}
.sidebar .nav>li>a {
    padding: 10px 20px !important;
    color: var(--navtext-color);
}
.sidebar .nav>li>a:hover {
    color: var(--navtexthover-color);
}
.sidebar .nav>li.expand>a {
    color: var(--navtexthover-color);
}
.sidebar .sub-menu>li>a:focus, .sidebar .sub-menu>li>a:hover {
    color: var(--navtexthover-color);
}
.sidebar .sub-menu>li>a:focus, .sidebar .sub-menu>li>a {
    color: var(--navtext-color);
}
.sidebar .sub-menu>li.active>a {
    color: var(--navtexthover-color);
}
body {
    background-color: var(--bg-color);
    color: var(--bodytext-color);
}
.activity-card{
    background-color: var(--bg-infobox);
    color: var(--bodytext-color);

}
.info-box {
    background-color: var(--bg-infobox);
}
.password-show .btn-outline-secondary {
    color: var(--bg-color-eyes);
}
.btn-primary {
    color: #fff;
    background-color: var(--bg-color-btn-blue) !important;
    border-color: var(--border-color-blue-btn) !important;
}
.btn-primary:hover {
    color: #fff;
    background-color: var(--bg-color-btn-blue-hvr) !important;
}
.login-password-show .btn-outline-secondary {
    background-color: var(--bg-color-btn-blue) !important;
    border-color: var(--border-color-blue-btn) !important;
}
.login.login-with-news-feed .right-content {
    /*background-color: var(--bg-color-white) !important;*/
}
.login.login-with-news-feed .right-content .language-swicher ul li a {
    color: var(--bodytext-color) !important;
}
.password-show .btn-outline-secondary {
    background-color: var(--bg-color-btn-blue) !important;
    border-color: var(--border-color-blue-btn) !important;
}
.login.login-v2 .login-content .form-control:focus {
    background-color: var(--bg-color-form-field) !important;
    color: var(--bodytext-color) !important;
}
.password-show .btn-outline-secondary:hover {
    background-color: var(--bg-color-btn-blue) !important;
    border-color: var(--border-color-blue-btn) !important;
}
.register.register-with-news-feed .right-content .language-swicher ul li a {
    color: var(--bodytext-color) !important;
}
.register.register-with-news-feed .right-content{
    background-color: transparent !important;
}
.reg-ftr {
    background-color: var(--bg-color-white) !important;
}
.form-control:focus {
    background-color: var(--bg-color-form-field) !important;
    color: var(--bodytext-color) !important;
}
.hdr-bx-reg {
    background-color: var(--bg-color-white) !important;
}
.header .header-nav .nav>li>a {
    color: var(--bodytext-color);
}
.prdct-nme{
    color: var(--bodytext-color);
}
.snip1268 p{
    color: var(--bodytext-color) !important;
}
.snip1268{
    background-color: var(--bg-color-white);
    color: var(--bodytext-color) !important;
}
.hdr-ecommerce{
    background-color: var(--bg-e-header);
}
.body-ecommerce{
    background-color: var(--bg-e-body);
}
.widget-chat .widget-chat-body {
    background-color: var(--widget-chat-color);
}
/*.vertical-box{
    background-color: var(--vertical-bg-color);
}*/
.vertical-box.with-grid>.vertical-box-column+.vertical-box-column {
    border-color: var(--border-color);
}
.vertical-box.with-border-top, .vertical-box.with-grid{
    border-color: var(--border-color);
}
.inbox .nav-inbox>li>a {
    color: var(--nav-link-font-color);
}
.mail-system {
    background-color: var(--mail-system-bg-color);
    border-color: var(--border-color);
}
.header.navbar-default{
    background-color: var(--navbar-color);
}
.page-header, .breadcrumb .breadcrumb-item a{
    color: var(--font-color);
}
.header.navbar-default .navbar-nav>li>a {
    color: var(--navbarlink-color);
}
.sidebar {
    background: var(--sidebar-bg-color);
    box-shadow: 0 0px 5px rgb(255 146 12 / 52%) !important;
}
.card {
    background-color: var(--card-bg-color);
}
.widget-list .widget-list-item {
    background-color: var(--card-bg-color);
    color: var(--inverse)!important;
}
.nvd3 text {
    fill: var(--inverse)!important;
}
.new-joining-top-earners .nav-tabs {
    border-bottom: solid 1px var(--silver)!important;
}
.widget {
    background: var(--card-bg-color);
}
.widget-chart-content {
    background: var(--card-bg-color);
}
.widget-chart-info {
    color: var(--bodytext-color);
}
.panel {
    background: var(--bg-panel-color);
}
.theme-panel .theme-panel-content {
    background: var(--theme-panel-content-bg-color);
}
.profile-header .profile-header-tab {
    background: var(--profile-header-color);
}
.home_news_update .news-card {
    background-color: var(--home-news-update-news-card-bg-color);
}
.dropdown-menu {
    background-color: var(--dropdown-menu-bg-color);
}
.dropdown-item {
    color: var(--dropdown-item-color);
}
.dropdown-menu.media-list .media .media-heading {
    color: var(--media-heading-color);
}
.footer{
    color: var(--footer-color);
    border-color: var(--border-color)!important;
}
.genealogy-tree li a {
    color: var(--genealogy-tree-a-color);
}
.header .navbar-brand img {
    filter: var(--logo-image-filter);
}
.table {
    color: var(--table-font-color);
}
.profile-content .table.table-profile tbody>tr td {
    color: var(--table-font-color);
}
.profile-content .table.table-profile tbody>tr td.field {
    color: var(--table-profile-field-color);
}
.profile-content .table.table-profile>thead>tr>th {
    color: var(--table-profile-field-color); 
}
.form-control {
    background-color: var(--form-control-bg-color);
    color: var(--bodytext-color);
    border-color: var(--form-control-border-color);
}
.select2-container--default .select2-selection--single {
    background-color: var(--form-control-bg-color);
}
.border {
    border-color: var(--border-color)!important;
}
.password-show .btn-outline-secondary {
    border-color: var(--form-control-border-color)!important;
}
.list-group-item {
    background-color: var(--list-group-item-bg-color);
    border-color: var(--border-color);
}
.panel.panel-inverse>.panel-heading {
    background: var(--panel-heading-bg-color);
}
.dataTables_wrapper.dt-bootstrap .dataTables_length label, .dataTables_wrapper.dt-bootstrap4 .dataTables_length label {
    color: var(--bodytext-color);
}
.dataTables_wrapper.dt-bootstrap .dataTables_filter label, .dataTables_wrapper.dt-bootstrap4 .dataTables_filter label {
    color: var(--bodytext-color);
}
.dataTables_wrapper.dt-bootstrap .dataTables_info, .dataTables_wrapper.dt-bootstrap4 .dataTables_info {
    color: var(--bodytext-color);
}
.modal-content {
    background-color: var(--modal-content-bg-color);
}
.modal-header {
    border-color: var(--border-color)!important;
}
.close {
    color: var(--bodytext-color);
}
.table-bordered {
    border-color: var(--border-color);
}
.table thead tr th {
    border-color: var(--border-color);
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-striped-bg-color);
}
.table-bordered td, .table-bordered th {
    border-color: var(--border-color);
}
.nav.nav-pills .nav-item .nav-link {
    color: var(--nav-pills-color);
}
.bg-white {
    background-color: var(--bg-white-bg-color) !important;
}
.text-dark {
    color: var(--text-dark-color) !important;
}
.sidebar .sidebar-minify-btn {
    background: var(--sidebar-minify-btn-bg-color);
}
.dataTables_wrapper.dt-bootstrap .dataTables_paginate .pagination .paginate_button.disabled a, .dataTables_wrapper.dt-bootstrap4 .dataTables_paginate .pagination .paginate_button.disabled a{
    background-color: var(--table-pagination-btn-color)!important;
    border-color: var(--border-color)!important;
}
.widget-stats .stats-number, .widget.widget-stats .stats-number {
    color: #fff;
}
.header.navbar-default .navbar-toggle .icon-bar {
    background: var(--bodytext-color);
}
.header .navbar-user i {
    color: var(--bodytext-color);
}
.card-loyalty{
    background-color: saddlebrown
}
.webui-popover .webui-popover-content {
    background-color: var(--bg-secondary-color) !important;
    color: var(--bodytext-color) !important;
}
/* Tree Search button styling - Purple color for dark mode */
[data-theme=dark] .panel-heading-btn .btn-primary.btn-xs,
[data-theme=dark] .panel-heading-btn .btn-primary {
    background-color: #9D4EDD !important;
    border-color: #9D4EDD !important;
}
[data-theme=dark] .panel-heading-btn .btn-primary.btn-xs:hover,
[data-theme=dark] .panel-heading-btn .btn-primary:hover {
    background-color: #7B2CBF !important;
    border-color: #7B2CBF !important;
}

.select2-selection {
    background-color: var(--bg-secondary-color) !important;
    color: var(--navbarlink-color) !important;
}

.select2-selection__rendered {
    color: var(--navbarlink-color) !important;
}

.box-footer{
    background-color: var(--bg-secondary-color) !important;
    color: var(--bodytext-color) !important;
}

.dropdown-menu-cart{
    background-color: var(--bg-white-bg-color) !important;
    color: var(--bodytext-color) !important;
}

.table-bordered{
    background-color: var(--bg-secondary-color) !important;
    color: var(--bodytext-color) !important;
}

.profile-header {
    background-color: var(--bg-color);
    color: var(--bodytext-color);
}

/* Checkout button styling for dark mode - Green and visible */
[data-theme=dark] .btn-inverse.btn-block.btn-lg,
[data-theme=dark] button.btn-inverse.btn-block.btn-lg,
[data-theme=dark] .btn-inverse.btn-block.btn-lg,
[data-theme=dark] button.btn-inverse {
    background-color: #009008 !important;
    border-color: #009008 !important;
    color: #ffffff !important;
}

[data-theme=dark] .btn-inverse.btn-block.btn-lg:hover,
[data-theme=dark] button.btn-inverse.btn-block.btn-lg:hover,
[data-theme=dark] .btn-inverse.btn-block.btn-lg:hover,
[data-theme=dark] button.btn-inverse:hover {
    background-color: #007a06 !important;
    border-color: #007a06 !important;
    color: #ffffff !important;
}

[data-theme=dark] .btn-inverse.btn-block.btn-lg:focus,
[data-theme=dark] button.btn-inverse.btn-block.btn-lg:focus,
[data-theme=dark] .btn-inverse.btn-block.btn-lg:focus,
[data-theme=dark] button.btn-inverse:focus {
    background-color: #007a06 !important;
    border-color: #007a06 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 144, 8, 0.5) !important;
}

/* Rank card styling for dark mode - Data sections */
[data-theme=dark] .employee-card {
    background-color: var(--data-section-bg-color) !important;
}

/* Rank chart center text colors for dark mode */
[data-theme=dark] .employee-card .chart-center h4 {
    color: #ffffff !important;
}

[data-theme=dark] .employee-card .chart-center h2 {
    color: #ffffff !important;
}

[data-theme=dark] .employee-card .chart-center small {
    color: #e0e0e0 !important;
}

/* Rank progress info text colors for dark mode */
[data-theme=dark] .employee-card .rank-progress-info p {
    color: #ffffff !important;
}

[data-theme=dark] .employee-card .rank-progress-info p strong {
    color: #ffffff !important;
}

/* Override inline styles for rank text in dark mode */
[data-theme=dark] .employee-card .chart-center h4[style*="color: #2d0057"] {
    color: #ffffff !important;
}

[data-theme=dark] .employee-card .chart-center small[style*="color: #666"] {
    color: #e0e0e0 !important;
}

[data-theme=dark] .employee-card .rank-progress-info p[style*="color: #333"] {
    color: #ffffff !important;
}

[data-theme=dark] .employee-card .rank-progress-info p[style*="color: #666"] {
    color: #e0e0e0 !important;
}

/* Rank card heading text color for dark mode */
[data-theme=dark] .employee-card .fw-bold {
    color: #ffffff !important;
}

/* Chart canvas background for dark mode - Data sections */
[data-theme=dark] canvas#teamChart,
[data-theme=dark] canvas#rankProgressChart,
[data-theme=dark] canvas[id*="chart"],
[data-theme=dark] canvas[id*="Chart"] {
    background-color: var(--data-section-bg-color) !important;
}

/* Rank chart wrapper in dark mode - Data sections */
[data-theme=dark] .employee-card .chart-wrapper {
    background-color: var(--data-section-bg-color) !important;
}

/* Chart container backgrounds for dark mode */
[data-theme=dark] .panel-body canvas,
[data-theme=dark] .card canvas,
[data-theme=dark] .widget-chart-content canvas {
    background-color: var(--data-section-bg-color) !important;
}

/* Header and navbar backgrounds for dark mode - Data sections */
[data-theme=dark] .header.navbar-default,
[data-theme=dark] .navbar-header,
[data-theme=dark] .top-menu,
[data-theme=dark] #header {
    background-color: var(--data-section-bg-color) !important;
}

/* All table rows and data rows in dark mode - Data sections */
[data-theme=dark] table tbody tr,
[data-theme=dark] table tbody tr:nth-of-type(even),
[data-theme=dark] table tbody tr:nth-of-type(odd),
[data-theme=dark] .table tbody tr,
[data-theme=dark] .table tbody tr:nth-of-type(even),
[data-theme=dark] .table tbody tr:nth-of-type(odd) {
    background-color: var(--data-section-bg-color) !important;
}

/* List group items in dark mode - Data sections */
[data-theme=dark] .list-group-item,
[data-theme=dark] .list-group-item.reg-row,
[data-theme=dark] .list-group-item:nth-of-type(even),
[data-theme=dark] .list-group-item:nth-of-type(odd) {
    background-color: var(--data-section-bg-color) !important;
}

/* Highlight class override for dark mode - Data sections */
[data-theme=dark] .highlight,
[data-theme=dark] .list-group-item.highlight {
    background-color: var(--data-section-bg-color) !important;
}

/* Transaction row colors override for dark mode - Data sections */
[data-theme=dark] .row-transfer,
[data-theme=dark] .row-debit,
[data-theme=dark] .row-credit,
[data-theme=dark] .list-group-item.row-transfer,
[data-theme=dark] .list-group-item.row-debit,
[data-theme=dark] .list-group-item.row-credit {
    background-color: var(--data-section-bg-color) !important;
}

/* DataTables rows in dark mode - Data sections */
[data-theme=dark] table.dataTable tbody tr,
[data-theme=dark] table.dataTable tbody tr.even,
[data-theme=dark] table.dataTable tbody tr.odd,
[data-theme=dark] table.dataTable tbody tr:hover {
    background-color: var(--data-section-bg-color) !important;
}

/* Selected row override for dark mode - Data sections */
[data-theme=dark] table.dataTable tbody tr.row-selected,
[data-theme=dark] table tbody tr.row-selected {
    background-color: var(--data-section-bg-color) !important;
}

/* Card headers in dark mode - Data sections */
[data-theme=dark] .card-header.bg-white,
[data-theme=dark] .card-header {
    background-color: var(--data-section-bg-color) !important;
}

/* Panel headings in dark mode - Data sections */
[data-theme=dark] .panel-heading,
[data-theme=dark] .panel.panel-inverse>.panel-heading,
[data-theme=dark] .panel-heading-btn {
    background-color: var(--data-section-bg-color) !important;
}

/* Product cards in dark mode - Data sections */
[data-theme=dark] .product-default,
[data-theme=dark] .product-default .product-details,
[data-theme=dark] .registered-with-product .card,
[data-theme=dark] .product-item,
[data-theme=dark] .product-card,
[data-theme=dark] .bg-white.rounded,
[data-theme=dark] .product-default figure,
[data-theme=dark] .pro-one-imgg {
    background-color: var(--data-section-bg-color) !important;
}

/* Override inline white backgrounds in product sections */
[data-theme=dark] .product-default [style*="background: #ffffff"],
[data-theme=dark] .product-default [style*="background:#ffffff"],
[data-theme=dark] .product-default [style*="background-color: #ffffff"],
[data-theme=dark] .product-default [style*="background-color:#ffffff"] {
    background-color: var(--data-section-bg-color) !important;
}

/* Timeline elements in dark mode - Data sections */
[data-theme=dark] .timeline-body,
[data-theme=dark] .timeline .timeline-body,
[data-theme=dark] .timeline-content,
[data-theme=dark] .timeline .timeline-content,
[data-theme=dark] .timeline-header,
[data-theme=dark] .timeline .timeline-header {
    background-color: var(--data-section-bg-color) !important;
}

/* Timeline body arrow/border in dark mode */
[data-theme=dark] .timeline .timeline-body:before {
    border-right-color: var(--data-section-bg-color) !important;
    border-bottom-color: var(--data-section-bg-color) !important;
}

/* News cards in dark mode - Data sections */
[data-theme=dark] .news-card,
[data-theme=dark] .card.news-card,
[data-theme=dark] .home_news_update .news-card {
    background-color: var(--data-section-bg-color) !important;
}

/* User event list and news modals in dark mode - Data sections */
[data-theme=dark] .user-event-list,
[data-theme=dark] .user-event-list .card,
[data-theme=dark] .user-event-list .card-body {
    background-color: var(--data-section-bg-color) !important;
}

/* Wallet chart and containers in dark mode - Data sections */
[data-theme=dark] #container_graph,
[data-theme=dark] .height-100-percentage,
[data-theme=dark] .bdy-pnl-11,
[data-theme=dark] .card-1,
[data-theme=dark] .card.card-1 {
    background-color: var(--data-section-bg-color) !important;
}

/* Highcharts chart background in dark mode - Data sections */
[data-theme=dark] .highcharts-container,
[data-theme=dark] .highcharts-container svg {
    background-color: var(--data-section-bg-color) !important;
}

/* Wallet panel body in dark mode - Data sections */
[data-theme=dark] .panel-body.bdy-pnl-11 {
    background-color: var(--data-section-bg-color) !important;
}

/* Wallet card wrappers and chart containers in dark mode - Data sections */
[data-theme=dark] .col-xl-3 #container_graph,
[data-theme=dark] .col-lg-3 #container_graph,
[data-theme=dark] div[id="container_graph"],
[data-theme=dark] .stats-content-1,
[data-theme=dark] .stats-content-2,
[data-theme=dark] .stats-content-3,
[data-theme=dark] .sts-pdng {
    background-color: var(--data-section-bg-color) !important;
}

/* Column containing wallet chart in dark mode - Data sections */
[data-theme=dark] .row > .col-lg-3:only-child,
[data-theme=dark] .row > .col-xl-3:only-child {
    background-color: var(--data-section-bg-color) !important;
}

/* Highcharts chart plot area background in dark mode - Data sections */
[data-theme=dark] .highcharts-background,
[data-theme=dark] .highcharts-plot-background {
    fill: var(--data-section-bg-color) !important;
}

/* Highcharts title and text colors in dark mode */
[data-theme=dark] .highcharts-title,
[data-theme=dark] .highcharts-subtitle,
[data-theme=dark] .highcharts-legend-item text {
    fill: var(--bodytext-color) !important;
    color: var(--bodytext-color) !important;
}

/* Column wrapper for wallet chart - ensure background */
[data-theme=dark] .row .col-lg-3:last-child,
[data-theme=dark] .row .col-xl-3:last-child {
    background-color: var(--data-section-bg-color) !important;
}