/**
 * You can customize the DARK MODE here.
 * Only add what you need to change, rest will be loaded from main stylesheet,
 * main logic here is to overwrite previous settings with a data-theme setting.
 *
 * To add a definition, you can just copy it from main stylesheet and add
 * [data-theme="dark"] before the first class or the id. Then edit the color/style etc.
 *
 */

[data-theme="dark"] {
  background-color: black !important;
  background-image: url('/disposable/disposable_dark_bg_01.jpg') !important;
  color: AntiqueWhite !important;
}

[data-theme="dark"] .bg-sidebar {
  background-color: #172447;
  box-shadow: 2px 0px 4px darkslategray;
}

[data-theme="dark"] .bg-navbar {
  background-color: #172447;
  box-shadow: 0px 2px 4px darkslategray;
}

[data-theme="dark"] .bg-dropdown {
  background-color: rgba(23,36,71);
  box-shadow: 0px 2px 4px black;
  border: none;
}

[data-theme="dark"] .card {
  box-shadow: 2px 2px 4px #1322a73f;
  background-color: rgba(23,36,71);
  border-color: #172447;
  border-radius: 5px;
}

[data-theme="dark"] .card-header {
  background-color: rgba(23,36,71);
  color: white;
}

[data-theme="dark"] .card-body .table {
  background-color: rgba(48, 46, 46, 0.8);
  color: AntiqueWhite !important;
}

[data-theme="dark"] .media-body .table {
  background-color: transparent;
  color: AntiqueWhite !important;
}

/* Clock */
[data-theme="dark"] #clock { color: rgb(24, 167, 170) !important; }

/* SideBar text */
[data-theme="dark"] #Dispo_SideBar { color: rgb(71, 62, 19); font-weight: 400; }
[data-theme="dark"] #Dispo_SideBar a { color: rgb(71, 62, 19); font-weight: 400; }

/* Generic Link */
[data-theme="dark"] a { color: rgb(170, 142, 16) !; font-weight: 400; }

/* Cards */
[data-theme="dark"] .card { background-color: rgba(126, 101, 82, 0.65); }
[data-theme="dark"] .card-title { color: rgb(24, 168, 170); }
[data-theme="dark"] .card-footer { font-weight: 400 !important; background-color: rgba(43, 39, 36, 0.75); }

[data-theme="dark"] .table { font-weight: 400 !important; color:rgb(206, 138, 116);}

/* Generic Backgrounds, inverted */
[data-theme="dark"] .bg-light { background-color: #333 !important; }
[data-theme="dark"] .bg-white { background-color: #000 !important; }
[data-theme="dark"] .bg-white { background-color: #eee !important; }

/* phpVMS Core Maps, inverted */
[data-theme="dark"] #map { filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);}
[data-theme="dark"] #live_flights_table { color: rgb(211, 203, 194) !important; }

/* Select2 Dropdown fixes */
[data-theme="dark"] .select2-search input { color: black !important; }
[data-theme="dark"] .select2-results { color: black !important; }

[data-theme="dark"] .card .card-footer { color: lightsalmon !important; }
[data-theme="dark"] .card .overflow-auto { background-color: lightslategray !important; }
[data-theme="dark"] #map { filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);}
[data-theme="dark"] #live_flights_table { color: AntiqueWhite !important; }

[data-theme="dark"] .btn { color: AntiqueWhite; font-weight:500;}
[data-theme="dark"] .select2-search input { color: black !important; }
[data-theme="dark"] .select2-results { color: black !important; }

[data-theme="dark"] a { text-decoration: none; color: lightblue; font-weight:500;}
[data-theme="dark"] .card-body a { text-decoration: none; color: lightblue; font-weight:500;}
[data-theme="dark"] .card-body a:hover { text-decoration: none; color: LightGoldenRodYellow; font-weight:500;}
[data-theme="dark"] .card-body a:active { text-decoration: none; color: white; font-weight:500;}

[data-theme="dark"] #nav-tab .active { background-color: transparent; color: LightGoldenRodYellow;}

[data-theme="dark"] .jumbotron { background-color: transparent; color: LightGoldenRodYellow; }

[data-theme="dark"] .bg-light { background-color: #333 !important; }
[data-theme="dark"] .bg-white { background-color: #000 !important; }
[data-theme="dark"] .bg-black { background-color: #eee !important; }
[data-theme="dark"] .text-dark { color: AntiqueWhite !important; }