/*========================================================
                  DARK & LIGHT MODE CSS
==========================================================*/
/*add light & normal color*/
:root {
    --bg-color: #e4e7e8;
    --navbar-color:#0d9488;
    --card-bg-color:#ffffff;
    --silver: #eeeeee;
    --bodytext-color:#222222;
    --bg-panel-color:#ffffff;
    --joining-earners-color:#6c757d;
    --theme-panel-content-bg-color:#ffffff;
    --profile-header-color:#ffffff;
    --home-news-update-news-card-bg-color:#f9f9f9;
    --dropdown-menu-bg-color:#ffffff;
    --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:#ffffff;
    --form-control-border-color:#c8c8c8;
    --border-color:#c8c8c8;
    --panel-heading-bg-color:#0f0f0f;
    --modal-content-bg-color:#ffffff;
    --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: #0d9488 !important;
    --border-color-blue-btn-hvr: #0074f3;
    --bg-color-btn-blue: #1e1e1e;
    --bg-color-eyes: #fff;
    --bg-color-btn-blue-hvr: #066c63 !important;
    --border-color-blue-btn: #0000;
    --bg-e-header: #fff;
    --bg-e-body: #fff;
    --bg-infobox: #f9f9f9;

}
/*add dark mode color*/
[data-theme=dark] {
    --bg-infobox: #060b14;
    --bg-e-body: #060b14;
    --bg-e-header: #060b14;
    --bg-color: #060b14;
    --bg-secondary-color:#0f192f;
    --navbar-color:#101b33;
    --navbarlink-color:#ffffffcc;
    --bodytext-color:#adb7be;
    --sidebar-bg-color:#101b33;
    --card-bg-color:#0f192f;
    --card-font-color:#919ea7;
    --inverse: #919ea7;
    --silver: #919ea7;
    --bg-panel-color:#0f192f;
    --joining-earners-color:#0f192f;
    --theme-panel-content-bg-color:#060b14;
    --profile-header-color:#0f192f;
    --home-news-update-news-card-bg-color:#172640;
    --dropdown-menu-bg-color:#060b14;
    --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:#0f192f;
    --form-control-border-color:#424a58;
    --border-color:#424a58;
    --list-group-item-bg-color:#0f192f;
    --panel-heading-bg-color:#1c2c50;
    --modal-content-bg-color:#0f192f;
    --table-striped-bg-color:#1d2b4a;
    --nav-pills-color:#adb7be;
    --bg-white-bg-color:#0f192f;
    --text-dark-color:#adb7be;
    --sidebar-minify-btn-bg-color:#1c2c50;
    --table-pagination-btn-color:#0f192f;
    --mail-system-bg-color:#060b14;
    --nav-link-font-color:#adb7be;
    --logo-image-filter: brightness(0) invert(1);
    --vertical-bg-color: #0f192f;
    --widget-chat-color: #0f192f;
    --bg-color-white: #0f192f !important;
    --bg-color-btn-blue: #4d4d4e;
    --border-color-blue-btn: #4d4d4e;
    --bg-color-btn-blue: #4d4d4e !important;
    --border-color-blue-btn-hvr: #1e1e1e;
    --bg-color-form-field: #17181b;
    --bg-color-eyes: #fff;
    --bg-color-btn-blue-hvr: #0f192f !important;
    --border-color-blue-btn: #0000;

}

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: var(--bg-color-white) !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);
}
.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: var(--bodytext-color);
}
.header.navbar-default .navbar-toggle .icon-bar {
    background: var(--bodytext-color);
}
.header .navbar-user i {
    color: var(--bodytext-color);
}

.webui-popover .webui-popover-content {
    background-color: var(--bg-secondary-color) !important;
    color: var(--bodytext-color) !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);
}