:root {
  --label-dark-mode: #9a9a9c;
  --value-dark-mode: #dcdcdc;
  --background-dark-mode: #211f20;
  --secondary-background-dark-mode: #3d3d3f;
  --even-table-row-background: #353536;
}

body.dark {
  background: var(--background-dark-mode);
}

body.dark .app-header.navbar .nav-item .nav-link,
.app-header.navbar .nav-item .dropdown-toggle,
body.dark header.navbar .nav-item .dropdown-toggle,
body.dark .app-header {
  background: var(--background-dark-mode);
  background-color: var(--background-dark-mode);
}

body.dark .app-header.navbar .nav-item .nav-link,
body.dark .app-header.navbar .nav-item .dropdown-toggle {
  color: var(--label-dark-mode) !important;
  background: inherit;
}

body.dark .app-header.navbar .navbar-brand h4 {
  color: #fefefe;
}

body.dark .ReactTable .rt-table {
  background-color: #323232;
  border: 0;
}

body.dark .ReactTable.-striped .rt-tr.-odd {
  background-color: #3d3d3f;
}

body.dark h4.heading,
body.dark .rt-resizable-header,
body.dark .ReactTable .rt-td .data {
  color: var(--label-dark-mode) !important;
}

body.dark header.navbar .nav-item .dropdown-toggle,
body.dark header.navbar .nav-item .dropdown-toggle:active,
body.dark header.navbar .nav-item .dropdown-toggle:focus,
body.dark header.navbar .nav-item .dropdown-toggle:hover {
  background: transparent;
}

body.dark .app-header.navbar li a,
body.dark .app-header.navbar .dropdown-item i,
body.dark .app-header.navbar .dropdown-item a {
  color: #20a8d8;
  background: transparent;
}

body.dark #metadata,
body.dark #advanced_search .header h3 {
  color: var(--label-dark-mode);
}

body.dark h4.heading::after {
  color: var(--salmon);
}

body.dark #advanced_search {
  border: 1px solid #323232;
}

body.dark .search__current-count {
  color: var(--label-dark-mode);
}

body.dark #advanced_search,
body.dark .paper-card-0 {
  background: #323232;
}

body.dark .card-content {
  border-top: 0;
}

body.dark #advanced_search input.form-control,
body.dark #details-page .ReactTable input {
  background: var(--background-dark-mode);
  color: var(--label-dark-mode);
  border: 1px solid #222;
}

body.dark #advanced_search input.form-control:focus {
  border: 1px solid rgba(102, 175, 233, 0.6);
  box-shadow: none;
}

body.dark .ReactTable .rt-noData {
  background: var(--background-dark-mode);
  border: 1px solid #333;
}

body.dark .mdc-list label {
  color: var(--label-dark-mode);
}

body.dark .dropdown-menu {
  background: var(--background-dark-mode);
  border: 1px solid #333;
  overflow: hidden;
}

body.dark .dropdown-item:focus,
body.dark .dropdown-item:hover {
  background: #000 !important;
}

body.dark .app-header.navbar li::first-child {
  border-top-left-radius: 3px;
}

body.dark .mdc-dialog--open .mdc-dialog__backdrop {
  opacity: 0.8;
}

body.dark aside .tab-content {
  border-top: 1px solid #333;
}

body.dark .nav-tabs .nav-link:focus,
body.dark .nav-tabs .navbar .dropdown-toggle:focus,
body.dark .navbar .nav-tabs .dropdown-toggle:focus,
body.dark .nav-tabs .nav-link:hover,
body.dark .nav-tabs .navbar .dropdown-toggle:hover,
body.dark .navbar .nav-tabs .dropdown-toggle:hover {
  border-right: 1px solid #333;
  border-left: 0;
}

/* --- soln-table dark mode --- */

body.dark .soln-table th {
  background: var(--secondary-background-dark-mode);
  color: var(--value-dark-mode);
  border-bottom: 2px solid #444;
}

body.dark .soln-table td {
  color: var(--label-dark-mode);
  border-bottom: 1px solid #333;
}

body.dark .soln-table tr:nth-child(even) {
  background-color: var(--even-table-row-background);
}

body.dark .soln-table tr:nth-child(odd) {
  background-color: var(--background-dark-mode);
}

body.dark .soln-table tr:hover {
  background: #444 !important;
}

body.dark .soln-table .MuiTableSortLabel-root {
  color: var(--value-dark-mode);
}

body.dark .soln-table .MuiTableSortLabel-root.MuiTableSortLabel-active {
  color: var(--value-dark-mode);
}

body.dark .soln-table .MuiTableSortLabel-icon {
  color: var(--label-dark-mode) !important;
}

/* --- soln-table-mapping dark mode --- */

body.dark .soln-table-mapping th {
  background: var(--secondary-background-dark-mode);
  color: var(--value-dark-mode);
  border-bottom: 2px solid #444;
}

body.dark .soln-table-mapping td {
  color: var(--label-dark-mode);
  border-bottom: 1px solid #333;
}

body.dark .soln-table-mapping tr:nth-child(even) {
  background-color: var(--even-table-row-background);
}

body.dark .soln-table-mapping tr:nth-child(odd) {
  background-color: var(--background-dark-mode);
}

body.dark .soln-table-mapping .clickable-link {
  color: #20a8d8;
}

/* --- Headings & text --- */

body.dark .tenantDetailsListHeading {
  color: var(--value-dark-mode);
}

body.dark .detail-page-heading {
  color: var(--value-dark-mode);
}

body.dark h1.form-page-header {
  color: var(--value-dark-mode);
}

body.dark .form-header-container i,
body.dark .form-header-container h1 {
  color: var(--value-dark-mode);
}

body.dark .form-header-container button:hover {
  background-color: var(--theme-dark-medium);
  opacity: 0.5;
}

/* --- Sidebar --- */

body.dark .sidebar_btn_wrapper a {
  color: var(--label-dark-mode) !important;
}

body.dark .sidebar_btn_wrapper a.active_menu {
  color: var(--value-dark-mode) !important;
}

body.dark .sidebar_btn_wrapper a:hover {
  text-decoration: none;
  color: var(--value-dark-mode) !important;
}

/* --- Search field --- */

body.dark .search-field-container input {
  background-color: var(--background-dark-mode);
  color: var(--value-dark-mode);
  border: 1px solid #444;
}

body.dark .search-field-container input::placeholder {
  color: var(--label-dark-mode);
}

/* --- Form labels & inputs --- */

body.dark .create-tenant-label,
body.dark .create-orch-profile-label,
body.dark .create-orch-trigger-label,
body.dark .edit-orch-profile-label,
body.dark .edit-orch-trigger-label {
  color: var(--value-dark-mode);
}

body.dark .create-orch-profile-input input,
body.dark .create-orch-trigger-input input,
body.dark .edit-orch-profile-input input,
body.dark .edit-orch-trigger-input input {
  color: var(--value-dark-mode) !important;
}

body.dark .text-field-container label,
body.dark .orch-profile-diagram-header {
  color: var(--value-dark-mode);
}

body.dark .text-field-container form {
  background-color: var(--theme-dark-high);
  border: 1px solid var(--theme-border-dark);
}

body.dark .text-field-container form div {
  border: none;
}

body.dark .text-field-container input {
  color: var(--label-dark-mode);
}

/* --- Buttons --- */

body.dark .ButtonWrapper button {
  background-color: var(--theme-primary);
  border: none;
  color: var(--value-dark-mode);
}

body.dark .ButtonWrapper button:hover {
  opacity: 0.8;
}

body.dark .edit-orch-profile-button button,
body.dark .edit-orch-trigger-button button {
  background-color: var(--theme-primary);
  border: none;
  color: var(--value-dark-mode);
}

body.dark .edit-orch-profile-button button:hover,
body.dark .edit-orch-trigger-button button:hover {
  opacity: 0.8;
}

/* --- Detail pages --- */

body.dark .ExternalDocsWrap,
body.dark .details-header-wrapper {
  color: var(--value-dark-mode);
}

body.dark .all-versions-container h4,
body.dark .details-header-wrapper .orch_backlink_heading {
  color: var(--value-dark-mode);
}

body.dark h5.orch-profile-diagram-header,
body.dark .create-orch-profile-diagram-header {
  color: var(--value-dark-mode);
}

body.dark #SchemaVersion {
  color: var(--value-dark-mode);
}

body.dark .back-link {
  color: var(--value-dark-mode);
}

body.dark .back-link:hover {
  text-decoration: none;
  color: var(--value-dark-mode);
}

body.dark .box-wrapper {
  background-color: var(--theme-dark-medium);
}

/* --- Detail list labels & values --- */

body.dark .list-details-label,
body.dark .text-label {
  color: var(--label-dark-mode);
}

body.dark .list-details-value,
body.dark .text-value {
  color: var(--value-dark-mode);
}

body.dark .tenantDetailsLable {
  color: var(--value-dark-mode);
}

/* --- Delete confirm dialog --- */

body.dark .delete-confirm-container {
  background-color: var(--theme-dark-medium);
}

body.dark .delete-confirm-container p {
  color: var(--value-dark-mode) !important;
}

body.dark .delete-confirm-container button {
  background-color: var(--theme-primary);
}

body.dark .delete-confirm-container button:hover {
  opacity: 0.8;
}

body.dark .delete-confirm-container button.cancel-delete {
  background: transparent;
  color: var(--value-dark-mode);
  border: 1px solid var(--theme-primary);
}

/* --- JSON container --- */

body.dark .json-container {
  background-color: var(--theme-dark-high);
}

body.dark .json-container i {
  color: var(--value-dark-mode);
}

/* --- Orchestration diagram --- */

body.dark .orch-diagram-wrapper {
  background-color: var(--theme-dark-high);
  border: none;
}

body.dark .orch-diagram-wrapper g.edgeLabel {
  fill: var(--value-dark-mode) !important;
}

body.dark path {
  stroke: var(--value-dark-mode);
}

body.dark marker[id^="arrowhead"] {
  fill: var(--value-dark-mode);
}

body.dark g.node.intermediate ellipse.label-container {
  fill: var(--theme-dark-medium) !important;
}

body.dark g.node.initial ellipse.label-container {
  color: var(--theme-dark-medium) !important;
}

body.dark g.node.terminal g.label,
body.dark g.node.initial g.label {
  fill: var(--theme-dark-high);
}

body.dark g.node.intermediate g.label {
  fill: var(--value-dark-mode);
}

/* --- Error display --- */

body.dark .errorWrapper {
  color: var(--value-dark-mode);
}

body.dark .errorWrapper pre {
  background-color: var(--theme-dark-high);
  color: var(--value-dark-mode);
}

/* --- Popover & dialogs --- */

body.dark .tenant-config-popover {
  background-color: var(--background-dark-mode);
  border: none;
  color: var(--label-dark-mode);
}

body.dark .tenant-config-popover a span,
body.dark .tenant-config-popover i {
  color: var(--label-dark-mode);
}

body.dark .pop-up .confirm-dialog__field form {
  background-color: var(--background-dark-mode);
  border: 1px solid var(--theme-dark-medium);
}

body.dark .pop-up .confirm-dialog__field form div {
  border: none;
}

body.dark .pop-up .confirm-dialog__field label {
  color: #9a9a9c;
}

body.dark .pop-up .confirm-dialog__field input {
  color: #6b6b6b;
}

body.dark .closeDialog,
body.dark .dialog-header h2 {
  color: var(--white);
}

body.dark .mdc-form-field label {
  color: var(--label-dark-mode);
}

/* --- Tabs (MUI) --- */

body.dark .app-bar {
  background-color: var(--background-dark-mode) !important;
  box-shadow: none !important;
  color: var(--label-dark-mode);
}

body.dark .app-bar .Mui-selected {
  background-color: var(--background-dark-mode);
  color: var(--value-dark-mode);
}

body.dark .app-bar span {
  font-size: 12px !important;
  color: var(--label-dark-mode);
}

body.dark .app-bar .Mui-selected span {
  color: var(--label-dark-mode) !important;
}

body.dark .tab-container .box-wrapper {
  background-color: var(--background-dark-mode);
  border: none;
}

span[class*="PrivateTabIndicator"] {
  background-color: var(--label-dark-mode);
}

/* --- Trigger details --- */

body.dark h1.trigger-detail-page-heading {
  color: var(--value-dark-mode);
}

body.dark .trigger-details-block h4 {
  color: var(--value-dark-mode);
}

body.dark .header-link-container button i {
  color: var(--value-dark-mode);
}

/* --- Stages --- */

body.dark .body-text {
  color: var(--value-dark-mode);
}

/* --- Custom input --- */

body.dark .custom-input {
  border: var(--theme-border-dark);
  background-color: var(--theme-dark-high);
}

/* --- MbDeploys table overrides --- */

body.dark .table {
  background: #323232;
  color: var(--label-dark-mode);
}

body.dark .table-striped tbody tr:nth-of-type(odd) {
  background: var(--secondary-background-dark-mode);
}

body.dark .table-striped > tbody > tr:nth-of-type(even) {
  background: var(--even-table-row-background);
}

body.dark .table > thead:first-child > tr:first-child > th {
  border-top: 1px solid var(--theme-border-dark);
}

body.dark .table-responsive td {
  border: 1px solid var(--theme-border-dark);
}

body.dark .table-responsive th {
  border: 1px solid var(--theme-border-dark);
  background-color: var(--theme-dark-high);
}

body.dark .table-bordered {
  border-top: none;
  border-right: 1px solid var(--theme-dark-high);
  border-left: 1px solid var(--theme-dark-high);
  border-bottom: 1px solid var(--theme-dark-high);
}

/* --- Detail page cards --- */

body.dark .detail-card {
  background: var(--theme-dark-medium);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.dark .detail-props-label {
  color: var(--label-dark-mode);
}

body.dark .detail-props-value {
  color: var(--value-dark-mode);
}

body.dark .detail-card h4,
body.dark .detail-card h5,
body.dark .detail-card strong {
  color: var(--value-dark-mode);
}

body.dark .detail-card a.force-underline {
  color: #20a8d8;
}

body.dark .detail-card p {
  color: var(--label-dark-mode);
}

body.dark .detail-card li {
  color: var(--label-dark-mode);
}

/* --- JSON view --- */

body.dark .json-view-container {
  background: var(--theme-dark-high);
}

body.dark .json-view-copy-btn {
  background: var(--theme-dark-high);
}

body.dark .json-view-container .react-json-view {
  background: var(--theme-dark-high) !important;
}

/* --- Empty message --- */

body.dark .empty-message {
  color: var(--label-dark-mode);
}

/* --- MUI Paper --- */

body.dark .MuiPaper-root {
  background-color: var(--theme-dark-medium) !important;
  color: var(--value-dark-mode);
}

/* --- MUI Tabs --- */

body.dark .MuiTab-root {
  color: var(--label-dark-mode) !important;
}

body.dark .MuiTab-root.Mui-selected {
  color: var(--value-dark-mode) !important;
}

body.dark .MuiTabs-indicator {
  background-color: #dc281e !important;
}

/* --- Detail page headings --- */

body.dark .headingLable {
  color: var(--label-dark-mode);
}

body.dark .tenantDetailPageHeading {
  color: #dc281e;
}

body.dark .detailsHeaderWrapper {
  color: var(--value-dark-mode);
}

/* --- Secondary header --- */

body.dark .MuiSelect-root,
body.dark .MuiSelect-icon {
  color: var(--value-dark-mode) !important;
}

body.dark .MuiOutlinedInput-notchedOutline {
  border-color: #444 !important;
}

/* --- Diagram wrapper --- */

body.dark .orch_diagram_wrapper {
  color: var(--value-dark-mode);
}

body.dark .showFailureRoutes_label {
  color: var(--label-dark-mode);
}

body.dark .copy_btn_wrap .MuiIconButton-root {
  color: var(--label-dark-mode);
}

body.dark .node_details_headingLable {
  color: var(--label-dark-mode);
}

/* --- ExtAuths tab section headings --- */

body.dark .MuiCheckbox-root {
  color: var(--label-dark-mode) !important;
}

body.dark .MuiCheckbox-colorPrimary.Mui-checked {
  color: #dc281e !important;
}

/* --- ExtAuth match list --- */

body.dark .expand-toggle-btn {
  color: #20a8d8;
}

body.dark .extauth-pattern-text {
  color: var(--label-dark-mode);
}

body.dark .extauth-pattern-text code {
  background: var(--theme-dark-high);
  color: var(--value-dark-mode);
}

body.dark .text-danger {
  color: #ff6b6b;
}

/* --- ReactJson dark theme override --- */

body.dark .react-json-view {
  background: var(--theme-dark-high) !important;
}

/* --- Force underline links --- */

body.dark .force-underline {
  color: #20a8d8;
}