[data-theme="light"] {
  --color-bg: #f8f8f8;
  --color-border: #e7e7e7;
  --color-fg: #000000;
  --color-table-tr-odd: #dddddd;
  --color-menu-active: #a15222;
  --color-menu-fg: #f8f8f8;
  --color-btn-primary-color: #ffffff;
  --color-btn-primary-bg: #337ab7;
  --color-btn-primary-border: #2e6da4;
  --color-btn-primary-color-hover: #ffffff;
  --color-btn-primary-bg-hover: #286090;
  --color-btn-primary-border-hover: #204d74;
  --color-btn-danger-color: #ffffff;
  --color-btn-danger-bg: #d9534f;
  --color-btn-danger-border: #d43f3a;
  --color-btn-danger-color-hover: #ffffff;
  --color-btn-danger-bg-hover: #c9302c;
  --color-btn-danger-border-hover: #ac2925;
  --color-panel-green: #5cb85c;
  --color-panel-blue: #337ab7;
  --color-panel-red: #d9534f;
}

[data-theme="dark"] {
  --color-bg: #1c1919;
  --color-border: #444444;
  --color-fg: #A0A0A0;
  --color-table-tr-odd: #13100a;
  --color-menu-active: #5c3d2e;
  --color-menu-fg: #F0F0F0;
  --color-btn-primary-color: #fefed3;
  --color-btn-primary-bg: #697565;
  --color-btn-primary-border: #697565;
  --color-btn-primary-color-hover: #fefed3;
  --color-btn-primary-bg-hover: #4e574b;
  --color-btn-primary-border-hover: #4e574b;
  --color-btn-danger-color: #fefed3;
  --color-btn-danger-bg: #d9534f;
  --color-btn-danger-border: #d43f3a;
  --color-btn-danger-color-hover: #fefed3;
  --color-btn-danger-bg-hover: #c9302c;
  --color-btn-danger-border-hover: #ac2925;
  --color-panel-green: #697565;
  --color-panel-blue: #153448;
  --color-panel-red: #982b1c;
}

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
}

a {
  color: var(--color-fg);
}

a:hover {
  color: var(--color-menu-fg);
}

[data-theme-toggle] {
  margin-right: 20px;
  cursor: pointer;
}

.navbar-default,
.well {
  background-color: var(--color-bg);
  border-color: var(--color-border);
}

.nav > li > a.active {
  color: var(--color-menu-fg);
}

.nav > li > a:focus,
.nav > li > a:hover {
  background-color: var(--color-menu-active);
  color: var(--color-menu-fg);
}

.pagination > .disabled > a,
.pagination > li > a {
  background-color: var(--color-bg);
  color: var(--color-fg);
  border-color: var(--color-border);
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover {
  background-color: var(--color-menu-active);
  border-color: var(--color-border);
}

.sidebar ul li {
  border-bottom: 1px solid var(--color-border);
}

.sidebar ul li a.active {
  background-color: var(--color-menu-active);
}

#page-wrapper {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-fg);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--color-table-tr-odd);
}

.nav-tabs {
  border-bottom: 1px solid var(--color-border);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid var(--color-border);
}

.btn-primary {
  color: var(--color-btn-primary-color);
  background-color: var(--color-btn-primary-bg);
  border-color: var(--color-btn-primary-border);
}

.btn-primary:hover {
  color: var(--color-btn-primary-color-hover);
  background-color: var(--color-btn-primary-bg-hover);
  border-color: var(--color-btn-primary-bg-hover);
}

.btn-danger {
  color: var(--color-btn-danger-color);
  background-color: var(--color-btn-danger-bg);
  border-color: var(--color-btn-danger-border);
}

.btn-danger:hover {
  color: var(--color-btn-danger-color-hover);
  background-color: var(--color-btn-danger-bg-hover);
  border-color: var(--color-btn-danger-border-hover);
}

.enligne {
    color: var(--color-btn-primary-bg);
}

.horsligne {
  color: var(--color-btn-danger-bg);
}

.panel-primary {
  border-color: var(--color-panel-blue);
}
.panel-primary > .panel-heading {
  background-color: var(--color-panel-blue);
  border-color: var(--color-panel-blue);
}
.panel-primary > a {
  background-color: var(--color-panel-blue);
  border-color: var(--color-panel-blue);
  color: var(--color-panel-blue);
}

.panel-red {
  border-color: var(--color-panel-red);
}
.panel-red > .panel-heading {
  background-color: var(--color-panel-red);
  border-color: var(--color-panel-red);
}
.panel-red > a {
  background-color: var(--color-panel-red);
  border-color: var(--color-panel-red);
  color: var(--color-panel-red);
}

.panel-green {
  border-color: var(--color-panel-green);
}
.panel-green > .panel-heading {
  background-color: var(--color-panel-green);
  border-color: var(--color-panel-green);
}
.panel-green > a {
  background-color: var(--color-panel-green);
  border-color: var(--color-panel-green);
  color: var(--color-panel-green);
}