:root {
  --pm-primary-color: #4BA459;
  --pm-primary-color-light: #6db075;
  --pm-primary-color-dark: #378c44;
  --pm-text-color: #4f4f4f;
  --pm-divider-color: #ccc;
  --pm-background-color: #fff;
}

body {
  background-color: var(--pm-background-color);
  font-family: Noto Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
}

body > .container {
  padding: 15px;
}

.navbar,
.navbar .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.navbar .navbar-right li:nth-child(4) {
  display: none;
}

.btn,
.btn.dropdown-toggle,
.open > .dropdown-toggle.btn-default {
  color: #fff;
  background-color: var(--pm-primary-color);
  border-color: var(--pm-primary-color);
}

.open > .dropdown-toggle.btn-default:hover {
  color: #fff;
  background-color: var(--pm-primary-color-light);
  border-color: var(--pm-primary-color-light);
}

.btn:hover {
  color: #fff;
  background-color: var(--pm-primary-color-light);
  border-color: var(--pm-primary-color-light);
}

.btn:active,
.btn:focus,
.btn:active:focus,
.navbar-btn.nav-disabled {
  color: #fff;
  outline: none;
  outline-offset: 0;
  background-color: var(--pm-primary-color-dark);
  border-color: var(--pm-primary-color-dark);
}

.btn .glyphicon {
  color: #fff !important;
}

#error-type-dropdown {
  background-color: var(--pm-primary-color);
  border-color: var(--pm-primary-color);
}

.toolbar-row .input-group-btn .btn:focus {
  color: #fff;
  background-color: var(--pm-primary-color);
  border-color: var(--pm-primary-color);
}

.toolbar-row .input-group-btn .active,
.toolbar-row .input-group-btn .active:focus {
  background-color: var(--pm-primary-color-dark);
  border-color: var(--pm-primary-color);
}

.navbar {
  border-bottom: 2px solid var(--pm-primary-color);
}

.hud-container {
  background-size: 11px 11px;
  background-image: linear-gradient(to right, #f6f6f6 1px, transparent 1px), linear-gradient(to bottom, #f6f6f6 1px, transparent 1px);
}

.stat-title > .text {
  color: #3e3e3e;
  background-color: #fff;
  border: 1px solid #3e3e3e6b;
}

h3,
h4,
.stat,
tbody,
.info-text,
.font-white,
.navbar-brand,
.query-header,
.query-snippet,
.stat-title > .text,
.query-header-timestamp,
.navbar-cluster-info .text,
.login-form .form-control[readonly],
.table > tbody > tr > .info-sparkline-text {
  color: var(--pm-text-color);
}

.stat-row > :not(.tinystat-row) .glyphicon {
  color: #4BA459 !important;
}

.query-header {
  font-weight: bold;
  background-color: var(--pm-background-color);
  border-bottom: 1px solid rgb(217, 217, 217);
}

.query-header a,
.info-text a {
  color: var(--pm-primary-color);
}

.query-snippet {
  margin: 0;
  border: none;
}

.login-form .form-control[readonly] {
  background-color: #eee;
}

.navbar-cluster-info a {
  color: #fff;
}

.stat-large a {
  color: var(--pm-primary-color);
}

#query-list,
.query {
  border-color: #d9d9d9;
}

#query-list-title {
  background-color: #d9d9d9;
  border-top: #d9d9d9;
  color: var(--pm-text-color);
}

.filter-addon {
  border-top: 2px solid #f4f4f4;
  border-bottom: 3px solid #f4f4f4;
}

.toolbar-col {
  background-color: #f4f4f4;
  border-bottom: 1px solid #d9d9d9;
}

.memory-progress-bar-info {
  color: var(--pm-text-color);
  background-color: #e6e6e6;
  font-weight: bold;
  box-shadow: none;
}

pre {
  color: #000;
  margin-top: 10px;
  background-color: #f9f9f9;
  border: 1px solid var(--pm-divider-color);
}

pre .font-light {
  color: #008080;
}

pre .font-white {
  font-weight: bold;
}

#query-detail pre {
  border: 1px solid var(--pm-divider-color);
}

.copy-button, .btn.copy-button {
  background-color: #fff;
  border: none;
  color: var(--pm-primary-color);
}

.btn.copy-button .glyphicon {
  color: var(--pm-primary-color) !important;
}

.copy-button:active {
  color: var(--pm-primary-color-dark);
}

.copy-button:focus, .copy-button:hover {
  color: var(--pm-primary-color-light);
}

.table .table,
table .single-stage-table {
  background-color: var(--pm-background-color);
}

.expand-charts-button {
  background-color: #ddd;
}

.table > tbody > tr {
  border-top: 1px solid var(--pm-divider-color);
}

pre.hljs {
  color: #424d43;
  background: #eff0ef;
}

pre .hljs-keyword {
  color: #6a7808;
  font-weight: bold;
}

pre .hljs-comment {
  color: #008000;
}

.graph-container {
  background-color: #f0f0f0;
}

.clusters .label {
  color: var(--pm-text-color);
}

.node rect {
  fill: #555;
}

.node tbody {
  color: #fff;
}

.node .label h3 {
  color: inherit;
}

.plan-edge {
  stroke: #555;
  fill: #555;
}

.modal-content {
  background-color: rgba(255, 255, 255, 0.9);
}

.modal-header .close {
  color: #4f4f4f;
}

.operator-detail {
  padding: 0;;
}

.reactable-data td {
  color: #cecece;
}

.reactable-data td a {
  color: var(--pm-primary-color);
}

.reactable-data td a.font-light {
  color: var(--pm-primary-color-light);
}