@font-face {
  font-family: "Televic Latin";
  font-weight: 400;
  font-style: normal;
  src: url("OpenSans-Regular.ttf");
  font-display: block;
}
@font-face {
  font-family: "Televic Latin";
  font-weight: 600;
  font-style: normal;
  src: url("OpenSans-SemiBold.ttf");
  font-display: block;
}
@font-face {
  font-family: "Televic Latin";
  font-weight: 700;
  font-style: normal;
  src: url("OpenSans-Bold.ttf");
  font-display: block;
}
@font-face {
  font-family: "Televic Latin";
  font-weight: 400;
  font-style: italic;
  src: url("OpenSans-Italic.ttf");
  font-display: block;
}
@font-face {
  font-family: "Televic Icon";
  src: url("televic-material-icons.woff");
  font-display: block;
}
.font-televic {
  font-family: "Televic Latin", sans-serif;
}
.font-televic-mono {
  font-family: monospace, serif;
}
.font-televic-icon {
  font-family: "Televic Icon";
}
.font-title {
  font-size: 21px;
}
.font-subtitle {
  font-size: 19px;
}
.font-paragraph {
  font-size: 17px;
}
.font-icon {
  font-size: 40px;
}
i.expand-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.expand-icon::after {
  content: "\f312";
}
i.space-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.space-icon::after {
  content: "\f255";
}
i.shift-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.shift-icon::after {
  content: "\f22a";
}
i.delete-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.delete-icon::after {
  content: "\f1d9";
}
i.hide-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.hide-icon::after {
  content: "\f2a3";
}
i.confirm-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.confirm-icon::after {
  content: "\f269";
}
i.cancel-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.cancel-icon::after {
  content: "\f136";
}
i.back-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.back-icon::after {
  content: "\f2ff";
}
i.left-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.left-icon::after {
  content: "\f2fa";
}
i.right-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.right-icon::after {
  content: "\f2fb";
}
i.up-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.up-icon::after {
  content: "\f2fc";
}
i.down-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.down-icon::after {
  content: "\f2f9";
}
i.first-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.first-icon::after {
  content: "\e5dc";
}
i.last-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.last-icon::after {
  content: "\e5dd";
}
i.create-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.create-icon::after {
  content: "\f221";
}
i.add-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.add-icon::after {
  content: "\f275";
}
i.remove-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.remove-icon::after {
  content: "\f270";
}
i.increase-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.increase-icon::after {
  content: "\f278";
}
i.decrease-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.decrease-icon::after {
  content: "\f273";
}
i.volume-increase-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.volume-increase-icon::after {
  content: "\f3bc";
}
i.volume-decrease-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.volume-decrease-icon::after {
  content: "\f3b9";
}
i.volume-mute-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.volume-mute-icon::after {
  content: "\f3bb";
}
i.zoom-in-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.zoom-in-icon::after {
  content: "\f1ee";
}
i.zoom-out-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.zoom-out-icon::after {
  content: "\f1ef";
}
i.zoom-fit-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.zoom-fit-icon::after {
  content: "\f16d";
}
i.active-trip-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.active-trip-icon::after {
  content: "\f175";
}
i.trip-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.trip-icon::after {
  content: "\f196";
}
i.prm-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.prm-icon::after {
  content: "\f3a9";
}
i.pa-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.pa-icon::after {
  content: "\f2ab";
}
i.dc-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.dc-icon::after {
  content: "\e91b";
}
i.cc-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.cc-icon::after {
  content: "\e91a";
}
i.pc-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.pc-icon::after {
  content: "\f1fe";
}
i.cctv-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.cctv-icon::after {
  content: "\f2e0";
}
i.setting-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.setting-icon::after {
  content: "\f1c6";
}
i.brightness-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.brightness-icon::after {
  content: "\f36c";
}
i.diagnostic-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.diagnostic-icon::after {
  content: "\f108";
}
i.test-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.test-icon::after {
  content: "\e91a";
}
i.language-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.language-icon::after {
  content: "\f1e3";
}
i.lock-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.lock-icon::after {
  content: "\f191";
}
i.relocate-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.relocate-icon::after {
  content: "\f299";
}
i.skip-before-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.skip-before-icon::after {
  content: "\f302";
}
i.skip-after-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.skip-after-icon::after {
  content: "\f302";
}
i.clear-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.clear-icon::after {
  content: "\f136";
}
i.search-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.search-icon::after {
  content: "\f1c3";
}
i.sync-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.sync-icon::after {
  content: "\f1b8";
}
i.sync-disabled-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.sync-disabled-icon::after {
  content: "\f1b7";
}
i.sync-error-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.sync-error-icon::after {
  content: "\f1b6";
}
i.gps-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.gps-icon::after {
  content: "\f29b";
}
i.gps-disabled-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.gps-disabled-icon::after {
  content: "\f29a";
}
i.gps-error-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.gps-error-icon::after {
  content: "\f29a";
}
i.point-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.point-icon::after {
  content: "\f136";
}
i.start-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.start-icon::after {
  content: "\f162";
}
i.cab-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.cab-icon::after {
  content: "\f1d5";
}
i.loudspeaker-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.loudspeaker-icon::after {
  content: "\f2d5";
}
i.led-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.led-icon::after {
  content: "\f367";
}
i.tft-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.tft-icon::after {
  content: "\f2dc";
}
i.spinner-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.spinner-icon::after {
  content: "\f3ec";
}
i.keypad-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.keypad-icon::after {
  content: "\f155";
}
i.handset-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.handset-icon::after {
  content: "\f2be";
}
i.handset-start-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.handset-start-icon::after {
  content: "\f2bb";
}
i.handset-stop-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.handset-stop-icon::after {
  content: "\f2b4";
}
i.handset-disabled-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.handset-disabled-icon::after {
  content: "\f2b7";
}
i.timer-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.timer-icon::after {
  content: "\f339";
}
i.error-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.error-icon::after {
  content: "\f135";
}
i.warning-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.warning-icon::after {
  content: "\f1f1";
}
i.ok-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.ok-icon::after {
  content: "\f269";
}
i.info-icon {
  font-family: "Televic Icon";
  font-size: 40px;
}
i.info-icon::after {
  content: "\f269";
}
i.first-icon,
i.last-icon {
  rotate: 90deg;
}
i.skip-before-icon {
  rotate: 90deg;
}
i.skip-after-icon {
  rotate: 270deg;
}
i.skip-icon {
  width: 40px;
  height: 40px;
  background-image: url("skip-icon.svg");
  background-size: 100%;
}
i.standalone-icon {
  font-size: 100px;
}
@keyframes icon-spin {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}
i.spin-cw {
  animation: icon-spin 1.33333333s linear infinite;
}
i.spin-ccw {
  animation: icon-spin reverse 1.33333333s linear infinite;
}
.align-left {
  text-align: left !important;
}
.align-center {
  text-align: center !important;
}
.uppercase {
  text-transform: uppercase;
}
.fg-main {
  color: #ffffff;
}
.bg-main {
  background-color: #000000;
}
.bg-app {
  background-color: #000032;
}
.bg-error {
  background-color: #e00000;
}
.bg-warning {
  background-color: #e0e000;
}
.bg-ok {
  background-color: #009000;
}
.bg-info {
  background-color: #0090e0;
}
.ancestor {
  position: relative;
}
.fill-ancestor {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
.stack {
  position: relative;
}
.stack > * {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  pointer-events: none;
}
.flex {
  display: flex;
}
.flex.flex-row {
  flex-direction: row;
}
.flex.flex-col {
  flex-direction: column;
}
.flex.flex-main-begin {
  justify-content: flex-start;
}
.flex.flex-cross-begin {
  align-items: flex-start;
}
.flex.flex-main-center {
  justify-content: center;
}
.flex.flex-cross-center {
  align-items: center;
}
.flex.flex-main-end {
  justify-content: flex-end;
}
.flex.flex-cross-end {
  align-items: flex-end;
}
.flex .flex-wrap {
  flex-wrap: wrap;
}
.flex .flex-main-between {
  justify-content: space-between;
}
.flex .flex-cross-between {
  align-items: space-between;
}
.flex.flex-row-gap-5px {
  row-gap: 5px;
}
.flex.flex-col-gap-5px {
  column-gap: 5px;
}
.flex.flex-row-gap-10px {
  row-gap: 10px;
}
.flex.flex-col-gap-10px {
  column-gap: 10px;
}
.flex.flex-row-gap-15px {
  row-gap: 15px;
}
.flex.flex-col-gap-15px {
  column-gap: 15px;
}
.flex.flex-row-gap-20px {
  row-gap: 20px;
}
.flex.flex-col-gap-20px {
  column-gap: 20px;
}
.flex-move-last {
  order: 1;
}
.flex-grow {
  flex-grow: 1;
}
.hide {
  display: none !important;
}
.margin-5px {
  margin: 5px;
}
.margin-row-5px {
  margin-top: 5px;
  margin-bottom: 5px;
}
.margin-col-5px {
  margin-left: 5px;
  margin-right: 5px;
}
.margin-top-5px {
  margin-top: 5px;
}
.margin-10px {
  margin: 10px;
}
.margin-row-10px {
  margin-top: 10px;
  margin-bottom: 10px;
}
.margin-col-10px {
  margin-left: 10px;
  margin-right: 10px;
}
.margin-top-10px {
  margin-top: 10px;
}
.margin-15px {
  margin: 15px;
}
.margin-row-15px {
  margin-top: 15px;
  margin-bottom: 15px;
}
.margin-col-15px {
  margin-left: 15px;
  margin-right: 15px;
}
.margin-top-15px {
  margin-top: 15px;
}
.margin-20px {
  margin: 20px;
}
.margin-row-20px {
  margin-top: 20px;
  margin-bottom: 20px;
}
.margin-col-20px {
  margin-left: 20px;
  margin-right: 20px;
}
.margin-top-20px {
  margin-top: 20px;
}
.fill-width {
  width: 100%;
}
.fill-height {
  height: 100%;
}
div.dialog {
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}
div.tray {
  z-index: 10;
}
div.nb-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 85.33333333px;
  z-index: 1;
}
div.main {
  z-index: 0;
}
h1,
h2,
p,
ul,
table,
a,
i {
  -webkit-user-select: none;
}
a {
  -webkit-user-drag: none;
}
h1 {
  font-size: 21px;
  text-align: center;
}
h2 {
  font-size: 19px;
  text-align: center;
}
a.button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: 2px solid;
  width: 175px;
  height: 50px;
  font-size: 17px;
  text-decoration: none;
  color: #ffffff;
  background-color: #808080;
  border-color: #e0e0e0;
  border-radius: 5px;
  pointer-events: auto;
}
a.button sup {
  position: relative;
  top: -0.5em;
  font-size: 0.8em;
}
a.button.active {
  color: #ffffff;
  background-color: #404040;
  border-color: #e0e0e0;
}
a.button.error {
  color: #ffffff;
  background-color: #900000;
  border-color: #e0e0e0;
}
a.button.disabled {
  opacity: 0.2;
  pointer-events: none;
}
a.button:active {
  color: #ffffff;
  background-color: #404040;
  border-color: #e0e0e0;
}
a.button.wide {
  width: 218.75px;
}
article.dropdown-button {
  position: relative;
  width: 175px;
  height: 50px;
}
article.dropdown-button a {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 17px;
  text-decoration: none;
  color: #ffffff;
  background-color: #808080;
  border-color: #e0e0e0;
  pointer-events: auto;
}
article.dropdown-button a:active {
  color: #ffffff;
  background-color: #404040;
  border-color: #e0e0e0;
}
article.dropdown-button > a {
  position: relative;
  z-index: 1;
  border: 2px solid;
  border-radius: 5px;
}
article.dropdown-button > a::after {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 5px;
  font-family: "Televic Icon";
  font-size: 1.33333333em;
  content: "\f312";
}
article.dropdown-button.active > a {
  color: #ffffff;
  background-color: #404040;
  border-color: #e0e0e0;
  pointer-events: none;
}
article.dropdown-button.disabled > a {
  color: #ffffff;
  background-color: #808080;
  border-color: #e0e0e0;
  opacity: 0.2;
  pointer-events: none;
}
article.dropdown-button ul {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 60px;
  z-index: 1;
  display: none;
  border: 2px solid;
  overflow: hidden;
  border-color: #e0e0e0;
  border-radius: 5px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
article.dropdown-button.pos-top ul {
  top: auto;
  bottom: 60px;
}
article.dropdown-button.active ul {
  display: block;
}
article.dropdown-button.disabled ul {
  display: none;
}
article.dropdown-button li {
  height: 50px;
}
article.dropdown-button li a {
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-style: solid;
}
article.dropdown-button li:first-child a {
  border-top-width: 0px;
}
article.dropdown-button li:last-child a {
  border-bottom-width: 0px;
}
article.dropdown-button[data-active-item="0"] li:nth-child(1) a {
  background-color: #0000c0;
  pointer-events: none;
}
article.dropdown-button[data-active-item="1"] li:nth-child(2) a {
  background-color: #0000c0;
  pointer-events: none;
}
article.dropdown-button[data-active-item="2"] li:nth-child(3) a {
  background-color: #0000c0;
  pointer-events: none;
}
article.dropdown-button[data-active-item="3"] li:nth-child(4) a {
  background-color: #0000c0;
  pointer-events: none;
}
article.dropdown-button[data-active-item="4"] li:nth-child(5) a {
  background-color: #0000c0;
  pointer-events: none;
}
article.dropdown-button[data-active-item="5"] li:nth-child(6) a {
  background-color: #0000c0;
  pointer-events: none;
}
article.dropdown-button[data-active-item="6"] li:nth-child(7) a {
  background-color: #0000c0;
  pointer-events: none;
}
article.dropdown-button[data-active-item="7"] li:nth-child(8) a {
  background-color: #0000c0;
  pointer-events: none;
}
article.dropdown-button[data-active-item="8"] li:nth-child(9) a {
  background-color: #0000c0;
  pointer-events: none;
}
article.dropdown-button[data-active-item="9"] li:nth-child(10) a {
  background-color: #0000c0;
  pointer-events: none;
}
article.dropdown-button::after {
  position: absolute;
  left: 50%;
  bottom: -10px;
  translate: -50% 0px;
  z-index: 1;
  display: none;
  width: 20px;
  height: 10px;
  background-color: #e0e0e0;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  content: "";
}
article.dropdown-button.pos-top::after {
  bottom: auto;
  top: -10px;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
article.dropdown-button.active::after {
  display: block;
}
article.dropdown-button.disabled::after {
  display: none;
}
article.dropdown-button::before {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  translate: -50% -50%;
  display: none;
  width: 200vw;
  height: 200vh;
  content: "";
  pointer-events: auto;
}
article.dropdown-button.active::before {
  display: block;
}
article.dropdown-button.disabled::before {
  display: none;
}
a.toggle-button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border: 2px solid;
  padding: 3px;
  width: 90px;
  height: 45px;
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  background-color: #808080;
  border-color: #e0e0e0;
  border-radius: 5px;
  pointer-events: auto;
}
a.toggle-button i {
  width: 35px;
  height: 35px;
  background-color: currentColor;
  border-radius: 2px;
}
a.toggle-button span {
  display: flex;
  justify-content: center;
  width: 35px;
}
a.toggle-button span::after {
  content: "Off";
}
a.toggle-button.active {
  flex-direction: row-reverse;
  color: #ffffff;
  background-color: #009000;
  border-color: #e0e0e0;
}
a.toggle-button.active span::after {
  content: "On";
}
a.toggle-button.disabled {
  opacity: 0.2;
  pointer-events: none;
}
a.toggle-button:active {
  color: #ffffff;
  background-color: #404040;
  border-color: #e0e0e0;
}
a.inline-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 35px;
  font-size: 17px;
  text-decoration: none;
  color: #ffffff;
  background-color: #808080;
  border-radius: 5px;
  pointer-events: auto;
}
a.inline-button.active {
  color: #ffffff;
  background-color: #404040;
}
a.inline-button.disabled {
  opacity: 0.2;
  pointer-events: none;
}
a.inline-button:active {
  color: #ffffff;
  background-color: #404040;
}
a.inline-button.wide {
  width: 125px;
}
a.car-button {
  position: relative;
  display: block;
  width: 100px;
  height: 50px;
  pointer-events: auto;
}
a.car-button > * {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
a.car-button div.body {
  display: flex;
  background-color: #c0c0c0;
  -webkit-mask: url("car-left.svg") left, url("car-right.svg") right;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-composite: source-in;
  mask: url("car-left.svg") left, url("car-right.svg") right;
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-composite: intersect;
}
a.car-button div.body p {
  border: 1px solid;
  border-top: none;
  border-bottom: none;
  flex-grow: 1;
  border-color: #000000;
}
a.car-button div.body p:first-child {
  border-left: none;
}
a.car-button div.body p:last-child {
  border-right: none;
}
a.car-button[data-orientation="turned"] div.body {
  rotate: 180deg;
}
a.car-button.active div.body {
  background-color: #0090e0;
}
a.car-button.active-left div.body p:first-child {
  background-color: #0090e0;
}
a.car-button.active-center div.body p:nth-child(2) {
  background-color: #0090e0;
}
a.car-button.active-right div.body p:last-child {
  background-color: #0090e0;
}
a.car-button.error div.body {
  background-color: #e00000;
}
a.car-button.error-left div.body p:first-child {
  background-color: #e00000;
}
a.car-button.error-center div.body p:nth-child(2) {
  background-color: #e00000;
}
a.car-button.error-right div.body p:last-child {
  background-color: #e00000;
}
a.car-button.cab-left::after,
a.car-button.cab-right::after {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: flex;
  align-items: center;
  padding: 10px;
  font-family: "Televic Icon";
  font-size: 1.4em;
  color: #000000;
  content: "\f1d5";
}
a.car-button.cab-left::after,
a.car-button.cab-right[data-orientation="turned"]::after {
  justify-content: flex-start;
}
a.car-button.cab-right::after,
a.car-button.cab-left[data-orientation="turned"]::after {
  justify-content: flex-end;
}
a.car-button div.no-label {
  display: flex;
  justify-content: center;
  align-items: center;
}
a.car-button div.no-label p {
  box-sizing: border-box;
  padding: 0.1em 0.3em;
  min-width: 35px;
  text-align: center;
  color: #ffffff;
  background-color: #000000;
}
a.car-button div.label p {
  position: absolute;
  right: 13px;
  top: -7px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  color: #000000;
  background-color: #ffffff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
a.camera-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  font-family: "Televic Icon";
  font-size: 40px;
  text-decoration: none;
  color: #000000;
  background-color: #ffffff;
  pointer-events: auto;
}
a.camera-button::after {
  content: "\f2e0";
}
a.camera-button.active {
  color: #000000;
  background-color: #0090e0;
}
a.camera-button:active {
  color: #000000;
  background-color: #0090e0;
}
a.nav-button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: 2px solid;
  width: 85.33333333px;
  height: 85.33333333px;
  text-decoration: none;
  color: #000000;
  background-color: #c0c0c0;
  border-color: #707070;
  pointer-events: auto;
}
@keyframes nav-button-error {
  from {
    color: #000000;
    background-color: #c0c0c0;
    border-color: #707070;
  }
  to {
    color: #ffffff;
    background-color: #e09000;
    border-color: #707070;
  }
}
@keyframes nav-button-ok {
  from {
    color: #000000;
    background-color: #c0c0c0;
    border-color: #707070;
  }
  to {
    color: #ffffff;
    background-color: #90c000;
    border-color: #707070;
  }
}
a.nav-button.active {
  color: #ffffff;
  background-color: #404040;
  border-color: #707070;
  pointer-events: none;
}
a.nav-button.error {
  animation: nav-button-error 1s steps(2, jump-none) infinite;
}
a.nav-button.active.error {
  color: #ffffff;
  background-color: #e09000;
  border-color: #707070;
  animation: none;
}
a.nav-button.ok {
  animation: nav-button-ok 1s steps(2, jump-none) infinite;
}
a.nav-button.active.ok {
  color: #ffffff;
  background-color: #90c000;
  border-color: #707070;
  animation: none;
}
a.nav-button.disabled {
  pointer-events: none;
}
a.nav-button.disabled > * {
  opacity: 0.2;
}
a.nav-button:empty {
  color: #a0a0a0;
  background-color: #a0a0a0;
  border-color: #707070;
  pointer-events: none;
}
a.nav-button:active {
  color: #ffffff;
  background-color: #404040;
  border-color: #707070;
}
a.nav-button.error:active,
a.nav-button.ok:active {
  animation: none;
}
a.nav-button i.skip-icon {
  background-position-y: bottom;
}
a.nav-button.active i.skip-icon,
a.nav-button.error i.skip-icon,
a.nav-button.ok i.skip-icon,
a.nav-button:active i.skip-icon {
  background-position-y: top;
}
a.toggle-nav-button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: 2px solid;
  width: 85.33333333px;
  height: 85.33333333px;
  text-decoration: none;
  color: #000000;
  background-color: #c0c0c0;
  border-color: #707070;
  pointer-events: auto;
}
a.toggle-nav-button.disabled {
  pointer-events: none;
}
a.toggle-nav-button.disabled > * {
  opacity: 0.2;
}
a.toggle-nav-button:empty {
  color: #a0a0a0;
  background-color: #a0a0a0;
  border-color: #707070;
  pointer-events: none;
}
a.toggle-nav-button:active {
  color: #ffffff;
  background-color: #404040;
  border-color: #707070;
}
article.keyboard {
  border: 2px solid;
  overflow: hidden;
  background-color: #a0a0a0;
  border-color: #e0e0e0;
  border-radius: 5px;
}
article.keyboard > div {
  display: none;
}
article.keyboard > div[data-layer="default"] {
  display: block;
}
article.keyboard.shift > div {
  display: none;
}
article.keyboard.shift > div[data-layer="shift"] {
  display: block;
}
article.keyboard.alt > div {
  display: none;
}
article.keyboard.alt > div[data-layer="alt"] {
  display: block;
}
article.keyboard div[data-layer] > div {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid;
  border-left: none;
  border-right: none;
  height: 73.57575758px;
  border-color: #e0e0e0;
}
article.keyboard div[data-layer] > div:first-child {
  border-top: none;
}
article.keyboard div[data-layer] > div:last-child {
  border-bottom: none;
}
article.keyboard a {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid;
  border-top: none;
  border-bottom: none;
  font-size: 40px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  background-color: #808080;
  border-color: #e0e0e0;
  pointer-events: auto;
}
article.keyboard a:first-child {
  border-left-width: 0px;
}
article.keyboard a:last-child {
  border-right-width: 0px;
}
article.keyboard a.grow {
  flex-grow: 1;
}
article.keyboard a:empty {
  color: #a0a0a0;
  background-color: #a0a0a0;
  border-color: #e0e0e0;
  pointer-events: none;
}
article.keyboard a:active {
  color: #ffffff;
  background-color: #404040;
  border-color: #e0e0e0;
}
article.keyboard div.partial-row a:first-child {
  border-left-width: 2px;
}
article.keyboard div.partial-row a:last-child {
  border-right-width: 2px;
}
article.keyboard[lang="ar"] a {
  width: 67.44444444px;
}
article.keyboard[lang="ar"] div.partial-row a:first-child,
article.keyboard[lang="ar"] div.partial-row a:last-child {
  width: 68.44444444px;
}
article.keyboard[lang="en"] a {
  width: 73.57575758px;
}
article.keyboard[lang="en"] div.partial-row a:first-child,
article.keyboard[lang="en"] div.partial-row a:last-child {
  width: 74.57575758px;
}
article.keyboard div[data-layer="shift"] a[data-value$="-shift"],
article.keyboard div[data-layer="alt"] a[data-value$="-alt"] {
  color: #ffffff;
  background-color: #404040;
  border-color: #e0e0e0;
}
article.keypad {
  display: grid;
  grid-template-columns: repeat(3, 73.66666667px);
  grid-auto-rows: 73.66666667px;
  border: 2px solid;
  overflow: hidden;
  border-color: #e0e0e0;
  border-radius: 5px;
}
article.keypad a {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  font-size: 40px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  background-color: #808080;
  border-color: #e0e0e0;
  pointer-events: auto;
}
article.keypad a:active {
  color: #ffffff;
  background-color: #404040;
  border-color: #e0e0e0;
}
article.keypad a[data-value="0"] {
  grid-row: 4;
  grid-column: 1 / 3;
}
article.keypad a[data-value="1"] {
  grid-row: 3;
  grid-column: 1;
}
article.keypad a[data-value="2"] {
  grid-row: 3;
  grid-column: 2;
}
article.keypad a[data-value="3"] {
  grid-row: 3;
  grid-column: 3;
}
article.keypad a[data-value="4"] {
  grid-row: 2;
  grid-column: 1;
}
article.keypad a[data-value="5"] {
  grid-row: 2;
  grid-column: 2;
}
article.keypad a[data-value="6"] {
  grid-row: 2;
  grid-column: 3;
}
article.keypad a[data-value="7"] {
  grid-row: 1;
  grid-column: 1;
}
article.keypad a[data-value="8"] {
  grid-row: 1;
  grid-column: 2;
}
article.keypad a[data-value="9"] {
  grid-row: 1;
  grid-column: 3;
}
article.keypad a[data-value="delete"] {
  grid-row: 4;
  grid-column: 3;
}
article.keypad a[data-value="7"],
article.keypad a[data-value="4"],
article.keypad a[data-value="1"],
article.keypad a[data-value="0"] {
  border-left: none;
}
article.keypad a[data-value="9"],
article.keypad a[data-value="6"],
article.keypad a[data-value="3"],
article.keypad a[data-value="delete"] {
  border-right: none;
}
article.keypad a[data-value="7"],
article.keypad a[data-value="8"],
article.keypad a[data-value="9"] {
  border-top: none;
}
article.keypad a[data-value="0"],
article.keypad a[data-value="delete"] {
  border-bottom: none;
}
article.button-group {
  display: flex;
}
article.button-group a.button {
  width: 100px;
}
article.button-group a.button:first-child {
  border-right-width: 1px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
article.button-group a.button:not(:first-child):not(:last-child) {
  border-left-width: 1px;
  border-right-width: 1px;
  border-radius: 0px;
}
article.button-group a.button:last-child {
  border-left-width: 1px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
article.button-group[data-active-item="0"] a.button:nth-child(1) {
  background-color: #0000c0;
  pointer-events: none;
}
article.button-group[data-active-item="1"] a.button:nth-child(2) {
  background-color: #0000c0;
  pointer-events: none;
}
article.button-group[data-active-item="2"] a.button:nth-child(3) {
  background-color: #0000c0;
  pointer-events: none;
}
article.button-group[data-active-item="3"] a.button:nth-child(4) {
  background-color: #0000c0;
  pointer-events: none;
}
article.button-group[data-active-item="4"] a.button:nth-child(5) {
  background-color: #0000c0;
  pointer-events: none;
}
article.button-group[data-active-item="5"] a.button:nth-child(6) {
  background-color: #0000c0;
  pointer-events: none;
}
article.button-group[data-active-item="6"] a.button:nth-child(7) {
  background-color: #0000c0;
  pointer-events: none;
}
article.button-group[data-active-item="7"] a.button:nth-child(8) {
  background-color: #0000c0;
  pointer-events: none;
}
article.button-group[data-active-item="8"] a.button:nth-child(9) {
  background-color: #0000c0;
  pointer-events: none;
}
article.button-group[data-active-item="9"] a.button:nth-child(10) {
  background-color: #0000c0;
  pointer-events: none;
}
ul.button-list article.button-group a.button {
  height: 45px;
}
article.input {
  position: relative;
  box-sizing: border-box;
  border: 2px solid;
  width: 250px;
  height: 50px;
  overflow: hidden;
  color: #000000;
  background-color: #ffffff;
  border-color: #e0e0e0;
  border-radius: 5px;
}
article.input p {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 21px;
  font-weight: 600;
  white-space: nowrap;
}
article.input.number p {
  padding-left: 0.25em;
  letter-spacing: 0.25em;
}
article.input a {
  position: absolute;
  right: -2px;
  top: -2px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  font-family: "Televic Icon";
  font-size: 40px;
  text-decoration: none;
  color: inherit;
  pointer-events: auto;
}
article.input a::after {
  content: "\f136";
}
article.input p:empty ~ a {
  pointer-events: none;
}
article.input p:empty ~ a::after {
  opacity: 0.2;
  content: "";
}
article.input.search p:empty ~ a::after {
  content: "\f1c3";
}
article.dropdown-input {
  display: flex;
}
article.dropdown-input article.dropdown-button > a {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
article.dropdown-input article.input {
  border-left-width: 0px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
article.keyboard-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
}
article.keyboard-input > article.input,
article.keyboard-input > article.dropdown-input {
  width: 66%;
}
article.keyboard-input article.dropdown-input article.input {
  flex-grow: 1;
}
article.keypad-input {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
article.keypad-input a.button {
  width: 100%;
}
article.keypad-input article.input {
  width: 100%;
}
article.text-input p {
  border: 2px solid;
  padding: 10px;
  overflow: hidden;
  font-size: 19px;
  white-space: pre-wrap;
  color: #000000;
  background-color: #ffffff;
  border-color: #e0e0e0;
  border-radius: 5px;
}
article.text-input[data-num-rows="1"] p {
  height: 1em;
}
article.text-input[data-num-rows="2"] p {
  height: 2em;
}
article.text-input[data-num-rows="3"] p {
  height: 3em;
}
article.text-input[data-num-rows="4"] p {
  height: 4em;
}
article.text-input[data-num-rows="5"] p {
  height: 5em;
}
article.text-input[data-num-rows="6"] p {
  height: 6em;
}
article.text-input[data-num-rows="7"] p {
  height: 7em;
}
article.text-input[data-num-rows="8"] p {
  height: 8em;
}
article.text-input[data-num-rows="9"] p {
  height: 9em;
}
article.text-input[data-num-rows="10"] p {
  height: 10em;
}
ul.list {
  line-height: 1.33333333;
}
ul.button-list {
  border-top: 2px solid;
  border-color: #ffffff;
}
ul.button-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 2px solid;
  padding: 5px 20px;
  min-height: 50px;
  border-color: rgba(255, 255, 255, 0.5);
}
ul.button-list li:last-child {
  border-color: #ffffff;
}
ul.stop-list {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  overflow: hidden;
}
ul.stop-list[data-num-items="1"] {
  height: 80px;
}
ul.stop-list[data-num-items="2"] {
  height: 160px;
}
ul.stop-list[data-num-items="3"] {
  height: 240px;
}
ul.stop-list[data-num-items="4"] {
  height: 320px;
}
ul.stop-list[data-num-items="5"] {
  height: 400px;
}
ul.stop-list[data-num-items="6"] {
  height: 480px;
}
ul.stop-list[data-num-items="7"] {
  height: 560px;
}
ul.stop-list[data-num-items="8"] {
  height: 640px;
}
ul.stop-list[data-num-items="9"] {
  height: 720px;
}
ul.stop-list[data-num-items="10"] {
  height: 800px;
}
ul.stop-list li {
  position: relative;
  margin: 10px;
  margin-left: 0px;
  margin-right: 0px;
}
ul.stop-list a {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: 3px solid;
  width: 60px;
  height: 60px;
  font-family: "Televic Icon";
  font-size: 40px;
  text-decoration: none;
  color: #ffffff;
  background-color: #e09090;
  border-color: #ffffff;
  border-radius: 30px;
  pointer-events: auto;
}
ul.stop-list li:first-child a {
  pointer-events: none;
}
ul.stop-list li:first-child a::after {
  content: "\f162";
}
ul.stop-list li.current a {
  color: #ffffff;
  background-color: #e00000;
  border-color: #ffffff;
}
ul.stop-list li.current a::after {
  content: "\f1d5";
}
ul.stop-list li.current ~ li a {
  color: #ffffff;
  background-color: #e00000;
  border-color: #ffffff;
}
ul.stop-list li.skipped a {
  color: #ffffff !important;
  background-color: #900000 !important;
  border-color: #000032 !important;
}
ul.stop-list li.active a::after {
  content: "\f136";
}
ul.stop-list span {
  position: absolute;
  left: 70px;
  top: 50%;
  translate: 0px -50%;
  white-space: nowrap;
}
ul.stop-list li.current span {
  font-weight: 700;
}
ul.stop-list li.skipped span {
  font-style: italic;
  opacity: 0.5;
}
ul.stop-list hr {
  position: absolute;
  left: 27px;
  z-index: -1;
  margin: 0px;
  border: none;
  width: 6px;
  height: 80px;
  background-color: #e09090;
}
ul.stop-list hr.prev {
  top: 30px;
}
ul.stop-list hr.next {
  bottom: 30px;
}
ul.stop-list li hr.prev {
  display: none;
}
ul.stop-list li.hide + li:not(.hide) hr.prev {
  display: block;
}
ul.stop-list li:last-child hr.next {
  display: none;
}
ul.stop-list li.current hr.next,
ul.stop-list li.current ~ li hr.prev,
ul.stop-list li.current ~ li hr.next {
  background-color: #e00000;
}
article.table {
  position: relative;
  overflow: hidden;
}
article.table[data-num-items="1"] {
  height: 50px;
}
article.table.header[data-num-items="1"] {
  height: 102px;
}
article.table.footer[data-num-items="1"] {
  height: 77px;
}
article.table.header.footer[data-num-items="1"] {
  height: 129px;
}
article.table[data-num-items="2"] {
  height: 100px;
}
article.table.header[data-num-items="2"] {
  height: 152px;
}
article.table.footer[data-num-items="2"] {
  height: 127px;
}
article.table.header.footer[data-num-items="2"] {
  height: 179px;
}
article.table[data-num-items="3"] {
  height: 150px;
}
article.table.header[data-num-items="3"] {
  height: 202px;
}
article.table.footer[data-num-items="3"] {
  height: 177px;
}
article.table.header.footer[data-num-items="3"] {
  height: 229px;
}
article.table[data-num-items="4"] {
  height: 200px;
}
article.table.header[data-num-items="4"] {
  height: 252px;
}
article.table.footer[data-num-items="4"] {
  height: 227px;
}
article.table.header.footer[data-num-items="4"] {
  height: 279px;
}
article.table[data-num-items="5"] {
  height: 250px;
}
article.table.header[data-num-items="5"] {
  height: 302px;
}
article.table.footer[data-num-items="5"] {
  height: 277px;
}
article.table.header.footer[data-num-items="5"] {
  height: 329px;
}
article.table[data-num-items="6"] {
  height: 300px;
}
article.table.header[data-num-items="6"] {
  height: 352px;
}
article.table.footer[data-num-items="6"] {
  height: 327px;
}
article.table.header.footer[data-num-items="6"] {
  height: 379px;
}
article.table[data-num-items="7"] {
  height: 350px;
}
article.table.header[data-num-items="7"] {
  height: 402px;
}
article.table.footer[data-num-items="7"] {
  height: 377px;
}
article.table.header.footer[data-num-items="7"] {
  height: 429px;
}
article.table[data-num-items="8"] {
  height: 400px;
}
article.table.header[data-num-items="8"] {
  height: 452px;
}
article.table.footer[data-num-items="8"] {
  height: 427px;
}
article.table.header.footer[data-num-items="8"] {
  height: 479px;
}
article.table[data-num-items="9"] {
  height: 450px;
}
article.table.header[data-num-items="9"] {
  height: 502px;
}
article.table.footer[data-num-items="9"] {
  height: 477px;
}
article.table.header.footer[data-num-items="9"] {
  height: 529px;
}
article.table[data-num-items="10"] {
  height: 500px;
}
article.table.header[data-num-items="10"] {
  height: 552px;
}
article.table.footer[data-num-items="10"] {
  height: 527px;
}
article.table.header.footer[data-num-items="10"] {
  height: 579px;
}
article.table[data-num-items="11"] {
  height: 550px;
}
article.table.header[data-num-items="11"] {
  height: 602px;
}
article.table.footer[data-num-items="11"] {
  height: 577px;
}
article.table.header.footer[data-num-items="11"] {
  height: 629px;
}
article.table[data-num-items="12"] {
  height: 600px;
}
article.table.header[data-num-items="12"] {
  height: 652px;
}
article.table.footer[data-num-items="12"] {
  height: 627px;
}
article.table.header.footer[data-num-items="12"] {
  height: 679px;
}
article.table[data-num-items="13"] {
  height: 650px;
}
article.table.header[data-num-items="13"] {
  height: 702px;
}
article.table.footer[data-num-items="13"] {
  height: 677px;
}
article.table.header.footer[data-num-items="13"] {
  height: 729px;
}
article.table[data-num-items="14"] {
  height: 700px;
}
article.table.header[data-num-items="14"] {
  height: 752px;
}
article.table.footer[data-num-items="14"] {
  height: 727px;
}
article.table.header.footer[data-num-items="14"] {
  height: 779px;
}
article.table[data-num-items="15"] {
  height: 750px;
}
article.table.header[data-num-items="15"] {
  height: 802px;
}
article.table.footer[data-num-items="15"] {
  height: 777px;
}
article.table.header.footer[data-num-items="15"] {
  height: 829px;
}
article.table table {
  table-layout: fixed;
  width: 100%;
  font-size: 19px;
}
article.table[data-active-item="-1"] tbody {
  display: none;
}
article.table caption {
  caption-side: bottom;
  margin-top: 10px;
  font-size: 17px;
}
article.table tr {
  height: 50px;
}
article.table thead tr {
  border: 2px solid;
  border-left: none;
  border-right: none;
  border-color: #ffffff;
}
article.table tbody tr {
  border-bottom: 2px solid;
  border-color: rgba(255, 255, 255, 0.5);
}
article.table.select tbody tr {
  pointer-events: auto;
  cursor: pointer;
}
article.table.col-0-center th:nth-child(1),
article.table.col-0-center td:nth-child(1) {
  text-align: center;
}
article.table.col-0-right th:nth-child(1),
article.table.col-0-right td:nth-child(1) {
  text-align: right;
}
article.table.col-1-center th:nth-child(2),
article.table.col-1-center td:nth-child(2) {
  text-align: center;
}
article.table.col-1-right th:nth-child(2),
article.table.col-1-right td:nth-child(2) {
  text-align: right;
}
article.table.col-2-center th:nth-child(3),
article.table.col-2-center td:nth-child(3) {
  text-align: center;
}
article.table.col-2-right th:nth-child(3),
article.table.col-2-right td:nth-child(3) {
  text-align: right;
}
article.table.col-3-center th:nth-child(4),
article.table.col-3-center td:nth-child(4) {
  text-align: center;
}
article.table.col-3-right th:nth-child(4),
article.table.col-3-right td:nth-child(4) {
  text-align: right;
}
article.table.col-4-center th:nth-child(5),
article.table.col-4-center td:nth-child(5) {
  text-align: center;
}
article.table.col-4-right th:nth-child(5),
article.table.col-4-right td:nth-child(5) {
  text-align: right;
}
article.table.col-5-center th:nth-child(6),
article.table.col-5-center td:nth-child(6) {
  text-align: center;
}
article.table.col-5-right th:nth-child(6),
article.table.col-5-right td:nth-child(6) {
  text-align: right;
}
article.table.col-6-center th:nth-child(7),
article.table.col-6-center td:nth-child(7) {
  text-align: center;
}
article.table.col-6-right th:nth-child(7),
article.table.col-6-right td:nth-child(7) {
  text-align: right;
}
article.table.col-7-center th:nth-child(8),
article.table.col-7-center td:nth-child(8) {
  text-align: center;
}
article.table.col-7-right th:nth-child(8),
article.table.col-7-right td:nth-child(8) {
  text-align: right;
}
article.table.col-8-center th:nth-child(9),
article.table.col-8-center td:nth-child(9) {
  text-align: center;
}
article.table.col-8-right th:nth-child(9),
article.table.col-8-right td:nth-child(9) {
  text-align: right;
}
article.table.col-9-center th:nth-child(10),
article.table.col-9-center td:nth-child(10) {
  text-align: center;
}
article.table.col-9-right th:nth-child(10),
article.table.col-9-right td:nth-child(10) {
  text-align: right;
}
article.table th,
article.table td {
  box-sizing: border-box;
  padding: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
  overflow: hidden;
  text-align: start;
  vertical-align: middle;
  text-overflow: ellipsis;
  white-space: nowrap;
}
article.table th:first-child,
article.table td:first-child {
  padding-left: 20px;
}
article.table th:last-child,
article.table td:last-child {
  padding-right: 20px;
}
article.table th {
  font-weight: 600;
}
article.table td:empty::after {
  content: "\2014";
}
article.table tbody tr.disabled td {
  font-style: italic;
  opacity: 0.5;
}
article.table tbody tr.disabled td > * {
  font-style: normal;
}
article.table div.point {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  display: none;
  box-sizing: border-box;
  border: 2px solid;
  height: 50px;
  border-color: #0000e0;
}
article.table div.point::after {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: -1;
  background-color: #ffffff;
  opacity: 0.2;
  content: "";
}
article.table.header div.point {
  top: 52px;
}
article.table[data-active-item="-1"] div.point {
  display: none !important;
}
article.table[data-active-item="0"] div.point {
  top: 0px;
}
article.table.header[data-active-item="0"] div.point {
  top: 52px;
}
article.table[data-active-item="1"] div.point {
  top: 50px;
}
article.table.header[data-active-item="1"] div.point {
  top: 102px;
}
article.table[data-active-item="2"] div.point {
  top: 100px;
}
article.table.header[data-active-item="2"] div.point {
  top: 152px;
}
article.table[data-active-item="3"] div.point {
  top: 150px;
}
article.table.header[data-active-item="3"] div.point {
  top: 202px;
}
article.table[data-active-item="4"] div.point {
  top: 200px;
}
article.table.header[data-active-item="4"] div.point {
  top: 252px;
}
article.table[data-active-item="5"] div.point {
  top: 250px;
}
article.table.header[data-active-item="5"] div.point {
  top: 302px;
}
article.table[data-active-item="6"] div.point {
  top: 300px;
}
article.table.header[data-active-item="6"] div.point {
  top: 352px;
}
article.table[data-active-item="7"] div.point {
  top: 350px;
}
article.table.header[data-active-item="7"] div.point {
  top: 402px;
}
article.table[data-active-item="8"] div.point {
  top: 400px;
}
article.table.header[data-active-item="8"] div.point {
  top: 452px;
}
article.table[data-active-item="9"] div.point {
  top: 450px;
}
article.table.header[data-active-item="9"] div.point {
  top: 502px;
}
article.table[data-active-item="10"] div.point {
  top: 500px;
}
article.table.header[data-active-item="10"] div.point {
  top: 552px;
}
article.table[data-active-item="11"] div.point {
  top: 550px;
}
article.table.header[data-active-item="11"] div.point {
  top: 602px;
}
article.table[data-active-item="12"] div.point {
  top: 600px;
}
article.table.header[data-active-item="12"] div.point {
  top: 652px;
}
article.table[data-active-item="13"] div.point {
  top: 650px;
}
article.table.header[data-active-item="13"] div.point {
  top: 702px;
}
article.table[data-active-item="14"] div.point {
  top: 700px;
}
article.table.header[data-active-item="14"] div.point {
  top: 752px;
}
article.table.select div.point {
  display: block;
}
article.table p.alt {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: none;
}
article.table.header p.alt {
  top: 52px;
}
article.table.footer p.alt {
  bottom: 27px;
}
article.table[data-active-item="-1"] p.alt {
  display: flex;
  justify-content: center;
  align-items: center;
}
article.device-table {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
article.device-table[data-num-rows="1"] {
  height: 150px;
}
article.device-table.hor-spine[data-num-rows="1"] {
  height: 175px;
}
article.device-table[data-num-cols="1"] {
  width: 175px;
}
article.device-table.hor-spine[data-num-cols="1"] {
  width: 150px;
}
article.device-table[data-num-rows="2"] {
  height: 225px;
}
article.device-table.hor-spine[data-num-rows="2"] {
  height: 250px;
}
article.device-table[data-num-cols="2"] {
  width: 250px;
}
article.device-table.hor-spine[data-num-cols="2"] {
  width: 225px;
}
article.device-table[data-num-rows="3"] {
  height: 300px;
}
article.device-table.hor-spine[data-num-rows="3"] {
  height: 325px;
}
article.device-table[data-num-cols="3"] {
  width: 325px;
}
article.device-table.hor-spine[data-num-cols="3"] {
  width: 300px;
}
article.device-table[data-num-rows="4"] {
  height: 375px;
}
article.device-table.hor-spine[data-num-rows="4"] {
  height: 400px;
}
article.device-table[data-num-cols="4"] {
  width: 400px;
}
article.device-table.hor-spine[data-num-cols="4"] {
  width: 375px;
}
article.device-table[data-num-rows="5"] {
  height: 450px;
}
article.device-table.hor-spine[data-num-rows="5"] {
  height: 475px;
}
article.device-table[data-num-cols="5"] {
  width: 475px;
}
article.device-table.hor-spine[data-num-cols="5"] {
  width: 450px;
}
article.device-table[data-num-rows="6"] {
  height: 525px;
}
article.device-table.hor-spine[data-num-rows="6"] {
  height: 550px;
}
article.device-table[data-num-cols="6"] {
  width: 550px;
}
article.device-table.hor-spine[data-num-cols="6"] {
  width: 525px;
}
article.device-table[data-num-rows="7"] {
  height: 600px;
}
article.device-table.hor-spine[data-num-rows="7"] {
  height: 625px;
}
article.device-table[data-num-cols="7"] {
  width: 625px;
}
article.device-table.hor-spine[data-num-cols="7"] {
  width: 600px;
}
article.device-table[data-num-rows="8"] {
  height: 675px;
}
article.device-table.hor-spine[data-num-rows="8"] {
  height: 700px;
}
article.device-table[data-num-cols="8"] {
  width: 700px;
}
article.device-table.hor-spine[data-num-cols="8"] {
  width: 675px;
}
article.device-table[data-num-rows="9"] {
  height: 750px;
}
article.device-table.hor-spine[data-num-rows="9"] {
  height: 775px;
}
article.device-table[data-num-cols="9"] {
  width: 775px;
}
article.device-table.hor-spine[data-num-cols="9"] {
  width: 750px;
}
article.device-table[data-num-rows="10"] {
  height: 825px;
}
article.device-table.hor-spine[data-num-rows="10"] {
  height: 850px;
}
article.device-table[data-num-cols="10"] {
  width: 850px;
}
article.device-table.hor-spine[data-num-cols="10"] {
  width: 825px;
}
article.device-table div {
  display: flex;
  height: 75px;
}
article.device-table div:not(.spine):first-child {
  height: 75px;
}
article.device-table div.spine {
  margin-bottom: 10px;
  border-bottom: 2px solid;
  padding-bottom: 10px;
  height: 78px;
  border-color: #ffffff;
}
article.device-table span {
  width: 75px;
  font-size: 19px;
}
article.device-table span.spine {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 78px;
  font-weight: 600;
  border-color: #ffffff;
}
article.device-table span.spine:first-child {
  align-items: flex-end;
  margin-right: 10px;
  border-right: 2px solid;
  padding-right: 10px;
}
article.device-table span.spine:last-child {
  align-items: flex-start;
  margin-left: 10px;
  border-left: 2px solid;
  padding-left: 10px;
}
article.device-table.vert-spine span:not(.spine) {
  align-self: flex-end;
  box-sizing: border-box;
  padding-bottom: 10px;
  transform-origin: left top;
  rotate: 315deg;
  translate: 0px 7px;
  text-align: left;
  white-space: nowrap;
}
article.device-table div.spine span {
  align-self: flex-end;
  transform-origin: left top;
  rotate: 315deg;
  translate: 0px 7px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
article.device-table.hor-spine div:not(.spine) span {
  align-self: center;
  box-sizing: border-box;
  padding-right: 10px;
  text-align: right;
}
article.device-table a {
  position: relative;
  display: block;
  box-sizing: border-box;
  border: 2px solid;
  width: 75px;
  height: 75px;
  background-color: rgba(160, 160, 160, 0.9);
  border-color: #707070;
}
article.device-table a.error,
article.device-table a.warning,
article.device-table a.ok {
  pointer-events: auto;
}
article.device-table a.error::before,
article.device-table a.warning::before,
article.device-table a.ok::before,
article.device-table a.error::after,
article.device-table a.warning::after,
article.device-table a.ok::after {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
article.device-table a.error::before,
article.device-table a.warning::before,
article.device-table a.ok::before {
  width: 27px;
  height: 27px;
  background-color: #ffffff;
  border-radius: 13.5px;
  content: "";
}
article.device-table a.error::after,
article.device-table a.warning::after,
article.device-table a.ok::after {
  width: 40px;
  height: 40px;
  font-family: "Televic Icon";
  font-size: 40px;
  text-decoration: none;
}
article.device-table a.error {
  background-color: #e00000;
}
article.device-table a.error::after {
  color: #000000;
  content: "\f135";
}
article.device-table a.warning {
  background-color: #e0e000;
}
article.device-table a.warning::after {
  color: #000000;
  content: "\f1f1";
}
article.device-table a.ok {
  background-color: #c0c0c0;
}
article.device-table a.ok::after {
  color: #009000;
  content: "\f269";
}
article.device-table a:active {
  background-color: #404040;
}
article.device-table a:active::before {
  background-color: #404040;
}
article.device-table a:active::after {
  color: #ffffff;
}
article.notebook {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
article.notebook div.tabs {
  position: relative;
  display: flex;
  justify-content: center;
}
article.notebook div.tabs a.button:first-child {
  border-right-width: 1px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
article.notebook div.tabs a.button:not(:first-child):not(:last-child) {
  border-left-width: 1px;
  border-right-width: 1px;
  border-radius: 0px;
}
article.notebook div.tabs a.button:last-child {
  border-left-width: 1px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
article.notebook div.tabs::after {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 50%;
  translate: 0px -50%;
  z-index: -1;
  height: 2px;
  background-color: #ffffff;
  opacity: 0.5;
  content: "";
}
article.notebook div.pages > div {
  display: none;
  height: 100%;
}
article.notebook[data-active-item="0"] div.tabs a.button:nth-child(1) {
  background-color: #0000c0;
  pointer-events: none;
}
article.notebook[data-active-item="0"] div.pages > div[data-item="0"] {
  display: block;
}
article.notebook[data-active-item="1"] div.tabs a.button:nth-child(2) {
  background-color: #0000c0;
  pointer-events: none;
}
article.notebook[data-active-item="1"] div.pages > div[data-item="1"] {
  display: block;
}
article.notebook[data-active-item="2"] div.tabs a.button:nth-child(3) {
  background-color: #0000c0;
  pointer-events: none;
}
article.notebook[data-active-item="2"] div.pages > div[data-item="2"] {
  display: block;
}
article.notebook[data-active-item="3"] div.tabs a.button:nth-child(4) {
  background-color: #0000c0;
  pointer-events: none;
}
article.notebook[data-active-item="3"] div.pages > div[data-item="3"] {
  display: block;
}
article.notebook[data-active-item="4"] div.tabs a.button:nth-child(5) {
  background-color: #0000c0;
  pointer-events: none;
}
article.notebook[data-active-item="4"] div.pages > div[data-item="4"] {
  display: block;
}
article.notebook[data-active-item="5"] div.tabs a.button:nth-child(6) {
  background-color: #0000c0;
  pointer-events: none;
}
article.notebook[data-active-item="5"] div.pages > div[data-item="5"] {
  display: block;
}
article.notebook[data-active-item="6"] div.tabs a.button:nth-child(7) {
  background-color: #0000c0;
  pointer-events: none;
}
article.notebook[data-active-item="6"] div.pages > div[data-item="6"] {
  display: block;
}
article.notebook[data-active-item="7"] div.tabs a.button:nth-child(8) {
  background-color: #0000c0;
  pointer-events: none;
}
article.notebook[data-active-item="7"] div.pages > div[data-item="7"] {
  display: block;
}
article.notebook[data-active-item="8"] div.tabs a.button:nth-child(9) {
  background-color: #0000c0;
  pointer-events: none;
}
article.notebook[data-active-item="8"] div.pages > div[data-item="8"] {
  display: block;
}
article.notebook[data-active-item="9"] div.tabs a.button:nth-child(10) {
  background-color: #0000c0;
  pointer-events: none;
}
article.notebook[data-active-item="9"] div.pages > div[data-item="9"] {
  display: block;
}
article.card {
  border: 2px solid;
  background-color: #000032;
  border-color: #ffffff;
}
article.card hr.separator {
  background-color: #ffffff;
  opacity: 1;
}
article.dialog {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 2px solid;
  width: 512px;
  height: 256px;
  background-color: #000032;
  border-color: #e0e0e0;
  border-radius: 5px;
  box-shadow: 5px 5px 5px #000000;
}
article.dialog header {
  padding: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #000000;
  background-color: #e0e0e0;
}
article.dialog.error {
  border-color: #e00000;
}
article.dialog.error header {
  color: #ffffff;
  background-color: #e00000;
}
article.dialog.ok {
  border-color: #009000;
}
article.dialog.ok header {
  color: #ffffff;
  background-color: #009000;
}
article.tray {
  position: absolute;
  left: 125.33333333px;
  top: 0px;
  display: flex;
  column-gap: 10px;
  padding: 5px;
  background-color: #404040;
  border-radius: 0px 0px 5px 5px;
}
article.tray i.connection-tray-icon {
  font-family: "Televic Icon";
  font-size: 40px;
  color: #ffffff;
}
article.tray i.connection-tray-icon.error {
  color: #e00000;
}
article.tray i.connection-tray-icon.warning {
  color: #e0e000;
}
article.tray i.connection-tray-icon::after {
  content: "\f1b8";
}
article.tray i.connection-tray-icon.error::after {
  content: "\f1b7";
}
article.tray i.connection-tray-icon.warning::after {
  content: "\f1b6";
}
article.tray i.wayside-tray-icon {
  font-family: "Televic Icon";
  font-size: 40px;
  color: #ffffff;
}
article.tray i.wayside-tray-icon.error {
  color: #e00000;
}
article.tray i.wayside-tray-icon.warning {
  color: #e0e000;
}
article.tray i.wayside-tray-icon::after {
  content: "\f1b8";
}
article.tray i.wayside-tray-icon.error::after {
  content: "\f1b7";
}
article.tray i.wayside-tray-icon.warning::after {
  content: "\f1b6";
}
article.tray i.gnss-tray-icon {
  font-family: "Televic Icon";
  font-size: 40px;
  color: #ffffff;
}
article.tray i.gnss-tray-icon.error {
  color: #e00000;
}
article.tray i.gnss-tray-icon.warning {
  color: #e0e000;
}
article.tray i.gnss-tray-icon::after {
  content: "\f29b";
}
article.tray i.gnss-tray-icon.error::after {
  content: "\f29a";
}
article.tray i.gnss-tray-icon.warning::after {
  content: "\f29a";
}
article.tray i.running {
  animation: icon-spin reverse 0.75s linear 4;
}
article.floor-plan {
  position: relative;
  width: 773px;
  height: 221px;
  background-image: url("car-floor-plan.svg");
}
article.floor-plan > * {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: none;
}
article.floor-plan a.camera-button {
  position: absolute;
}
article.camera {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #000000;
}
article.camera > * {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
article.camera p {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
}
article.camera video {
  width: 100%;
  height: 100%;
}
article.camera-grid {
  display: flex;
  flex-wrap: wrap;
}
article.camera-grid div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  aspect-ratio: 4 / 3;
  background-color: #000000;
  pointer-events: auto;
  cursor: pointer;
}
article.camera-grid h2 {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  pointer-events: none;
}
article.camera-grid div:nth-child(1) h2,
article.camera-grid div:nth-child(2) h2 {
  top: -10px;
  translate: -50% -100%;
}
article.camera-grid div:nth-child(3) h2,
article.camera-grid div:nth-child(4) h2 {
  bottom: -10px;
  translate: -50% 100%;
}
article.camera-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  background-color: #000000;
}
strong {
  font-weight: 600;
}
em {
  font-style: italic;
}
span.error-tag,
span.warning-tag,
span.ok-tag,
span.info-tag,
span.debug-tag {
  border: 1px solid;
  padding: 0.05em 0.3em;
  text-transform: lowercase;
  border-radius: 5px;
}
span.error-tag {
  font-weight: 600;
  color: #e00000;
  border-color: #e00000;
}
span.warning-tag {
  font-weight: 600;
  color: #e0e000;
  border-color: #e0e000;
}
span.ok-tag {
  color: #009000;
  border-color: #009000;
}
code {
  border: 1px solid;
  padding: 2px;
  font-family: monospace, serif;
}
i.error-badge,
i.warning-badge,
i.ok-badge,
i.info-badge {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
}
i.error-badge::before,
i.warning-badge::before,
i.ok-badge::before,
i.info-badge::before,
i.error-badge::after,
i.warning-badge::after,
i.ok-badge::after,
i.info-badge::after {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
i.error-badge::before,
i.warning-badge::before,
i.ok-badge::before,
i.info-badge::before {
  width: 27px;
  height: 27px;
  background-color: #ffffff;
  border-radius: 13.5px;
  content: "";
}
i.error-badge::after,
i.warning-badge::after,
i.ok-badge::after,
i.info-badge::after {
  width: 40px;
  height: 40px;
  font-family: "Televic Icon";
  font-size: 40px;
  color: #000000;
}
i.error-badge::after {
  content: "\f135";
}
i.warning-badge::after {
  content: "\f1f1";
}
i.ok-badge::after,
i.info-badge::after {
  content: "\f269";
}
span.device {
  display: inline-flex;
  column-gap: 7px;
  vertical-align: -8px;
}
span.device i {
  display: flex;
  justify-content: center;
  font-family: "Televic Icon";
  font-size: 35px;
  color: #ffffff;
  opacity: 0.5;
}
span.device i:nth-child(1) {
  width: 22px;
}
span.device i:nth-child(1)::after {
  content: "\f2d5";
}
span.device i:nth-child(2) {
  width: 28px;
}
span.device i:nth-child(2)::after {
  content: "\f367";
}
span.device i:nth-child(3) {
  width: 34px;
}
span.device i:nth-child(3)::after {
  content: "\f2dc";
}
span.device.loudspeaker i:nth-child(1),
span.device.led i:nth-child(2),
span.device.tft i:nth-child(3) {
  opacity: 1;
}
hr.separator {
  margin: 0px;
  border: none;
  background-color: #ffffff;
  opacity: 0.5;
}
.flex:not(.flex-col) > hr.separator {
  width: 2px;
}
.flex.flex-col > hr.separator {
  height: 2px;
}
article.fork {
  width: 43px;
  height: 88px;
  background-color: #a0a0a0;
  -webkit-mask-image: url("fork.svg");
  mask-image: url("fork.svg");
}
body {
  overflow: hidden;
  font-family: "Televic Latin", sans-serif;
  font-size: 17px;
  color: #ffffff;
  background-color: #000000;
}
main {
  width: 1024px;
  height: 768px;
  background-color: #000032;
}
.main > section {
  width: 813.33333333px;
}
article.camera-grid div {
  cursor: default;
}