:root {
    --dark-grey: #292929;
    --dark-grey-lighter: #343434;
    --dark-grey-normal: #6c757d;
    --dark-grey-lightest: #a9a9a9;
    --dark-color-brown: #9B3922;
}

[data-theme="dark"] input[type="checkbox"] {
  background-color: var(--dark-grey);
  border-color: var(--dark-color-brown);
  box-shadow: none;
}

[data-theme="dark"] input[type="text"] {
    background-color: var(--dark-grey);
    border-color: var(--dark-color-brown);
    color: #ccc;
    box-shadow: none;
}

[data-theme="dark"] button.btn-primary {
    border-color: var(--dark-color-brown);
    box-shadow: none;
}

[data-theme="dark"] {
  background-color: #1b1b1b !important;
  color: #ccc;
}

[data-theme="dark"] .bg-black {
  background-color: #fff !important;
}
[data-theme="dark"] .bg-light {
  background-color: #1c1c1c !important;
}
[data-theme="dark"] .bg-white {
  background-color: #000 !important;
}

[data-theme="dark"] .bg-dark {
  background-color: #1c1c1c !important;
}
[data-theme="dark"] .navbar-brand {
  background-color: #1c1c1c !important;
}
[data-theme="dark"] .sidebar {
  box-shadow: inset -1px 0 0 #212121;
}
[data-theme="dark"] .sidebar .nav-link {
  color: var(--dark-color-brown) !important;
}
[data-theme="dark"] .sidebar .nav-link.active {
  color: #F2613F !important;
}
[data-theme="dark"] .sidebar .nav-link:not(.nav-sub-link):hover {
  color: #F2613F !important;
  background-color: #333;
}
[data-theme="dark"] .sidebar .nav-link.nav-sub-link {
  color: #4c555d !important;
}
[data-theme="dark"] .sidebar .nav-link.nav-sub-link:hover {
  background-color: #191919;
}
[data-theme="dark"] .sidebar h6 {
  color: var(--dark-grey-normal) !important;
}
[data-theme="dark"] .form-select {
  background-color: var(--dark-grey) !important;
  color: var(--dark-grey-lightest) !important;
  border-color: var(--dark-color-brown);
}

[data-theme="dark"] .html-result div {
  background-color: var(--dark-grey-lighter);
  color: var(--dark-grey-lightest) !important;
}
/* code */
[data-theme="dark"] .code-result pre {
  background-color: var(--dark-grey-lighter);
}
[data-theme="dark"] code pre {
  background-color: var(--dark-grey-lighter);
  border: 0;
  color: var(--dark-grey-lightest) !important;
}
[data-theme="dark"] code#dataset span {
  color: var(--dark-grey-lightest) !important;
}
[data-theme="dark"] .code-wrapper {
  background-color: var(--dark-grey-lighter);
  border: 1px solid var(--dark-grey-lighter);
}
[data-theme="dark"] .code-wrapper span {
  background-color: var(--dark-grey-lighter);
}
[data-theme="dark"] code:not(#code) {
  background-color: var(--dark-grey-lighter);
  color: #fff;
}
[data-theme="dark"] code.language-javascript.hljs {
    background-color: var(--dark-grey-lighter);
    color: #fff;
}
/* FIX colors for JS highlighter: */
[data-theme="dark"] code.language-javascript.hljs {color: #cccccc !important;}
[data-theme="dark"] code.language-javascript.hljs .hljs-keyword{color: #3a80d2ba !important;}

/* NEW highlight method */
/* reserved words */
[data-theme="dark"] code pre span[style="color: #0000BB"]{
  color: #E7AB79 !important;
}
[data-theme="dark"] code pre span[style="color: #DD0000"]{
  color: #00a061 !important;
}
/* methods, functions, var names */
[data-theme="dark"] code pre span[style="color: #007700"]{
  color: #a2a0C3 !important;
}
[data-theme="dark"] code pre span[style="color: #FF8000"]{
  color: #888877 !important;
}
/* OLD highlight method */
[data-theme="dark"] .code-wrapper span[style="color: #0000BB"]{
  color: #E7AB79 !important;
}
[data-theme="dark"] .code-wrapper span[style="color: #DD0000"]{
  color: #00a061 !important;
}
[data-theme="dark"] .code-wrapper span[style="color: #007700"] {
  color: #a2a0C3 !important;
}
[data-theme="dark"] .code-wrapper span[style="color: #007700"] {
  color: #888877 !important;
}

/* Nav tabs */
[data-theme="dark"] .nav-tabs {
    border-bottom: 1px solid #999;
}
[data-theme="dark"] .nav-tabs .nav-link {
    border-top: 1px solid var(--dark-color-brown);
    border-right: 1px solid var(--dark-color-brown);
    border-left: 1px solid var(--dark-color-brown);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--dark-color-brown);
    color: #fff !important;
    border: 1px solid var(--dark-color-brown);
}

/* Search */
[data-theme="dark"] .bg-yellow {
    background-color: #9d7f06;
}

/* Switch button */
[data-theme="dark"] .form-check-input:checked {
  background-color: var(--dark-color-brown);
  border-color: var(--dark-color-brown);
}

[data-theme="dark"] .btn-outline-primary {
  color: #0d6efd;
  border-color: var(--dark-color-brown);
}

[data-theme="dark"] .btn-outline-primary {
  color: #fff;
  /*background-color: var(--dark-color-brown);*/
  border-color: var(--dark-color-brown);
}
[data-theme="dark"] .btn-outline-primary:hover {
  color: #fff !important;
  background-color: var(--dark-color-brown);
  border-color: var(--dark-color-brown);
}

[data-theme="dark"] .btn-clipboard, [data-theme="dark"] .btn-clipboard:hover {
  color: #fff;
  background-color: #000000;
  border-color: var(--dark-color-brown);
  color: #F2613F;
}
[data-theme="dark"] .btn-clipboard:hover, [data-theme="dark"] .btn-clipboard:focus {
  color: #fff;
  background-color: var(--dark-color-brown);
  border-color: #444444;
}

[data-theme="dark"] .btn-link {
  font-weight: 400;
  color: var(--dark-color-brown);
  text-decoration: underline;
}
[data-theme="dark"] main a {
  color: var(--dark-color-brown) !important;
}
[data-theme="dark"] main a:hover {
  color: #F2613F !important;
}

/* Graph action buttons */
[data-theme="dark"] button {
  color: var(--dark-color-brown) !important;
  border-color: var(--dark-color-brown);
  background-color: #000;
}
[data-theme="dark"] button:disabled {
  color: #000 !important;
  background-color: var(--dark-grey-normal);
  border-color: #999;
}
[data-theme="dark"] button:not(:disabled):hover {
  color: #fff !important;
  background-color: var(--dark-color-brown);
  border-color: var(--dark-color-brown);
}

[data-theme="dark"] .main-svg {
  filter: invert(90%) hue-rotate(10deg);
}

/* mermaid */
[data-theme="dark"] .mermaid .edgeLabel {
  background-color: #1b1b1b !important;
}
[data-theme="dark"] .mermaid .marker {
  fill: #888877 !important;
}

/* vectors */
[data-theme="dark"] input[type="number"] {
    background-color: var(--dark-grey);
    color: #fff !important;
    border: 1px solid var(--dark-color-brown);
    padding: 4px 6px;
    border-radius: 4px;
}

[data-theme="dark"] #vectorControls input[type="number"] {
    border: 1px solid var(--dark-color-brown);
    background-color: var(--dark-grey);
}

[data-theme="dark"] #vectorControls .output-vector {
    background-color: var(--dark-grey-lighter) !important;
}

/* Plotly */
[data-theme="dark"] .chart-container svg {
    /*background-color: var(--dark-grey-lighter) !important;*/
}
[data-theme="dark"] .chart-container svg g {
    background-color: var(--dark-grey-lighter) !important;
    stroke: #515151 !important;
}
[data-theme="dark"] .chart-container svg g[stroke="red"] {
    background-color: var(--dark-grey-lighter) !important;
    stroke: red !important;
}
[data-theme="dark"] .chart-container svg g[stroke="green"] {
    background-color: var(--dark-grey-lighter) !important;
    stroke: green !important;
}

/* Simulated Annealing Search */
[data-theme="dark"] #sa-search .panel {
    background-color: var(--dark-grey);
}
[data-theme="dark"] #sa-search .log-container {
    background-color: var(--dark-grey);
}
[data-theme="dark"] #sa-search .best-result {
    background-color: var(--dark-grey);
}
[data-theme="dark"] #sa-search #startBtn {
    border: 1px solid var(--dark-color-brown);
}
[data-theme="dark"] #sa-search #startBtn[disabled] {
    border: 1px solid #999;
}
[data-theme="dark"] #sa-search #pauseBtn {
    background-color: var(--dark-grey-normal);
}
[data-theme="dark"] #sa-search #pauseBtn:not([disabled]) {
    background-color: var(--dark-color-brown);
    color: #eee !important;
}
[data-theme="dark"] #sa-search #resetBtn {
    background-color: #c06000;
    color: #000 !important;
}
[data-theme="dark"] #sa-search .log-entry {
    border-bottom: none;
}

[data-theme="dark"] #sa-search-3 .bg-lightgray {
    background-color: var(--dark-grey);
}
[data-theme="dark"] #sa-search-3 .bg-info {
    background-color: var(--dark-grey-normal) !important;
    border-color: var(--dark-grey-lighter) !important;
}
[data-theme="dark"] #sa-search-3 .algorithm-log {
    background-color: var(--dark-grey) !important;
}
[data-theme="dark"] #sa-search-3 .log-entry-accepted {
    background-color: rgba(0, 255, 0, 0.1) !important;
    color: rgba(204, 204, 204, 1);
    font-size: 12px;
}
[data-theme="dark"] #sa-search-3 .log-entry-rejected {
    background-color: rgba(255, 115, 0, 0.1);
    color: rgba(204, 204, 204, 1);
    font-size: 12px;
}
[data-theme="dark"] #sa-search-3 .log-entry-best {
    background-color: rgba(33, 150, 243, 0.2);
    color: rgba(204, 204, 204, 1);
    font-size: 12px;
}
[data-theme="dark"] #sa-search-3 canvas {
    border: 1px solid #777 !important;
}
[data-theme="dark"] #sa-search-3 button {
    color: #fff !important;
}
[data-theme="dark"] #sa-search-3 button#start-btn:active,
[data-theme="dark"] #sa-search-3 button.btn-success:focus,
[data-theme="dark"] #sa-search-3 button#start-btn:visited {
    background-color: var(--dark-color-brown) !important;
    color: #fff !important;
}