body {
  padding: 60px 20px 0 20px;
  --menu-width-1: 130px;
  --menu-width-2: 110px;
  --menu-width-3: 110px;
  --menu-width-4: 110px;
}
body.Loading > .Loader {
  display: block;
}
body.Loading > .navbar,
body.Loading > .route {
  display: none !important;
}
@media (max-height: 600px) {
  body {
    padding-top: 52px;
    padding-left: 14px;
  }
}
.Loader {
  display: none;
  margin-top: 100px;
  text-align: center;
}
.Loader:not([data-percent=""]) img {
  display: none;
}
.Loader:after {
  content: attr(data-percent);
}
.navbar {
  padding-left: 20px;
  min-height: 40px;
}
.navbar .navbar-nav {
  margin: 0;
  min-width: 500px;
}
.navbar li {
  float: left;
}
.navbar li a {
  padding: 10px 25px;
  text-align: center;
  border-left: 1px solid #ddd;
}
.navbar li:nth-child(1) a {
  min-width: var(--menu-width-1);
}
.navbar li:nth-child(2) a {
  min-width: var(--menu-width-2);
}
.navbar li:nth-child(3) a {
  min-width: var(--menu-width-3);
}
.navbar li:nth-child(4) a {
  min-width: var(--menu-width-4);
}
.navbar li:nth-last-child(1) a {
  border-right: 1px solid #ddd;
}
.navbar li.state a {
  border-right: none;
  width: 0px;
  padding-left: 0;
  padding-right: 0;
}
.navbar li.state span {
  position: absolute;
  font-size: 25px;
  margin: 8px 0 0 12px;
}
.navbar li.state .glyphicon-ok {
  display: none;
}
.navbar li.state.ok .glyphicon-ok {
  display: block;
  margin: 6px 0 0 14px;
}
.navbar li.state.ok .glyphicon-remove {
  display: none;
}
@media (max-height: 600px) {
  .navbar {
    padding-left: 14px;
    min-height: 38px;
  }
  .navbar li a {
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .navbar li.state span {
    margin-top: 6px;
  }
  .navbar li.state.ok .glyphicon-ok {
    margin-top: 4px;
  }
}
.route.FlatsState table.table {
  width: auto;
  border-right: none;
}
.route.FlatsState table.table th,
.route.FlatsState table.table td {
  min-width: 100px;
}
.route.FlatsState table.table th {
  text-align: center;
  font-weight: normal;
  background-color: #fff;
  vertical-align: middle;
}
.route.FlatsState table.table td {
  text-align: right;
  white-space: nowrap;
}
.route.FlatsState table.table td:nth-child(1) {
  text-align: left;
}
.route.FlatsState table.table td:has(span[data-sign="-"]) {
  background-color: #dff0d8;
}
.route.FlatsState table.table td:has(span[data-sign="+"]) {
  background-color: #f2dede;
}
.route.FlatsState table.table tr:nth-child(4) td:nth-child(1),
.route.FlatsState table.table tr:nth-child(5) td:nth-child(1),
.route.FlatsState table.table tr:nth-child(6) td:nth-child(1) {
  padding-left: 20px;
}
.route.FlatsState table.table.State tr:nth-child(1) th:nth-child(1) {
  min-width: var(--menu-width-1);
}
.route.FlatsState table.table.State tr:nth-child(1) th:nth-child(2) {
  min-width: var(--menu-width-2);
}
.route.FlatsState table.table.State tr:nth-child(1) th:nth-child(3) {
  min-width: var(--menu-width-3);
}
.route.FlatsState table.table.State tr:nth-child(1) th:nth-child(4) {
  min-width: var(--menu-width-4);
}
.route.FlatsState table.table.State td:nth-child(5) {
  min-width: var(--menu-width-3);
}
.route.FlatsState table.table.State td:nth-child(6) {
  min-width: var(--menu-width-4);
}
.route.FlatsState table.table.State td:nth-child(7) {
  min-width: var(--menu-width-3);
}
.route.FlatsState table.table.Changes {
  margin-bottom: 0;
}
.route.FlatsState table.table.Changes tr:nth-child(1) th:nth-child(1) {
  min-width: var(--menu-width-1);
}
.route.FlatsState table.table.Changes tr:nth-child(1) th:nth-child(2) {
  min-width: var(--menu-width-2);
}
.route.FlatsState table.table.Changes tr:nth-child(2) th:nth-child(2n + 1) {
  min-width: var(--menu-width-3);
}
.route.FlatsState table.table.Changes tr:nth-child(2) th:nth-child(2n) {
  min-width: var(--menu-width-4);
}
@media (max-height: 600px) {
  .route.FlatsState table.table {
    margin-bottom: 14px;
  }
  .route.FlatsState table.table th,
  .route.FlatsState table.table td {
    padding-top: 6.6px;
    padding-bottom: 6.6px;
  }
}
.route.Camera iframe {
  border: none;
  width: 100%;
  height: 100vh;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
}
.route.Camera iframe.x {
  transform: scaleX(-1);
}
.route.Camera iframe.y {
  transform: scaleY(-1);
}
.route.Camera iframe.xy {
  transform: scaleX(-1) scaleY(-1);
}
@media (max-height: 600px) {
  .route.Camera iframe {
    max-height: calc(100vh - 65px);
  }
}
.route.History {
  margin-top: -10px;
}
.route.History label {
  font-weight: normal;
  margin-left: 42px;
  cursor: pointer;
}
.route.History label:before {
  content: '|';
  margin: -1px 0 0 -35px;
  position: absolute;
}
.route.History label input[type=checkbox] {
  position: absolute;
  margin: 4px 0 0 -20px;
  cursor: pointer;
}
.route.History canvas {
  width: 1920px;
  aspect-ratio: 1920/1080;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 130px);
  margin: 5px 0;
}
.route.History canvas.x {
  transform: scaleX(-1);
}
.route.History canvas.y {
  transform: scaleY(-1);
}
.route.History canvas.xy {
  transform: scaleX(-1) scaleY(-1);
}
.route.History table {
  width: 1%;
}
.route.History td {
  width: 1%;
  white-space: nowrap;
}
.route.History td:nth-child(2) {
  width: 100%;
  padding: 0 10px;
}
.route.History .progress {
  height: 10px;
  margin-bottom: 0;
}
.route.History .progress-bar {
  transition: width 0.1s linear;
}
@media (max-height: 600px) {
  .route.History canvas {
    margin: 0;
    max-height: calc(100vh - 100px);
  }
}
.route.HistoryAnalyzer img {
  max-height: 150px;
  margin: 0 10px 10px 0;
}
.route.Links a {
  display: inline-block;
  margin-bottom: 5px;
}