/* 
 * Text color
 */
:root {
  --text-color1: #eee;
  --text-color2: #aaa;
}

/* 
 * Palette: Dark gray
 */
:root {
  --color1: #0e0e0e;
  --color2: #181818;
  --color3: #212121;
  --color4: #252525;
  --color5: #2b2b2b;
}

/* 
 * Palette: Dark blue 
 */
/* 
:root {
  --color1: #152238;
  --color2: #192841;
  --color3: #1c2e4a;
  --color4: #203354;
  --color5: #23395d;
} 
*/

/* 
 * Palette: Dark teal 
 */
/* 
:root {
  --color1: #000f10;
  --color2: #001717;
  --color3: #001f1f;
  --color4: #012727;
  --color5: #012e2f;
} 
*/

/* 
 * Palette: Dark purple 
 */
/* 
:root {
  --color1: #200a24;
  --color2: #2a132f;
  --color3: #321a37;
  --color4: #441e4b;
  --color5: #4e2c5d;
} 
*/

/* 
 * Login 
 */
body {
  background-color: var(--color2) !important;
}

.form-signin {
  background-color: var(--color3) !important;
}

/* 
 * Left Sidebar 
 */
.slideout-menu {
  background-color: var(--color1) !important;
}

.slideout-menu .side-user {
  background-color: var(--color2) !important;
  border-bottom-color: var(--color4) !important;
  border-right-color: var(--color1) !important;
}

.slideout-menu .side-user p label {
  color: var(--text-color1) !important;
}

.slideout-menu .side-user p a {
  color: var(--text-color2) !important;
}

.slideout-menu .tree li > .title-wrap > a {
  color: var(--text-color2) !important;
}

.slideout-menu .tree li > .title-wrap > a:before {
  color: #555 !important;
}

.slideout-menu .tree li > .title-wrap > a:hover {
  color: var(--text-color1) !important;
}

.slideout-menu .tree li > .title-wrap > a.nuxt-link-exact-active {
  color: var(--text-color1) !important;
}

.slideout-menu .tree-fade-out {
  background-image: linear-gradient(
    to bottom,
    rgba(245, 245, 245, 0),
    var(--color1),
    var(--color2)
  ) !important;
}

/* 
 * Menu Icon
 * FontAwesome 4.7.0 
 */
.tree .icon-file-dash:before {
  content: '\f009' !important;
}

.tree .icon-file-hmi:before {
  content: '\f0e4' !important;
}

.tree .icon-file-thmi:before {
  content: '\f03a' !important;
}

.tree .icon-file-table:before {
  content: '\f0ce' !important;
}

.tree .icon-file-chart:before {
  content: '\f080' !important;
}

.tree .icon-file-map:before {
  content: '\f0ac' !important;
}

.tree .icon-file-epaper:before {
  content: '\f1c1' !important;
}

/* 
 * Topbar 
 */
.navbar {
  background-color: var(--color2) !important;
  border-bottom-color: var(--color3) !important;
}

@media all and (display-mode: fullscreen) {
  .navbar {
    background-color: var(--color1) !important;
    border-bottom-color: var(--color1) !important;
  }

  .navbar:hover {
    background-color: var(--color2) !important;
  }
}

.navbar .dropdown-menu {
  border-top-color: var(--color3) !important;
}

.navbar .dropdown-menu a {
  border-bottom-color: var(--color5) !important;
  background-color: var(--color2) !important;
}

/* 
 * Content 
 */
#bodyBig {
  background-color: var(--color1) !important;
}

#bodyBig #tableBox h3,
#bodyBig #thmiBox h3 {
  color: var(--text-color1) !important;
}

#bodyBig #tableBox h4,
#bodyBig #thmiBox h4 {
  color: var(--text-color2) !important;
}

#bodyBig #mapTable tr th,
#bodyBig #tableBox tr th,
#bodyBig #thmiBox tr th {
  background-color: var(--color2) !important;
  border-color: var(--color5) !important;
}

#bodyBig #mapTable tr th {
  color: var(--text-color1) !important;
}

#bodyBig #tableBox tr:first-child td,
#bodyBig #thmiBox tr:first-child td {
  border-top-color: var(--color5) !important;
}

#bodyBig #tableBox .table-head div:nth-child(1),
#bodyBig #tableBox .table-head div:nth-child(3) {
  color: var(--text-color2) !important;
}

#bodyBig #drawChart .highcharts-background {
  fill: var(--color1);
}

#bodyBig #drawChart .highcharts-title tspan {
  fill: #bbb;
}

#bodyBig #drawChart .highcharts-subtitle tspan,
#bodyBig #drawChart .highcharts-legend-item text tspan {
  fill: #777;
}

/* 
 * Right sidebar 
 */
#logBar {
  background-color: var(--color1) !important;
}

#logBar .card {
  border-color: var(--color1) !important;
}

#logBar .card-header h2 {
  background-color: var(--color2) !important;
}

#logBar .collapse div#statusData,
#logBar .collapse div#alarmData {
  background-color: var(--color3) !important;
}

#logBar .collapse div#statusData p,
#logBar .collapse div#alarmData p {
  background-color: var(--color2) !important;
  border-top-color: var(--color3) !important;
  border-bottom-color: var(--color1) !important;
  border-left-color: var(--color5) !important;
}

#logBar .collapse div#statusData p:hover,
#logBar .collapse div#alarmData p:hover {
  background-color: var(--color3) !important;
}

#logBar .collapse.show {
  border-bottom-color: var(--color5) !important;
}

#logBar .collapse.show .card-body {
  background-color: var(--color4) !important;
}

#logBar #layerTable {
  background-color: var(--color2) !important;
}

#logBar #layerTable td {
  border-color: var(--color1) !important;
}

#logBar fieldset {
  border-color: var(--color5) !important;
}

#logBar fieldset:disabled {
  border-color: var(--color3) !important;
}

#logBar #assetName {
  color: var(--text-color2) !important;
}

#logBar #assetProperty td.text-muted {
  background-color: var(--color4) !important;
}