.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;
  padding: 0.3em;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  /* z1 shadow */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow: hidden;
  pointer-events: all;
  background: white;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  margin-bottom: 0.1em;
  margin-top: 0.1em;
  margin-left: 0.1em;
  margin-right: 0.1em;
}
.nightMode .widget {
  background-color: #000;
  color: rgba(252, 11, 11, 0.6);
}
.widget .infoRight {
  font-size: 0.71em;
  position: absolute;
  top: 0;
  opacity: 0.7;
  right: 0.2em;
}
.widget .infoLeft {
  font-size: 0.71em;
  position: absolute;
  top: 0;
  opacity: 0.7;
  left: 0.2em;
}
.widget .unit {
  font-size: 0.71em;
  opacity: 0.7;
  margin-left: 0.2em;
}
.widget .widgetData {
  text-align: right;
  max-width: 100%;
  max-height: 100%;
}
.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;
}
.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;
  max-height: 4em;
}
.twoRows .widgetContainer.horizontal {
  max-height: 7.9em;
}
.widgetContainer.horizontal .widget {
  height: 3.8em;
}
.editing .widgetContainer.horizontal {
  -webkit-box-lines: single;
  -moz-box-lines: single;
  -ms-flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  min-height: 4em;
}
.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;
}
.widgetContainer.vertical .widget {
  max-width: 8.8em;
  width: 8.8em;
  flex-shrink: inherit;
}
.editing .widgetContainer.vertical {
  top: 0;
  min-width: 8em;
}
.widget.SOG {
  width: 11em;
}
.widget.SOG .widgetData {
  font-size: 3em;
}
.vertical .widget.SOG {
  width: inherit;
}
.vertical .widget.SOG .widgetData {
  font-size: 2em;
}
.widget.VMG {
  width: 11em;
}
.widget.VMG .widgetData {
  font-size: 3em;
}
.vertical .widget.VMG {
  width: inherit;
}
.vertical .widget.VMG .widgetData {
  font-size: 2em;
}
.widget.COG {
  width: 7em;
}
.widget.COG .widgetData {
  font-size: 3em;
}
.vertical .widget.COG {
  width: inherit;
}
.vertical .widget.COG .widgetData {
  font-size: 2em;
}
.widget.BRG {
  width: 7em;
}
.widget.BRG .widgetData {
  font-size: 3em;
}
.vertical .widget.BRG {
  width: inherit;
}
.vertical .widget.BRG .widgetData {
  font-size: 2em;
}
.widget.DST {
  width: 11em;
}
.widget.DST .widgetData {
  font-size: 3em;
}
.vertical .widget.DST {
  width: inherit;
}
.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,
.vertical .widget.WindSpeed {
  width: inherit;
}
.vertical .widget.WindAngle .widgetData,
.vertical .widget.WindSpeed .widgetData {
  font-size: 2em;
}
.widget.AnchorBearing {
  width: 7em;
}
.widget.AnchorBearing .widgetData {
  font-size: 3em;
}
.vertical .widget.AnchorBearing {
  width: inherit;
}
.vertical .widget.AnchorBearing .widgetData {
  font-size: 2em;
}
.widget.AnchorDistance {
  width: 11em;
}
.widget.AnchorDistance .widgetData {
  font-size: 3em;
}
.vertical .widget.AnchorDistance {
  width: inherit;
}
.vertical .widget.AnchorDistance .widgetData {
  font-size: 2em;
}
.widget.AnchorWatchDistance {
  width: 7em;
}
.widget.AnchorWatchDistance .widgetData {
  font-size: 3em;
}
.vertical .widget.AnchorWatchDistance {
  width: inherit;
}
.vertical .widget.AnchorWatchDistance .widgetData {
  font-size: 2em;
}
.widget.RteDistance {
  width: 11em;
}
.widget.RteDistance .widgetData {
  font-size: 3em;
}
.vertical .widget.RteDistance {
  width: inherit;
}
.vertical .widget.RteDistance .widgetData {
  font-size: 2em;
}
.widget.RteDistance {
  width: 7em;
}
.widget.RteDistance .widgetData {
  font-size: 1.5em;
}
.vertical .widget.RteDistance {
  width: inherit;
}
.vertical .widget.RteDistance .widgetData {
  font-size: 1.5em;
}
.widget.LargeTime {
  width: 7em;
}
.widget.LargeTime .widgetData {
  font-size: 2.5em;
}
.vertical .widget.LargeTime {
  width: inherit;
}
.vertical .widget.LargeTime .widgetData {
  font-size: 2.5em;
}
.widget.zoomWidget {
  width: 7em;
}
.widget.zoomWidget .widgetData {
  font-size: 1em;
  padding-top: 0.55em;
  padding-right: 0.1em;
}
.vertical .widget.zoomWidget {
  width: inherit;
}
.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;
  padding-top: 0.55em;
  padding-right: 0.1em;
}
.vertical .widget.Position,
.vertical .widget.WpPosition {
  width: inherit;
}
.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;
  padding-top: 0.55em;
  padding-right: 0.1em;
}
.vertical .widget.timeStatusWidget {
  width: inherit;
}
.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;
}
.widget.timeStatusWidget .widgetData {
  text-align: center;
}
.widget.etaWidget {
  width: 7em;
}
.widget.etaWidget .widgetData {
  font-size: 1em;
  padding-top: 0.55em;
  padding-right: 0.1em;
}
.vertical .widget.etaWidget {
  width: inherit;
}
.vertical .widget.etaWidget .widgetData {
  font-size: 1em;
}
.widget.etaWidget .widgetData {
  text-align: center;
}
.widget.etaWidget .widgetData.markerName {
  margin-top: 0;
}
.widget.aisTargetWidget {
  width: 7em;
  background-color: #CFD8DC;
}
.widget.aisTargetWidget .widgetData {
  font-size: 1em;
  padding-top: 0.55em;
  padding-right: 0.1em;
}
.vertical .widget.aisTargetWidget {
  width: inherit;
}
.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 {
  -webkit-box-orient: horizontal !important;
  -moz-box-orient: horizontal !important;
  -ms-flex-direction: row !important;
  -webkit-flex-direction: row !important;
  flex-direction: row !important;
}
.hfield .widget.aisTargetWidget .aisPart {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.widget.activeRouteWidget {
  width: 7em;
}
.widget.activeRouteWidget .widgetData {
  font-size: 1em;
  padding-top: 0.55em;
  padding-right: 0.1em;
}
.vertical .widget.activeRouteWidget {
  width: inherit;
}
.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;
  padding-top: 0.55em;
  padding-right: 0.1em;
}
.vertical .widget.editRouteWidget {
  width: inherit;
}
.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;
  margin-top: 0.5em;
}
.horizontal .widget.editRouteWidget .widgetData {
  margin-top: 0;
  padding-top: 0;
  display: inline-block;
}
.widget.centerDisplayWidget {
  width: 7em;
}
.widget.centerDisplayWidget .widgetData {
  font-size: 1em;
  padding-top: 0.55em;
  padding-right: 0.1em;
}
.vertical .widget.centerDisplayWidget {
  width: inherit;
}
.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);
}
.horizontal .widget.centerDisplayWidget {
  min-width: 10em;
}
.widget.windWidget {
  width: 11em;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
.widget.windWidget .widgetData {
  font-size: 1em;
  padding-top: 0.55em;
  padding-right: 0.1em;
}
.vertical .widget.windWidget {
  width: inherit;
}
.vertical .widget.windWidget .widgetData {
  font-size: 1em;
}
.widget.windWidget .widgetData {
  font-size: 1.5em;
}
.widget.windWidget .windInner {
  position: relative;
  padding-top: 0.7em;
  padding-left: 0.3em;
  padding-right: 0.3em;
}
.widget.windWidget .windInner .widgetData {
  padding-top: 0;
  font-size: 1.5em;
}
.widget.DepthDisplay {
  width: 7em;
}
.widget.DepthDisplay .widgetData {
  font-size: 3em;
}
.vertical .widget.DepthDisplay {
  width: inherit;
}
.vertical .widget.DepthDisplay .widgetData {
  font-size: 2em;
}
.widget.xteDisplay {
  width: 7em;
}
.widget.xteDisplay .widgetData {
  font-size: 1em;
  padding-top: 0.55em;
  padding-right: 0.1em;
}
.vertical .widget.xteDisplay {
  width: inherit;
}
.vertical .widget.xteDisplay .widgetData {
  font-size: 1em;
}
.widget.windGraphics {
  width: 11em;
}
.widget.windGraphics .widgetData {
  font-size: 1em;
  padding-top: 0.55em;
  padding-right: 0.1em;
}
.vertical .widget.windGraphics {
  width: inherit;
}
.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 .widgetData {
  height: 100%;
}
.horizontal .widget.windGraphics .widgetData,
.horizontal .widget.windGraphics .windSpeed {
  display: inline-block;
}
.vertical .widget.windGraphics {
  height: 11em;
}
.widget.routePointsWidget {
  overflow: hidden;
  -webkit-flex-shrink: 1 !important;
  flex-shrink: 1 !important;
}
.widget.routePointsWidget .activeEntry .more {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 20%;
}
.widget.alarmWidget {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3em;
  font-size: 1.5em;
  background-color: #C62828;
  padding: 1.5em;
  padding-top: 1em;
  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 {
  padding: 0;
  margin: 0;
}
.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;
}
button.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;
  width: 4em;
  height: 4em;
  font-size: 1em;
}
.nightMode button.button {
  border-color: rgba(211, 211, 211, 0.6);
}
.nightMode button.button {
  background-color: rgba(230, 230, 230, 0.6);
}
button.button span {
  background-position: center;
  background-size: 80% 80%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
}
button.button:disabled span {
  opacity: 0.5;
}
button.fab.button {
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
  border-radius: 50%;
  background-color: #546E7A;
  color: white;
}
.nightMode button.fab.button {
  background-color: rgba(84, 110, 122, 0.6);
}
.nightMode button.fab.button {
  color: rgba(252, 11, 11, 0.6);
}
button.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;
  width: 2em;
  height: 2em;
  font-size: 1rem;
}
.nightMode button.smallButton {
  border-color: rgba(211, 211, 211, 0.6);
}
.nightMode button.smallButton {
  background-color: rgba(230, 230, 230, 0.6);
}
button.smallButton span {
  background-position: center;
  background-size: 80% 80%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
}
button.smallButton:disabled span {
  opacity: 0.5;
}
button.active {
  border: 0.3em solid ;
  border-color: #1DE9B6;
}
.nightMode button.active {
  border-color: rgba(29, 233, 182, 0.6);
}
button.active.MOB {
  border-color: #C62828;
}
.nightMode button.active.MOB {
  border-color: rgba(198, 40, 40, 0.6);
}
.dialogButton {
  float: right;
  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;
  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;
}
.nightMode .dialogButton {
  border-color: rgba(211, 211, 211, 0.6);
}
.nightMode .dialogButton {
  background-color: rgba(230, 230, 230, 0.6);
}
.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: absolute;
  left: 0.1em;
  width: 1em;
}
.dialogButton.icon {
  padding-left: 1.3em;
  font-size: 0.9em;
}
button {
  /*- nav page routing panel --*/
}
button.Cancel span {
  background-image: url(images/ic_clear.svg);
}
button.Ok span {
  background-image: url(images/ic_done.svg);
}
button.Forward span {
  background-image: url(images/ic_arrow_forward.svg);
}
button.Back span {
  background-image: url(images/ic_arrow_back.svg);
}
button.Edit span {
  background-image: url(images/ic_edit.svg);
}
button.ZoomIn span {
  background-image: url(images/ic_zoom_in.svg);
}
button.ZoomOut span {
  background-image: url(images/ic_zoom_out.svg);
}
button.LockPos span {
  background-image: url(images/boat.svg);
}
button.LockMarker span {
  background-image: url(images/waypoint.svg);
}
button.StopNav span {
  background-image: url(images/stop-nav.svg);
}
button.CourseUp span {
  background-image: url(images/compass.svg);
}
button.ShowRoutePanel span {
  background-image: url(images/route.svg);
}
button.ShowGps span {
  background-image: url(images/data.svg);
}
button.AnchorWatch span {
  background-image: url(images/anchor.svg);
}
button.MOB span {
  background-image: url(images/drowning.svg);
}
button.CancelNav span {
  background-image: url(images/ic_clear.svg);
}
button.NavAdd span {
  background-image: url(images/wpplus.svg);
}
button.NavDelete span {
  background-image: url(images/wpminus.svg);
}
button.NavToCenter span {
  background-image: url(images/wpcenter.svg);
}
button.NavGoto span {
  background-image: url(images/wpgoto.svg);
}
button.NavInvert span {
  background-image: url(images/invertroute.svg);
}
button.NavDeleteAll span {
  background-image: url(images/ic_delete.svg);
}
button.NavNext span {
  background-image: url(images/nextwp.svg);
}
button.WpLocate span {
  background-image: url(images/center.svg);
}
button.WpPrevious span {
  background-image: url(images/ic_arrow_back.svg);
}
button.WpNext span {
  background-image: url(images/ic_arrow_forward.svg);
}
button.WpGoto span {
  background-image: url(images/wpgoto.svg);
}
button.WpEdit span {
  background-image: url(images/ic_edit.svg);
}
button.ShowStatus span {
  background-image: url(images/status.svg);
}
button.ShowSettings span {
  background-image: url(images/ic_settings.svg);
}
button.Connected span {
  background-image: url(images/plug.svg);
}
button.Night span {
  background-image: url(images/night.svg);
}
button.ShowDownload span {
  background-image: url(images/ic_file_download.svg);
}
button.MainCancel span {
  background-image: url(images/ic_clear.svg);
}
button.MainAndroid span {
  background-image: url(images/ic_android.svg);
}
button.MainInfo span {
  background-image: url(images/ic_info.svg);
}
button.MainAddOns span {
  background-image: url(images/apps.svg);
}
button.GpsCenter span {
  background-image: url(images/center.svg);
}
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);
}
button.AisSort span {
  background-image: url(images/sort.svg);
}
button.AisInfoLocate span {
  background-image: url(images/center.svg);
}
button.AisInfoList span {
  background-image: url(images/ic_list.svg);
}
button.StatusWpa span {
  background-image: url(images/ic_rss_feed.svg);
}
button.StatusAndroid span {
  background-image: url(images/ic_android.svg);
}
button.StatusAddresses span {
  background-image: url(images/qrcode.svg);
}
button.StatusShutdown span {
  background-image: url(images/ic_power.svg);
}
button.RoutePageOk span {
  background-image: url(images/ic_done.svg);
}
button.RoutePageDownload span {
  background-image: url(images/ic_file_download.svg);
}
button.DownloadPageUpload span {
  background-image: url(images/ic_file_upload.svg);
}
button.DownloadPageRoutes span {
  background-image: url(images/route.svg);
}
button.DownloadPageCharts span {
  background-image: url(images/map2.svg);
}
button.DownloadPageTracks span {
  background-image: url(images/track.svg);
}
button.DownloadPageLayouts span {
  background-image: url(images/ballot.svg);
}
button.DownloadPageImages span {
  background-image: url(images/image-icon.svg);
}
button.DownloadPageUser span {
  background-image: url(images/folder_shared.svg);
}
button.Delete span {
  background-image: url(images/ic_delete.svg);
}
button.Download span {
  background-image: url(images/ic_file_download.svg);
}
button.DownloadPageUploadCancel span {
  background-image: url(images/ic_clear.svg);
}
button.DownloadPageCreate span {
  font-size: 2.3em;
  position: relative;
}
button.DownloadPageCreate span:after {
  content: '+';
}
button.SettingsOK span {
  background-image: url(images/ic_done.svg);
}
button.SettingsDefaults span {
  background-image: url(images/ic_delete.svg);
}
button.SettingsLayout span {
  background-image: url(images/ballot.svg);
}
button.SettingsLayout.button.active {
  border-color: #C62828;
}
button.SettingsAddons span {
  background-image: url(images/apps.svg);
}
button.SettingsAndroid span {
  background-image: url(images/ic_android.svg);
}
button.LayoutFinished span {
  background-image: url(images/ballot.svg);
}
button.LayoutFinished.button.active {
  border-color: #C62828;
}
button.EditPage span {
  background-image: url(images/tune.svg);
}
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);
}
button.DownloadEdit span {
  background-image: url(images/ic_edit.svg);
}
button.ViewPageSave span {
  background-image: url(images/save.svg);
}
button.ViewPageView span {
  background-image: url(images/visibility.svg);
}
button.ViewPageEdit span {
  background-image: url(images/ic_edit.svg);
}
button.AddonConfigPlus span {
  font-size: 2.3em;
  position: relative;
}
button.AddonConfigPlus span:after {
  content: '+';
}
button.AddonConfigAddOns span {
  background-image: url(images/apps.svg);
}
button.AddonConfigView span {
  background-image: url(images/visibility.svg);
}
.dialogButton.cancel {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.dialogButton.cancel > span {
  background-image: url(images/ic_clear.svg);
}
.dialogButton.ok {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.dialogButton.ok > span {
  background-image: url(images/ic_done.svg);
}
.dialogButton.delete {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.dialogButton.delete > span {
  background-image: url(images/ic_delete.svg);
}
.dialogButton.reset {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.dialogButton.reset > span {
  background-image: url(images/ic_delete.svg);
}
.dialogButton.edit {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.dialogButton.edit > span {
  background-image: url(images/ic_edit.svg);
}
.dialogButton.download {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.dialogButton.download > span {
  background-image: url(images/ic_file_download.svg);
}
.fileDialog .dialogButton.view {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.fileDialog .dialogButton.view > span {
  background-image: url(images/visibility.svg);
}
.fileDialog .dialogButton.userApp {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.fileDialog .dialogButton.userApp > span {
  background-image: url(images/apps.svg);
}
.editWidgetDialog .dialogButton.before {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.editWidgetDialog .dialogButton.before > span {
  background-image: url(images/navigate_before.svg);
}
.editWidgetDialog .dialogButton.after {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.editWidgetDialog .dialogButton.after > span {
  background-image: url(images/navigate_next.svg);
}
.colorDialog .dialogButton.unset {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.colorDialog .dialogButton.unset > span {
  background-image: url(images/format_color_reset.svg);
}
.wpaDialog .dialogButton.disable {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.wpaDialog .dialogButton.disable > span {
  background-image: url(images/wifi_off.svg);
}
.wpaDialog .dialogButton.remove {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.wpaDialog .dialogButton.remove > span {
  background-image: url(images/ic_delete.svg);
}
.wpaDialog .dialogButton.connect {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.wpaDialog .dialogButton.connect > span {
  background-image: url(images/play_arrow.svg);
}
.wpaDialog .dialogButton.enable {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.wpaDialog .dialogButton.enable > span {
  background-image: url(images/wifi.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: .7;
}
* {
  -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);
}
#new_pages,
.app,
.pageFrame {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pageFrame.nightMode {
  background-color: #000;
  color: rgba(252, 11, 11, 0.6);
}
.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: block;
  position: relative;
  background-color: #546E7A;
}
.nightMode .buttonContainer {
  background-color: rgba(84, 110, 122, 0.6);
}
.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);
}
.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 {
  display: none;
  float: right;
  width: 1em;
  height: 1em;
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-image: url(images/ic_chevron_right.svg);
  background-size: contain;
  display: inline-block;
  background-size: 100% 100%;
  opacity: 0.6;
}
.hidden {
  display: 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;
}
.dialog {
  z-index: 121;
  padding: 1em;
  background-color: white;
  border-radius: 3px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  font-size: 1.3em;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.dialog > div {
  min-width: 0;
}
.nightMode .dialog {
  background-color: #000;
  color: rgba(252, 11, 11, 0.6);
}
.dialog.nested {
  font-size: 1em;
}
.dialog .inner {
  overflow: auto;
}
.dialog .flexInner {
  overflow: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.dialog input,
.dialog .input {
  display: table-cell;
  font-size: inherit;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  max-width: 100%;
  width: 20em;
  min-width: 5em;
  border: none;
  border-bottom: 1px solid;
  border-color: rgba(0, 0, 0, 0.3);
}
.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;
}
.dialog .input {
  display: inline-block;
  vertical-align: middle;
  min-height: 1em;
}
.dialog button:not(.dialogButton) {
  float: right;
  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;
  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;
}
.nightMode .dialog button:not(.dialogButton) {
  border-color: rgba(211, 211, 211, 0.6);
}
.nightMode .dialog button:not(.dialogButton) {
  background-color: rgba(230, 230, 230, 0.6);
}
.dialog button:not(.dialogButton) 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):disabled span {
  opacity: 0.5;
}
.nightMode .dialog button:not(.dialogButton) {
  background-color: #000;
}
.nightMode .dialog button:not(.dialogButton) {
  color: rgba(252, 11, 11, 0.6);
}
.dialog button:not(.dialogButton)[disabled] {
  opacity: 0.6;
}
.dialog button:not(.dialogButton) > span {
  position: absolute;
  left: 0.1em;
  width: 1em;
}
.dialog button:not(.dialogButton).icon {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.dialog button:not(.dialogButton).cancel {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.dialog button:not(.dialogButton).cancel > span {
  background-image: url(images/ic_clear.svg);
}
.dialog button:not(.dialogButton).ok {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.dialog button:not(.dialogButton).ok > span {
  background-image: url(images/ic_done.svg);
}
.dialog button:not(.dialogButton).delete {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.dialog button:not(.dialogButton).delete > span {
  background-image: url(images/ic_delete.svg);
}
.dialog button:not(.dialogButton).reset {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.dialog button:not(.dialogButton).reset > span {
  background-image: url(images/ic_delete.svg);
}
.dialog button:not(.dialogButton).edit {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.dialog button:not(.dialogButton).edit > span {
  background-image: url(images/ic_edit.svg);
}
.dialog button:not(.dialogButton).download {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.dialog button:not(.dialogButton).download > span {
  background-image: url(images/ic_file_download.svg);
}
.fileDialog .dialog button:not(.dialogButton).view {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.fileDialog .dialog button:not(.dialogButton).view > span {
  background-image: url(images/visibility.svg);
}
.fileDialog .dialog button:not(.dialogButton).userApp {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.fileDialog .dialog button:not(.dialogButton).userApp > span {
  background-image: url(images/apps.svg);
}
.editWidgetDialog .dialog button:not(.dialogButton).before {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.editWidgetDialog .dialog button:not(.dialogButton).before > span {
  background-image: url(images/navigate_before.svg);
}
.editWidgetDialog .dialog button:not(.dialogButton).after {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.editWidgetDialog .dialog button:not(.dialogButton).after > span {
  background-image: url(images/navigate_next.svg);
}
.colorDialog .dialog button:not(.dialogButton).unset {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.colorDialog .dialog button:not(.dialogButton).unset > span {
  background-image: url(images/format_color_reset.svg);
}
.wpaDialog .dialog button:not(.dialogButton).disable {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.wpaDialog .dialog button:not(.dialogButton).disable > span {
  background-image: url(images/wifi_off.svg);
}
.wpaDialog .dialog button:not(.dialogButton).remove {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.wpaDialog .dialog button:not(.dialogButton).remove > span {
  background-image: url(images/ic_delete.svg);
}
.wpaDialog .dialog button:not(.dialogButton).connect {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.wpaDialog .dialog button:not(.dialogButton).connect > span {
  background-image: url(images/play_arrow.svg);
}
.wpaDialog .dialog button:not(.dialogButton).enable {
  padding-left: 1.3em;
  font-size: 0.9em;
}
.wpaDialog .dialog button:not(.dialogButton).enable > span {
  background-image: url(images/wifi.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: #ECEFF1;
}
.nightMode .dialog .selectDialog .selectedItem {
  background-color: rgba(236, 239, 241, 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;
}
.dialog .dialogButtons {
  margin-top: 0.5em;
}
.editWidgetDialog .dialogRow,
.editPageDialog .dialogRow {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.editWidgetDialog .inputLabel,
.editPageDialog .inputLabel {
  width: 8em;
  text-align: start;
}
.editWidgetDialog input,
.editPageDialog input,
.editWidgetDialog .input,
.editPageDialog .input {
  min-width: 9em;
  max-width: 90vw;
  width: auto;
  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 .insertButtons,
.editPageDialog .insertButtons {
  border-bottom: 1px solid;
  border-color: rgba(0, 0, 0, 0.3);
}
.nightMode .editWidgetDialog .insertButtons,
.nightMode .editPageDialog .insertButtons {
  border-color: rgba(252, 11, 11, 0.18);
}
.editWidgetDialog button,
.editPageDialog button {
  width: 4.8em;
}
.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;
}
.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);
}
.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: #ECEFF1;
}
.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: nowrap;
  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-image: url(images/checkbox-blank-outline.svg);
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: middle;
}
.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-image: url(images/radio_button_unchecked.svg);
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: middle;
}
.radioInner .radio.checked {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-image: url(images/radio_button_checked.svg);
  background-size: contain;
  display: inline-block;
}
.colorValue {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  margin-right: 0.3em;
}
.appIcon {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  margin-left: 0.5em;
}
.EulaDialog .eula {
  width: 60vw;
}
#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: 1em;
  height: 1em;
  border-radius: 50%;
  margin-right: 1em;
  vertical-align: middle;
}
.nightMode #mainpage .chartItem img {
  opacity: 60;
}
#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 .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: 60;
}
#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;
}
#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;
}
#gpspage .hfield .widget:not(.combinedWidget) {
  width: 100%;
  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: none;
  -moz-box-flex: none;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  -webkit-box-pack: space-evenly;
  -moz-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  -webkit-justify-content: space-evenly;
  justify-content: space-evenly;
  padding-top: 1.3em;
}
#gpspage .hfield .widget:not(.combinedWidget).canvasGauge.linear {
  padding-top: 0.85em;
}
#gpspage .hfield .widget {
  -webkit-flex-grow: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-box-flex: none;
  -moz-box-flex: none;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  margin: 0;
}
#gpspage .hfield .infoLeft {
  left: 0;
  padding-left: 8px;
  border-bottom: 1px solid;
  border-top: 1px solid;
  background-color: #E2DFDF;
  width: 100%;
  font-size: 0.7em;
}
.nightMode #gpspage .hfield .infoLeft {
  background-color: rgba(226, 223, 223, 0.6);
}
#gpspage .hfield .widgetData {
  padding-top: 0;
  display: block;
  white-space: pre;
}
#gpspage .hfield .centeredWidget .widgetData {
  text-align: center;
}
#gpspage .hfield .combinedWidget {
  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;
}
#gpspage .hfield .combinedWidget .widget {
  height: 100%;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
  min-width: 0;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
#gpspage .resize {
  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;
  -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%;
}
#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;
}
.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 {
  padding-left: 1em;
  padding-right: 1em;
}
#aispage .aisListItem .aisData .aisData1 {
  font-weight: bold;
  margin-bottom: 0.2em;
}
#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;
}
#aisinfopage .status {
  left: 3em;
  top: 6em;
  position: absolute;
  width: 1.5em;
  height: inherit;
}
#aisinfopage .infoList {
  width: 100%;
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.2em;
  margin-top: 0.5em;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
#aisinfopage .infoList .label {
  display: inline-block;
  text-align: right;
  padding-right: 1em;
  opacity: 0.6;
  padding-bottom: .7em;
  width: 50%;
}
#aisinfopage .infoList .aisData {
  display: inline-block;
  text-align: left;
  padding-bottom: .7em;
  width: 50%;
}
#addonpage .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;
}
#addonpage .addOnFrame iframe {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
#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 .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: 2em;
}
.nightMode #statuspage .status {
  border-color: rgba(252, 11, 11, 0.18);
}
.nightMode #statuspage .status {
  border-color: rgba(252, 11, 11, 0.18);
}
#statuspage .childStatus {
  padding-left: 1.5em;
  margin-top: 3px;
  opacity: 0.6;
}
#statuspage .childStatus img {
  width: 1em;
  height: 1em;
  margin-left: -1em;
}
#statuspage .statusName {
  padding-left: 3px;
}
#statuspage .statusInfo {
  padding-left: 3px;
  word-wrap: break-word;
}
#statuspage.serverError .header {
  background-color: #C62828;
}
.nightMode #statuspage.serverError .header {
  background-color: rgba(198, 40, 40, 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;
}
#routepage.activeRoute .header {
  background-color: #C62828;
}
.nightMode #routepage.activeRoute .header {
  background-color: rgba(198, 40, 40, 0.6);
}
#routepage .routeCurrent {
  background-color: #CFD8DC;
  padding: 1em;
  padding-right: 1.5em;
  height: 5.2em;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
#routepage .routeCurrent .routeName {
  white-space: nowrap;
  overflow: hidden;
}
#routepage .routeCurrent .routeInfo {
  opacity: 0.6;
  margin-top: 0.7em;
}
#routepage .routeCurrent .more {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 1em;
  height: 2em;
  width: 2em;
}
.editRouteName label {
  display: inline-block;
  margin-left: 1em;
}
#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 .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;
}
#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-image: url(images/plug.svg);
  background-size: contain;
  display: inline-block;
}
#downloadpage .editimage {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-image: url(images/ic_edit.svg);
  background-size: contain;
  display: inline-block;
}
#downloadpage .viewimage {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-image: url(images/visibility.svg);
  background-size: contain;
  display: inline-block;
}
#downloadpage .appimage {
  width: 1.5em;
  height: 1.5em;
  margin: 0.2em;
  background-image: url(images/apps.svg);
  background-size: contain;
  display: inline-block;
}
#downloadpage .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 #downloadpage .downloadProgress {
  background-color: #000;
  color: rgba(252, 11, 11, 0.6);
}
#downloadpage .downloadProgress .progressContainer {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
#downloadpage .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;
}
#downloadpage .downloadProgress .progressInfo {
  display: block;
  text-align: center;
}
#downloadpage .downloadProgress .progressDone {
  height: 100%;
  background-color: blue;
}
.nightMode #downloadpage .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;
}
#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;
}
#settingspage .settingsList {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  overflow-x: hidden;
}
#settingspage .settingsList .label,
#settingspage .settingsList .inputLabel {
  width: 10em;
}
#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;
}
.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: hidden;
}
#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 .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 .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 .leftSection .map {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
}
.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 .widgetContainer.left {
  position: absolute;
  bottom: 0;
  left: 0;
  max-height: 100%;
  z-index: 3;
}
.mapPage .overlayContainer {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: inherit;
}

