:root {
  --font-color: #212529;
  --background-color: #ffffff;
  --card-header-background-color: rgba(0, 0, 0, 0.03);
  --card-border-color: rgba(0, 0, 0, 0.125);
  --row-position-color: #f2ffd5;
  --row-mlat-color: #caece6;
  --row-interesting-color: #ffbf00;
  --row-squawk7500-color: #00bed7;
  --row-squawk7600-color: #f1f000;
  --row-squawk7700-color: #f4003b;
  --row-specialDE-color: #94cd00;
  --row-selected-color: #b7c9d3;
  --aircraft-marker-selected-color: crimson;
  --form-control-color: #495057;
  --form-check-checked-color: #007bff;
  --form-check-color: #ffffff;
  --btn-link-color: #007bff;
  --btn-success-color: #28a745;
  --btn-danger-color: #dc3545;
  --btn-secondary-color: #ffffff;
  --btn-light-color: #f8f9fa;
  --toast-border-color: crimson;
  --toast-header-background-color: crimson;
  --toast-background-color: gold;
  --toast-color: whitesmoke;
  --alt-background-image-meters: url('../images/alt_legend_meters.svg');
  --alt-background-image-feet: url('../images/alt_legend_feet.svg');
  --alt-legend-brightness: brightness(1);
  --lock-icon: url('../images/icons/lock-fill.svg');
  --unlocklock-icon: url('../images/icons/unlock-fill.svg');
  --filter-selected-icon: url('../images/icons/filter.svg');
  --sidebar-reverse-icon: url('../images/icons/layout-sidebar-reverse.svg');
  --sidebar-icon: url('../images/icons/layout-sidebar.svg');
  --geo-icon: url('../images/icons/geo.svg');
  --checkbox-icon: url('../images/icons/check-box.svg');
  --x-square-icon: url('../images/icons/x-square.svg');
  --map-icon: url('../images/icons/map.svg');
  --no-gps-icon: url('../images/icons/no-gps.svg');
  --gps-no-position-icon: url('../images/icons/gps-no-position.svg');
  --gps-position-icon: url('../images/icons/gps-position.svg');
  --map-dim: brightness(1);
  --overlay-dim: brightness(1);
}

[data-theme='dark'] {
  --font-color: #c0c0c0;
  --background-color: #121212;
  --card-header-background-color: #212121;
  --card-border-color: rgba(255, 255, 255, 0.25);
  --row-position-color: #263238;
  --row-mlat-color: #006064;
  --row-interesting-color: #e65100;
  --row-squawk7500-color: #01579b;
  --row-squawk7600-color: #bf360c;
  --row-squawk7700-color: #b71c1c;
  --row-specialDE-color: #1b5e20;
  --row-selected-color: #546e7a;
  --aircraft-marker-selected-color: #ad1457;
  --form-control-color: #c0c0c0;
  --form-check-checked-color: #8e24aa;
  --form-check-color: #c0c0c0;
  --btn-link-color: #8e24aa;
  --btn-success-color: #33691e;
  --btn-danger-color: #b71c1c;
  --btn-light-color: dimgrey;
  --btn-secondary-color: #212121;
  --toast-border-color: #d50000;
  --toast-header-background-color: #ff6d00;
  --toast-background-color: #880000;
  --toast-color: #e0e0e0;
  --alt-background-image-meters: url('../images/alt_legend_meters_dark.svg');
  --alt-background-image-feet: url('../images/alt_legend_feet_dark.svg');
  --alt-legend-brightness: brightness(0.5);
  --lock-icon: url('../images/icons-dark/lock-fill.svg');
  --unlocklock-icon: url('../images/icons-dark/unlock-fill.svg');
  --filter-selected-icon: url('../images/icons-dark/filter.svg');
  --sidebar-reverse-icon: url('../images/icons-dark/layout-sidebar-reverse.svg');
  --sidebar-icon: url('../images/icons-dark/layout-sidebar.svg');
  --geo-icon: url('../images/icons-dark/geo.svg');
  --checkbox-icon: url('../images/icons-dark/check-box.svg');
  --x-square-icon: url('../images/icons-dark/x-square.svg');
  --map-icon: url('../images/icons-dark/map.svg');
  --no-gps-icon: url('../images/icons-dark/no-gps.svg');
  --gps-no-position-icon: url('../images/icons-dark/gps-no-position.svg');
  --gps-position-icon: url('../images/icons-dark/gps-position.svg');
  --map-dim: brightness(0.35);
  --overlay-dim: brightness(0.75);
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
  font-family: Roboto, Tahoma, Sans-Serif;
  font-size: 10pt;
  overflow: auto;
  height: 100%;
  color: var(--font-color);
}

::-webkit-scrollbar-track,
::-webkit-scrollbar {
  background-color: var(--background-color);
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-thumb {
  background: var(--card-header-background-color);
  border-radius: 5px;
}

#layoutContainer {
  display: flex;
  height: 100%;
}

#lMapContainer {
  flex: 1 1 auto;
  position: relative;
  height: 100%;
}

#lMapCanvas {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
}

#sidebarContainer {
  left: 0 !important;
  flex: 0 0 auto;
  padding: 0px 2px 0px 2px;
  overflow: auto;
  width: min-content;
}

.hidden {
  display: none;
}

.showFlags {
  filter: var(--map-dim);
}

.hideFlags {
  display: none;
}

#selectedInfoblock {
  position: absolute;
  left: 40px;
  top: 10px;
  min-width: 360px;
  background: var(--background-color);
  box-shadow: 4px 4px 10px #444444;
  cursor: pointer;
  z-index: 1200; /* Highest z-index in leaflet is 1000 */
  border-radius: 5px;
}

#aircraftList {
  width: 100%;
  font-size: 0.9em;
  border-collapse: unset;
}

.aircraftListHead {
  background-color: var(--card-header-background-color);
  color: var(--font-color);
  cursor: pointer;
}
.aircraftListHead td {
  font-size: smaller;
  padding: 5px;
  text-align: center;
}

.aircraftListRow {
  cursor: pointer;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#altitudeChart {
  position: absolute;
  float: right;
  width: calc(100% - 5px);
  max-width: 800px;
  right: 5px;
  bottom: 35px;
  background-color: transparent !important;
  z-index: 1100;
}

#altitudeChartButton {
  background-image: var(--alt-background-image-feet);
  background-size: auto;
  background-color: transparent;
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: calc(100% * 56 / 1815);
  border-width: 0px;
  filter: var(--alt-legend-brightness);
}

.altitudeMeters {
  background-image: var(--alt-background-image-meters) !important;
}

#popInfo {
  max-width: 200px;
  background-color: var(--background-color);
  color: var(--font-color);
  opacity: 0.85;
  font-size: 8pt;
  font-family: sans-serif;
  margin: 5px;
  border: 1px solid black;
  border-radius: 10px 10px 10px 0;
  padding: 2px 5px 2px 5px;
  white-space: pre-wrap;
  z-index: 1100;
}

#filterList input.oneChar {
  width: 1.5em;
  margin: 0 0 0 0.3em;
}
#filterList input.threeChar {
  width: 4em;
  margin: 0 0 0 0.3em;
}
#filterList input.sixChar {
  width: 5em;
  margin: 0 0 0 0.3em;
}
#filterList input.eightChar {
  width: 7em;
  margin: 0 0 0 0.3em;
}
#filterList input.nineChar {
  width: 8em;
  margin: 0 0 0 0.3em;
}
#filterList input.wide {
  width: 15em;
  margin: 0 0 0 0.3em;
}

#filterList li {
  margin: 0.5em 0 0 0;
}

#filterList select {
  margin: 0 0 0 0.3em;
}

.infoblockHeading {
  font-size: larger;
  color: #005587;
}
.infoblockHeading a {
  text-decoration: none;
  color: #005587;
}
.infoblockBody {
  color: rgb(102, 102, 102);
}
span#selectedWindDirection {
  color: rgb(102, 102, 102);
}

.verticalRateTriangle {
  font-family: 'Courier New', monospace;
}

.icaoCodeColumn {
  font-family: monospace;
  text-transform: uppercase;
}

.vPosition {
  background-color: var(--row-position-color);
}
.mlat {
  background-color: var(--row-mlat-color);
}
.interesting {
  background-color: var(--row-interesting-color);
}
.squawk7500 {
  font-weight: bold;
  background-color: var(--row-squawk7500-color);
}
.squawk7600 {
  font-weight: bold;
  background-color: var(--row-squawk7600-color);
}
.squawk7700 {
  font-weight: bold;
  background-color: var(--row-squawk7700-color);
}
.squawkSpecialDE {
  font-weight: bold;
  background-color: var(--row-specialDE-color);
}
.selected {
  background-color: var(--row-selected-color);
}

.aircraft-marker-selected {
  outline-style: dashed;
  outline-width: 1.5px;
  outline-color: var(--aircraft-marker-selected-color);
}

@keyframes blink {
  50% {
    outline-style: none;
  }
}
.alert-blink {
  animation: blink 0.3s ease-in infinite alternate;
}

.ident-blink {
  animation: blink 0.5s step-end infinite alternate;
}

/* Style of trash button in filter selection */
.btn-trash {
  background-image: url('../images/icons/trash.svg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 26px;
  height: 26px;
}

/* Style of follow aircraft icon in selected infoblock */
.follow-lock-icon {
  background-image: var(--lock-icon);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
}

/* Style of follow aircraft icon in selected infoblock */
.follow-unlock-icon {
  background-image: var(--unlocklock-icon);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
}

/* Style of filter aircraft icon in selected infoblock */
#filter-selected-icon {
  background-image: var(--filter-selected-icon);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
}

.gps-icon {
  background-repeat: no-repeat;
  background-position: left;
  margin-left: 15px;
}

.no-gps-icon {
  background-image: var(--no-gps-icon);
  display: none;
}

.gps-no-position-icon {
  background-image: var(--gps-no-position-icon);
}

.gps-position-icon {
  background-image: var(--gps-position-icon);
}

/* Basic style of custom leaflet control buttons */
.leaflet-btn-control {
  width: 25px;
  height: 25px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  background: var(--background-color);
  border-radius: 5px;
  border-style: none;
  background-clip: padding-box;
}

/* Style of sidepanel hide button */
.leaflet-btn-hide-sidepanel {
  background-image: var(--sidebar-reverse-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Style of sidepanel expand button */
.leaflet-btn-expand-sidepanel {
  background-image: var(--sidebar-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* Style of reset map button */
.leaflet-btn-reset-map {
  background-image: var(--geo-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* Style of select all aircraft button */
.leaflet-btn-select-all {
  background-image: var(--checkbox-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* Style of deselect all aircraft button */
.leaflet-btn-deselect-all {
  background-image: var(--x-square-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.import-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--background-color);
  background-color: #6c757d;
  border: 1px solid #6c757d;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.import-file-label:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}

@media screen and (max-width: 1225px) and (min-width: 1045px) {
  .prio-5 {
    display: none;
  }
}

@media screen and (max-width: 1045px) and (min-width: 835px) {
  .prio-5 {
    display: none;
  }
  .prio-4 {
    display: none;
  }
}

@media screen and (max-width: 565px) and (min-width: 480px) {
  .prio-5 {
    display: none;
  }
  .prio-4 {
    display: none;
  }
  .prio-3 {
    display: none;
  }
}

@media screen and (min-width: 0px) and (max-width: 480px) {
  .prio-5 {
    display: none;
  }
  .prio-4 {
    display: none;
  }
  .prio-3 {
    display: none;
  }
  .prio-2 {
    display: none;
  }
}

/* Override leaflet defaults */

/* Override style of leaflet zoom buttons */
.leaflet-bar a {
  width: 25px !important;
  height: 25px !important;
  line-height: 25px !important;
  font-size: 1.5em !important;
  background-color: var(--background-color);
  color: var(--font-color);
}

.leaflet-control-layers-group-name {
  font-weight: bold;
  margin-bottom: 0.2em;
  margin-left: 3px;
}

.leaflet-control-layers-group {
  margin-bottom: 0.5em;
}

.leaflet-control-layers-scrollbar {
  overflow-y: scroll;
  padding-right: 10px;
}

/* Override style of leaflet layer selector button */
.leaflet-retina .leaflet-control-layers-toggle,
.leaflet-control-layers-toggle {
  background-image: var(--map-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 25px !important;
  height: 25px !important;
  background-color: var(--background-color);
  color: var(--font-color);
  border-radius: 5px;
}

.leaflet-tooltip {
  position: absolute;
  background-color: var(--background-color);
  color: var(--font-color);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  max-width: 200px;
  font-size: 8pt;
  font-family: sans-serif;
  margin: 5px;
  border: 1px solid var(--card-border-color);
  border-radius: 10px 10px 10px 0;
  padding: 2px 5px 2px 5px;
  white-space: pre-wrap;
  line-height: normal;
  min-inline-size: max-content;
}

.leaflet-tooltip-right:before {
  border-right-color: transparent;
}

.leaflet-control-layers,
.leaflet-control-layers-expanded {
  background-color: var(--background-color);
  color: var(--form-control-color);
}

.leaflet-tile-pane {
  filter: var(--map-dim);
}

.leaflet-overlay-pane,
.leaflet-marker-pane {
  filter: var(--overlay-dim);
}

/* Overwrite bootstrap defaults */
.form-check-label.col-form-label-sm {
  padding-top: 0px;
  padding-bottom: 0px;
}

.accordion-button {
  padding: 0.25rem;
}

.accordion-button.collapsed {
  background-color: var(--card-header-background-color);
  color: var(--font-color);
}

.accordion-button:not(.collapsed) {
  background-color: var(--card-header-background-color);
  color: var(--font-color);
}

.accordion-body {
  padding: 0.25rem;
}

.accordion-item {
  background-color: var(--background-color);
  border-color: var(--card-border-color);
}

/* Override style for toast used as error indicator */
.toast {
  position: absolute;
  bottom: 25px;
  left: 25px;
  border: 2px solid var(--toast-border-color);
  background-color: var(--toast-background-color);
  padding: 5px;
  text-align: center;
  z-index: 1100;
}

.toast-header {
  background-color: var(--toast-header-background-color);
  color: var(--toast-color);
}

.form-label {
  height: calc(1em + 0.75rem + 2px);
  color: #495057;
  border: 1px solid #6c757d;
}

.form-control,
.form-control:focus,
.form-select,
.dropdown-menu,
.dropdown-toggle,
.form-label::before {
  background-color: var(--background-color);
  color: var(--form-control-color);
  border: 1px solid var(--card-border-color);
}

.dropdown-item {
  color: var(--form-control-color);
}

.form-check-input:checked {
  color: var(--form-control-color);
  border-color: var(--form-check-checked-color);
  background-color: var(--form-check-checked-color);
}

.form-check-input {
  background-color: var(--form-check-color);
}

.form-inline {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-align: center;
  align-items: center;
}

.form-inline .form-check {
  width: 100%;
}

@media (min-width: 576px) {
  .form-inline label {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .form-inline .form-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .form-control-plaintext {
    display: inline-block;
  }
  .form-inline .input-group,
  .form-inline .form-select {
    width: auto;
  }
  .form-inline .form-check {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: auto;
    padding-left: 0;
  }
  .form-inline .form-check-input {
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 0;
    margin-right: 0.25rem;
    margin-left: 0;
  }
  .form-inline .form-control {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .form-inline .form-label {
    margin-bottom: 0;
  }
}

.modal-content {
  background-color: var(--background-color);
  color: var(--form-control-color);
}

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

.btn-link {
  color: var(--btn-link-color);
}

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

.btn-secondary {
  color: var(--btn-secondary-color);
}

.btn-light {
  color: var(--font-color);
  background-color: var(--btn-light-color);
  border-color: var(--btn-light-color);
}