@charset "UTF-8";
.langs img {
  width: 2rem;
  height: auto;
  margin: 0.25rem;
}

.orange {
  color: orange;
}

.red {
  color: #dc203c;
}

.ui-dark .red {
  color: #e64c63;
}

html {
  font-size: 16px;
  font-family: "LatoLatinWeb", Helvetica, sans-serif;
  height: 100%;
  width: 100%;
}

body {
  font-size: 1rem;
  height: 100%;
  width: 100%;
  background-position: bottom;
}

main {
  display: flex;
  min-height: 100%;
  justify-content: center;
}

main.etollApp {
  height: 100%;
}

.ui-light body {
  background-color: #f8f8f8;
  color: #111;
}

.ui-dark html {
  background: black;
}
.ui-dark body {
  background-color: #111;
  background-image: radial-gradient(#161a2c 0%, #1a1a1a 40%, #111 80%);
  color: #eee;
  background-size: 300% 200%;
  background-position: bottom;
}
.ui-dark .leaflet-bar a {
  background: #222;
  color: white;
}

.border {
  border: 1px solid #888;
  border-radius: 0.25rem;
  padding: 0.1rem 0.2rem;
  text-align: center;
  display: inline-block;
  height: 1.4rem;
}

.sat-border {
  width: 2rem;
}

.gsm-border {
  width: 2rem;
}

h1 {
  font-weight: 900;
  margin-left: 1rem;
  letter-spacing: -0.05rem;
  font-size: 1.5rem;
}

i {
  font-size: 0.85rem;
  display: inline-block;
  font-family: "FontAwesome";
  font-style: normal;
}

p {
  margin: 0;
  line-height: 1.5rem;
}
p.text {
  margin-bottom: 1rem;
}

em {
  font-family: "Dosis";
  font-style: normal;
  line-height: 0.9;
}

strong {
  font-weight: 700;
}

b {
  font-weight: 900;
}

hr {
  border: 0;
  width: 100%;
}
hr.spacer-small {
  height: 0;
  display: block;
  border: 0;
  border-bottom: 1em solid transparent;
  margin: 0;
}
hr.spacer {
  height: 0;
  display: block;
  border: 0;
  border-bottom: 5em solid transparent;
  margin: 0;
}
hr.separator {
  border: 0;
  border-top: 1px solid rgba(136, 136, 136, 0.25);
}

.smallicon {
  text-align: center;
  font-size: 0.6rem;
}

.unit {
  opacity: 0.5;
  font-weight: 700;
  font-size: 1rem;
}

fieldset {
  padding: 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  /*box-shadow: 0 0 1.5rem -1rem #888;*/
  margin-bottom: 1.5rem;
}
.ui-light fieldset {
  background: #fff;
  box-shadow: 0 0.5rem 2rem -1rem #ccc;
}
.ui-dark fieldset {
  background: rgba(44, 44, 44, 0.75);
}
fieldset.simple {
  background: transparent;
  box-shadow: none;
}

legend {
  display: block;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  opacity: 0.6;
}

label.onoff {
  position: relative;
  height: 2rem;
  /* display: inline-block; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
label.onoff input {
  opacity: 0;
}
label.onoff .btn {
  content: "";
  height: 2rem;
  width: 3rem;
  border-radius: 5rem;
  display: inline-block;
  transition-timing-function: ease-in-out;
  transition-duration: 0.25s;
  transition-property: background-color;
  box-sizing: content-box;
}
.ui-light label.onoff .btn {
  border: 2px solid #ccc;
  background-color: #ccc;
}
.ui-dark label.onoff .btn {
  border: 2px solid #555;
  background-color: #555;
}
label.onoff .btn .ball {
  background: white;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: block;
  transform: translateX(0);
  transition-timing-function: ease-in-out;
  transition-duration: 0.25s;
  transition-property: transform;
}
label.onoff input:checked + .btn {
  border: 2px solid #03aa52;
  background-color: #03aa52;
}
label.onoff input:checked + .btn .ball {
  transform: translateX(1rem);
}

#etoll-test.home .msg {
  background: rgba(255, 255, 255, 0.04);
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  color: #197ce6;
  font-weight: 900;
}
#etoll-test.home .msg.error {
  color: #ffe300;
}
#etoll-test.home .msg.ok {
  color: lime;
}
#etoll-test.home .bizarea {
  position: relative;
  height: 3em;
  width: 9em;
  font-size: 1.25rem;
  margin: 0 auto;
}
#etoll-test.home .bizID {
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
  font-family: monospace;
  padding: 0.5rem;
  border: 0.2rem solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  outline: 0;
  background: #fff;
  z-index: 11;
  border: 0.2rem solid #dd203c;
  width: 9em;
  text-transform: uppercase;
}
#etoll-test.home .bizIDmask {
  width: 8em;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  text-align: left;
  font-family: monospace;
  padding: 0.5rem;
  border-radius: 0.5rem;
  outline: 0;
}
#etoll-test.home input[type=submit] {
  background: #dd203c;
  color: #fff;
  border: 0;
  padding: 0.5rem;
  border-radius: 0.25rem;
  font-weight: 600;
  cursor: pointer;
}
#etoll-test.home input[type=checkbox] {
  vertical-align: middle;
  height: 1rem;
  margin-right: 0.5rem;
}
#etoll-test.home div.input {
  margin: 0.5rem;
  vertical-align: middle;
}
#etoll-test.home div.input.checkbox label {
  font-size: 0.85rem;
  opacity: 0.75;
}
#etoll-test.home .subheader {
  opacity: 0.75;
}
#etoll-test.home #hero {
  align-items: flex-end;
  padding: 3rem 1rem;
}
#etoll-test.home {
  background: #eee;
  background: linear-gradient(#f0f0f0 50%, #d1d1d1 90%);
  background-size: 200% 100%;
  background-position: center;
}
#etoll-test.home .content {
  margin: 0 auto;
  width: 100%;
  padding: 1rem;
}
#etoll-test.home .content.light {
  background: #f9f9f9;
}
#etoll-test.home .content.dark {
  background: #222;
  color: #eee;
}
#etoll-test.home .pagehead {
  margin: 0;
  padding: 0;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
}
#etoll-test.home .pagehead > .row {
  max-width: 60rem;
  margin: 0 auto;
  height: 100%;
  color: white;
  min-height: 100vh;
}
#etoll-test.home .row figure {
  margin: 0;
  padding-top: 5rem;
  position: relative;
}
#etoll-test.home .row figure picture,
#etoll-test.home .row figure img {
  height: auto;
  width: auto;
  max-height: 70vh;
  margin: 0;
  max-width: 100%;
}
#etoll-test.home h1 {
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
}
#etoll-test.home h2 {
  font-size: 1.75rem;
  font-weight: 900;
  color: #e64c63;
}
#etoll-test.home h3 {
  color: #e64c63;
  margin: 0;
  font-size: 1rem;
}
#etoll-test.home .big {
  font-size: 1.5rem;
  font-weight: 500;
}
#etoll-test.home p {
  letter-spacing: 0.01rem;
}
#etoll-test.home .spacer {
  height: 4rem;
}
#etoll-test.home .icon {
  font-family: "FontAwesome";
}
#etoll-test.home .light .subcategories > div > div {
  background: #fff;
}
#etoll-test.home .dark .subcategories > div > div {
  background: #333;
  color: #eee;
}
#etoll-test.home .subcategories {
  align-items: stretch;
  padding-top: 3rem;
}
#etoll-test.home .subcategories > div {
  padding: 0.5rem 0;
  align-items: center;
}
#etoll-test.home .subcategories > div > div .icon {
  font-family: "FontAwesome";
  font-size: 1.25em;
  width: 2em;
  height: 2em;
  margin: 0.75em auto;
  line-height: 2em;
  border-radius: 0.5em;
  color: #fff;
  background: rgba(230, 76, 99, 0.9);
}
#etoll-test.home .subcategories > div > div {
  height: 100%;
  margin: 0;
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
}
#etoll-test.home .etoll {
  background-color: #dc203c;
  color: white;
}
#etoll-test.home .etoll p {
  margin: 1rem 0;
}
#etoll-test.home .etoll a {
  color: white;
  opacity: 0.75;
  font-weight: 900;
}
#etoll-test.home .other {
  padding: 0;
}
#etoll-test.home .other > div > div > div {
  margin: 0;
  padding: 1rem;
  text-align: center;
  background: #e0e0e0;
}
.pagehead {
  background-image: url(/img/hero-m.jpg);
  background-position: center;
}

@media only screen and (min-width: 960px) {
  .pagehead {
    background-image: url(/img/hero.jpg);
    background-position: center;
  }
}
@media only screen and (min-width: 540px) {
  /*  60em*/
  #etoll-test.home h1 {
    font-size: 4rem;
  }
  #etoll-test.home .content {
    margin: 10rem auto;
    padding: 3rem;
    border-radius: 1rem;
    width: 90%;
  }
  #etoll-test.home .content.start {
    margin-top: 0;
  }
  #etoll-test.home .pagehead {
    min-height: 90vh;
  }
  #etoll-test.home .pagehead > .row {
    min-height: 90vh;
  }
  #etoll-test.home .pagehead.full {
    min-height: 100vh;
  }
  #etoll-test.home .pagehead.full > .row {
    min-height: 100vh;
  }
  #etoll-test.home .subcategories > div {
    padding: 0.5rem;
  }
  #etoll-test.home .other {
    padding: 0;
  }
  #etoll-test.home .other > div > div > div {
    margin: 0 0.5rem;
    border-radius: 1rem;
    padding: 1rem;
    text-align: center;
    background: #e0e0e0;
  }
  #etoll-test.home .other .left > div {
    margin-bottom: 10rem;
  }
}
@media only screen and (min-width: 960px) {
  /*  60em*/
  #etoll-test.home #hero {
    padding: 0;
    align-items: center;
  }
  #etoll-test.home .pagehead {
    min-height: 80vh;
  }
  #etoll-test.home .pagehead > .row {
    min-height: 80vh;
  }
  #etoll-test.home .pagehead.full {
    min-height: 100vh;
  }
  #etoll-test.home .pagehead.full > .row {
    min-height: 100vh;
  }
  #etoll-test.home .other {
    padding: 0;
  }
  #etoll-test.home .other > div > div > div {
    margin: 0 0.5rem;
    border-radius: 1rem;
    padding: 1rem;
    text-align: center;
    background: #e0e0e0;
  }
  #etoll-test.home .other .left > div {
    margin-bottom: 0;
  }
}
#footer {
  background: black;
  color: #ccc;
  padding: 3rem 0;
}

#mainmenu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  justify-content: space-between;
  height: 100%;
  align-items: center;
}
#mainmenu li {
  flex: 1 1 25%;
  position: relative;
  height: 100%;
  width: 25%;
  cursor: pointer;
  z-index: 1;
}
#mainmenu li > a {
  text-align: center;
  display: flex;
  flex-direction: column;
  color: inherit;
  align-content: center;
  text-decoration: none;
  justify-content: center;
  height: 3rem;
  width: 100%;
  padding: 0.5rem;
}
#mainmenu li > a p {
  margin: 0;
  z-index: 0;
}
#mainmenu li > a span {
  z-index: 0;
  font-size: 0.7rem;
  padding-top: 0.25rem;
}
#mainmenu li a.active,
#mainmenu li a:active {
  color: #197ce6;
}
#mainmenu li a.selected {
  color: #197ce6;
}

#msgGlobal {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999999;
  justify-content: center;
  align-items: center;
}
.ui-light #msgGlobal {
  background: rgba(238, 238, 238, 0.85);
}
.ui-dark #msgGlobal {
  background: rgba(0, 0, 0, 0.85);
}
.noNetwork #msgGlobal {
  display: flex;
}
.noNetwork #msgGlobal > .no-network {
  transition-property: opacity;
  transition-duration: 0s;
  transition-delay: 1s;
  background: red;
  color: white;
  padding: 1rem;
  border-radius: 0.6rem;
  font-weight: 900;
  margin: 1rem;
}

#mainScreen {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: stretch;
  width: 100%;
  align-items: center;
  overflow: hidden;
}
#mainScreen .top {
  flex: 1 1 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}
#mainScreen .bottom {
  max-width: 700px;
  width: 100%;
  flex: 0 0 3rem;
}

.progressbar {
  width: 100%;
  height: 3rem;
  background: #999;
  display: block;
  border-radius: 0.25rem;
  position: relative;
  overflow: hidden;
}
.progressbar > span {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 3rem;
  color: white;
  font-weight: 900;
  font-size: 1.5rem;
}
.progressbar > .progress {
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  height: 100%;
}
.progressbar .unit {
  opacity: 0.75;
}

dl.accordion {
  margin: 0;
  padding: 0;
}
dl.accordion dd {
  display: none;
  padding: 1rem 0;
  margin: 0;
}
dl.accordion dd.open {
  display: block;
}
dl.accordion dt {
  position: relative;
  margin: 0;
  padding: 0.5rem 0;
  border-top: 1px solid #eee;
  padding-right: 1.5rem;
}
dl.accordion dt:after {
  font-family: "FontAwesome";
  cursor: pointer;
  content: "\f054";
  position: absolute;
  text-align: right;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
dl.accordion dt.open:after {
  content: "\f078";
}
dl.accordion dt:first-of-type {
  border: 0;
}

.balance-alert {
  position: absolute;
  text-align: center;
  font-size: 1rem;
  qtop: -100000px;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 3rem);
  pointer-events: none;
  z-index: 999999999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.balance-alert .alert_total {
  font-size: 2rem;
}
.balance-alert .unit {
  font-size: 1rem;
  opacity: 0.75;
}
.balance-alert .inner {
  position: absolute;
  color: white;
  padding: 0.75rem;
  border-radius: 0.6rem;
  background: #222;
  opacity: 0;
  box-shadow: 0 0.5rem 2rem -0.75rem black;
  margin-bottom: 12rem;
}
.balance-alert .alert-title:after {
  font-weight: 900;
}
.balance-alert.active .inner {
  animation-name: alert;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
.balance-alert.add .inner {
  background: #03aa52;
}
.balance-alert.add .alert-title:after {
  content: "ZASILONO KONTO";
}
.balance-alert.add .alert-title.en:after {
  content: "FUNDS ADDED";
}
.balance-alert.sub .inner {
  background: orange;
}
.balance-alert.sub .alert-title:after {
  content: "POBRANO ŚRODKI";
}
.balance-alert.sub .alert-title.en:after {
  content: "FUNDS COLLECTED";
}
.balance-alert.low .inner {
  background: #dc203c;
}
.balance-alert.low .alert-title:after {
  content: "NISKI STAN KONTA";
}
.balance-alert.low .alert-title.en:after {
  content: "FUNDS LOW";
}
.balance-alert.zero .inner {
  background: #dc203c;
}
.balance-alert.zero .alert-title:after {
  content: "WYCZERPANO ŚRODKI";
}
.balance-alert.zero .alert-title.en:after {
  content: "OUT OF FUNDS";
}
.balance-alert .title {
  font-size: 0.8rem;
}
@keyframes alert {
  from {
    transform: scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}

.etollApp {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.etollModal .statusModal {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  justify-content: center;
  align-items: center;
}
.etollModal .statusModal .statusModalMsg {
  display: flex;
  padding: 1rem 2rem;
  background: black;
  border-radius: 0.5rem;
  margin: 0 1rem 14rem 1rem;
  text-align: center;
  font-weight: 700;
  color: #eee;
}
.noNetwork .statusModal,
.statusModal {
  display: none;
}

#etollApp_info .info-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 700px;
  width: 100%;
  height: 100%;
  align-items: center;
  margin: 0 auto;
  justify-content: space-between;
  padding: 1rem;
  overflow-y: auto;
  overflow-x: hidden;
}
#etollApp_info .info-panel .status-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#etollApp_info .info-panel .status-row .gsm-label,
#etollApp_info .info-panel .status-row .sat-label,
#etollApp_info .info-panel .status-row .status-label {
  display: flex;
  height: 1.4rem;
  align-items: center;
}
#etollApp_info .info-panel .status-row .sat-label {
  justify-content: center;
}
#etollApp_info .info-panel .status-row .gsm-label.online i,
#etollApp_info .info-panel .status-row .sat-label.online i,
#etollApp_info .info-panel .status-row .status-label.online i {
  color: #03aa52;
}
#etollApp_info .info-panel .status-row .gsm-label.offline i,
#etollApp_info .info-panel .status-row .sat-label.offline i,
#etollApp_info .info-panel .status-row .status-label.offline i {
  color: #dc203c;
}
#etollApp_info .info-panel .status-row .gsm-label.sleep i,
#etollApp_info .info-panel .status-row .sat-label.sleep i,
#etollApp_info .info-panel .status-row .status-label.sleep i {
  color: orange;
}
#etollApp_info .info-panel .device-row {
  display: flex;
  justify-content: center;
  text-align: center;
}
#etollApp_info .info-panel .device-row .device-type {
  font-size: 1rem;
}
#etollApp_info .info-panel .device-row .device-biz-id {
  font-size: 1.5rem;
  font-weight: 900;
  font-family: monospace;
}
#etollApp_info .info-panel .device-row .device-imei {
  font-size: 0.8rem;
  opacity: 0.66;
}
#etollApp_info .info-panel .gauge-row {
  position: relative;
  display: flex;
  justify-content: center;
  z-index: -1;
}
.ui-light #etollApp_info .info-panel .gauge-row.stop .gps-speed {
  color: #000;
}
.ui-light #etollApp_info .info-panel .gauge-row.stop .gauge .value {
  stroke: transparent !important;
}
.ui-dark #etollApp_info .info-panel .gauge-row.stop .gps-speed {
  color: #fff;
}
#etollApp_info .info-panel .gauge-row.safe .gps-speed {
  color: #03aa52;
}
#etollApp_info .info-panel .gauge-row.safe .gauge .value {
  stroke: #03aa52 !important;
}
#etollApp_info .info-panel .gauge-row.normal .gps-speed {
  color: #197ce6;
}
#etollApp_info .info-panel .gauge-row.normal .gauge .value {
  stroke: #197ce6 !important;
}
#etollApp_info .info-panel .gauge-row.warning .gps-speed {
  color: orange;
}
#etollApp_info .info-panel .gauge-row.warning .gauge .value {
  stroke: orange !important;
}
#etollApp_info .info-panel .gauge-row.max .gps-speed {
  color: #dc203c;
}
#etollApp_info .info-panel .gauge-row.max .gauge .value {
  stroke: #dc203c !important;
}
#etollApp_info .info-panel .gauge-row .speed-gauge {
  width: 19em;
  height: 19em;
  top: 0.5em;
  position: absolute;
  padding: 1rem;
}
#etollApp_info .info-panel .gauge-row .speed-gauge .gauge {
  width: 100%;
  height: 100%;
}
#etollApp_info .info-panel .gauge-row .speed-gauge .gauge .dial {
  stroke: rgba(128, 128, 128, 0.25);
  stroke-width: 6;
  fill: rgba(0, 0, 0, 0);
}
#etollApp_info .info-panel .gauge-row .speed-gauge .gauge .value {
  stroke: #fff;
  stroke-width: 6;
  fill: rgba(0, 0, 0, 0);
}
#etollApp_info .info-panel .gauge-row .speed-gauge .gauge .value-text {
  fill: transparent;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1em;
}
#etollApp_info .info-panel .gauge-row .heading-ring.pulse {
  animation-name: pulse;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes pulse {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}
#etollApp_info .info-panel .gauge-row .heading-ring {
  position: absolute;
  width: 18em;
  height: 18em;
  background-image: url(/img/headingring.svg);
  background-size: 200% 100%;
  top: 1em;
}
#etollApp_info .info-panel .gauge-row .heading-ring .gps-heading {
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}
#etollApp_info .info-panel .gauge-row .heading-ring img {
  width: 100%;
  height: 100%;
}
#etollApp_info .info-panel .gauge-row .heading-ring.pulse {
  background-image: url(/img/pulse.svg);
}
.ui-dark #etollApp_info .info-panel .gauge-row .heading-ring {
  background-position: right;
}
#etollApp_info .info-panel .gauge-row .info {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 20em;
  justify-content: center;
}
#etollApp_info .info-panel .gauge-row .info .speed-info {
  text-align: center;
  margin-bottom: 1em;
  margin-top: 3em;
}
#etollApp_info .info-panel .gauge-row .info .speed-info .gps-speed {
  font-size: 4em;
  line-height: 1;
  display: block;
  transition: color ease-in-out 1s;
  font-weight: 900;
}
.ui-dark #etollApp_info .info-panel .gauge-row .info .speed-info .gps-speed {
  text-shadow: 0 0 5rem currentColor;
}
#etollApp_info .info-panel .gauge-row .info .speed-info .unit {
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  vertical-align: sub;
}
.ui-dark #etollApp_info .info-panel .gauge-row .info .speed-info .unit {
  background: #eee;
  color: #222;
}
.ui-light #etollApp_info .info-panel .gauge-row .info .speed-info .unit {
  background: #222;
  color: #eee;
}
#etollApp_info .info-panel .gauge-row .info .alt-power-info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
#etollApp_info .info-panel .gauge-row .info .alt-power-info .alt-info {
  text-align: right;
  width: 40%;
}
#etollApp_info .info-panel .gauge-row .info .alt-power-info .alt-info .gps-altitude {
  font-size: 1.75em;
  font-weight: 700;
}
#etollApp_info .info-panel .gauge-row .info .alt-power-info .divider {
  margin-right: 1rem;
  padding-left: 1rem;
  height: 100%;
}
.ui-dark #etollApp_info .info-panel .gauge-row .info .alt-power-info .divider {
  border-right: 1px solid #eee;
  opacity: 0.25;
}
.ui-light #etollApp_info .info-panel .gauge-row .info .alt-power-info .divider {
  border-right: 1px solid #222;
  opacity: 0.25;
}
#etollApp_info .info-panel .gauge-row .info .alt-power-info .power-info {
  text-align: right;
  width: 40%;
}
#etollApp_info .info-panel .gauge-row .info .alt-power-info .power-info .nop,
#etollApp_info .info-panel .gauge-row .info .alt-power-info .power-info .bat,
#etollApp_info .info-panel .gauge-row .info .alt-power-info .power-info .vol {
  display: none;
}
#etollApp_info .info-panel .gauge-row .info .alt-power-info .power-info .power-battery,
#etollApp_info .info-panel .gauge-row .info .alt-power-info .power-info .power-voltage {
  font-size: 1.2em;
  font-weight: 700;
}
#etollApp_info .info-panel .gauge-row .info .alt-power-info .power-info.battery .bat {
  display: block;
}
#etollApp_info .info-panel .gauge-row .info .alt-power-info .power-info.voltage .vol {
  display: block;
}
#etollApp_info .info-panel .gauge-row .info .alt-power-info .power-info.nopower .nop {
  display: block;
  text-align: right;
  font-size: 0.9rem;
  font-weight: 700;
}
#etollApp_info .info-panel .balance-row {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  position: relative;
}
.ui-dark #etollApp_info .info-panel .balance-row {
  background: #222;
}
.ui-light #etollApp_info .info-panel .balance-row {
  background: #fff;
  box-shadow: 0 0rem 2rem -1rem #888;
}
#etollApp_info .info-panel .balance-row .current-balance {
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
  font-weight: 700;
  transition: 1s color ease-in-out;
}
#etollApp_info .info-panel .balance-row.low .current-balance {
  color: orange;
}
#etollApp_info .info-panel .balance-row.zero .current-balance {
  color: #dc203c;
}
#etollApp_info .info-panel.roaming .heading-ring.pulse, #etollApp_info .info-panel.offline .heading-ring.pulse {
  display: none;
}
#etollApp_info .info-panel.roaming .gauge-row, #etollApp_info .info-panel.offline .gauge-row {
  opacity: 0.1;
}
#etollApp_info .info-panel.roaming .roaming-row, #etollApp_info .info-panel.offline .offline-row {
  display: flex;
}
#etollApp_info .info-panel .roaming-row,
#etollApp_info .info-panel .offline-row {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
#etollApp_info .info-panel .roaming-row > div,
#etollApp_info .info-panel .offline-row > div {
  padding: 1rem;
  line-height: 1.25;
  border-radius: 0.6rem;
  font-weight: 900;
  font-size: 1rem;
  margin: 1rem;
  text-align: center;
  box-shadow: 0 0 6rem -1rem black;
}
.ui-light #etollApp_info .info-panel .offline-row > div {
  color: #dc203c;
  background-color: #fff;
}
.ui-dark #etollApp_info .info-panel .offline-row > div {
  color: #dc203c;
  background-color: #222;
}
.ui-light #etollApp_info .info-panel .roaming-row > div, .ui-dark #etollApp_info .info-panel .roaming-row > div {
  color: #fff;
  background-color: #197ce6;
}

#etollApp_map .map-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
#etollApp_map .map-panel .info-row {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  margin: 10px;
  background: #222;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  text-align: right;
}
.ui-dark #etollApp_map .map-panel .info-row {
  background: #222;
}
.ui-light #etollApp_map .map-panel .info-row {
  background: #fff;
}
#etollApp_map .map-panel .info-row .ui-dark .speed-status.stop .gps-speed {
  color: #fff;
}
#etollApp_map .map-panel .info-row .ui-light .speed-status.stop .gps-speed {
  color: #fff;
}
#etollApp_map .map-panel .info-row .speed-status.safe .gps-speed {
  color: #03aa52;
}
#etollApp_map .map-panel .info-row .speed-status.normal .gps-speed {
  color: #197ce6;
}
#etollApp_map .map-panel .info-row .speed-status.warning .gps-speed {
  color: orange;
}
#etollApp_map .map-panel .info-row .speed-status.max .gps-speed {
  color: #dc203c;
}
#etollApp_map .map-panel .info-row .gps-speed {
  font-weight: 900;
  font-size: 1.5rem;
  margin-right: 0.5rem;
}
#etollApp_map .map-panel .info-row .power-voltage {
  font-weight: 900;
  margin-right: 0.5rem;
}
#etollApp_map .map-panel .map-row.leaflet-container {
  background: transparent;
  font: inherit;
}
#etollApp_map .map-panel .map-row {
  width: 100%;
  height: 100%;
  z-index: 0;
}
.ui-dark #etollApp_map .map-panel .map-row .leaflet-tile-pane {
  filter: invert(1) hue-rotate(200deg) contrast(0.9) brightness(0.9);
}
#etollApp_map .map-panel .map-row .leaflet-bar {
  border: 0;
  border-radius: 0.5rem;
  overflow: hidden;
}
#etollApp_map .map-panel .map-row .gMarker.sleep {
  background-position: center;
}
#etollApp_map .map-panel .map-row .gMarker.offline {
  background-position: right center;
}
#etollApp_map .map-panel .map-row .gMarker {
  width: 64px;
  height: 64px;
  background-image: url(/img/etoll_test_marker.svg);
  background-size: 300% 100%;
  background-position: left center;
}
#etollApp_map .map-panel.roaming .leaflet-tile-pane, #etollApp_map .map-panel.offline .leaflet-tile-pane {
  opacity: 0.33;
}
#etollApp_map .map-panel .balance-row {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  background: #222;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  position: absolute;
  bottom: 1rem;
}
.ui-dark #etollApp_map .map-panel .balance-row {
  background: #222;
}
.ui-light #etollApp_map .map-panel .balance-row {
  background: #fff;
}
#etollApp_map .map-panel .balance-row .current-balance {
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
  font-weight: 700;
  transition: 1s color ease-in-out;
}
#etollApp_map .map-panel .balance-row.low .current-balance {
  color: orange;
}
#etollApp_map .map-panel .balance-row.zero .current-balance {
  color: #dc203c;
}
#etollApp_map .map-panel.roaming .roaming-row, #etollApp_map .map-panel.offline .offline-row {
  display: flex;
}
#etollApp_map .map-panel .roaming-row,
#etollApp_map .map-panel .offline-row {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  z-index: 9;
  justify-content: center;
  align-items: center;
}
#etollApp_map .map-panel .roaming-row > div,
#etollApp_map .map-panel .offline-row > div {
  padding: 1rem;
  line-height: 1.25;
  border-radius: 0.6rem;
  font-weight: 900;
  font-size: 1rem;
  margin: 1rem;
  text-align: center;
  box-shadow: 0 0 6rem -1rem black;
}
.ui-light #etollApp_map .map-panel .offline-row > div {
  color: #dc203c;
  background-color: #fff;
}
.ui-dark #etollApp_map .map-panel .offline-row > div {
  color: #dc203c;
  background-color: #222;
}
.ui-light #etollApp_map .map-panel .roaming-row > div, .ui-dark #etollApp_map .map-panel .roaming-row > div {
  color: #fff;
  background-color: #197ce6;
}

#etollApp_sub .sub-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 700px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 1rem;
  overflow-y: auto;
  overflow-x: hidden;
}
#etollApp_sub .sub-panel .btn {
  color: #fff;
  padding: 0.5rem 0.5rem;
  border-radius: 0.33rem;
  text-decoration: none;
  font-weight: 900;
  line-height: 1;
  display: inline-block;
  margin-bottom: 0.5rem;
}
#etollApp_sub .sub-panel .btn.greyBtn {
  background: #888;
}
#etollApp_sub .sub-panel .btn.greenBtn {
  background: #03aa52;
}
#etollApp_sub .sub-panel .btn.orangeBtn {
  background: orange;
}
#etollApp_sub .sub-panel .btn.redBtn {
  background: #dc203c;
}
#etollApp_sub .sub-panel h1 {
  max-width: 50%;
}
#etollApp_sub .sub-panel .progressbar .progress {
  background-color: #03aa52;
}
#etollApp_sub .sub-panel .progressbar.low .progress {
  background-color: orange;
}
#etollApp_sub .sub-panel .progressbar.zero .progress {
  background-color: #dc203c;
}

#etollApp_app .app-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 700px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 1rem;
  overflow-y: auto;
  overflow-x: hidden;
}
#etollApp_app .app-panel .logout {
  color: #fff;
  background: #dc203c;
  padding: 0.5rem 0.5rem;
  border-radius: 0.33rem;
  text-decoration: none;
  font-weight: 900;
  line-height: 1;
  display: inline-block;
}

#captcha {
  margin-bottom: 2rem;
}
#captcha img {
  height: 4rem;
  margin-top: 1rem;
  border-radius: 1rem;
}
#captcha label {
  font-size: 0.85rem;
  display: block;
  margin-bottom: 0.25rem;
}
#captcha input[type=text] {
  background: transparent;
  color: white;
  padding: 0.35rem;
  border-radius: 0.5rem;
  border: 0.2rem solid #555;
  text-align: center;
  outline: 0;
}

@media (min-height: 900px) {
  #etollApp_info .gauge-row {
    font-size: 1.25rem;
  }
}
@media (min-height: 1000px) {
  #etollApp_info .gauge-row {
    font-size: 1.5rem;
  }
}
@media (min-height: 1300px) {
  #etollApp_info .gauge-row {
    font-size: 2.5rem;
  }
}
#error {
  padding-top: 8em;
  background-color: #000;
  background-size: cover;
  background-position: center;
  color: white;
  height: 100%;
  padding-bottom: 4em;
}
#error.e500 h1 {
  font-size: 5rem;
  margin: 0;
  font-weight: 900;
}
#error h3 {
  font-size: 1.5rem;
}

#error.e500 {
  background-image: url(/img/500-m.jpg);
}

@media (min-width: 900px) {
  #error.e500 {
    background-image: url(/img/500.jpg);
  }
}
#error.e404 {
  background-image: url(/img/404-m.jpg);
}

@media (min-width: 900px) {
  #error.e404 {
    background-image: url(/img/404.jpg);
  }
}