:root {
  --avnav-font-family: Verdana, Arial, sans-serif;
  --avnav-mono-font-family: monospace;
  --avnav-filter-red: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
  --avnav-filter-redlight: brightness(0) saturate(100%) invert(19%) sepia(99%) saturate(7468%) hue-rotate(360deg) brightness(117%) contrast(110%);
  --avnav-filter-white: invert(100%) sepia(0%) saturate(1%) hue-rotate(156deg) brightness(102%) contrast(101%);
  --avnav-fore-color-inv: white;
  --avnav-fore-color: black;
  --avnav-back-color: white;
  --avnav-dialog-color: white;
  --avnav-toast-color: #383838;
  --avnav-main-color: #546E7A;
  --avnav-second-color: #E6E6E6;
  --avnav-attention-color: #C62828;
  --avnav-select-color: #eae8e8;
  --avnav-slide-color: rgba(0, 0, 255, 0.9);
  --avnav-button-color: var(--avnav-second-color);
  --avnav-button-filter: unset;
  --avnav-button-filter-inv: brightness(0) saturate(100%) invert(90%) sepia(93%) saturate(27%) hue-rotate(196deg) brightness(107%) contrast(100%);
  --avnav-border-color: #acacac;
  --avnav-active-color: #1DE9B6;
  --avnav-night-opacity: 1;
  --avnav-headline-height: 4em;
  --avnav-min-listitem-height: 45px;
  --avnav-active-button-border-width: 4px;
  --avnav-default-icon-size: 1.5em;
  --avnav-widget-border-width: 2px;
  --avnav-left-widgets-width: 8.8em;
  --avnav-horizontal-widgets-height: 4.1em;
  --avnav-widget-head-color: #E2DFDF;
  --avnav-widget-color: var(--avnav-back-color);
  --avnav-widget-fore-color: var(--avnav-fore-color);
}
.nightMode {
  --avnav-fore-color: rgba(252, 11, 11, 0.6);
  --avnav-fore-color-inv: rgba(252, 11, 11, 0.6);
  --avnav-back-color: black;
  --avnav-second-color: #5a5a5a;
  --avnav-dialog-color: #282828;
  --avnav-main-color: #282828;
  --avnav-toast-color: rgba(56, 56, 56, 0.6);
  --avnav-attention-color: rgba(198, 40, 40, 0.6);
  --avnav-select-color: black;
  --avnav-slide-color: rgba(255, 138, 128, 0.6);
  --avnav-button-color: black;
  --avnav-button-filter: var(--avnav-filter-red);
  --avnav-button-filter-inv: var(--avnav-filter-red);
  --avnav-border-color: rgba(252, 11, 11, 0.6);
  --avnav-active-color: rgba(252, 11, 11, 0.6);
  --avnav-night-opacity: 0.6;
  --avnav-widget-head-color: rgba(50, 47, 47, 0.6);
  --avnav-widget-color: var(--avnav-back-color);
  --avnav-widget-fore-color: var(--avnav-fore-color);
}
.rowBase {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
#editroutepage .widgetContainer,
#navpage .widgetContainer {
  padding: var(--avnav-widget-border-width);
  gap: var(--avnav-widget-border-width);
}
#editroutepage .widgetContainer:empty,
#navpage .widgetContainer:empty {
  display: none;
}
#editroutepage .widgetContainer.vertical,
#navpage .widgetContainer.vertical {
  padding-bottom: 0;
}
#editroutepage .widgetContainer.bottomLeft,
#navpage .widgetContainer.bottomLeft {
  padding-right: 0;
}
.widget {
  position: relative;
  z-index: 100;
  margin: 0;
  overflow: hidden;
  pointer-events: all;
  font-variant-numeric: tabular-nums;
  background: var(--avnav-back-color);
  color: var(--avnav-fore-color);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-basis: auto;
  -moz-box-basis: auto;
  flex-basis: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.widget.horizontal {
  min-width: max-content;
}
.widget.horizontal.expand {
  width: 98%;
}
.widget .widgetHead {
  margin: 0;
  padding: 0.1em 0.2em 0;
  display: flex;
  column-gap: 0.5em;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  white-space: nowrap;
}
.widget .widgetHead .infoLeft {
  font-size: 0.71em;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  flex-shrink: 0;
}
.widget .widgetHead .infoRight {
  font-size: 0.71em;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  text-align: right;
}
.widget .widgetData {
  text-align: right;
  max-width: calc(100% - 0.2em);
  margin-right: 0.1em;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
}
.widget canvas.widgetData {
  padding: 0;
}
.widget.average .infoLeft {
  color: var(--avnav-attention-color);
}
.widget .label {
  opacity: 0.6;
}
.editing .widget {
  -webkit-flex-grow: 0;
  flex-grow: 0;
  min-width: 3em;
}
#gpspage.editing .widget {
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
.widget .unit {
  font-size: 0.71em;
  opacity: 0.7;
  margin-left: 0.2em;
}
.widget .resize,
.widget .noresize {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.hfield .widgetContainer .widget {
  width: unset;
  margin: 0;
}
.hfield .widgetContainer .widget .widgetHead {
  border-top: 1px solid;
  background-color: var(--avnav-widget-head-color);
  height: unset;
}
.hfield .widgetContainer .widget .widgetData {
  padding-top: 0;
  display: block;
}
.hfield .widgetContainer .widget .centeredWidget .widgetData {
  text-align: center;
}
.widgetContainer {
  font-size: 14px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  overflow: hidden;
  background-color: var(--avnav-main-color);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.widgetContainer .widget {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.widgetContainer.horizontal {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  max-height: calc(var(--avnav-horizontal-widgets-height) + 0.2em);
}
.twoRows .widgetContainer.horizontal {
  max-height: calc(2 * calc(var(--avnav-horizontal-widgets-height) + 0.2em));
}
.widgetContainer.horizontal .widget {
  height: var(--avnav-horizontal-widgets-height);
}
.editing .widgetContainer.horizontal {
  -webkit-box-lines: single;
  -moz-box-lines: single;
  -ms-flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  min-height: calc(var(--avnav-horizontal-widgets-height) + 0.2em);
}
.editing .widgetContainer.horizontal .widget {
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
}
.widgetContainer.vertical {
  overflow: hidden;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}
.widgetContainer.vertical .widget {
  min-width: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  margin-left: 0;
  margin-right: 2px;
  width: 100%;
}
.editing .widgetContainer.vertical {
  top: 0;
  min-width: 8em;
}
.editing .widgetContainer.vertical .widget {
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
}
.mapWidgetContainer.widgetContainer {
  width: 0;
  height: 0;
}
.widgetWeight {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.widgetWeight > .widget {
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
.widget {
  width: min-content;
  background-color: var(--avnav-widget-color);
  color: var(--avnav-widget-fore-color);
}
.widget .widgetData {
  line-height: 1em;
  white-space: pre;
}
.widget .widgetData {
  font-size: 3em;
}
.vertical .widget .widgetData {
  font-size: 2em;
}
.widget.big .widgetData {
  font-size: 3em;
}
.vertical .widget.big .widgetData {
  font-size: 2em;
}
.widget.large .widgetData {
  font-size: 3em;
}
.vertical .widget.large .widgetData {
  font-size: 2em;
}
.widget.medium .widgetData {
  font-size: 1.5em;
}
.horizontal .widget.medium .widgetData {
  padding-top: 0.5em;
}
.widget.small .widgetData {
  font-size: 1em;
  line-height: 1.2em;
}
.horizontal .widget.small .widgetData {
  padding-top: 0.2em;
}
.widget.center .widgetData {
  text-align: center;
}
.widget.mono .widgetData {
  font-family: var(--avnav-mono-font-family);
}
.widget.DateTime .widgetData {
  font-size: 1em;
  line-height: 1.2em;
}
.horizontal .widget.DateTime .widgetData {
  padding-top: 0.2em;
}
.widget.GNSSStatus .widgetData {
  font-size: 1em;
  line-height: 1.2em;
}
.horizontal .widget.GNSSStatus .widgetData {
  padding-top: 0.2em;
}
.widget.zoomWidget .widgetData {
  font-size: 1.5em;
}
.horizontal .widget.zoomWidget .widgetData {
  padding-top: 0.5em;
}
.widget.zoomWidget .rzoom {
  display: inline-block;
}
.widget.Position .widgetData,
.widget.WpPosition .widgetData {
  font-size: 1em;
  line-height: 1.2em;
}
.horizontal .widget.Position .widgetData,
.horizontal .widget.WpPosition .widgetData {
  padding-top: 0.2em;
}
.widget.Position .widgetData,
.widget.WpPosition .widgetData {
  text-align: center;
}
.widget.timeStatusWidget .widgetData {
  font-size: 1em;
  line-height: 1.2em;
}
.horizontal .widget.timeStatusWidget .widgetData {
  padding-top: 0.2em;
}
.widget.timeStatusWidget .resize,
.widget.timeStatusWidget .noresize {
  align-items: center;
}
.widget.timeStatusWidget .iconFrame,
.widget.timeStatusWidget .statusIcon {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0.9em;
}
.widget.timeStatusWidget .rowBase {
  flex-wrap: nowrap;
  max-width: 100%;
}
.widget.timeStatusWidget .rowBase .value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget.etaWidget .widgetData {
  font-size: 1em;
  line-height: 1.2em;
}
.horizontal .widget.etaWidget .widgetData {
  padding-top: 0.2em;
}
.widget.etaWidget .widgetData {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: unset;
}
.widget.etaWidget .widgetData.markerName {
  margin-top: 0;
}
.widget.aisTargetWidget .widgetData {
  font-size: 1em;
  line-height: 1.2em;
}
.horizontal .widget.aisTargetWidget .widgetData {
  padding-top: 0.2em;
}
.widget.aisTargetWidget .aisFront {
  display: inline-block;
  font-weight: bold;
}
.widget.aisTargetWidget .aisFront.large {
  font-size: 1.5em;
}
.widget.aisTargetWidget .label {
  width: 2em;
}
.widget.aisTargetWidget .widgetData ~ .widgetData {
  padding-top: 0;
}
.widget.aisTargetWidget .widgetData {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: baseline;
}
.widget.aisTargetWidget .widgetData .label {
  flex-grow: 1;
  text-align: left;
}
.widget.aisTargetWidget .aisPart.withIcon {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.widget.aisTargetWidget .aisPart.withIcon .iconFrame {
  flex-grow: 1;
  border-radius: 0.2em;
}
.hfield .widget.aisTargetWidget .aisPart {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: space-between;
}
.hfield .widget.aisTargetWidget .aisPart .widgetData {
  text-align: left;
  margin: 0;
}
.widget.aisTargetWidget .aisSmall {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.widget.aisTargetWidget .aisSmall .upper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.widget.aisTargetWidget .aisSmall .upper .aisParts {
  flex-grow: 1;
}
.widget.aisTargetWidget .aisSmall .aisPart.withIcon .icon {
  width: 100%;
  height: 1em;
  border-radius: unset;
  margin: 0;
}
.widget.activeRouteWidget.approach {
  background-color: var(--avnav-attention-color);
}
.widget.activeRouteWidget .widgetData {
  font-size: 1em;
  line-height: 1.2em;
}
.horizontal .widget.activeRouteWidget .widgetData {
  padding-top: 0.2em;
}
.widget.activeRouteWidget .routeName {
  margin-right: 0.2em;
  opacity: 0.6;
  overflow: hidden;
  white-space: nowrap;
}
.widget.activeRouteWidget .routeRemain {
  font-size: 1.5em;
  line-height: 1.1em;
}
.widget.activeRouteWidget .small .routeRemain {
  font-size: unset;
}
.widget.activeRouteWidget .widgetData {
  margin-left: 0.1em;
}
.widget.activeRouteWidget .widgetData.small {
  margin: 0;
  width: 100%;
  max-width: 100%;
}
.widget.activeRouteWidget .iconFrame {
  flex: 1;
}
.widget.activeRouteWidget .iconFrame .icon {
  background-color: var(--avnav-attention-color);
}
.widget.activeRouteWidget .icon.small {
  width: 100%;
  height: 1em;
  margin: 0;
}
.widget.activeRouteWidget .secondRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
.widget.activeRouteWidget .secondRow .eta.label {
  flex-grow: 1;
  text-align: left;
  font-size: 0.8em;
}
.widget.activeRouteWidget .small .secondRow {
  justify-content: space-between;
}
.widget.activeRouteWidget .small .secondRow .icon {
  flex: unset;
}
.widget.activeRouteWidget .routeNext {
  color: var(--avnav-attention-color);
}
.widget.editRouteWidget.activeRoute {
  border: 3px solid;
  border-color: var(--avnav-attention-color);
}
.widget.editRouteWidget .widgetData {
  font-size: 1em;
  line-height: 1.2em;
}
.horizontal .widget.editRouteWidget .widgetData {
  padding-top: 0.2em;
}
.widget.editRouteWidget .widgetData .routeInfo {
  width: 4.5em;
  display: inline-block;
}
.horizontal .widget.editRouteWidget .widgetData .routeInfo {
  width: auto;
  margin-right: 0.3em;
}
.widget.editRouteWidget .widgetData.routeName {
  margin-top: 0.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.horizontal .widget.editRouteWidget .widgetData.routeName {
  text-align: left;
  display: block;
}
.horizontal .widget.editRouteWidget .widgetData {
  margin-top: 0;
  padding-top: 0;
  display: inline-block;
}
.vertical .widget.editRouteWidget {
  min-height: 8em;
}
.widget.centerDisplayWidget .widgetData {
  font-size: 1em;
  line-height: 1.2em;
}
.horizontal .widget.centerDisplayWidget .widgetData {
  padding-top: 0.2em;
}
.widget.centerDisplayWidget .widgetData {
  white-space: pre-wrap;
}
.widget.centerDisplayWidget .widgetData ~ .widgetData {
  margin-top: 0;
}
.widget.centerDisplayWidget .value {
  display: inline-block;
}
.widget.centerDisplayWidget .iconFrame {
  width: 1em;
  height: 1em;
}
.horizontal .widget.centerDisplayWidget {
  min-width: 10em;
}
.widget.windWidget {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
.widget.windWidget .widgetData {
  font-size: 1.5em;
}
.horizontal .widget.windWidget .widgetData {
  padding-top: 0.5em;
}
.widget.xteWidget .widgetData {
  font-size: 1em;
  line-height: 1.2em;
}
.horizontal .widget.xteWidget .widgetData {
  padding-top: 0.2em;
}
.widget.xteWidget canvas {
  margin-right: auto;
  margin-left: auto;
}
.widget.windGraphics .colors {
  color: var(--avnav-widget-fore-color);
  display: none;
}
.widget.windGraphics .colors .left {
  color: rgba(255, 20, 7, 0.54);
}
.widget.windGraphics .colors .right {
  color: rgba(5, 128, 30, 0.57);
}
.widget.windGraphics .colors .bottom {
  color: var(--avnav-widget-fore-color);
  opacity: 0.4;
}
.widget.windGraphics .colors .circle {
  color: var(--avnav-widget-fore-color);
  opacity: 0.8;
}
.widget.windGraphics .windSpeed {
  text-align: right;
  font-size: 1.5em;
  position: absolute;
  right: 0.2em;
  bottom: 0.2em;
}
.widget.windGraphics .windReference {
  text-align: left;
  font-size: 1.5em;
  position: absolute;
  left: 0.2em;
  bottom: 0.2em;
}
.horizontal .widget.windGraphics .widgetData,
.horizontal .widget.windGraphics .windSpeed {
  display: inline-block;
}
.widget.windGraphics canvas {
  height: 95%;
  width: 95%;
  margin: auto;
}
.vertical .widget.windGraphics {
  height: calc(var(--avnav-left-widgets-width) * 1.2);
}
.vertical .widget.windGraphics .windSpeed {
  font-size: 1em;
}
.widget.routePointsWidget {
  overflow: hidden;
  -webkit-flex-shrink: 1 !important;
  flex-shrink: 1 !important;
}
.widget.alarmWidget {
  position: absolute;
  right: 0;
  bottom: 0;
  height: unset;
  font-size: 1.5em;
  border: 5px solid;
  border-color: var(--avnav-attention-color);
  padding: 1.5em;
  padding-top: 0.3em;
  margin: 0.5em;
  border-radius: 4px;
  width: auto;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.widgetContainer .widget.alarmWidget {
  position: inherit;
  padding: inherit;
  height: inherit;
  width: 4em;
  margin: inherit;
}
.widget.alarmWidget .alarmInfo {
  display: flex;
  flex-direction: column;
}
.widget.alarmWidget .alarmInfo .more {
  font-weight: bold;
}
.widget.CombinedWidget .locked {
  position: absolute;
  top: calc(50% - 1em);
  left: calc(50% - 1.7em);
  z-index: 101;
  color: var(--avnav-attention-color);
}
.widget.CombinedWidget > .listContainer {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.widget.CombinedWidget > .listContainer .widget {
  height: 100%;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
  margin: 0;
  min-width: 0;
  border-right: 1px solid;
}
.widget.CombinedWidget > .listContainer .widget:last-of-type {
  border-right: unset;
}
.widget.CombinedWidget > .listContainer .Empty:after {
  height: 4em;
  content: "Combined";
}
.widget.CombinedWidget.vertical > .listContainer {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.widget.CombinedWidget.vertical .widget {
  height: unset;
  min-height: 0;
  width: 100%;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
  border-right: unset;
}
.widget.canvasGauge canvas {
  margin: auto;
  position: relative;
}
.widget.canvasGauge .canvasFrame {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.widget.canvasGauge .gaugeValue {
  position: absolute;
  top: 53%;
  left: calc(50% - 1em);
  z-index: 20;
  white-space: pre;
}
.widget.canvasGauge.radGauge_Speed .gaugeValue {
  top: 70%;
}
.widget.canvasGauge.radGauge_Temperature .gaugeValue {
  top: 70%;
}
.widget.canvasGauge.linear {
  padding: 0;
}
.widget.canvasGauge.linear .canvasFrame {
  padding: 0;
}
.widget.signalKPitch .widgetData {
  font-size: 2em;
  text-align: center;
}
.widget.signalKRoll .widgetData {
  font-size: 2em;
  text-align: center;
}
.widget.nmeaStatusWidget .listEntry {
  padding: 0;
  margin: 0;
  min-height: unset;
}
.widget.nmeaStatusWidget .listSlot {
  padding: 0;
}
.widget.nmeaStatusWidget .kind {
  width: 2.5em;
  padding-left: 0.3em;
}
.widget .widgetData.critical {
  color: var(--avnav-attention-color);
}
.widget.critical .widgetData {
  color: var(--avnav-attention-color);
}
.buttonRow.button:after {
  position: unset;
}
.button-text div:not(.buttonRow,.smallButton,.dialogButton).button .iconFrame {
  height: calc(80% - 0.9em);
}
.button-text div:not(.buttonRow,.smallButton).button:after {
  display: block;
}
.main-button-text .buttonRow.button:after {
  display: block;
  max-height: unset;
}
.button {
  margin: 0.2em 0.2em 0.2em 0.2em;
  border-radius: 4px;
  border: unset;
  text-decoration: none;
  background-color: var(--avnav-button-color);
  cursor: pointer;
  outline: none;
  display: block;
  position: relative;
  flex-shrink: 0;
  width: 4em;
  height: 4em;
  font-size: 1em;
}
.button.disabled {
  cursor: initial;
  opacity: 0.6;
}
.button .iconFrame {
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  margin: 0;
}
.button:disabled span {
  opacity: 0.5;
}
.button.active {
  border-color: var(--avnav-active-color);
  border-width: var(--avnav-active-button-border-width);
  border-style: solid ;
}
.button.active.MOB {
  border-color: var(--avnav-attention-color);
}
.button:after {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0.85em;
  padding-bottom: 0.1em;
  text-align: center;
  overflow: hidden;
  max-height: 1.2em;
}
.hoverClass.button::after {
  display: block;
  position: absolute;
  background-color: var(--avnav-back-color);
  border: 1px solid var(--avnav-fore-color);
  color: var(--avnav-fore-color);
  padding: 0.2em;
  right: 3em;
  top: 1em;
  width: 8em;
  width: max-content;
  height: 1em;
  left: auto;
  z-index: 999;
  font-style: normal;
}
.buttonRow.button {
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 7em;
}
.buttonRow.button.buttonText {
  width: unset;
}
.buttonRow.button.buttonText:after {
  font-size: unset;
}
.disabled > .buttonText {
  opacity: 0.6;
}
.fab.button {
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
  border-radius: 50%;
  background-color: var(--avnav-main-color);
  color: var(--avnav-fore-color-inv);
}
.fab.button .iconFrame .icon {
  filter: var(--avnav-button-filter-inv);
}
.fab.button:after {
  bottom: 0.2em;
}
.smallButton {
  margin: 0.2em 0.2em 0.2em 0.2em;
  border-radius: 4px;
  border: unset;
  text-decoration: none;
  background-color: var(--avnav-button-color);
  cursor: pointer;
  outline: none;
  display: block;
  position: relative;
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  font-size: 1rem;
}
.smallButton.disabled {
  cursor: initial;
  opacity: 0.6;
}
.smallButton .iconFrame {
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  margin: 0;
}
.smallButton:disabled span {
  opacity: 0.5;
}
.smallButton.active {
  border-color: var(--avnav-active-color);
  border-width: var(--avnav-active-button-border-width);
  border-style: solid ;
}
.smallButton.active.MOB {
  border-color: var(--avnav-attention-color);
}
.smallButton:after {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0.85em;
  padding-bottom: 0.1em;
  text-align: center;
  overflow: hidden;
  max-height: 1.2em;
}
.dialogButton {
  margin: 0.2em 0.2em 0.2em 0.2em;
  border-radius: 4px;
  border: unset;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  display: block;
  position: relative;
  flex-shrink: 0;
  margin-top: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  font-size: 1em;
  padding: 0.2em;
  width: inherit;
  background-color: var(--avnav-button-color);
  border-color: var(--avnav-button-color);
  border-width: var(--avnav-active-button-border-width);
  border-style: solid;
  color: var(--avnav-fore-color);
  display: flex;
  flex-direction: row;
  align-items: center;
  height: unset;
}
.dialogButton.disabled {
  cursor: initial;
  opacity: 0.6;
}
.dialogButton .iconFrame {
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  margin: 0;
}
.dialogButton:disabled span {
  opacity: 0.5;
}
.dialogButton.active {
  border-color: var(--avnav-active-color);
  border-width: var(--avnav-active-button-border-width);
  border-style: solid ;
}
.dialogButton.active.MOB {
  border-color: var(--avnav-attention-color);
}
.dialogButton:after {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0.85em;
  padding-bottom: 0.1em;
  text-align: center;
  overflow: hidden;
  max-height: 1.2em;
}
.dialogButton .iconFrame {
  width: 1em;
  height: 1em;
  left: unset;
  right: unset;
  margin-right: 0.2em;
}
.dialogButton:after {
  display: block;
  position: unset;
  font-size: 1em;
  text-align: center;
}
.dialogButton[disabled] {
  opacity: 0.6;
}
.buttonRow {
  padding-top: 0;
  padding-bottom: 0;
  margin: unset;
  border-radius: 0;
  border: unset;
  background-color: unset;
  width: unset;
  height: unset;
}
.buttonRow .iconFrame {
  width: 2em;
  height: 2em;
  left: unset;
  top: unset;
  display: block;
  outline: none;
  position: relative;
}
.button.LayoutFinished.active {
  border-color: var(--avnav-attention-color);
}
.button.WarningOK {
  margin-left: auto;
  margin-right: auto;
  width: auto;
  max-width: 20em;
}
.button.WarningOK .buttonText {
  font-size: 1.5em;
  padding-top: 0.5em;
  text-align: center;
  display: block;
}
.button.WarningOK .iconFrame {
  display: none;
}
.codeflask__code .token.comment,
.codeflask__code .token.block-comment,
.codeflask__code .token.prolog,
.codeflask__code .token.doctype,
.codeflask__code .token.cdata {
  color: #7D8B99;
}
.codeflask__code .token.punctuation {
  color: #5F6364;
}
.codeflask__code .token.property,
.codeflask__code .token.tag,
.codeflask__code .token.boolean,
.codeflask__code .token.number,
.codeflask__code .token.function-name,
.codeflask__code .token.constant,
.codeflask__code .token.symbol,
.codeflask__code .token.deleted {
  color: #c92c2c;
}
.codeflask__code .token.selector,
.codeflask__code .token.attr-name,
.codeflask__code .token.string,
.codeflask__code .token.char,
.codeflask__code .token.function,
.codeflask__code .token.builtin,
.codeflask__code .token.inserted {
  color: #2f9c0a;
}
.codeflask__code .token.operator,
.codeflask__code .token.entity,
.codeflask__code .token.url,
.codeflask__code .token.variable {
  color: #a67f59;
  background: rgba(255, 255, 255, 0.5);
}
.codeflask__code .token.atrule,
.codeflask__code .token.attr-value,
.codeflask__code .token.keyword,
.codeflask__code .token.class-name {
  color: #1990b8;
}
.codeflask__code .token.regex,
.codeflask__code .token.important {
  color: #e90;
}
.codeflask__code .language-css .token.string,
.codeflask__code .style .token.string {
  color: #a67f59;
  background: rgba(255, 255, 255, 0.5);
}
.codeflask__code .token.important {
  font-weight: normal;
}
.codeflask__code .token.bold {
  font-weight: bold;
}
.codeflask__code .token.italic {
  font-style: italic;
}
.codeflask__code .token.entity {
  cursor: help;
}
.codeflask__code .token.namespace {
  opacity: 0.7;
}
.ol-scale-text {
  position: absolute;
  text-align: center;
  bottom: 25px;
  color: #000000;
  text-shadow: -2px 0 #ffffff, 0 2px #ffffff, 2px 0 #ffffff, 0 -2px #ffffff;
}
.ol-scale-step-marker {
  width: 1px;
  height: 15px;
  background-color: var(--avnav-fore-color);
  float: right;
  z-index: 10;
}
.ol-scale-singlebar {
  position: relative;
  height: 10px;
  z-index: 9;
  box-sizing: border-box;
  border: 1px solid;
  background-color: var(--avnav-fore-color);
}
.ol-scale-step-text {
  position: absolute;
  bottom: -0.5em;
  font-size: 0.8em;
  z-index: 11;
  color: #000000;
  text-shadow: -2px 0 #ffffff, 0 2px #ffffff, 2px 0 #ffffff, 0 -2px #ffffff;
}
.ol-viewport,
.ol-unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ol-scale-bar {
  position: absolute;
  bottom: 0;
  left: calc(50% - 80px);
  margin-bottom: 0.8em;
}
.ol-scale-bar .ol-scale-bar-inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.ol-scale-singlebar-odd {
  background-color: var(--avnav-fore-color-inv);
}
.ol-scale-singlebar-even {
  background-color: var(--avnav-fore-color);
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.border-box {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--avnav-font-family);
  font-size: 14px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {
  touch-action: none;
}
.nightMode {
  scrollbar-color: var(--avnav-fore-color) var(--avnav-back-color);
}
#new_pages,
.app,
.pageFrame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.pageFrame {
  background-color: var(--avnav-back-color);
  color: var(--avnav-fore-color);
}
.dimm {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999999;
  background-color: black;
}
.page {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.page.editing {
  border: 3px solid;
  border-color: var(--avnav-attention-color);
}
.buttonContainer {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  position: relative;
  background-color: var(--avnav-main-color);
}
.buttonContainer.wrap {
  overflow: hidden;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  -ms-flex-wrap: wrap-reverse;
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
.buttonContainer button {
  flex-shrink: 0;
}
.buttonContainer.buttonsHidden {
  width: 0;
  height: 0;
  overflow: hidden;
}
.buttonSizer {
  display: inline-block;
  opacity: 0;
}
.buttonContainerWrap {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
}
.buttonContainerWrap .buttonContainer.scroll {
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
.buttonShade {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 101;
}
.buttonShade.shade {
  background-color: var(--avnav-main-color);
  opacity: 0.15;
}
.iconContainer {
  position: absolute;
  right: 1em;
  top: 1em;
  z-index: 3;
}
.iconContainer .iconFrame .icon {
  filter: var(--avnav-filter-redlight);
}
.leftPart {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  position: relative;
}
.header {
  height: var(--avnav-headline-height);
  padding: 1em;
  background-color: var(--avnav-main-color);
  color: var(--avnav-fore-color-inv);
  font-weight: bold;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}
.header.connectionLost {
  background-color: var(--avnav-attention-color);
}
.mainContent {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.footer {
  background-color: var(--avnav-second-color);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.clear {
  clear: both;
}
.hidden {
  display: none;
}
.pre {
  white-space: pre;
}
.selectedItem {
  background-color: var(--avnav-select-color);
  font-weight: bold;
}
.activeEntry {
  background-color: var(--avnav-select-color);
  font-weight: bold;
}
.combinedView,
.multiView {
  -ms-overflow-style: none;
  scrollbar-width: none;
  display: flex;
  flex-direction: row;
  overflow-y: hidden;
  overflow-x: auto;
  width: 100%;
  height: 100%;
  scroll-snap-type: x mandatory;
}
.combinedView::-webkit-scrollbar,
.multiView::-webkit-scrollbar {
  display: none;
}
.combinedView .view,
.multiView .view {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  scroll-snap-align: start;
  flex-shrink: 0;
}
.combinedView .view .header,
.multiView .view .header {
  height: calc(var(--avnav-headline-height) * 0.9);
  padding: 0.2em 0.2em 0.2em 1em;
  margin-top: 2px;
}
.combinedView.multi > .view:nth-child(n+2),
.multiView.multi > .view:nth-child(n+2) {
  border-left: 3px solid;
  border-color: var(--avnav-border-color);
}
.combinedView .header .main,
.multiView .header .main {
  flex-grow: 1;
}
.combinedView .header .listSlot.left,
.multiView .header .listSlot.left,
.combinedView .header .listSlot.right,
.multiView .header .listSlot.right {
  margin: 0;
}
.combinedView .header .icon,
.multiView .header .icon {
  filter: var(--avnav-filter-white);
}
.statusIcon {
  margin: 0.2em;
  height: calc(var(--avnav-default-icon-size) - 0.2em);
  width: calc(var(--avnav-default-icon-size) - 0.2em);
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: var(--avnav-night-opacity);
}
.statusIcon.unknown,
.statusIcon.inactive,
.statusIcon.grey {
  background-image: radial-gradient(#808080, rgba(128, 128, 128, 0.6), transparent);
}
.statusIcon.green {
  background-image: radial-gradient(#0af00a, rgba(10, 240, 10, 0.6), transparent);
}
.statusIcon.running {
  animation: mpblinker 1.7s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
  background-image: radial-gradient(#ff9203, #fadb89, transparent);
}
.statusIcon.orange {
  background-image: radial-gradient(#ff9203, #fadb89, transparent);
}
@keyframes mpblinker {
  to {
    opacity: 0;
  }
}
.statusIcon.red {
  background-image: radial-gradient(#f00a0a, rgba(240, 10, 10, 0.6), transparent);
}
.statusIcon.yellow {
  background-image: radial-gradient(#f5e52f, rgba(245, 229, 47, 0.6), transparent);
}
.statusIcon.grey {
  background-image: radial-gradient(#434343, rgba(129, 129, 129, 0.6), transparent);
}
#___uploadInput {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
}
.noEvents {
  pointer-events: none;
}
.overlay_cover_active {
  background-color: rgba(0, 0, 0, 0.35);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 120;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.dialogAnchor {
  position: relative;
}
.dialog {
  z-index: 121;
  padding: 0.6em;
  background-color: var(--avnav-dialog-color);
  color: var(--avnav-fore-color);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  overflow: auto;
  max-height: 100%;
  max-width: 100%;
}
.dialog.fullscreen {
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  flex-grow: 1;
}
.dialog.fullscreen .dialogTitle {
  height: var(--avnav-headline-height);
  padding: 1em;
  background-color: var(--avnav-main-color);
  color: var(--avnav-fore-color-inv);
  font-weight: bold;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}
.dialog.fullscreen .dialogTitle.connectionLost {
  background-color: var(--avnav-attention-color);
}
.dialog > div {
  min-width: 0;
}
.dialog.nested {
  font-size: 1em;
}
.dialog .flexInner,
.dialog .inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.dialog .flexInner {
  overflow-y: auto;
}
.dialog .inputFrame {
  flex: 1;
  min-width: 5em;
  max-width: 100%;
  display: inline-block;
}
.dialog input,
.dialog .input {
  flex: 1;
  min-width: 5em;
  max-width: 100%;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  border: none;
  border-bottom: 1px solid;
  border-color: var(--avnav-border-color);
  vertical-align: middle;
  line-height: 2em;
  height: 2.1em;
  margin-top: 2px;
  margin-bottom: 2px;
  outline: none;
  color: var(--avnav-fore-color);
  background-color: var(--avnav-back-color);
  word-break: break-all;
  overflow: hidden;
}
.dialog input:focus,
.dialog .input:focus {
  outline: 2px solid;
  outline-color: var(--avnav-border-color);
}
.dialog .error input,
.dialog .error .input {
  border: 2px solid;
  border-color: var(--avnav-attention-color);
}
.dialog .disabled .input {
  opacity: 0.6;
}
.dialog label {
  display: table-cell;
  text-align: right;
  opacity: 0.6;
}
.dialog .inputLabel {
  opacity: 0.6;
  width: 7em;
  display: inline-block;
  margin-right: 0.5em;
  font-size: 0.8em;
  flex-shrink: 0;
  overflow-x: hidden;
  text-overflow: fade;
}
.dialog .wideLabel {
  opacity: 0.6;
  width: 7em;
  display: inline-block;
  margin-right: 0.5em;
  font-size: 0.8em;
  flex-shrink: 0;
  overflow-x: hidden;
  text-overflow: fade;
  width: unset;
}
.dialog .iconInput .input,
.dialog .colorSelector .input {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.dialog button:not(.dialogButton,.smallButton) {
  margin: 0.2em 0.2em 0.2em 0.2em;
  border-radius: 4px;
  border: unset;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  display: block;
  position: relative;
  flex-shrink: 0;
  margin-top: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  font-size: 1em;
  padding: 0.2em;
  width: inherit;
  background-color: var(--avnav-button-color);
  border-color: var(--avnav-button-color);
  border-width: var(--avnav-active-button-border-width);
  border-style: solid;
  color: var(--avnav-fore-color);
  display: flex;
  flex-direction: row;
  align-items: center;
  height: unset;
}
.dialog button:not(.dialogButton,.smallButton).disabled {
  cursor: initial;
  opacity: 0.6;
}
.dialog button:not(.dialogButton,.smallButton) .iconFrame {
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  margin: 0;
}
.dialog button:not(.dialogButton,.smallButton):disabled span {
  opacity: 0.5;
}
.dialog button:not(.dialogButton,.smallButton).active {
  border-color: var(--avnav-active-color);
  border-width: var(--avnav-active-button-border-width);
  border-style: solid ;
}
.dialog button:not(.dialogButton,.smallButton).active.MOB {
  border-color: var(--avnav-attention-color);
}
.dialog button:not(.dialogButton,.smallButton):after {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0.85em;
  padding-bottom: 0.1em;
  text-align: center;
  overflow: hidden;
  max-height: 1.2em;
}
.dialog button:not(.dialogButton,.smallButton) .iconFrame {
  width: 1em;
  height: 1em;
  left: unset;
  right: unset;
  margin-right: 0.2em;
}
.dialog button:not(.dialogButton,.smallButton):after {
  display: block;
  position: unset;
  font-size: 1em;
  text-align: center;
}
.dialog button:not(.dialogButton,.smallButton)[disabled] {
  opacity: 0.6;
}
.dialog .dialogRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.dialog .dialogRow.infoText {
  white-space: pre-wrap;
}
.dialog .dialogButtons {
  margin-top: 0.5em;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.dialog .dialogButtons.infoText {
  white-space: pre-wrap;
}
.dialog .insertButtons {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid;
  border-color: var(--avnav-border-color);
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.dialog .insertButtons.infoText {
  white-space: pre-wrap;
}
.dialog .smallButton {
  width: 1.5em;
  height: 1.5em;
}
.dialog .missing input,
.dialog .missing .input {
  border-color: var(--avnav-attention-color);
}
.dialog .errorText {
  color: var(--avnav-attention-color);
}
.dialog .paramButtons {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.dialog .disabled .iconFrame {
  opacity: 0.6;
}
.dialogObjects .inputFrame {
  flex: 1;
  min-width: 5em;
  max-width: 100%;
  display: inline-block;
}
.dialogObjects input,
.dialogObjects .input {
  flex: 1;
  min-width: 5em;
  max-width: 100%;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  border: none;
  border-bottom: 1px solid;
  border-color: var(--avnav-border-color);
  vertical-align: middle;
  line-height: 2em;
  height: 2.1em;
  margin-top: 2px;
  margin-bottom: 2px;
  outline: none;
  color: var(--avnav-fore-color);
  background-color: var(--avnav-back-color);
  word-break: break-all;
  overflow: hidden;
}
.dialogObjects input:focus,
.dialogObjects .input:focus {
  outline: 2px solid;
  outline-color: var(--avnav-border-color);
}
.dialogObjects .error input,
.dialogObjects .error .input {
  border: 2px solid;
  border-color: var(--avnav-attention-color);
}
.dialogObjects .disabled .input {
  opacity: 0.6;
}
.dialogObjects label {
  display: table-cell;
  text-align: right;
  opacity: 0.6;
}
.dialogObjects .inputLabel {
  opacity: 0.6;
  width: 7em;
  display: inline-block;
  margin-right: 0.5em;
  font-size: 0.8em;
  flex-shrink: 0;
  overflow-x: hidden;
  text-overflow: fade;
}
.dialogObjects .wideLabel {
  opacity: 0.6;
  width: 7em;
  display: inline-block;
  margin-right: 0.5em;
  font-size: 0.8em;
  flex-shrink: 0;
  overflow-x: hidden;
  text-overflow: fade;
  width: unset;
}
.dialogObjects .iconInput .input,
.dialogObjects .colorSelector .input {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.dialogObjects button:not(.dialogButton,.smallButton) {
  margin: 0.2em 0.2em 0.2em 0.2em;
  border-radius: 4px;
  border: unset;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  display: block;
  position: relative;
  flex-shrink: 0;
  margin-top: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  font-size: 1em;
  padding: 0.2em;
  width: inherit;
  background-color: var(--avnav-button-color);
  border-color: var(--avnav-button-color);
  border-width: var(--avnav-active-button-border-width);
  border-style: solid;
  color: var(--avnav-fore-color);
  display: flex;
  flex-direction: row;
  align-items: center;
  height: unset;
}
.dialogObjects button:not(.dialogButton,.smallButton).disabled {
  cursor: initial;
  opacity: 0.6;
}
.dialogObjects button:not(.dialogButton,.smallButton) .iconFrame {
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  margin: 0;
}
.dialogObjects button:not(.dialogButton,.smallButton):disabled span {
  opacity: 0.5;
}
.dialogObjects button:not(.dialogButton,.smallButton).active {
  border-color: var(--avnav-active-color);
  border-width: var(--avnav-active-button-border-width);
  border-style: solid ;
}
.dialogObjects button:not(.dialogButton,.smallButton).active.MOB {
  border-color: var(--avnav-attention-color);
}
.dialogObjects button:not(.dialogButton,.smallButton):after {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0.85em;
  padding-bottom: 0.1em;
  text-align: center;
  overflow: hidden;
  max-height: 1.2em;
}
.dialogObjects button:not(.dialogButton,.smallButton) .iconFrame {
  width: 1em;
  height: 1em;
  left: unset;
  right: unset;
  margin-right: 0.2em;
}
.dialogObjects button:not(.dialogButton,.smallButton):after {
  display: block;
  position: unset;
  font-size: 1em;
  text-align: center;
}
.dialogObjects button:not(.dialogButton,.smallButton)[disabled] {
  opacity: 0.6;
}
.dialogObjects .dialogRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.dialogObjects .dialogRow.infoText {
  white-space: pre-wrap;
}
.dialogObjects .dialogButtons {
  margin-top: 0.5em;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.dialogObjects .dialogButtons.infoText {
  white-space: pre-wrap;
}
.dialogObjects .insertButtons {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid;
  border-color: var(--avnav-border-color);
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.dialogObjects .insertButtons.infoText {
  white-space: pre-wrap;
}
.dialogObjects .smallButton {
  width: 1.5em;
  height: 1.5em;
}
.dialogObjects .missing input,
.dialogObjects .missing .input {
  border-color: var(--avnav-attention-color);
}
.dialogObjects .errorText {
  color: var(--avnav-attention-color);
}
.dialogObjects .paramButtons {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.dialogObjects .disabled .iconFrame {
  opacity: 0.6;
}
.editParam input {
  font-weight: unset;
}
.editParam.changed {
  font-weight: bold;
}
.editParam.defaultValue {
  font-style: italic;
}
.AlarmDialog .listSlot.alarmSource {
  flex-direction: column;
}
.AlarmDialog .listSlot.alarmSource .alarmCategory {
  opacity: 0.6;
}
.editWidgetDialog .dialogRow,
.editPageDialog .dialogRow {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.editWidgetDialog .inputLabel,
.editPageDialog .inputLabel {
  width: 10em;
  text-align: start;
}
.editWidgetDialog input,
.editPageDialog input,
.editWidgetDialog .input,
.editPageDialog .input {
  min-width: 9em;
  max-width: 90vw;
  overflow-x: hidden;
  text-overflow: ellipsis;
  margin-left: 0;
}
.editWidgetDialog input.disabled,
.editPageDialog input.disabled,
.editWidgetDialog .input.disabled,
.editPageDialog .input.disabled {
  opacity: 0.6;
}
.editWidgetDialog .selectElement,
.editPageDialog .selectElement {
  margin-top: 0.8em;
}
.editWidgetDialog button,
.editPageDialog button {
  width: 4.8em;
}
.editWidgetDialog .formatterParamContainer,
.editPageDialog .formatterParamContainer {
  margin-left: 2em;
}
.editWidgetDialog .formatterParamContainer .inputLabel,
.editPageDialog .formatterParamContainer .inputLabel {
  overflow: hidden;
}
.editWidgetDialog .childWidgets,
.editPageDialog .childWidgets {
  border-top: 1px dashed;
  margin-top: 0.2em;
}
.editPageDialog .panelList {
  border-top: 1px solid;
  border-color: var(--avnav-border-color);
  margin-top: 0.3em;
  padding-top: 0.3em;
}
.editPageDialog .combinationSelect {
  display: inline-block;
  vertical-align: middle;
  margin-left: 1em;
}
.editPageDialog .editPanel {
  display: flex;
  align-items: center;
  border-bottom: 1px solid;
  border-color: var(--avnav-border-color);
}
.editPageDialog .editPanel .combinationFrame {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.editPageDialog .editPanel > .label {
  text-align: left;
  width: 6em;
  display: inline-block;
}
.editPageDialog .combinationSelect .label,
.editPageDialog .modeSelect .label,
.editPageDialog .combinationSelect .inputLabel,
.editPageDialog .modeSelect .inputLabel {
  width: unset;
  word-break: break-word;
}
.editPageDialog .currentHeadline {
  margin-bottom: 0.3em;
}
.editPageDialog .selectCurrent {
  border-top: 1px solid;
  border-color: var(--avnav-border-color);
  margin-top: 0.5em;
  padding-top: 0.5em;
}
.selectIconDialog .checkBoxRow .inputLabel {
  width: unset;
  margin-right: unset;
  margin-left: 1em;
}
.selectIconDialog .selectedItem {
  background-color: var(--avnav-select-color);
}
.RouteSyncDialog .dialogRow .radioLabel {
  width: 10em;
}
.RouteSyncDialog .allowServer .inputLabel {
  width: 10em;
}
.editOverlaysDialog .overlayItems .disabled .itemInfo {
  opacity: 0.6;
}
.editOverlaysDialog.preventEdit .button.Edit {
  opacity: 0;
  pointer-events: none;
}
.editOverlaysDialog.hideErrors .withError {
  display: none;
}
.editOverlaysDialog .overlayItems {
  padding-right: 35px;
  /* some room for scrolling */
}
.editOverlayItemDialog .inputLabel {
  width: 10em;
}
.editOverlayItemDialog .radioFrame .radioInner .inputLabel {
  width: 4em;
  text-align: right;
}
.FeatureInfoDialog {
  max-width: 50em;
}
.FeatureInfoDialog .icon {
  margin-right: 1em;
}
.featureListDialog .icons,
.FeatureInfoDialog .icons {
  width: 4em;
  display: inline-block;
}
.featureInfoHtml {
  white-space: pre;
  margin-left: 1em;
}
.featureInfoListHtml .featureInfoHtml {
  margin: 0.5em;
  border-bottom: 1px solid;
  border-color: var(--avnav-border-color);
  white-space: unset;
}
.TrackConvertDialog .heading {
  margin-left: 6em;
  margin-top: 0.5em;
  font-weight: bold;
}
.dialog .warning {
  margin-left: 7.4em;
  max-width: 15em;
  font-size: 0.8em;
  color: var(--avnav-attention-color);
}
.HelpDialog {
  max-width: 70vw;
}
.EditHandlerDialog .inputLabel {
  width: 9em;
}
.downloadFrame {
  width: 0;
  height: 0;
  border: 0;
}
.LogDialog {
  max-width: 90vw;
  max-height: 90vh;
}
.LogDialog .logDisplay {
  overflow-y: auto;
  white-space: pre-line;
}
.dialog .ErrorDetails .dialogText {
  white-space: pre-line;
}
.colorPicker .hue-spectrum {
  background: -webkit-linear-gradient(top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
  background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
  cursor: pointer;
  position: relative;
  display: inline-block;
  margin-left: 1em;
  overflow: hidden;
}
.colorPicker .hue-drag {
  left: 0px;
  width: 100%;
  border: 1px solid #000;
  pointer-events: none;
  position: absolute;
}
.colorPicker .saturation-spectrum {
  position: relative;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
}
.colorPicker .saturation-white {
  background: -webkit-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
  background: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
  position: relative;
  width: 100%;
  height: 100%;
}
.colorPicker .saturation-black {
  background: -webkit-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
  background: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
  position: relative;
  width: 100%;
  height: 100%;
}
.colorPicker .saturation-drag {
  pointer-events: none;
  position: absolute;
  border: 1px solid white;
  border-radius: 10px;
}
.colorPicker .saturation-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  border-radius: 10px;
}
.colorPicker .alpha-spectrum {
  margin-left: 1em;
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==);
  overflow: hidden;
}
.colorPicker .alpha-gradient {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);
  width: 100%;
  height: 100%;
}
.colorPicker .alpha-drag {
  pointer-events: none;
  width: 100%;
  border: 1px solid #000;
}
.layoutNameDialog .layoutName .inputLabel {
  text-align: end;
}
.scrollable {
  overflow-y: auto;
  overflow-x: hidden;
}
.listEntry {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  min-height: var(--avnav-min-listitem-height);
  flex-shrink: 0;
  position: relative;
  padding: 1em;
}
.listEntry.border {
  border-bottom: 1px solid;
  border-color: var(--avnav-border-color);
}
.listEntry .text.afterIcon {
  margin-left: 0.5em;
}
.listSlot {
  margin-left: 12px;
  margin-right: 12px;
  display: flex;
  flex-direction: row;
}
.listSlot:first-of-type {
  margin-left: 0;
}
.listSlot:last-of-type {
  margin-right: 0;
}
.listSlot.listMain {
  flex-direction: column;
  flex: 1;
}
.listSlot.listMain .secondary {
  opacity: 0.6;
  margin-top: 0.2em;
}
span.valuePrefix {
  opacity: 0;
}
.toast {
  height: auto;
  position: fixed;
  left: 50px;
  bottom: 10px;
  background-color: var(--avnav-toast-color);
  color: var(--avnav-fore-color-inv);
  font-size: 1.5em;
  padding: 1em;
  text-align: center;
  border-radius: 2px;
  -webkit-box-shadow: 0px 0px 24px -1px #383838;
  -moz-box-shadow: 0px 0px 24px -1px #383838;
  box-shadow: 0px 0px 24px -1px #383838;
  z-index: 9999;
}
.inner {
  display: inline-block;
}
.row {
  display: table-row;
}
.routeInfoPoint {
  border-bottom: 1px solid;
  border-color: var(--avnav-border-color);
  padding-left: 0.1em;
  padding-top: 0.1em;
  margin-bottom: 5px;
  padding-bottom: 0.1em;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.routeInfoPoint .infoFrame {
  flex: 1;
}
.radioFrame {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.radioFrame .radioInner {
  display: -webkit-box-inline;
  display: -moz-box-inline;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.radioFrame .radioInner .inputLabel {
  width: auto;
  margin-left: 1em;
}
.radioFrame .radioInner.disabled {
  opacity: 0.5;
}
.colorValue {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  margin-right: 0.3em;
}
.iconFrame {
  width: var(--avnav-default-icon-size);
  height: var(--avnav-default-icon-size);
  margin: 0.2em;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  opacity: var(--avnav-night-opacity);
  vertical-align: middle;
}
.widgetHead .iconFrame {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.iconFrame .icon,
.iconFrame .iconFix,
.iconFrame .imageIcon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.iconFrame .icon img,
.iconFrame .iconFix img,
.iconFrame .imageIcon img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.iconFrame .iconFix {
  z-index: 2;
}
.iconFrame .icon {
  filter: var(--avnav-button-filter);
}
.EulaDialog .eula {
  width: 60vw;
}
.userAction {
  color: var(--avnav-attention-color);
}
.errorDisplay {
  margin: 0;
  white-space: pre;
  overflow: auto;
  height: 100vh;
  width: 100vw;
  padding: 1em;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.errorDisplay h1 {
  text-align: center;
}
.errorDisplay .button {
  width: 9em;
  margin: auto;
  text-align: center;
  height: auto;
  font-size: 2em;
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 0.3em;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}
.hiddenUpload {
  width: 0;
  height: 0;
  opacity: 0;
  margin: 0;
}
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.spinner {
  display: inline-block;
  margin-left: 2em;
  vertical-align: middle;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  border: 2px solid;
  border-color: var(--avnav-fore-color);
  border-top-color: #00000000;
  animation: spinner 0.8s linear infinite;
}
.dialog .spinner {
  border-color: var(--avnav-border-color);
  border-top-color: #00000000;
}
.nightMode .dialog .spinner {
  border-top-color: #00000000;
}
.MainNavCover,
.MainActionDialog {
  justify-content: end;
  align-items: start;
}
.MainNavCover > .dialog,
.MainActionDialog > .dialog {
  width: 23em;
}
.MainNavCover.col5 > .dialog,
.MainActionDialog.col5 > .dialog {
  width: 37em;
}
.MainNavCover.col7 > .dialog,
.MainActionDialog.col7 > .dialog {
  width: 51em;
}
.MainNavCover.full > .dialog,
.MainActionDialog.full > .dialog {
  width: 100%;
}
.MainNavCover .flexInner,
.MainActionDialog .flexInner {
  width: 100%;
}
.MainNavCover .iconSlot,
.MainActionDialog .iconSlot {
  border: 1px solid var(--avnav-border-color);
  border-radius: 4px;
}
.MainNavCover .heading,
.MainActionDialog .heading {
  justify-content: end;
}
.MainNavCover .ButtonList,
.MainActionDialog .ButtonList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: stretch;
  border-bottom: 1px solid var(--avnav-border-color);
}
.MainNavCover .ButtonList .listMain,
.MainActionDialog .ButtonList .listMain {
  flex-basis: unset;
  margin-left: 0;
  margin-right: 0;
}
.MainNavCover .ButtonList .listEntry,
.MainActionDialog .ButtonList .listEntry {
  padding: 0.5em;
}
.MainNavCover .dialogButton,
.MainActionDialog .dialogButton {
  margin-top: unset;
}
.loading.spinner {
  margin: auto;
  width: 100px;
  height: 100px;
  border-width: 20px;
}
#infopage .link {
  display: inline-block;
  padding: 1em;
  text-decoration: underline;
}
#infopage .linkWrapper {
  margin: 1em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
#infopage .infoFrame {
  padding-left: 1em;
  padding-right: 1em;
}
#infopage .infoFrame p {
  margin-top: 0.2em;
  margin-bottom: 0.5em;
}
#infopage .infoFrame h3 {
  margin-top: 1em;
  margin-bottom: 0.2em;
}
#infopage .avnavVersion {
  margin-left: 1em;
}
#gpspage .GpsPanel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
#gpspage .GpsPanel.hidden {
  flex-direction: column;
  background-color: var(--avnav-widget-color);
}
#gpspage .GpsPanel.hidden .spinner {
  border-color: var(--avnav-widget-fore-color);
  border-top-color: var(--avnav-widget-color);
}
#gpspage .PageNumber {
  font-size: 2em;
  margin-top: 2em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
}
#gpspage .iconContainer {
  z-index: 102;
}
#gpspage .leftPart {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  height: 100%;
}
#gpspage .hfield {
  width: 50%;
  height: 100%;
  border: 1px solid;
  border-color: var(--avnav-border-color);
}
#gpspage .hfield .widgetContainer {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}
#gpspage .resize,
#gpspage .noresize {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: space-evenly;
  -moz-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  -webkit-justify-content: space-evenly;
  justify-content: space-evenly;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
}
.aisHidden {
  opacity: 0.5;
}
#aispage .aisListItem,
.aisList .aisListItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  min-height: var(--avnav-min-listitem-height);
  flex-shrink: 0;
  position: relative;
  padding: 1em;
}
#aispage .aisListItem.border,
.aisList .aisListItem.border {
  border-bottom: 1px solid;
  border-color: var(--avnav-border-color);
}
#aispage .aisListItem .text.afterIcon,
.aisList .aisListItem .text.afterIcon {
  margin-left: 0.5em;
}
#aispage .aisListItem .aisItemFB,
.aisList .aisListItem .aisItemFB {
  width: 4em;
  min-width: 4em;
}
#aispage .aisListItem .fb1,
.aisList .aisListItem .fb1 {
  font-size: 2.5em;
  font-weight: bold;
}
#aispage .aisListItem .aisData,
.aisList .aisListItem .aisData {
  overflow: hidden;
  max-width: 100%;
}
#aispage .aisListItem .aisData .aisData1,
.aisList .aisListItem .aisData .aisData1 {
  font-weight: bold;
  margin-bottom: 0.2em;
}
#aispage .aisListItem .aisData .aisData2,
.aisList .aisListItem .aisData .aisData2 {
  white-space: pre-line;
  font-family: var(--avnav-mono-font-family);
}
#aispage .aisListItem .aisData .infoLine,
.aisList .aisListItem .aisData .infoLine {
  margin-bottom: 0.2em;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
#aispage .aisListItem .aisData .label,
.aisList .aisListItem .aisData .label {
  opacity: 0.6;
  width: 2em;
  display: inline-block;
}
#aispage .aisListItem .aisData .info,
.aisList .aisListItem .aisData .info {
  padding-left: 1em;
  min-width: 6.5em;
  display: inline-block;
}
.aisSummary {
  background-color: var(--avnav-select-color);
  padding-top: 0.5em;
  padding-left: 1em;
  padding-bottom: 0.5em;
  min-height: 3em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.aisSummary span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 1em;
}
.aisSummary .aisWarning {
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  margin-right: 1em;
  vertical-align: middle;
}
.aisInfoDialog {
  position: relative;
}
.aisInfoDialog .status {
  width: 60px;
  height: 60px;
  display: block;
}
@media (max-height: 40em) {
  .aisInfoDialog .status {
    display: none;
  }
}
.aisInfoDialog .infoList {
  max-width: 60em;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
.aisInfoDialog .infoList .label {
  opacity: 0.6;
  width: 6em;
}
.aisInfoDialog .infoList .aisData {
  font-weight: bold;
  flex: 1;
}
.aisInfoDialog .infoList .aisWarning {
  color: var(--avnav-attention-color);
}
.aisInfoDialog .dialogRow {
  line-height: 1.5em;
}
.addOnFrame {
  z-index: 2;
  background-color: var(--avnav-back-color);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}
.addOnFrame .addonInner {
  flex: 1;
}
.addOnFrame iframe {
  flex: 1;
  height: 100%;
  /* older microsoft ...*/
  min-height: 100%;
  min-width: 100%;
}
#addonpage .emptyPage {
  margin: auto;
  font-size: 2em;
}
#addresspage .url {
  margin-bottom: 1em;
  font-size: 1.2em;
}
#addresspage .address {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  min-height: var(--avnav-min-listitem-height);
  flex-shrink: 0;
  position: relative;
  padding: 1em;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  padding: 2em;
}
#addresspage .address.border {
  border-bottom: 1px solid;
  border-color: var(--avnav-border-color);
}
#addresspage .address .text.afterIcon {
  margin-left: 0.5em;
}
.StatusView .editIcon,
#importerpage .editIcon,
.importerView .editIcon,
.importConverterDialog .editIcon,
.importScannerDialog .editIcon {
  margin-left: 1em;
}
.StatusView .status,
#importerpage .status,
.importerView .status,
.importConverterDialog .status,
.importScannerDialog .status {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  min-height: var(--avnav-min-listitem-height);
  position: relative;
  padding: 1em;
  padding: 0.5em;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 1em;
  margin-top: 5px;
  line-height: 1.5em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.StatusView .status.activeEntry,
#importerpage .status.activeEntry,
.importerView .status.activeEntry,
.importConverterDialog .status.activeEntry,
.importScannerDialog .status.activeEntry {
  font-weight: unset;
}
.StatusView .status.border,
#importerpage .status.border,
.importerView .status.border,
.importConverterDialog .status.border,
.importScannerDialog .status.border {
  border-bottom: 1px solid;
  border-color: var(--avnav-border-color);
}
.StatusView .status .text.afterIcon,
#importerpage .status .text.afterIcon,
.importerView .status .text.afterIcon,
.importConverterDialog .status .text.afterIcon,
.importScannerDialog .status .text.afterIcon {
  margin-left: 0.5em;
}
.StatusView .status .status,
#importerpage .status .status,
.importerView .status .status,
.importConverterDialog .status .status,
.importScannerDialog .status .status {
  border-bottom: none;
  padding: 0;
}
.StatusView .status .statusHeading,
#importerpage .status .statusHeading,
.importerView .status .statusHeading,
.importConverterDialog .status .statusHeading,
.importScannerDialog .status .statusHeading {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.StatusView .status .statusHeading.disabled,
#importerpage .status .statusHeading.disabled,
.importerView .status .statusHeading.disabled,
.importConverterDialog .status .statusHeading.disabled,
.importScannerDialog .status .statusHeading.disabled {
  opacity: 0.6;
}
.StatusView .childStatus,
#importerpage .childStatus,
.importerView .childStatus,
.importConverterDialog .childStatus,
.importScannerDialog .childStatus {
  margin-top: 3px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  opacity: 0.6;
}
.StatusView .childStatus img,
#importerpage .childStatus img,
.importerView .childStatus img,
.importConverterDialog .childStatus img,
.importScannerDialog .childStatus img {
  width: 1em;
  height: 1em;
  margin-left: -1em;
}
.StatusView .childStatus.sub,
#importerpage .childStatus.sub,
.importerView .childStatus.sub,
.importConverterDialog .childStatus.sub,
.importScannerDialog .childStatus.sub {
  margin-left: 1.5em;
  margin-top: 0;
}
.StatusView .statusName,
#importerpage .statusName,
.importerView .statusName,
.importConverterDialog .statusName,
.importScannerDialog .statusName {
  padding-left: 3px;
  line-break: auto;
  word-break: break-word;
}
.StatusView .statusInfo,
#importerpage .statusInfo,
.importerView .statusInfo,
.importConverterDialog .statusInfo,
.importScannerDialog .statusInfo {
  padding-left: 3px;
  word-break: break-word;
  line-break: auto;
}
.StatusView.serverError .header,
#importerpage.serverError .header,
.importerView.serverError .header,
.importConverterDialog.serverError .header,
.importScannerDialog.serverError .header {
  background-color: var(--avnav-attention-color);
}
#importerpage .itemInfo,
.importerView .itemInfo {
  opacity: 0.6;
}
#importerpage .importStatusDialog .inputLabel,
.importerView .importStatusDialog .inputLabel {
  width: 3em;
}
.importerView {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
#layoutspage .activeLayout {
  border-bottom: none;
}
#chartspage .topRow,
#addonconfigpage .topRow {
  border-color: var(--avnav-main-color);
  border-bottom-width: 5px;
  padding-top: 0;
  padding-bottom: 0;
}
#chartspage .topRow .spacer,
#addonconfigpage .topRow .spacer {
  background-color: var(--avnav-main-color);
  height: 100%;
  width: 5px;
}
#wpapage .wpaInterface {
  font-size: 1.2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 0.5em;
}
#wpapage .wpaInterface .detail {
  opacity: 0.6;
  margin-top: 0.3em;
  font-size: 0.81em;
}
#wpapage .wpaNetwork .detail {
  font-size: 1em;
  opacity: 0.6;
  line-height: 1.5em;
  margin-right: 0.5em;
}
#wpapage .wpaNetwork .ssid {
  margin-right: 2em;
  font-size: 1.2em;
}
.wpaDialog button[name=cancel] {
  float: right;
}
.wpaDialog button[name=connect] {
  float: right;
}
.wpaDialog button[name=disable] {
  float: right;
}
.wpaDialog button[name=remove] {
  float: left;
}
.wpaDialog label {
  margin-bottom: 0.5em;
  display: block;
  text-align: left;
}
.infoImages {
  padding-left: 0.8em;
}
.downloadProgress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em 1em 1em 1em;
  background-color: var(--avnav-second-color);
  z-index: 10;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.downloadProgress .progressContainer {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.downloadProgress .progressDisplay {
  margin: 0.5em 0.5em 0.5em 0.5em;
  height: 2em;
  display: block;
  border: 1px solid;
  margin-left: 1em;
  margin-bottom: 1em;
  margin-right: 1em;
}
.downloadProgress .progressInfo {
  display: block;
  text-align: center;
}
.downloadProgress .progressDone {
  height: 100%;
  background-color: var(--avnav-slide-color);
}
.ChartSelectDialog .noOverlays .icon.Overlays {
  opacity: 0.4;
}
.ChartSelectDialog .loading {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ChartSelectDialog .loading .spinner {
  margin: 0;
}
.fileDialog .existing input {
  border-bottom: 2px solid;
  border-color: var(--avnav-attention-color);
}
.userAppDialog .input,
.userAppDialog input {
  width: auto;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 10em;
  line-break: anywhere;
}
.userAppDialog .inputLabel {
  width: 6em;
}
.editFileDialog {
  width: 90vw;
  height: 90vh;
}
.editFileDialog.collapsed {
  background-color: unset;
}
.editFileDialog.collapsed .edit {
  opacity: 0;
}
.editFileDialog.collapsed .header,
.editFileDialog.collapsed .dialogTitle {
  opacity: 0;
}
.editFileDialog .edit {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
}
.fullscreen .editFileDialog {
  width: 100%;
  height: 100%;
}
.dialog:has(.collapsed) {
  background-color: unset;
}
.EditRouteDialog.activeRoute {
  border: 3px solid;
  padding: 5px;
  border-color: var(--avnav-attention-color);
}
.EditRoutePoints .routeInfoPoint {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  line-height: 2em;
}
.EditRoutePoints .routeInfoPoint .info {
  width: 8em;
}
#settingspage .sectionList .layoutSetting,
.settings .sectionList .layoutSetting {
  color: var(--avnav-attention-color);
}
#settingspage .settingsList,
.settings .settingsList {
  overflow: auto;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
#settingspage .settingsList input,
.settings .settingsList input,
#settingspage .settingsList .input,
.settings .settingsList .input,
#settingspage .settingsList .inputFrame,
.settings .settingsList .inputFrame {
  border-bottom: none;
  flex-grow: 1;
  max-width: calc(min(30em, calc(100% - 11em)));
  overflow: clip;
  line-break: anywhere;
}
#settingspage .settingsList .error input,
.settings .settingsList .error input,
#settingspage .settingsList .error .input,
.settings .settingsList .error .input,
#settingspage .settingsList .error .inputFrame,
.settings .settingsList .error .inputFrame {
  border-bottom: 2px solid;
  border-bottom-color: var(--avnav-attention-color);
}
#settingspage .settingsList .dialogRow,
.settings .settingsList .dialogRow {
  line-height: unset;
}
#settingspage .settingsList .layoutSetting,
.settings .settingsList .layoutSetting {
  color: var(--avnav-attention-color);
}
#settingspage .sectionList .listEntry.changed,
.settings .sectionList .listEntry.changed,
#settingspage .settingsList .listEntry.changed,
.settings .settingsList .listEntry.changed {
  font-weight: bold;
}
#settingspage .sectionList .listEntry.defaultValue,
.settings .sectionList .listEntry.defaultValue,
#settingspage .settingsList .listEntry.defaultValue,
.settings .settingsList .listEntry.defaultValue {
  font-style: italic;
}
#settingspage .sectionList .listEntry.prefix::before,
.settings .sectionList .listEntry.prefix::before,
#settingspage .settingsList .listEntry.prefix::before,
.settings .settingsList .listEntry.prefix::before {
  content: "* ";
  width: 0.8em;
}
.settingsDialog input {
  width: 10em;
}
.settingsDialog button[name=reset] {
  float: left;
}
.settingsDialog .settingsRange {
  margin-bottom: 1em;
  font-size: 0.8em;
  opacity: 0.6;
}
.settingsDialog.colorDialog .value {
  margin-top: 1em;
}
.settingsDialog.colorDialog .colorValue {
  width: 50px;
  height: 50px;
  display: inline-block;
  vertical-align: middle;
}
.settingsDialog.colorDialog .colorFrame {
  margin-top: 1em;
}
.settingsDialog.colorDialog .colorPicker {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.settingsDialog.colorDialog .colorName {
  width: 11em;
}
.SettingsWarnings .dialogText {
  white-space: pre;
}
#warningpage .warningFrame {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
.viewDialog .text {
  white-space: pre-wrap;
  padding: 0.6em;
}
.viewDialog .readOnlyImage {
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  margin: auto;
  display: block;
  object-fit: contain;
}
.___notused pre.codeflask__pre.codeflask__flatten {
  width: unset;
}
.___notused .codeflask__lines {
  z-index: 4 !important;
  background-color: #eee;
}
.___notused .codeflask__lines__line {
  background-color: #eee;
  padding-right: 5px;
  padding-left: 0;
}
.___notused .codeflask__flatten {
  font-size: inherit;
}
.___notused textarea {
  font-size: inherit;
}
#addonconfigpage .primary {
  line-break: anywhere;
}
#addonconfigpage .addonItem .listMain {
  min-width: 0;
}
#addonconfigpage .sourceInfo,
#addonconfigpage .pageInfo,
#addonconfigpage .buttonInfo {
  opacity: 0.6;
  margin-top: 0.2em;
}
#addonconfigpage .sourceInfo:before {
  content: "Source: ";
}
.mapPage .noChart {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.mapPage .noChart .text {
  font-size: 3em;
  flex-basis: 5em;
}
.mapPage .loading {
  align-self: center;
  margin-top: 4em;
  font-size: 2em;
  word-wrap: break-word;
  max-width: 100%;
  padding: 0.5em;
}
.mapPage .button.center {
  align-self: center;
}
.mapPage .iconContainer {
  z-index: 102;
}
.mapPage .mapFrame {
  position: relative;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
.mapPage .map {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  /* position absolute contradicts somehow the flex approach
         but otherwise the map will not show on old Safari (IPad 4, safari 9)
       */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.mapPage.mapFloat .map {
  z-index: 1;
}
.mapPage .leftSection {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  position: relative;
  min-width: 0;
  min-height: 0;
}
.mapPage .bottomSection {
  z-index: 3;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  -ms-flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  position: relative;
}
.mapPage .bottomSection .bottomLeft {
  width: 50%;
  position: relative;
  height: min-content;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.mapPage .bottomSection .bottomRight {
  width: 50%;
  height: min-content;
  position: relative;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.mapPage.editing .bottomSection .bottomLeft {
  border-right: 0.3em solid;
  border-color: var(--avnav-attention-color);
}
.mapPage.editing .bottomSection .bottomRight {
  border-left: 0.3em solid;
  border-color: var(--avnav-attention-color);
}
.mapPage .widgetContainer.left {
  position: absolute;
  bottom: 0;
  left: 0;
  max-height: 100%;
  z-index: 3;
  width: var(--avnav-left-widgets-width);
}
.mapPage .widgetContainer.top {
  z-index: 3;
}
.mapPage .overlayContainer {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: inherit;
}
.mapPage.mapFloat .buttonContainer {
  background-color: unset;
  z-index: 2;
}
.mapPage.mapFloat .buttonShade {
  z-index: 2;
}