.listEntry {
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid;
  padding: 1em;
  border-color: rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.nightMode .listEntry {
  border-color: rgba(252, 11, 11, 0.18);
}
.widget {
  position: relative;
  z-index: 100;
  margin: 0.1em;
  overflow: hidden;
  pointer-events: all;
  background: white;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-flex-grow: 1;
  flex-grow: 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;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.nightMode .widget {
  background-color: #000;
  color: rgba(252, 11, 11, 0.6);
}
.widget .widgetHead {
  margin: 0;
  padding: 0.1em;
  display: flex;
  -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;
  height: 0.7em;
}
.widget .widgetHead .infoLeft {
  font-size: 0.71em;
  opacity: 0.7;
}
.widget .widgetHead .infoRight {
  font-size: 0.71em;
  opacity: 0.7;
}
.widget .widgetData {
  text-align: right;
  max-width: calc(100% - 0.2em);
  margin-left: auto;
  margin-right: 0.1em;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
}
.widget.average .infoLeft {
  color: red;
}
.nightMode .widget.average .infoLeft {
  color: rgba(252, 11, 11, 0.6);
}
.widget .label {
  opacity: 0.6;
}
.editing .widget {
  -webkit-flex-grow: 0;
  flex-grow: 0;
}
#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-bottom: 1px solid;
  border-top: 1px solid;
  background-color: #E2DFDF;
  height: unset;
}
.nightMode .hfield .widgetContainer .widget .widgetHead {
  background-color: rgba(226, 223, 223, 0.6);
}
.hfield .widgetContainer .widget .widgetData {
  padding-top: 0;
  display: block;
  white-space: pre;
}
.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: #546E7A;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.widgetContainer .widget {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.nightMode .widgetContainer {
  background-color: #000;
  color: rgba(252, 11, 11, 0.6);
}
.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: 4.2em;
}
.twoRows .widgetContainer.horizontal {
  max-height: 7.9em;
}
.widgetContainer.horizontal .widget {
  height: 4em;
}
.editing .widgetContainer.horizontal {
  -webkit-box-lines: single;
  -moz-box-lines: single;
  -ms-flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  min-height: 4.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.1em;
  margin-right: 0.1em;
  padding-left: 0.1em;
  padding-right: 0.1em;
  width: calc(100% - 0.2em);
}
.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;
}
.widget.SOG {
  width: 11em;
}
.widget.SOG .widgetData {
  font-size: 3em;
}
.vertical .widget.SOG .widgetData {
  font-size: 2em;
}
.widget.VMG {
  width: 11em;
}
.widget.VMG .widgetData {
  font-size: 3em;
}
.vertical .widget.VMG .widgetData {
  font-size: 2em;
}
.widget.COG {
  width: 7em;
}
.widget.COG .widgetData {
  font-size: 3em;
}
.vertical .widget.COG .widgetData {
  font-size: 2em;
}
.widget.BRG {
  width: 7em;
}
.widget.BRG .widgetData {
  font-size: 3em;
}
.vertical .widget.BRG .widgetData {
  font-size: 2em;
}
.widget.DST {
  width: 11em;
}
.widget.DST .widgetData {
  font-size: 3em;
}
.vertical .widget.DST .widgetData {
  font-size: 2em;
}
.widget.WindAngle,
.widget.WindSpeed {
  width: 7em;
}
.widget.WindAngle .widgetData,
.widget.WindSpeed .widgetData {
  font-size: 3em;
}
.vertical .widget.WindAngle .widgetData,
.vertical .widget.WindSpeed .widgetData {
  font-size: 2em;
}
.widget.AnchorBearing {
  width: 7em;
}
.widget.AnchorBearing .widgetData {
  font-size: 3em;
}
.vertical .widget.AnchorBearing .widgetData {
  font-size: 2em;
}
.widget.AnchorDistance {
  width: 11em;
}
.widget.AnchorDistance .widgetData {
  font-size: 3em;
}
.vertical .widget.AnchorDistance .widgetData {
  font-size: 2em;
}
.widget.AnchorWatchDistance {
  width: 9em;
}
.widget.AnchorWatchDistance .widgetData {
  font-size: 3em;
}
.vertical .widget.AnchorWatchDistance .widgetData {
  font-size: 2em;
}
.widget.RteDistance {
  width: 11em;
}
.widget.RteDistance .widgetData {
  font-size: 3em;
}
.vertical .widget.RteDistance .widgetData {
  font-size: 2em;
}
.widget.RteDistance {
  width: 7em;
}
.widget.RteDistance .widgetData {
  font-size: 1.5em;
}
.vertical .widget.RteDistance .widgetData {
  font-size: 1.5em;
}
.widget.LargeTime {
  width: 7em;
}
.widget.LargeTime .widgetData {
  font-size: 2.5em;
}
.vertical .widget.LargeTime .widgetData {
  font-size: 2.5em;
}
.widget.zoomWidget {
  width: 7em;
}
.widget.zoomWidget .widgetData {
  font-size: 1em;
}
.vertical .widget.zoomWidget .widgetData {
  font-size: 1em;
}
.widget.zoomWidget .widgetData {
  text-align: center;
  font-size: 1.5em;
}
.vertical .widget.zoomWidget .widgetData {
  font-size: 1.5em;
}
.widget.zoomWidget .rzoom {
  display: inline-block;
}
.widget.Position,
.widget.WpPosition {
  width: 7em;
}
.widget.Position .widgetData,
.widget.WpPosition .widgetData {
  font-size: 1em;
}
.vertical .widget.Position .widgetData,
.vertical .widget.WpPosition .widgetData {
  font-size: 1em;
}
.widget.Position .widgetData,
.widget.WpPosition .widgetData {
  text-align: center;
}
.widget.timeStatusWidget {
  width: 7em;
}
.widget.timeStatusWidget .widgetData {
  font-size: 1em;
}
.vertical .widget.timeStatusWidget .widgetData {
  font-size: 1em;
}
.widget.timeStatusWidget .status {
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.nightMode .widget.timeStatusWidget .status {
  opacity: 0.6;
}
.widget.timeStatusWidget .widgetData {
  text-align: center;
  margin-top: unset;
  margin-left: auto;
  margin-right: auto;
}
.widget.etaWidget {
  width: 7em;
}
.widget.etaWidget .widgetData {
  font-size: 1em;
}
.vertical .widget.etaWidget .widgetData {
  font-size: 1em;
}
.widget.etaWidget .widgetData {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: unset;
}
.widget.etaWidget .widgetData.markerName {
  margin-top: 0;
}
.widget.aisTargetWidget {
  width: 7em;
  background-color: #CFD8DC;
}
.widget.aisTargetWidget .widgetData {
  font-size: 1em;
}
.vertical .widget.aisTargetWidget .widgetData {
  font-size: 1em;
}
.nightMode .widget.aisTargetWidget {
  background-color: #000;
}
.widget.aisTargetWidget .aisFront {
  display: inline-block;
  font-size: 1.5em;
}
.widget.aisTargetWidget .label {
  width: 2em;
}
.widget.aisTargetWidget .widgetData ~ .widgetData {
  padding-top: 0;
}
.hfield .widget.aisTargetWidget .aisPart {
  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-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.widget.aisTargetWidget .aisSmall {
  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 .aisParts {
  flex-grow: 1;
}
.widget.activeRouteWidget {
  width: 7em;
}
.widget.activeRouteWidget .widgetData {
  font-size: 1em;
}
.vertical .widget.activeRouteWidget .widgetData {
  font-size: 1em;
}
.widget.activeRouteWidget .routeName {
  margin-top: 0.8em;
  margin-right: 0.2em;
  opacity: 0.6;
  overflow: hidden;
  white-space: nowrap;
}
.widget.activeRouteWidget .routeRemain {
  font-size: 1.5em;
}
.widget.activeRouteWidget.approach {
  background-color: #FF8A80;
}
.nightMode .widget.activeRouteWidget.approach {
  background-color: rgba(255, 138, 128, 0.6);
}
.widget.editRouteWidget {
  border: 3px solid;
  border-color: #1DE9B6;
  width: 7em;
}
.nightMode .widget.editRouteWidget {
  border-color: rgba(29, 233, 182, 0.6);
}
.widget.editRouteWidget.activeRoute {
  border-color: #C62828;
}
.nightMode .widget.editRouteWidget.activeRoute {
  border-color: rgba(198, 40, 40, 0.6);
}
.widget.editRouteWidget .widgetData {
  font-size: 1em;
}
.vertical .widget.editRouteWidget .widgetData {
  font-size: 1em;
}
.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 {
  width: 7em;
}
.widget.centerDisplayWidget .widgetData {
  font-size: 1em;
}
.vertical .widget.centerDisplayWidget .widgetData {
  font-size: 1em;
}
.widget.centerDisplayWidget .widgetData ~ .widgetData {
  margin-top: 0;
}
.widget.centerDisplayWidget .value {
  display: inline-block;
}
.widget.centerDisplayWidget .label {
  display: inline-block;
  background-size: 1em 1em;
  background-repeat: no-repeat;
  width: 1em;
  height: 1em;
  float: left;
}
.widget.centerDisplayWidget .label.boat {
  background-image: url(images/boat.svg);
}
.widget.centerDisplayWidget .label.marker {
  background-image: url(images/waypoint.svg);
}
.widget.centerDisplayWidget .label.measure {
  background-image: url(images/outlined_flag.svg);
}
.horizontal .widget.centerDisplayWidget {
  min-width: 10em;
}
.widget.windWidget {
  width: 9em;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
.widget.windWidget .widgetData {
  font-size: 1em;
}
.vertical .widget.windWidget .widgetData {
  font-size: 1em;
}
.widget.windWidget .widgetData {
  font-size: 1.5em;
}
.widget.DepthDisplay {
  width: 11em;
}
.widget.DepthDisplay .widgetData {
  font-size: 3em;
}
.vertical .widget.DepthDisplay .widgetData {
  font-size: 2em;
}
.widget.xteWidget {
  width: 7em;
}
.widget.xteWidget .widgetData {
  font-size: 1em;
}
.vertical .widget.xteWidget .widgetData {
  font-size: 1em;
}
.widget.xteWidget canvas {
  margin-right: auto;
  margin-left: auto;
}
.widget.windGraphics {
  width: 11em;
}
.widget.windGraphics .widgetData {
  font-size: 1em;
}
.vertical .widget.windGraphics .widgetData {
  font-size: 1em;
}
.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: 90%;
  width: 90%;
}
.vertical .widget.windGraphics {
  height: 11em;
}
.widget.routePointsWidget {
  overflow: hidden;
  -webkit-flex-shrink: 1 !important;
  flex-shrink: 1 !important;
}
.widget.routePointsWidget .more {
  display: none;
  position: absolute;
  right: 0;
  top: 20%;
}
.widget.routePointsWidget .activeEntry .more {
  display: inline-block;
}
.widget.alarmWidget {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3em;
  font-size: 1.5em;
  background-color: #C62828;
  padding: 1.5em;
  padding-top: 0.3em;
  margin: 0.5em;
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.nightMode .widget.alarmWidget {
  background-color: rgba(198, 40, 40, 0.6);
}
.widgetContainer .widget.alarmWidget {
  position: inherit;
  padding: inherit;
  height: inherit;
  width: 4em;
  margin: inherit;
}
.widget.CombinedWidget .icon.locked {
  position: absolute;
  top: calc(50% - 1em);
  left: calc(50% - 1em);
  z-index: 101;
  color: red;
}
.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;
  min-width: 0;
  border-right: 1px solid;
}
.widget.CombinedWidget > .listContainer .widget:last-of-type {
  border-right: unset;
}
.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.signalKPitch .widgetData.critical {
  color: red;
}
.widget.signalKRoll .widgetData {
  font-size: 2em;
  text-align: center;
}
.widget.signalKRoll .widgetData.critical {
  color: red;
}
.button {
  margin: 0.2em 0.2em 0.2em 0.2em;
  border-top-right-radius: 0.3em;
  border-top-left-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
  border: 1px solid;
  text-decoration: none;
  border-color: #D3D3D3;
  background-color: #E6E6E6;
  cursor: pointer;
  outline: none;
  display: block;
  position: relative;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 4em;
  height: 4em;
  font-size: 1em;
}
.nightMode .button {
  border-color: rgba(211, 211, 211, 0.6);
}
.nightMode .button {
  background-color: rgba(30, 30, 30, 0.55);
}
.button span {
  background-position: center;
  background-size: 80% 80%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
}
.button:disabled span {
  opacity: 0.5;
}
.fab.button {
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
  border-radius: 50%;
  background-color: #546E7A;
  color: white;
}
.nightMode .fab.button {
  background-color: rgba(84, 110, 122, 0.6);
}
.nightMode .fab.button {
  color: rgba(252, 11, 11, 0.6);
}
.smallButton {
  margin: 0.2em 0.2em 0.2em 0.2em;
  border-top-right-radius: 0.3em;
  border-top-left-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
  border: 1px solid;
  text-decoration: none;
  border-color: #D3D3D3;
  background-color: #E6E6E6;
  cursor: pointer;
  outline: none;
  display: block;
  position: relative;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  font-size: 1rem;
}
.nightMode .smallButton {
  border-color: rgba(211, 211, 211, 0.6);
}
.nightMode .smallButton {
  background-color: rgba(30, 30, 30, 0.55);
}
.smallButton span {
  background-position: center;
  background-size: 80% 80%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
}
.smallButton:disabled span {
  opacity: 0.5;
}
.button.active {
  border: 0.3em solid;
  border-color: #1DE9B6;
}
.nightMode .button.active {
  border-color: rgba(252, 11, 11, 0.6);
}
.button.active.MOB {
  border-color: #C62828;
}
.nightMode .button.active.MOB {
  border-color: rgba(198, 40, 40, 0.6);
}
.dialogButton {
  margin: 0.2em 0.2em 0.2em 0.2em;
  border-top-right-radius: 0.3em;
  border-top-left-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
  border: 1px solid;
  text-decoration: none;
  border-color: #D3D3D3;
  background-color: #E6E6E6;
  cursor: pointer;
  outline: none;
  display: block;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  margin-top: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  font-size: 1em;
  padding: 0.5em;
  width: inherit;
  background-color: #ECEFF1;
  border: none;
  position: relative;
  color: #546E7A;
  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;
}
.nightMode .dialogButton {
  border-color: rgba(211, 211, 211, 0.6);
}
.nightMode .dialogButton {
  background-color: rgba(30, 30, 30, 0.55);
}
.dialogButton span {
  background-position: center;
  background-size: 80% 80%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
}
.dialogButton:disabled span {
  opacity: 0.5;
}
.nightMode .dialogButton {
  background-color: #000;
}
.nightMode .dialogButton {
  color: rgba(252, 11, 11, 0.6);
}
.dialogButton[disabled] {
  opacity: 0.6;
}
.dialogButton > span {
  position: unset;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-top: auto;
  margin-bottom: auto;
}
.dialogButton.icon {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.dialogButton.active {
  border: 0.3em solid;
  border-color: #1DE9B6;
  padding: 0.2em;
}
.nightMode .dialogButton.active {
  border-color: rgba(29, 233, 182, 0.6);
}
button {
  /*- nav page routing panel --*/
}
button.Cancel span {
  background-image: url(images/ic_clear.svg);
}
.nightMode button.Cancel span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.Ok span {
  background-image: url(images/ic_done.svg);
}
.nightMode button.Ok span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.Forward span {
  background-image: url(images/ic_arrow_forward.svg);
}
.nightMode button.Forward span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.Back span {
  background-image: url(images/ic_arrow_back.svg);
}
.nightMode button.Back span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.Edit span {
  background-image: url(images/ic_edit.svg);
}
.nightMode button.Edit span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.Help span {
  background-image: url(images/ic_help_outline.svg);
}
.nightMode button.Help span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.ZoomIn span {
  background-image: url(images/ic_zoom_in.svg);
}
.nightMode button.ZoomIn span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.ZoomOut span {
  background-image: url(images/ic_zoom_out.svg);
}
.nightMode button.ZoomOut span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.LockPos span {
  background-image: url(images/boat.svg);
}
.nightMode button.LockPos span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.LockMarker span {
  background-image: url(images/waypoint.svg);
}
.nightMode button.LockMarker span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.StopNav span {
  background-image: url(images/stop-nav.svg);
}
.nightMode button.StopNav span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.CourseUp span {
  background-image: url(images/compass.svg);
}
.nightMode button.CourseUp span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.ShowRoutePanel span {
  background-image: url(images/route.svg);
}
.nightMode button.ShowRoutePanel span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.ShowGps span {
  background-image: url(images/data.svg);
}
.nightMode button.ShowGps span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.AnchorWatch span {
  background-image: url(images/anchor.svg);
}
.nightMode button.AnchorWatch span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.MOB span {
  background-image: url(images/drowning.svg);
}
.nightMode button.MOB span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.CancelNav span {
  background-image: url(images/ic_clear.svg);
}
.nightMode button.CancelNav span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.NavMapWidgets span {
  background-image: url(images/assistant_nav.svg);
}
.nightMode button.NavMapWidgets span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.NavAdd span {
  background-image: url(images/wpplus.svg);
}
.nightMode button.NavAdd span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.NavAddAfter {
  transform: rotate(180deg);
}
button.NavAddAfter span {
  background-image: url(images/wpplus.svg);
}
.nightMode button.NavAddAfter span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.NavDelete span {
  background-image: url(images/wpminus.svg);
}
.nightMode button.NavDelete span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.NavToCenter span {
  background-image: url(images/wpcenter.svg);
}
.nightMode button.NavToCenter span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.NavGoto span {
  background-image: url(images/wpgoto.svg);
}
.nightMode button.NavGoto span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.NavInvert span {
  background-image: url(images/invertroute.svg);
}
.nightMode button.NavInvert span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.NavDeleteAll span {
  background-image: url(images/delete_sweep.svg);
}
.nightMode button.NavDeleteAll span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.NavNext span {
  background-image: url(images/nextwp.svg);
}
.nightMode button.NavNext span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.NavRestart span {
  background-image: url(images/wpgoto.svg);
}
.nightMode button.NavRestart span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.WpLocate span {
  background-image: url(images/center.svg);
}
.nightMode button.WpLocate span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.WpPrevious span {
  background-image: url(images/ic_arrow_back.svg);
}
.nightMode button.WpPrevious span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.WpNext span {
  background-image: url(images/ic_arrow_forward.svg);
}
.nightMode button.WpNext span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.WpGoto span {
  background-image: url(images/wpgoto.svg);
}
.nightMode button.WpGoto span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.WpEdit span {
  background-image: url(images/ic_edit.svg);
}
.nightMode button.WpEdit span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.NavOverlays span {
  background-image: url(images/layers-black.svg);
}
.nightMode button.NavOverlays span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.Measure span {
  background-image: url(images/straighten.svg);
}
.nightMode button.Measure span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.MeasureOff span {
  background-image: url(images/straighten-off.svg);
}
.nightMode button.MeasureOff span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.CenterAction span {
  background-image: url(images/center-action.svg);
}
.nightMode button.CenterAction span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.ShowStatus span {
  background-image: url(images/status.svg);
}
.nightMode button.ShowStatus span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.ShowSettings span {
  background-image: url(images/ic_settings.svg);
}
.nightMode button.ShowSettings span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.Menu span {
  background-image: url(images/menu_open.svg);
}
.nightMode button.Menu span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.Connected span {
  background-image: url(images/plug.svg);
}
.nightMode button.Connected span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.Night span {
  background-image: url(images/night.svg);
}
.nightMode button.Night span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.RemoteChannel span {
  background-image: url(images/settings_remote.svg);
}
.nightMode button.RemoteChannel span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.ShowDownload span {
  background-image: url(images/ic_file_download.svg);
}
.nightMode button.ShowDownload span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.MainCancel span {
  background-image: url(images/ic_clear.svg);
}
.nightMode button.MainCancel span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.MainAndroid span {
  background-image: url(images/ic_android.svg);
}
.nightMode button.MainAndroid span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.MainInfo span {
  background-image: url(images/ic_info.svg);
}
.nightMode button.MainInfo span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.MainAddOns span {
  background-image: url(images/apps.svg);
}
.nightMode button.MainAddOns span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.MainOverlays span {
  background-image: url(images/layers-black.svg);
}
.nightMode button.MainOverlays span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.Split span {
  background-image: url(images/vertical_split.svg);
}
.nightMode button.Split span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.GpsCenter span {
  background-image: url(images/center.svg);
}
.nightMode button.GpsCenter span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.Gps1 span {
  font-size: 2.3em;
  position: relative;
}
button.Gps1 span:after {
  content: '1';
}
button.Gps2 span {
  font-size: 2.3em;
  position: relative;
}
button.Gps2 span:after {
  content: '2';
}
button.Gps3 span {
  font-size: 2.3em;
  position: relative;
}
button.Gps3 span:after {
  content: '3';
}
button.Gps4 span {
  font-size: 2.3em;
  position: relative;
}
button.Gps4 span:after {
  content: '4';
}
button.Gps5 span {
  font-size: 2.3em;
  position: relative;
}
button.Gps5 span:after {
  content: '5';
}
button.AisNearest span {
  background-image: url(images/ais-nearest.svg);
}
.nightMode button.AisNearest span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.AisSort span {
  background-image: url(images/sort.svg);
}
.nightMode button.AisSort span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.AisLock span {
  background-image: url(images/update_disabled.svg);
}
.nightMode button.AisLock span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.AisSearch span {
  background-image: url(images/search.svg);
}
.nightMode button.AisSearch span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.AisInfoLocate span {
  background-image: url(images/center.svg);
}
.nightMode button.AisInfoLocate span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.AisInfoList span {
  background-image: url(images/ic_list.svg);
}
.nightMode button.AisInfoList span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.AisInfoHide span {
  background-image: url(images/ic_hide.svg);
}
.nightMode button.AisInfoHide span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.StatusWpa span {
  background-image: url(images/ic_rss_feed.svg);
}
.nightMode button.StatusWpa span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.StatusAndroid span {
  background-image: url(images/ic_android.svg);
}
.nightMode button.StatusAndroid span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.AndroidBrowser span {
  background-image: url(images/internet-web-browser.svg);
}
.nightMode button.AndroidBrowser span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.StatusAddresses span {
  background-image: url(images/qrcode.svg);
}
.nightMode button.StatusAddresses span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.StatusShutdown span {
  background-image: url(images/ic_power.svg);
}
.nightMode button.StatusShutdown span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.StatusAdd span {
  background-image: url(images/ic_add.svg);
}
.nightMode button.StatusAdd span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.StatusLog span {
  background-image: url(images/ic_text_snippet.svg);
}
.nightMode button.StatusLog span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.StatusDebug span {
  background-image: url(images/bug_report.svg);
}
.nightMode button.StatusDebug span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.StatusRestart span {
  background-image: url(images/ic_refresh.svg);
}
.nightMode button.StatusRestart span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.RoutePageOk span {
  background-image: url(images/ic_done.svg);
}
.nightMode button.RoutePageOk span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.RoutePageDownload span {
  background-image: url(images/ic_file_download.svg);
}
.nightMode button.RoutePageDownload span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.DownloadPageUpload span {
  background-image: url(images/ic_file_upload.svg);
}
.nightMode button.DownloadPageUpload span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.DownloadPageRoutes span {
  background-image: url(images/route.svg);
}
.nightMode button.DownloadPageRoutes span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.DownloadPageCharts span {
  background-image: url(images/map2.svg);
}
.nightMode button.DownloadPageCharts span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.DownloadPageTracks span {
  background-image: url(images/track.svg);
}
.nightMode button.DownloadPageTracks span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.DownloadPageLayouts span {
  background-image: url(images/ballot.svg);
}
.nightMode button.DownloadPageLayouts span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.DownloadPageSettings span {
  background-image: url(images/ic_settings.svg);
}
.nightMode button.DownloadPageSettings span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.DownloadPageImages span {
  background-image: url(images/image-icon.svg);
}
.nightMode button.DownloadPageImages span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.DownloadPageUser span {
  background-image: url(images/folder_shared.svg);
}
.nightMode button.DownloadPageUser span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.DownloadPageOverlays span {
  background-image: url(images/layers-black.svg);
}
.nightMode button.DownloadPageOverlays span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.DownloadPageImporter span {
  background-image: url(images/swap_horiz.svg);
}
.nightMode button.DownloadPageImporter span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.Delete span {
  background-image: url(images/ic_delete.svg);
}
.nightMode button.Delete span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.Download span {
  background-image: url(images/ic_file_download.svg);
}
.nightMode button.Download span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.Rename span {
  background-image: url(images/ic_edit_name.svg);
}
.nightMode button.Rename span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.DownloadPageUploadCancel span {
  background-image: url(images/ic_clear.svg);
}
.nightMode button.DownloadPageUploadCancel span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.DownloadPageCreate span {
  font-size: 2.3em;
  position: relative;
}
button.DownloadPageCreate span:after {
  content: '+';
}
button.SettingsOK span {
  background-image: url(images/ic_done.svg);
}
.nightMode button.SettingsOK span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.SettingsDefaults span {
  background-image: url(images/ic_delete.svg);
}
.nightMode button.SettingsDefaults span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.SettingsLayout span {
  background-image: url(images/ballot.svg);
}
.nightMode button.SettingsLayout span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.SettingsLayout.button.active {
  border-color: #C62828;
}
button.SettingsSave span {
  background-image: url(images/save.svg);
}
.nightMode button.SettingsSave span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.SettingsLoad span {
  background-image: url(images/ic_open.svg);
}
.nightMode button.SettingsLoad span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.SettingsSplitReset span {
  background-image: url(images/reset_split.svg);
}
.nightMode button.SettingsSplitReset span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.SettingsAddons span {
  background-image: url(images/apps.svg);
}
.nightMode button.SettingsAddons span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.SettingsAndroid span {
  background-image: url(images/ic_android.svg);
}
.nightMode button.SettingsAndroid span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.SettingsReload span {
  background-image: url(images/ic_refresh.svg);
}
.nightMode button.SettingsReload span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.LayoutFinished span {
  background-image: url(images/ballot.svg);
}
.nightMode button.LayoutFinished span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.LayoutFinished.button.active {
  border-color: #C62828;
}
button.RevertLayout span {
  background-image: url(images/ic_undo.svg);
}
.nightMode button.RevertLayout span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.EditPage span {
  background-image: url(images/tune.svg);
}
.nightMode button.EditPage span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.WarningOK {
  margin-left: auto;
  margin-right: auto;
  width: auto;
}
button.WarningOK span {
  font-size: 1.5em;
  position: relative;
}
button.WarningOK span:after {
  content: 'Accept/Akzeptieren';
}
button.View span {
  background-image: url(images/visibility.svg);
}
.nightMode button.View span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.DownloadEdit span {
  background-image: url(images/ic_edit.svg);
}
.nightMode button.DownloadEdit span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.ViewPageSave span {
  background-image: url(images/save.svg);
}
.nightMode button.ViewPageSave span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.ViewPageView span {
  background-image: url(images/visibility.svg);
}
.nightMode button.ViewPageView span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.ViewPageEdit span {
  background-image: url(images/ic_edit.svg);
}
.nightMode button.ViewPageEdit span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.AddonConfigPlus span {
  font-size: 2.3em;
  position: relative;
}
button.AddonConfigPlus span:after {
  content: '+';
}
button.AddonConfigAddOns span {
  background-image: url(images/apps.svg);
}
.nightMode button.AddonConfigAddOns span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.AddonConfigView span {
  background-image: url(images/visibility.svg);
}
.nightMode button.AddonConfigView span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.Dim span {
  background-image: url(images/brightness_low.svg);
}
.nightMode button.Dim span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.Overflow span {
  background-image: url(images/more_left.svg);
}
.nightMode button.Overflow span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
button.FullScreen span {
  background-image: url(images/fullscreen.svg);
}
.nightMode button.FullScreen span {
  filter: brightness(0) saturate(50%) invert(16%) sepia(98%) saturate(2000%) hue-rotate(353deg) brightness(94%) contrast(111%);
}
.dialogButton.cancel > span {
  background-image: url(images/ic_clear.svg);
}
.dialogButton.ok > span {
  background-image: url(images/ic_done.svg);
}
.dialogButton.delete > span {
  background-image: url(images/ic_delete.svg);
}
.dialogButton.reset > span {
  background-image: url(images/ic_delete.svg);
}
.dialogButton.edit > span {
  background-image: url(images/ic_edit.svg);
}
.dialogButton.download > span {
  background-image: url(images/ic_file_download.svg);
}
.dialogButton.log > span {
  background-image: url(images/ic_text_snippet.svg);
}
.dialogButton.autoreload.active > span {
  background-image: url(images/update_disabled.svg);
}
.dialogButton.autoreload.inactive > span {
  background-image: url(images/ic_refresh.svg);
}
.fileDialog .dialogButton.view > span {
  background-image: url(images/visibility.svg);
}
.fileDialog .dialogButton.userApp > span {
  background-image: url(images/apps.svg);
}
.fileDialog .dialogButton.overlays > span {
  background-image: url(images/layers-black.svg);
}
.fileDialog .dialogButton.toroute > span {
  background-image: url(images/route.svg);
}
.editWidgetDialog .dialogButton.before > span {
  background-image: url(images/navigate_before.svg);
}
.editWidgetDialog .dialogButton.after > span {
  background-image: url(images/navigate_next.svg);
}
.colorDialog .dialogButton.unset > span {
  background-image: url(images/format_color_reset.svg);
}
.wpaDialog .dialogButton.disable > span {
  background-image: url(images/wifi_off.svg);
}
.wpaDialog .dialogButton.remove > span {
  background-image: url(images/ic_delete.svg);
}
.wpaDialog .dialogButton.connect > span {
  background-image: url(images/play_arrow.svg);
}
.wpaDialog .dialogButton.enable > span {
  background-image: url(images/wifi.svg);
}
.editOverlaysDialog .dialogButton.before > span {
  background-image: url(images/navigate_before.svg);
}
.editOverlaysDialog .dialogButton.after > span {
  background-image: url(images/navigate_next.svg);
}
.editOverlaysDialog .dialogButton.hide > span {
  background-image: url(images/visibility_off.svg);
}
.editOverlaysDialog .dialogButton.show > span {
  background-image: url(images/visibility.svg);
}
.FeatureInfoDialog .dialogButton.info > span {
  background-image: url(images/ic_info.svg);
}
.FeatureInfoDialog .dialogButton.goto > span,
.featureListDialog .dialogButton.goto > span {
  background-image: url(images/waypoint.svg);
}
.FeatureInfoDialog .dialogButton.add > span,
.featureListDialog .dialogButton.add > span {
  background-image: url(images/wpplus.svg);
}
.FeatureInfoDialog .dialogButton.add span,
.featureListDialog .dialogButton.add span {
  transform: rotate(180deg);
}
.FeatureInfoDialog .dialogButton.insert > span,
.featureListDialog .dialogButton.insert > span {
  background-image: url(images/wpplus.svg);
}
.FeatureInfoDialog .dialogButton.center > span,
.featureListDialog .dialogButton.center > span {
  background-image: url(images/wpcenter.svg);
}
.FeatureInfoDialog .dialogButton.routeTo > span,
.featureListDialog .dialogButton.routeTo > span {
  background-image: url(images/wpgoto.svg);
}
.FeatureInfoDialog .dialogButton.editRoute > span {
  background-image: url(images/route.svg);
}
.FeatureInfoDialog .dialogButton.hide > span {
  background-image: url(images/visibility_off.svg);
}
.FeatureInfoDialog .dialogButton.toroute > span {
  background-image: url(images/route.svg);
}
.TrackInfoDialog .dialogButton.toroute > span {
  background-image: url(images/route.svg);
}
.TrackConvertDialog .dialogButton.convert > span {
  background-image: url(images/play_arrow.svg);
}
.AskEditRouteDialog .dialogButton.editRoute > span {
  background-image: url(images/route.svg);
}
.EditRouteDialog .dialogButton.copy > span {
  background-image: url(images/content_copy.svg);
}
.EditRouteDialog .dialogButton.edit > span {
  background-image: url(images/ic_edit.svg);
}
.EditRouteDialog .dialogButton.points > span {
  background-image: url(images/route.svg);
}
.EditRoutePoints .dialogButton.empty > span {
  background-image: url(images/delete_sweep.svg);
}
.EditRoutePoints .dialogButton.invert > span {
  background-image: url(images/invertroute.svg);
}
.EditRoutePoints .dialogButton.renumber > span {
  background-image: url(images/format_list_numbered.svg);
}
.EditRouteDialog .dialogButton.load > span {
  background-image: url(images/save.svg);
}
.dialogButton.reload > span {
  background-image: url(images/ic_refresh.svg);
}
.LockDialog .dialogButton.current > span {
  background-image: url(images/boat.svg);
}
.LockDialog .dialogButton.center > span {
  background-image: url(images/center.svg);
}
.AnchorWatchDialog .dialogButton.center > span {
  background-image: url(images/center.svg);
}
.AnchorWatchDialog .dialogButton.boat > span {
  background-image: url(images/boat.svg);
}
.AnchorWatchDialog .dialogButton.stop > span {
  background-image: url(images/anchor-end.svg);
}
.RemoteChannelDialog .dialogButton.disconnect > span {
  background-image: url(images/plug-disconnect.svg);
}
.RemoteChannelDialog .dialogButton.connect > span {
  background-image: url(images/plug.svg);
}
.MapWidgetsDialog .dialogButton.add > span {
  background-image: url(images/ic_add.svg);
}
.dialogButton.stop > span {
  background-image: url(images/stop_circle.svg);
}
.dialogButton.restart > span {
  background-image: url(images/ic_refresh.svg);
}
.dialogButton.disable > span {
  background-image: url(images/ic_hide.svg);
}
.dialogButton.upload > span {
  background-image: url(images/ic_file_upload.svg);
}
.dialogButton.new {
  padding-left: 1.3em;
}
.dialogButton.new > span:after {
  content: '+';
}
.dialogButton.save > span {
  background-image: url(images/save.svg);
}
.dialogButton.start > span {
  background-image: url(images/wpgoto.svg);
}
.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: #000000;
  float: right;
  z-index: 10;
}
.ol-scale-singlebar {
  position: relative;
  height: 10px;
  z-index: 9;
  box-sizing: border-box;
  border: 1px solid black;
}
.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;
}
* {
  -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;
}
input {
  border: 2px inset;
  background-color: inherit;
}
.nightMode input {
  background-color: #646463;
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.nightMode html,
.nightMode body {
  background-color: #000;
  color: rgba(252, 11, 11, 0.6);
}
body {
  touch-action: none;
}
#new_pages,
.app,
.pageFrame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.pageFrame {
  background-color: white;
}
.pageFrame.nightMode {
  background-color: #000;
  color: rgba(252, 11, 11, 0.6);
}
.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: 4px solid;
  border-color: #C62828;
}
.nightMode .page.editing {
  border-color: rgba(198, 40, 40, 0.6);
}
.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: #546E7A;
}
.nightMode .buttonContainer {
  background-color: rgba(84, 110, 122, 0.6);
}
.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-image: linear-gradient(to right, rgba(84, 110, 122, 0.1), rgba(84, 110, 122, 0.2));
}
.iconContainer {
  position: absolute;
  right: 1em;
  top: 1em;
  z-index: 3;
}
.anchorWatchIcon {
  background-color: red;
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  mask-image: url(images/anchor.svg);
}
.nightMode .anchorWatchIcon {
  opacity: 0.6;
}
.widgetHead .anchorWatchIcon {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.disconnectedIcon {
  background-color: red;
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  mask-image: url(images/plug-disconnect.svg);
}
.nightMode .disconnectedIcon {
  opacity: 0.6;
}
.widgetHead .disconnectedIcon {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.measureIcon {
  background-color: red;
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  mask-image: url(images/straighten.svg);
}
.nightMode .measureIcon {
  opacity: 0.6;
}
.widgetHead .measureIcon {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.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: 4em;
  padding: 1em;
  background-color: #546E7A;
  color: white;
  font-weight: bold;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.nightMode .header {
  background-color: rgba(84, 110, 122, 0.6);
}
.nightMode .header {
  color: rgba(252, 11, 11, 0.6);
}
.header.connectionLost {
  background-color: #C62828;
}
.nightMode .header.connectionLost {
  background-color: rgba(198, 40, 40, 0.6);
}
.mainContent {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.footer {
  background-color: #CFD8DC;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.nightMode .footer {
  background-color: #000;
  color: rgba(252, 11, 11, 0.6);
}
.clear {
  clear: both;
}
.more {
  float: right;
  width: 1em;
  height: 1em;
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-image: url(images/ic_chevron_right.svg);
  background-size: 100% 100%;
  opacity: 0.6;
}
.nightMode .more {
  opacity: 0.6;
}
.widgetHead .more {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.hidden {
  display: none;
}
.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 {
  font-size: 1.1em;
  z-index: 121;
  padding: 0.6em;
  background-color: white;
  border-radius: 3px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  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 > div {
  min-width: 0;
}
.nightMode .dialog {
  background-color: #000;
  color: rgba(252, 11, 11, 0.6);
}
.dialog.nested {
  font-size: 1em;
}
.dialog .flexInner {
  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;
}
.dialog .inputFrame {
  width: 20em;
  min-width: 5em;
  max-width: 100%;
  display: inline-block;
}
.dialog input,
.dialog .input {
  width: 20em;
  min-width: 5em;
  max-width: 100%;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  border: none;
  border-bottom: 1px solid;
  border-color: rgba(0, 0, 0, 0.3);
  vertical-align: middle;
  line-height: 2em;
  min-height: 2em;
}
.nightMode .dialog input,
.nightMode .dialog .input {
  border-color: rgba(252, 11, 11, 0.18);
}
.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-top-right-radius: 0.3em;
  border-top-left-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
  border: 1px solid;
  text-decoration: none;
  border-color: #D3D3D3;
  background-color: #E6E6E6;
  cursor: pointer;
  outline: none;
  display: block;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  margin-top: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  font-size: 1em;
  padding: 0.5em;
  width: inherit;
  background-color: #ECEFF1;
  border: none;
  position: relative;
  color: #546E7A;
  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;
}
.nightMode .dialog button:not(.dialogButton,.smallButton) {
  border-color: rgba(211, 211, 211, 0.6);
}
.nightMode .dialog button:not(.dialogButton,.smallButton) {
  background-color: rgba(30, 30, 30, 0.55);
}
.dialog button:not(.dialogButton,.smallButton) span {
  background-position: center;
  background-size: 80% 80%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
}
.dialog button:not(.dialogButton,.smallButton):disabled span {
  opacity: 0.5;
}
.nightMode .dialog button:not(.dialogButton,.smallButton) {
  background-color: #000;
}
.nightMode .dialog button:not(.dialogButton,.smallButton) {
  color: rgba(252, 11, 11, 0.6);
}
.dialog button:not(.dialogButton,.smallButton)[disabled] {
  opacity: 0.6;
}
.dialog button:not(.dialogButton,.smallButton) > span {
  position: unset;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-top: auto;
  margin-bottom: auto;
}
.dialog button:not(.dialogButton,.smallButton).icon {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.dialog button:not(.dialogButton,.smallButton).active {
  border: 0.3em solid;
  border-color: #1DE9B6;
  padding: 0.2em;
}
.nightMode .dialog button:not(.dialogButton,.smallButton).active {
  border-color: rgba(29, 233, 182, 0.6);
}
.dialog button:not(.dialogButton,.smallButton).cancel > span {
  background-image: url(images/ic_clear.svg);
}
.dialog button:not(.dialogButton,.smallButton).ok > span {
  background-image: url(images/ic_done.svg);
}
.dialog button:not(.dialogButton,.smallButton).delete > span {
  background-image: url(images/ic_delete.svg);
}
.dialog button:not(.dialogButton,.smallButton).reset > span {
  background-image: url(images/ic_delete.svg);
}
.dialog button:not(.dialogButton,.smallButton).edit > span {
  background-image: url(images/ic_edit.svg);
}
.dialog button:not(.dialogButton,.smallButton).download > span {
  background-image: url(images/ic_file_download.svg);
}
.dialog button:not(.dialogButton,.smallButton).log > span {
  background-image: url(images/ic_text_snippet.svg);
}
.dialog button:not(.dialogButton,.smallButton).autoreload.active > span {
  background-image: url(images/update_disabled.svg);
}
.dialog button:not(.dialogButton,.smallButton).autoreload.inactive > span {
  background-image: url(images/ic_refresh.svg);
}
.fileDialog .dialog button:not(.dialogButton,.smallButton).view > span {
  background-image: url(images/visibility.svg);
}
.fileDialog .dialog button:not(.dialogButton,.smallButton).userApp > span {
  background-image: url(images/apps.svg);
}
.fileDialog .dialog button:not(.dialogButton,.smallButton).overlays > span {
  background-image: url(images/layers-black.svg);
}
.fileDialog .dialog button:not(.dialogButton,.smallButton).toroute > span {
  background-image: url(images/route.svg);
}
.editWidgetDialog .dialog button:not(.dialogButton,.smallButton).before > span {
  background-image: url(images/navigate_before.svg);
}
.editWidgetDialog .dialog button:not(.dialogButton,.smallButton).after > span {
  background-image: url(images/navigate_next.svg);
}
.colorDialog .dialog button:not(.dialogButton,.smallButton).unset > span {
  background-image: url(images/format_color_reset.svg);
}
.wpaDialog .dialog button:not(.dialogButton,.smallButton).disable > span {
  background-image: url(images/wifi_off.svg);
}
.wpaDialog .dialog button:not(.dialogButton,.smallButton).remove > span {
  background-image: url(images/ic_delete.svg);
}
.wpaDialog .dialog button:not(.dialogButton,.smallButton).connect > span {
  background-image: url(images/play_arrow.svg);
}
.wpaDialog .dialog button:not(.dialogButton,.smallButton).enable > span {
  background-image: url(images/wifi.svg);
}
.editOverlaysDialog .dialog button:not(.dialogButton,.smallButton).before > span {
  background-image: url(images/navigate_before.svg);
}
.editOverlaysDialog .dialog button:not(.dialogButton,.smallButton).after > span {
  background-image: url(images/navigate_next.svg);
}
.editOverlaysDialog .dialog button:not(.dialogButton,.smallButton).hide > span {
  background-image: url(images/visibility_off.svg);
}
.editOverlaysDialog .dialog button:not(.dialogButton,.smallButton).show > span {
  background-image: url(images/visibility.svg);
}
.FeatureInfoDialog .dialog button:not(.dialogButton,.smallButton).info > span {
  background-image: url(images/ic_info.svg);
}
.FeatureInfoDialog .dialog button:not(.dialogButton,.smallButton).goto > span,
.featureListDialog .dialog button:not(.dialogButton,.smallButton).goto > span {
  background-image: url(images/waypoint.svg);
}
.FeatureInfoDialog .dialog button:not(.dialogButton,.smallButton).add > span,
.featureListDialog .dialog button:not(.dialogButton,.smallButton).add > span {
  background-image: url(images/wpplus.svg);
}
.FeatureInfoDialog .dialog button:not(.dialogButton,.smallButton).add span,
.featureListDialog .dialog button:not(.dialogButton,.smallButton).add span {
  transform: rotate(180deg);
}
.FeatureInfoDialog .dialog button:not(.dialogButton,.smallButton).insert > span,
.featureListDialog .dialog button:not(.dialogButton,.smallButton).insert > span {
  background-image: url(images/wpplus.svg);
}
.FeatureInfoDialog .dialog button:not(.dialogButton,.smallButton).center > span,
.featureListDialog .dialog button:not(.dialogButton,.smallButton).center > span {
  background-image: url(images/wpcenter.svg);
}
.FeatureInfoDialog .dialog button:not(.dialogButton,.smallButton).routeTo > span,
.featureListDialog .dialog button:not(.dialogButton,.smallButton).routeTo > span {
  background-image: url(images/wpgoto.svg);
}
.FeatureInfoDialog .dialog button:not(.dialogButton,.smallButton).editRoute > span {
  background-image: url(images/route.svg);
}
.FeatureInfoDialog .dialog button:not(.dialogButton,.smallButton).hide > span {
  background-image: url(images/visibility_off.svg);
}
.FeatureInfoDialog .dialog button:not(.dialogButton,.smallButton).toroute > span {
  background-image: url(images/route.svg);
}
.TrackInfoDialog .dialog button:not(.dialogButton,.smallButton).toroute > span {
  background-image: url(images/route.svg);
}
.TrackConvertDialog .dialog button:not(.dialogButton,.smallButton).convert > span {
  background-image: url(images/play_arrow.svg);
}
.AskEditRouteDialog .dialog button:not(.dialogButton,.smallButton).editRoute > span {
  background-image: url(images/route.svg);
}
.EditRouteDialog .dialog button:not(.dialogButton,.smallButton).copy > span {
  background-image: url(images/content_copy.svg);
}
.EditRouteDialog .dialog button:not(.dialogButton,.smallButton).edit > span {
  background-image: url(images/ic_edit.svg);
}
.EditRouteDialog .dialog button:not(.dialogButton,.smallButton).points > span {
  background-image: url(images/route.svg);
}
.EditRoutePoints .dialog button:not(.dialogButton,.smallButton).empty > span {
  background-image: url(images/delete_sweep.svg);
}
.EditRoutePoints .dialog button:not(.dialogButton,.smallButton).invert > span {
  background-image: url(images/invertroute.svg);
}
.EditRoutePoints .dialog button:not(.dialogButton,.smallButton).renumber > span {
  background-image: url(images/format_list_numbered.svg);
}
.EditRouteDialog .dialog button:not(.dialogButton,.smallButton).load > span {
  background-image: url(images/save.svg);
}
.dialog button:not(.dialogButton,.smallButton).reload > span {
  background-image: url(images/ic_refresh.svg);
}
.LockDialog .dialog button:not(.dialogButton,.smallButton).current > span {
  background-image: url(images/boat.svg);
}
.LockDialog .dialog button:not(.dialogButton,.smallButton).center > span {
  background-image: url(images/center.svg);
}
.AnchorWatchDialog .dialog button:not(.dialogButton,.smallButton).center > span {
  background-image: url(images/center.svg);
}
.AnchorWatchDialog .dialog button:not(.dialogButton,.smallButton).boat > span {
  background-image: url(images/boat.svg);
}
.AnchorWatchDialog .dialog button:not(.dialogButton,.smallButton).stop > span {
  background-image: url(images/anchor-end.svg);
}
.RemoteChannelDialog .dialog button:not(.dialogButton,.smallButton).disconnect > span {
  background-image: url(images/plug-disconnect.svg);
}
.RemoteChannelDialog .dialog button:not(.dialogButton,.smallButton).connect > span {
  background-image: url(images/plug.svg);
}
.MapWidgetsDialog .dialog button:not(.dialogButton,.smallButton).add > span {
  background-image: url(images/ic_add.svg);
}
.dialog button:not(.dialogButton,.smallButton).stop > span {
  background-image: url(images/stop_circle.svg);
}
.dialog button:not(.dialogButton,.smallButton).restart > span {
  background-image: url(images/ic_refresh.svg);
}
.dialog button:not(.dialogButton,.smallButton).disable > span {
  background-image: url(images/ic_hide.svg);
}
.dialog button:not(.dialogButton,.smallButton).upload > span {
  background-image: url(images/ic_file_upload.svg);
}
.dialog button:not(.dialogButton,.smallButton).new {
  padding-left: 1.3em;
}
.dialog button:not(.dialogButton,.smallButton).new > span:after {
  content: '+';
}
.dialog button:not(.dialogButton,.smallButton).save > span {
  background-image: url(images/save.svg);
}
.dialog button:not(.dialogButton,.smallButton).start > span {
  background-image: url(images/wpgoto.svg);
}
.dialog .selectDialog {
  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;
  overflow: auto;
  padding-bottom: 1em;
}
.dialog .selectDialog .selectList {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-flex-basis: auto;
  -moz-box-basis: auto;
  flex-basis: auto;
}
.dialog .selectDialog .selectedItem {
  background-color: #CECECE;
}
.nightMode .dialog .selectDialog .selectedItem {
  background-color: rgba(206, 206, 206, 0.6);
}
.dialog .dialogRow {
  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;
  line-height: 1.5em;
}
.dialog .dialogRow.infoText {
  white-space: pre-wrap;
}
.dialog .dialogButtons {
  margin-top: 0.5em;
  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;
  line-height: 1.5em;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.dialog .dialogButtons.infoText {
  white-space: pre-wrap;
}
.dialog .insertButtons {
  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;
  line-height: 1.5em;
  border-bottom: 1px solid;
  border-color: rgba(0, 0, 0, 0.3);
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.dialog .insertButtons.infoText {
  white-space: pre-wrap;
}
.nightMode .dialog .insertButtons {
  border-color: rgba(252, 11, 11, 0.18);
}
.dialog .smallButton {
  width: 1.5em;
  height: 1.5em;
}
.dialog .missing input,
.dialog .missing .input {
  border-color: #C62828;
}
.nightMode .dialog .missing input,
.nightMode .dialog .missing .input {
  border-color: rgba(198, 40, 40, 0.6);
}
.dialog .error input,
.dialog .error .input {
  background-color: rgba(198, 40, 40, 0.5);
}
.nightMode .dialog .error input,
.nightMode .dialog .error .input {
  background-color: rgba(198, 40, 40, 0.6);
}
.dialog .errorText {
  color: #C62828;
}
.nightMode .dialog .errorText {
  color: rgba(198, 40, 40, 0.6);
}
.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;
}
.editParam.changed {
  font-weight: bold;
}
.editParam.defaultValue {
  font-style: italic;
}
.editWidgetDialog .dialogRow,
.editPageDialog .dialogRow {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.editWidgetDialog .inputLabel,
.editPageDialog .inputLabel {
  width: 9em;
  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: rgba(0, 0, 0, 0.4);
  margin-top: 0.3em;
  padding-top: 0.3em;
}
.nightMode .editPageDialog .panelList {
  border-color: rgba(252, 11, 11, 0.24);
}
.editPageDialog .combinationSelect {
  display: inline-block;
  vertical-align: middle;
  margin-left: 1em;
}
.editPageDialog .editPanel {
  margin-top: 0.3em;
  border-bottom: 1px solid;
  border-color: rgba(0, 0, 0, 0.2);
}
.nightMode .editPageDialog .editPanel {
  border-color: rgba(252, 11, 11, 0.12);
}
.editPageDialog .editPanel > div {
  display: inline-block;
}
.editPageDialog .editPanel > .label {
  text-align: left;
  width: 6em;
  display: inline-block;
}
.editPageDialog .combinationSelect .label,
.editPageDialog .modeSelect .label,
.editPageDialog .combinationSelect .inputLabel,
.editPageDialog .modeSelect .inputLabel {
  width: 4em;
  word-break: break-word;
}
.editPageDialog .currentHeadline {
  margin-bottom: 0.3em;
}
.editPageDialog .selectCurrent {
  border-top: 1px solid;
  border-color: rgba(0, 0, 0, 0.4);
  margin-top: 0.5em;
  padding-top: 0.5em;
}
.nightMode .editPageDialog .selectCurrent {
  border-color: rgba(252, 11, 11, 0.24);
}
.selectIconDialog .checkBoxRow .inputLabel {
  width: unset;
  margin-right: unset;
  margin-left: 1em;
}
.selectIconDialog .listEntry {
  -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;
}
.selectIconDialog .selectedItem {
  background-color: #CECECE;
}
.nightMode .selectIconDialog .selectedItem {
  background-color: rgba(206, 206, 206, 0.6);
}
.LoadRoutesDialog .listEntry {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.LoadRoutesDialog .listEntry .icon {
  margin-right: 0.8em;
  width: 1em;
  height: 1em;
}
.overlayElement {
  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;
  padding: 0.5em;
}
.overlayElement.sortableHelper {
  z-index: 130;
}
@media (max-width: 35em) {
  .overlayElement {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
  .overlayElement .itemInfo {
    margin-right: 0!important;
  }
}
.overlayElement .itemInfo {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  margin-right: 1em;
}
.overlayElement .inputLabel {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 6em;
}
.overlayElement .infoRow,
.overlayElement .actions {
  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;
}
@media (max-width: 20em) {
  .overlayElement .infoRow {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
}
.overlayElement .infoRow .valueText {
  word-break: break-all;
}
.editOverlaysDialog .actions {
  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;
}
.editOverlaysDialog button.smallButton.disabled {
  opacity: 0;
  pointer-events: none;
}
.editOverlaysDialog .overlayEnabled .inputLabel {
  display: none;
}
.editOverlaysDialog .overlayElement.disabled .valueText {
  opacity: 0.6;
}
.editOverlaysDialog.preventEdit .button.Edit {
  opacity: 0;
  pointer-events: none;
}
.editOverlaysDialog .overlayItems {
  padding-right: 35px;
  /* some room for scrolling */
}
.editOverlayItemDialog .inputLabel {
  width: 10em;
}
.FeatureInfoDialog {
  max-width: 50em;
}
.FeatureInfoDialog .icon {
  margin-right: 1em;
}
.featureListDialog .icon.route,
.FeatureInfoDialog .icon.route {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-image: url(images/route.svg);
}
.nightMode .featureListDialog .icon.route,
.nightMode .FeatureInfoDialog .icon.route {
  opacity: 0.6;
}
.widgetHead .featureListDialog .icon.route,
.widgetHead .FeatureInfoDialog .icon.route {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.featureListDialog .icon.track,
.FeatureInfoDialog .icon.track {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-image: url(images/track.svg);
}
.nightMode .featureListDialog .icon.track,
.nightMode .FeatureInfoDialog .icon.track {
  opacity: 0.6;
}
.widgetHead .featureListDialog .icon.track,
.widgetHead .FeatureInfoDialog .icon.track {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.featureListDialog .icon.chart,
.FeatureInfoDialog .icon.chart {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-image: url(images/map2.svg);
}
.nightMode .featureListDialog .icon.chart,
.nightMode .FeatureInfoDialog .icon.chart {
  opacity: 0.6;
}
.widgetHead .featureListDialog .icon.chart,
.widgetHead .FeatureInfoDialog .icon.chart {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.featureListDialog .icon.overlay,
.FeatureInfoDialog .icon.overlay {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-image: url(images/layers-black.svg);
}
.nightMode .featureListDialog .icon.overlay,
.nightMode .FeatureInfoDialog .icon.overlay {
  opacity: 0.6;
}
.widgetHead .featureListDialog .icon.overlay,
.widgetHead .FeatureInfoDialog .icon.overlay {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.featureListDialog .icon.waypoint,
.FeatureInfoDialog .icon.waypoint {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-image: url(images/waypoint.svg);
}
.nightMode .featureListDialog .icon.waypoint,
.nightMode .FeatureInfoDialog .icon.waypoint {
  opacity: 0.6;
}
.widgetHead .featureListDialog .icon.waypoint,
.widgetHead .FeatureInfoDialog .icon.waypoint {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.featureListDialog .icon.anchor,
.FeatureInfoDialog .icon.anchor {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-image: url(images/anchor.svg);
}
.nightMode .featureListDialog .icon.anchor,
.nightMode .FeatureInfoDialog .icon.anchor {
  opacity: 0.6;
}
.widgetHead .featureListDialog .icon.anchor,
.widgetHead .FeatureInfoDialog .icon.anchor {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.featureListDialog .icon.measure,
.FeatureInfoDialog .icon.measure {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-image: url(images/straighten.svg);
}
.nightMode .featureListDialog .icon.measure,
.nightMode .FeatureInfoDialog .icon.measure {
  opacity: 0.6;
}
.widgetHead .featureListDialog .icon.measure,
.widgetHead .FeatureInfoDialog .icon.measure {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.featureListDialog .icons,
.FeatureInfoDialog .icons {
  width: 4em;
  display: inline-block;
}
.featureListDialog .ImageIcon,
.FeatureInfoDialog .ImageIcon {
  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;
}
.featureListDialog .ImageIcon img,
.FeatureInfoDialog .ImageIcon img {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
  min-width: 0;
}
.featureInfoHtml {
  white-space: pre;
  margin-left: 1em;
}
.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: #C62828;
}
.nightMode .dialog .warning {
  color: rgba(252, 11, 11, 0.6);
}
.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;
}
.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;
}
.listContainer.scrollable {
  overflow: auto;
}
.listEntry {
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid;
  padding: 1em;
  border-color: rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.nightMode .listEntry {
  border-color: rgba(252, 11, 11, 0.18);
}
.activeEntry {
  background-color: #CECECE;
}
.nightMode .activeEntry {
  background-color: #000;
}
span.valuePrefix {
  opacity: 0;
}
.toast {
  height: auto;
  position: fixed;
  left: 50px;
  bottom: 10px;
  background-color: #383838;
  color: #F0F0F0;
  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;
}
.nightMode .toast {
  background-color: #000;
  color: rgba(252, 11, 11, 0.6);
}
.inner {
  display: inline-block;
}
.row {
  display: table-row;
}
.routeInfoPoint {
  border-bottom: 1px solid;
  border-color: rgba(0, 0, 0, 0.3);
  padding-left: 0.1em;
  padding-right: 0.3em;
  padding-top: 0.1em;
  margin-bottom: 5px;
  padding-bottom: 0.1em;
  position: relative;
}
.nightMode .routeInfoPoint {
  border-color: rgba(252, 11, 11, 0.18);
}
.waypointListItem {
  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;
}
.waypointListItem .name {
  width: 8em;
  min-width: 8em;
  margin-left: 1em;
  white-space: pre-wrap;
  margin-right: 1em;
}
.waypointListItem .info {
  opacity: 0.6;
}
.checkBox {
  width: 1.8em;
  height: 1.8em;
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-position: center;
  background-image: url(images/checkbox-blank-outline.svg);
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: middle;
}
.nightMode .checkBox {
  opacity: 0.6;
}
.widgetHead .checkBox {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.checkBox.checked {
  background-image: url(images/checkbox-marked-outline.svg);
}
.radioInner {
  display: inline-block;
}
.radioInner .inputLabel {
  width: auto;
  margin-left: 1em;
}
.radioInner .radio {
  width: 1.8em;
  height: 1.8em;
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-position: center;
  background-image: url(images/radio_button_unchecked.svg);
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: middle;
}
.nightMode .radioInner .radio {
  opacity: 0.6;
}
.widgetHead .radioInner .radio {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.radioInner .radio.checked {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-image: url(images/radio_button_checked.svg);
}
.nightMode .radioInner .radio.checked {
  opacity: 0.6;
}
.widgetHead .radioInner .radio.checked {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.colorValue {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  margin-right: 0.3em;
}
.icon {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}
.nightMode .icon {
  opacity: 0.6;
}
.widgetHead .icon {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.appIcon {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  margin-left: 0.5em;
}
.EulaDialog .eula {
  width: 60vw;
}
.userAction {
  color: #C62828;
}
.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: #ffffff;
  border-top-color: #00000000;
  animation: spinner 0.8s linear infinite;
}
.nightMode .spinner {
  border-color: rgba(252, 11, 11, 0.6);
  border-top-color: #00000000;
}
#mainpage .chartItem {
  cursor: pointer;
  overflow: hidden;
  width: 22em;
  max-width: 100%;
  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;
  margin-right: 3em;
  padding: 1em;
  padding-right: 0;
  line-height: 2em;
  border-bottom: 1px solid;
  border-color: rgba(0, 0, 0, 0.3);
}
#mainpage .chartItem .more {
  display: inline-block;
  float: right;
  width: 1em;
  height: 1em;
  background-image: url(images/ic_chevron_right.svg);
  background-size: 100% 100%;
  opacity: 0.6;
}
#mainpage .chartItem img {
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  margin-right: 1em;
  vertical-align: middle;
}
.nightMode #mainpage .chartItem img {
  opacity: 0.6;
}
#mainpage .chartItem .chartName {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#mainpage .chartItem.noOverlays .smallButton.MainOverlays {
  opacity: 0.4;
}
#mainpage .footer {
  height: 3.2em;
}
#mainpage .footer .inner {
  font-size: 0.8em;
  padding-top: 0.8em;
  width: 100%;
}
#mainpage .footer .inner .status {
  padding-left: 1em;
  padding-right: 1em;
  text-align: left;
  z-index: 10;
  white-space: nowrap;
  display: inline-block;
  margin-bottom: 0.2em;
}
#mainpage .footer .inner .status_image {
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
}
.nightMode #mainpage .footer .inner .status_image {
  opacity: 0.6;
}
#mainpage .footer .inner .link {
  text-align: right;
  padding-right: 1em;
  white-space: nowrap;
  display: inline-block;
  float: right;
}
#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 .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: grey;
}
.nightMode #gpspage .hfield {
  border-color: rgba(128, 128, 128, 0.6);
}
#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 {
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid;
  padding: 1em;
  border-color: rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.nightMode #aispage .aisListItem {
  border-color: rgba(252, 11, 11, 0.18);
}
.nightMode #aispage .aisListItem {
  border-color: rgba(252, 11, 11, 0.18);
}
#aispage .aisListItem .aisItemFB {
  width: 4em;
  min-width: 4em;
}
#aispage .aisListItem .fb1 {
  font-size: 2.5em;
  font-weight: bold;
}
#aispage .aisListItem .aisData {
  overflow: hidden;
  max-width: 100%;
}
#aispage .aisListItem .aisData .aisData1 {
  font-weight: bold;
  margin-bottom: 0.2em;
}
#aispage .aisListItem .aisData .aisData2 {
  white-space: pre-line;
  font-family: monospace;
}
#aispage .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 {
  opacity: 0.6;
  width: 2em;
  display: inline-block;
}
#aispage .aisListItem .aisData .info {
  padding-left: 1em;
  min-width: 6.5em;
  display: inline-block;
}
#aispage .aisSummary {
  background-color: #CFD8DC;
  padding-top: 0.5em;
  padding-left: 1em;
  padding-bottom: 0.5em;
  min-height: 3em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.nightMode #aispage .aisSummary {
  background-color: rgba(207, 216, 220, 0.6);
}
#aispage .aisSummary span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 1em;
}
#aispage .aisSummary .aisWarning {
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  margin-right: 1em;
  vertical-align: middle;
}
.aisInfoDialog {
  position: relative;
}
.aisInfoDialog .status {
  width: 100px;
  height: 100px;
  display: block;
}
@media (max-width: 35em) and (max-height: 40em) {
  .aisInfoDialog .status {
    display: none;
  }
}
.aisInfoDialog .infoList {
  width: 100%;
  height: 100%;
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
@media (max-width: 35em) {
  .aisInfoDialog .infoList {
    height: unset;
  }
}
.aisInfoDialog .infoList .label {
  display: inline-block;
  padding-right: 1em;
  opacity: 0.6;
  width: 6em;
}
.aisInfoDialog .infoList .aisData {
  display: inline-block;
  text-align: left;
  padding-bottom: 0.5em;
  width: 15em;
  font-weight: bold;
}
.aisInfoDialog .infoList .aisWarning {
  color: #C62828;
}
.aisInfoDialog .dialogRow {
  min-height: 0;
  flex-shrink: 1;
  overflow: auto;
}
@media (max-width: 35em) {
  .aisInfoDialog .dialogRow {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
  }
}
.addOnFrame {
  -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-align: stretch;
  -moz-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}
.addOnFrame iframe {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  /* older microsoft ...*/
  min-height: 100%;
  min-width: 100%;
}
#addonpage .buttonContainer {
  overflow-y: auto;
}
#addresspage .url {
  margin-bottom: 1em;
  font-size: 1.2em;
}
#addresspage .address {
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid;
  padding: 1em;
  border-color: rgba(0, 0, 0, 0.3);
  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;
  padding: 2em;
}
.nightMode #addresspage .address {
  border-color: rgba(252, 11, 11, 0.18);
}
.nightMode #addresspage .address {
  border-color: rgba(252, 11, 11, 0.18);
}
#statuspage .editIcon,
#importerpage .editIcon,
.importConverterDialog .editIcon,
.importScannerDialog .editIcon {
  margin-left: 1em;
}
#statuspage .status,
#importerpage .status,
.importConverterDialog .status,
.importScannerDialog .status {
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid;
  padding: 1em;
  border-color: rgba(0, 0, 0, 0.3);
  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;
  padding-left: 1em;
  margin-top: 5px;
  line-height: 1.5em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.nightMode #statuspage .status,
.nightMode #importerpage .status,
.nightMode .importConverterDialog .status,
.nightMode .importScannerDialog .status {
  border-color: rgba(252, 11, 11, 0.18);
}
.nightMode #statuspage .status,
.nightMode #importerpage .status,
.nightMode .importConverterDialog .status,
.nightMode .importScannerDialog .status {
  border-color: rgba(252, 11, 11, 0.18);
}
#statuspage .status .statusHeading,
#importerpage .status .statusHeading,
.importConverterDialog .status .statusHeading,
.importScannerDialog .status .statusHeading {
  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;
}
#statuspage .status .statusHeading.disabled,
#importerpage .status .statusHeading.disabled,
.importConverterDialog .status .statusHeading.disabled,
.importScannerDialog .status .statusHeading.disabled {
  opacity: 0.6;
}
#statuspage .childStatus,
#importerpage .childStatus,
.importConverterDialog .childStatus,
.importScannerDialog .childStatus {
  padding-left: 1.5em;
  margin-top: 3px;
  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;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  opacity: 0.6;
}
#statuspage .childStatus img,
#importerpage .childStatus img,
.importConverterDialog .childStatus img,
.importScannerDialog .childStatus img {
  width: 1em;
  height: 1em;
  margin-left: -1em;
}
#statuspage .childStatus.sub,
#importerpage .childStatus.sub,
.importConverterDialog .childStatus.sub,
.importScannerDialog .childStatus.sub {
  margin-left: 1.5em;
  margin-top: 0;
}
#statuspage .statusName,
#importerpage .statusName,
.importConverterDialog .statusName,
.importScannerDialog .statusName {
  padding-left: 3px;
}
#statuspage .statusInfo,
#importerpage .statusInfo,
.importConverterDialog .statusInfo,
.importScannerDialog .statusInfo {
  padding-left: 3px;
  word-wrap: break-word;
}
#statuspage.serverError .header,
#importerpage.serverError .header,
.importConverterDialog.serverError .header,
.importScannerDialog.serverError .header {
  background-color: #C62828;
}
.nightMode #statuspage.serverError .header,
.nightMode #importerpage.serverError .header,
.nightMode .importConverterDialog.serverError .header,
.nightMode .importScannerDialog.serverError .header {
  background-color: rgba(198, 40, 40, 0.6);
}
#importerpage .itemInfo {
  margin-left: 1.5em;
  padding-left: 3px;
  opacity: 0.6;
}
#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;
}
#downloadpage .itemMain {
  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-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: start;
  align-items: start;
}
#downloadpage .listEntry {
  -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;
}
#downloadpage .downloadItemData {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: 0.8em;
  padding-right: 0.8em;
  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;
}
@media (max-width: 35em) {
  #downloadpage .downloadItemData {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
}
#downloadpage .downloadItemData .date {
  opacity: 0.6;
  width: 11.5em;
}
#downloadpage .downloadItemData .info {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  word-break: break-all;
}
#downloadpage .downloadItemData.noDelete {
  margin-left: 2.4em;
}
#downloadpage .infoImages {
  padding-left: 0.8em;
}
#downloadpage .listrasimage {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-image: url(images/plug.svg);
}
.nightMode #downloadpage .listrasimage {
  opacity: 0.6;
}
.widgetHead #downloadpage .listrasimage {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
#downloadpage .editimage {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-image: url(images/ic_edit.svg);
}
.nightMode #downloadpage .editimage {
  opacity: 0.6;
}
.widgetHead #downloadpage .editimage {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
#downloadpage .viewimage {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-image: url(images/visibility.svg);
}
.nightMode #downloadpage .viewimage {
  opacity: 0.6;
}
.widgetHead #downloadpage .viewimage {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
#downloadpage .appimage {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-image: url(images/apps.svg);
}
.nightMode #downloadpage .appimage {
  opacity: 0.6;
}
.widgetHead #downloadpage .appimage {
  margin: 0;
  height: 0.8em;
  width: 0.8em;
}
.downloadProgress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em 1em 1em 1em;
  background-color: lightgrey;
  z-index: 10;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.nightMode .downloadProgress {
  background-color: #000;
  color: rgba(252, 11, 11, 0.6);
}
.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: blue;
}
.nightMode .downloadProgress .progressDone {
  background-color: #000;
}
.fileDialog .existing input {
  border-bottom: 1px solid;
  border-color: #C62828;
}
.nightMode .fileDialog .existing input {
  border-color: rgba(198, 40, 40, 0.6);
}
.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;
}
.editFileDialog {
  width: 90vw;
  height: 90vh;
}
.editFileDialog .edit {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
}
.EditRouteDialog.activeRoute {
  border-width: 3px;
  border-style: solid;
  padding: 5px;
  border-color: #C62828;
}
.nightMode .EditRouteDialog.activeRoute {
  border-color: rgba(198, 40, 40, 0.6);
}
.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;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
}
#settingspage .leftSection {
  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-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 0;
}
#settingspage .sectionList {
  border-right: 1px solid ;
  margin-right: 2em;
  border-color: rgba(0, 0, 0, 0.3);
  width: 10em;
  -webkit-flex-grow: 0;
  flex-grow: 0;
}
.nightMode #settingspage .sectionList {
  border-color: rgba(252, 11, 11, 0.18);
}
#settingspage .sectionList.expand {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  width: 100%;
}
#settingspage .settingsList {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  overflow-x: hidden;
}
#settingspage .settingsList .label,
#settingspage .settingsList .inputLabel {
  width: 11em;
}
#settingspage .settingsList .value,
#settingspage .settingsList .checkBox {
  opacity: 0.6;
}
#settingspage .settingsList .colorSelector .input {
  opacity: 0.6;
}
#settingspage .settingsList .colorValue {
  width: 1.5em;
  height: 1.5em;
}
#settingspage .settingsList .listEntry {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
#settingspage .sectionList .listEntry.changed,
#settingspage .settingsList .listEntry.changed {
  font-weight: bold;
}
#settingspage .sectionList .listEntry.defaultValue,
#settingspage .settingsList .listEntry.defaultValue {
  font-style: italic;
}
#settingspage .sectionList .listEntry.prefix::before,
#settingspage .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;
}
#warningpage .warningFrame {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
#viewpage .mainContainer {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  overflow: auto;
}
#viewpage .mainContainer.image {
  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;
}
#viewpage .mainContainer.hidden {
  display: none !important;
}
#viewpage .mainContainer.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
#viewpage .readOnlyText {
  width: 100%;
  height: 100%;
  overflow: auto;
}
#viewpage .readOnlyImage {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
  object-fit: contain;
}
#viewpage pre.codeflask__pre.codeflask__flatten {
  width: unset;
}
#viewpage .codeflask__lines {
  z-index: 4 !important;
  background-color: #eee;
}
#viewpage .codeflask__lines__line {
  background-color: #eee;
  padding-right: 5px;
  padding-left: 0;
}
#viewpage .codeflask__flatten {
  font-size: inherit;
}
#viewpage textarea {
  font-size: inherit;
}
#addonconfigpage .appIcon {
  width: 3em;
  height: 3em;
  margin-left: 0.5em;
  margin-right: 1em;
}
#addonconfigpage .itemMain {
  -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;
  overflow: hidden;
  min-width: 0;
}
#addonconfigpage .itemMain .itemTitle {
  opacity: 0.6;
}
#addonconfigpage .itemMain .sourceInfo {
  opacity: 0.6;
}
#addonconfigpage .itemMain .sourceInfo:before {
  content: "(";
}
#addonconfigpage .itemMain .sourceInfo:after {
  content: ")";
}
#addonconfigpage .AddonConfigView {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.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;
  -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%;
  position: relative;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.mapPage.editing .bottomLeft {
  border-right: 0.3em solid;
  border-color: #C62828;
}
.nightMode .mapPage.editing .bottomLeft {
  border-color: rgba(198, 40, 40, 0.6);
}
.mapPage.editing .bottomRight {
  border-left: 0.3em solid;
  border-color: #C62828;
}
.nightMode .mapPage.editing .bottomRight {
  border-color: rgba(198, 40, 40, 0.6);
}
.mapPage .widgetContainer.left {
  position: absolute;
  bottom: 0;
  left: 0;
  max-height: 100%;
  z-index: 3;
  width: 8.8em;
}
.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;
}