/* netmon-soft light + dark. html[data-theme=light|dark] */
html[data-theme="light"] {
  --ns-bg: #f4f4f5;
  --ns-card: #f7f6f3;
  --ns-input: #f3f2ef;
  --ns-text: #222222;
  --ns-muted: #6b6b6b;
  --ns-border: #e4e2dd;
}
html[data-theme="dark"] {
  --ns-bg: #161616;
  --ns-card: #222222;
  --ns-input: #2a2a2a;
  --ns-text: #ececec;
  --ns-muted: #9a9a9a;
  --ns-border: #333333;
}

html[data-theme] body,
html[data-theme] #wrapper,
html[data-theme] #content-wrapper,
html[data-theme] #content {
  background-color: var(--ns-bg) !important;
  color: var(--ns-text);
}

html[data-theme] .card,
html[data-theme] .dropdown-menu,
html[data-theme] .modal-content,
html[data-theme] .navbar.bg-white,
html[data-theme] .topbar.bg-white,
html[data-theme] .bg-white {
  background-color: var(--ns-card) !important;
  border-color: var(--ns-border) !important;
}

html[data-theme] .card-header,
html[data-theme] .modal-header,
html[data-theme] .modal-footer {
  background-color: var(--ns-card) !important;
  border-color: var(--ns-border) !important;
  color: var(--ns-text);
}

html[data-theme] .form-control,
html[data-theme] .custom-select,
html[data-theme] select.form-control,
html[data-theme] textarea.form-control {
  background-color: var(--ns-input) !important;
  color: var(--ns-text) !important;
  border-color: var(--ns-border) !important;
}

html[data-theme] .table,
html[data-theme] .table td,
html[data-theme] .table th {
  color: var(--ns-text);
  border-color: var(--ns-border) !important;
}

html[data-theme] .table thead th {
  background-color: var(--ns-card);
}

html[data-theme] .text-gray-600,
html[data-theme] .text-gray-700,
html[data-theme] .text-gray-800,
html[data-theme] .text-gray-900,
html[data-theme] label,
html[data-theme] .dropdown-item {
  color: var(--ns-text) !important;
}

html[data-theme] .text-muted {
  color: var(--ns-muted) !important;
}

html[data-theme] .dataTables_wrapper {
  color: var(--ns-text);
}

html[data-theme] .pagination .page-link,
html[data-theme] .page-item .page-link,
html[data-theme] .dataTables_paginate .paginate_button,
html[data-theme] .dataTables_paginate .page-link {
  background-color: var(--ns-input) !important;
  color: var(--ns-text) !important;
  border-color: var(--ns-border) !important;
}

html[data-theme] .page-item.disabled .page-link,
html[data-theme] .dataTables_paginate .paginate_button.disabled {
  background-color: var(--ns-card) !important;
  color: var(--ns-muted) !important;
  border-color: var(--ns-border) !important;
}

html[data-theme] .page-item.active .page-link,
html[data-theme] .dataTables_paginate .paginate_button.current {
  background-color: #4e73df !important;
  color: #fff !important;
  border-color: #4e73df !important;
}

html[data-theme] .page-item:not(.active):not(.disabled) .page-link:hover,
html[data-theme] .dataTables_paginate .paginate_button:not(.current):not(.disabled):hover {
  background-color: var(--ns-border) !important;
  color: var(--ns-text) !important;
}

html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background-color: #2c2c2c !important;
  color: var(--ns-text) !important;
}

html[data-theme="light"] .table-hover tbody tr:hover,
html[data-theme="light"] .dropdown-item:hover,
html[data-theme="light"] .dropdown-item:focus {
  background-color: #efece6 !important;
}

html[data-theme="dark"] footer.sticky-footer,
html[data-theme="dark"] .copyright {
  color: var(--ns-muted);
}

html[data-theme] #terminal-console,
html[data-theme] #terminal-exec {
  background: #000 !important;
  color: #ddd;
}