html[data-color-theme=dark] .content-inner{
	background: #3c3c3c;
}

html[data-color-theme=dark] .banner-stats ,
html[data-color-theme=dark] .card.kp-card ,
html[data-color-theme=dark] .table-container,
html[data-color-theme=dark] .modern-stat-card {
    background: #2c2d33 !important;
    border: 1px solid transparent !important;
}

html[data-color-theme=dark] .table thead th,
html[data-color-theme=dark] .course-id {
    background: #707070 !important;
	color: #FFFFFF;
}

html[data-color-theme=dark] .table tbody tr:hover {
    background-color: #3a3c3e;
}

html[data-color-theme=dark] .table tbody td{
	border-bottom: 1px solid #5b5b5b;	
}

html[data-color-theme=dark] .datatable-footer {
    border-top: var(--border-width) solid #5b5b5b;
}

html[data-color-theme=dark]  .datatable-header {
    border-bottom: var(--border-width) solid #5b5b5b; 
}

html[data-color-theme=dark] .dataTables_wrapper .dataTables_info {
    color: #ffffff;
    font-size: 0.875rem;
}


html[data-color-theme=dark] .banner-metric-value,
html[data-color-theme=dark] .stat-value {
    color: #ffffff !important;
}

html[data-color-theme=dark] .banner-metric-label,
html[data-color-theme=dark] .banner-metric-change , 
html[data-color-theme=dark] .app-version-row ,
html[data-color-theme=dark]  .device-legend-item,
html[data-color-theme=dark]  .stat-label,
html[data-color-theme=dark] .leaderboard .flex-row:hover i {
    color: #cdcdcd !important;
}

[data-color-theme=dark] .text-primary, html[data-color-theme=dark] [data-color-theme] .text-primary,
html[data-color-theme=dark] .card.kp-card .card-header ,
html[data-color-theme=dark] .quick-settings-list,
html[data-color-theme=dark] .profile-completion,
html[data-color-theme=dark] .feature,
html[data-color-theme=dark] .pricing-title ,
html[data-color-theme=dark] .leaderboard .flex-row h6{
    --primary-rgb: #FFFFFF !important;
	color : #FFFFFF !important;
}


html[data-color-theme="dark"] .sidebar.mypass-modern-sidebar {
    background: #2c2d33 !important;
    --sidebar-color: #FFFFFF;
    --sidebar-width: 15.55rem;
}


html[data-color-theme="dark"] .modern-user-avatar,
html[data-color-theme="dark"] .theme-mode-dark-label.active, 
html[data-color-theme="dark"] .theme-mode-dark-label:has(input:checked),
html[data-color-theme="dark"] .global-search,
html[data-color-theme="dark"] .voice-command-btn,
html[data-color-theme="dark"] .voice-command-btn:hover,
html[data-color-theme="dark"] .float-chat-btn,
html[data-color-theme="dark"] .voice-toast.info .voice-toast-header,
html[data-color-theme="dark"] .btn-primaryx,
html[data-color-theme="dark"] .btn-ghostx,
html[data-color-theme="dark"] .plan-pop{
	background: linear-gradient(135deg, #303138 0%, #7c7c7c 100%);
	color:white;
	box-shadow: 0px 0px 0px #7c7c7c;
}


html[data-color-theme="dark"] .upgrade-info {
    background: #202125;
    color: #ffffff;
}
html[data-color-theme="dark"] .plan-note{
	--muted: #e3e3e3;
}

html[data-color-theme="dark"] .plan-card.upgrade-available
 {
    border: 2px solid #3e3e3c;
}

html[data-color-theme="dark"] .plan-badge.upgrade {
    background: #ffffff;
}

html[data-color-theme="dark"] .subscription-status {
    border-left: 4px solid #9b9aa5;
}

html[data-color-theme="dark"] .nonprofit-content strong {
    color: #7f7c97;
}

html[data-color-theme="dark"]  .nonprofit-content{
	color:black;
}

html[data-color-theme="dark"] .mypass-navbar-modern ,
html[data-color-theme="dark"] .nav-tabs-underline  {
	background: #2c2d33;
}

html[data-color-theme="dark"] .leaderboard .flex-row {
    background: #3c3c3c !important;
    border: 1px solid #2c2d33 !important;
}


html[data-color-theme="dark"] .ticket-overview-panel {
    background-color: #2c2d33;
}

html[data-color-theme="dark"] .modern-tabs-wrapper ,
html[data-color-theme="dark"] .modern-tab-nav {
    background: #3c3c3c !important;
}


html[data-color-theme="dark"] .btn-outline-primary {
    --btn-color: var(--white) !important;
    --btn-border-color: var(--white) !important;
    --btn-hover-color: #fff;
}

html[data-color-theme="dark"]  .header-card .card-header {
    background: linear-gradient(135deg, #4a4a4a 0%, rgb(99 100 102) 100%);
    color: white;
    border-color: #000000;
    padding: 2rem;
    position: relative;
}
