@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/WorkSans-VariableFont_wght.ttf');
}

body {
	font-family: 'Work Sans';
	margin: 0;
	color: #000;
}

.hidden { display: none; }

#live-map {
	width: 100vw;
	height: 90vh;
	background-color: rgba(23, 58, 122, .3);
	padding: 0;
}

#map-type-controls {
  margin: 5px auto auto 5px;
  display: flex;
  flex-direction: row;
}

.map-menu {
  /*background-color: rgba(0, 0, 0, .75);*/
  background-color: rgba(0, 0, 0, .7);
  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
  width: 50px;
  height: 50px;
  margin: auto auto 5px auto;
  border-radius: 2px;
  cursor: pointer;
  display: none;
}

.map-menu.active {
  display: block;
}

#select-map {
  display: block;
}

.map-menu > div {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.map-menu-icon {
  margin: auto auto 2px auto;
}

.map-menu-icon i {
  font-size: 16px;
  /*color: rgba(255, 255, 255, .9);*/
  color: rgba(255, 255, 255, .9);
}

.map-menu-icon + p {
  /*color: rgba(255, 255, 255, .9);*/
  color: rgba(255, 255, 255, .9);
  margin: 2px auto auto auto;
}

#map-zoom-controls {
  margin: auto 5px auto auto;
}

#show-zoom-controls {
  display: block;
}

#map-zoom-controls .map-menu-icon {
  margin: auto;
}

#map-zoom-controls .map-menu-icon i {
  font-size: 21px;
}

#map-user-controls {
  margin: auto auto auto 5px
}

#user-show-controls {
  display: block;
}


.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  margin: 0;
  width: 100%; /* Full-width */
  height: 5px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb,
.slider::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: hsl(121, 100%, 53%);
  border: 2px solid #333;
  box-shadow: 0 0 15px 4px #00fd0a;
  -webkit-appearance: none;
  cursor: pointer;
}

.slider::-webkit-slider-thumb::before,
.slider::-moz-range-thumb::before {
  position: absolute;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "+";
  color: red;
}

#trip-video-controls {
  display: grid;
  grid-auto-flow: column;
  padding: 0 15%;
  margin: 15px auto;
}

#trip-video-controls > div {
  cursor: pointer;
  align-self: center;
  display: flex;
}

#trip-video-controls > div i {
  margin: auto;
}

#trip-video-controls > div[data-playing="false"] .fa-pause,
#trip-video-controls > div[data-playing="true"] .fa-play {
  display: none;
}

#trip-video-controls > div[data-playing="false"] .fa-play,
#trip-video-controls > div[data-playing="true"] .fa-pause {
  display: block;
}


.popup-window {
  width: 120px;
  max-height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 10px 0;
  align-items: center;
  justify-content: center;
}

.popup-window > div {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
}

.popup-window > div > * {
  margin: auto;
}

#live-map .pulse {
  position: absolute;
  z-index: -1;
  top: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%) rotateX(55deg);
          transform: translateX(-50%) rotateX(55deg);
}

#live-map .pulse::after {
  display: block;
  width: 50px;
  height: 50px;
  content: '';
  -webkit-animation: pulsate 2s ease-out;
          animation: pulsate 2s ease-out;
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  opacity: 0;
  border-radius: 50%;
  box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.3);
}

#live-map .pulse.SoundCloud::after { box-shadow: 0 0 6px 3px rgba(232, 128, 0, 0.3), 0 0 1px 1px rgba(0, 0, 0, 0.2); }
#live-map .pulse.Terminal::after { box-shadow: 0 0 6px 3px rgba(0, 120, 0, 0.3), 0 0 1px 1px rgba(0, 0, 0, 0.2); }
#live-map .pulse.VirginAmerica::after { box-shadow: 0 0 6px 3px rgba(148, 73, 280, 0.3), 0 0 1px 1px rgba(0, 0, 0, 0.2); }
#live-map .pulse.VeryBlue::after { box-shadow: 0 0 6px 3px rgba(6, 37, 155, 0.3), 0 0 1px 1px rgba(0, 0, 0, 0.2); }
#live-map .pulse.WitchingHour::after { box-shadow: 0 0 6px 3px rgba(178, 19, 46, 0.3), 0 0 1px 1px rgba(0, 0, 0, 0.2); }


@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
            transform: scale(0.1, 0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
    opacity: 0;
  }
}

@keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
            transform: scale(0.1, 0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
    opacity: 0;
  }
}

#live-map .engine-on .pulse {
	display: block;
}
#live-map .engine-off .pulse {
	display: none;
}

#live-map .shadow {
	background: rgba(0, 0, 0, 0.2);
  filter: blur(3px);
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: absolute;
  left: 50%;
  top: 51px;
  -webkit-transform: translate(-50%, -50%) rotateX(77deg);
  -moz-transform: translate(-50%, -50%) rotateX(77deg);
  -o-transform: translate(-50%, -50%) rotateX(77deg);
  -ms-transform: translate(-50%, -50%) rotateX(77deg);
  transform: translate(-50%, -50%) rotateX(77deg);
  -webkit-animation: PinPulsate 2s ease;
  animation: PinPulsate 2s ease;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

#live-map .engine-on .shadow {
	display: none;
}
#live-map .engine-off .shadow {
	display: block;
}

#live-map .engine-off > img {
	-webkit-animation: MarkerPulsate 2s ease;
    animation: MarkerPulsate 2s ease;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@keyframes MarkerPulsate {
    0%,
    20%,
    50%,
    80%,
    100% { transform: translateY(-4px) }
    40% { transform: translateY(-12px) }
    60% { transform: translateY(-8px) }
}

.gm-style-iw.gm-style-iw-c {
  padding: 2px;
  border-radius: 2px !important;
  overflow: visible !important;
}

/******** POPUP PARENT *********/

.gm-style-iw.gm-style-iw-c:focus-visible {
  outline: none;
}

.gm-style-iw-d {
  overflow: unset !important;
}

.popup-window > div {
  margin: 2px auto;
  width: 100%;
}

.popup-window p {
  font-size: 9px;
}

/*** USER ***/
.popup-window .user {
  grid-column-start: 1;
  grid-column-end: 3;
  text-align: center;
}

.popup-window .user p {
  font-size: 12px;
  margin: auto 0;
  font-weight: 700;
  text-align: center;
}

/*** DATETIME ***/
.popup-window .clock {
	flex-direction: row;
  grid-column-start: 1;
  grid-column-end: 3;
}


.popup-window .clock > div {
	display: flex;
	flex-direction: row;
	margin: auto;
}

.infowindow-active .popup-window .clock i {
	display: block;
}
.popup-window .clock p {
	font-weight: 500;
	margin: auto;
}
.popup-window .clock i {
	font-size: 9px;
	margin: 0 2px 0 auto;
}

/*** SPEED ***/
.popup-window .speed {
	flex-direction: row;
  display: none;
  grid-column-start: 1;
  grid-column-end: 3;
}

.popup-window[data-engine-on="true"] .speed {
	display: flex;
}

.popup-window .speed > div {
	display: flex;
	flex-direction: row;
	margin: auto;
}

.popup-window .speed i {
	font-size: 10px;
	margin: 0 2px 0 auto;
}

.popup-window .speed p {
	font-weight: 500;
	margin: 0 2px 0 2px;
}

/*** LATENCY ***/
.popup-window .latency {
	flex-direction: column;
  display: none;
  grid-column-start: 1;
  grid-column-end: 3;
}

.popup-window[data-engine-on="true"] .latency {
	display: flex;
}

.popup-window .latency > div {
	margin: auto;
	display: flex;
	flex-direction: row;
}

.popup-window .latency p {
	font-weight: 500;
	margin: auto auto auto 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.popup-window .latency i {
	font-size: 11px;
	margin: auto 2px;
}

/*** VEHICLE STOPPED ***/
.popup-window .vehicle-stopped {
	flex-direction: column;
  display: none;
}
.popup-window[data-engine-on="false"] .vehicle-stopped {
	display: flex;
}

.popup-window .vehicle-stopped > div {
	margin: auto;
	display: flex;
	flex-direction: row;
}

.popup-window .vehicle-stopped p {
	font-weight: 500;
	margin: auto auto 0 0;
}
.popup-window .vehicle-stopped i {
	font-size: 10px;
	margin: auto 2px auto auto;
}

/*** TIME-STOPPED ***/
.popup-window .time-stopped {
	flex-direction: column;
  display: none;
}

.popup-window[data-engine-on="false"] .time-stopped {
	display: flex;
}

.popup-window .time-stopped > div {
	margin: auto auto auto 0;
	display: flex;
	flex-direction: row;
}

.popup-window .time-stopped p {
	font-weight: 500;
	margin: 0 2px 0 0;
}
.popup-window .time-stopped i {
	font-size: 9px;
	margin: auto 2px;
}


/********* GPRS SIGNAL STUFF INSIDE MARKER POPUP WINDOW *********/

.popup-window .gprs-strength {
	flex-direction: row;
}

.gm-style-iw.gm-style-iw-c[engine-status="on"] .gprs-strength {
	display: flex;
}

.popup-window .gprs-strength {
	display: flex;
  margin-top: 5px;
}

.popup-window .gprs-strength > div {
	display: flex;
	flex-direction: column;
	margin: auto 15px 0 auto;
  transform: scale(1.3);
}

.infowindow-active .popup-window .gprs-strength > div {
	margin: auto;
}

.popup-window .gprs-strength p {
	font-size: 6px;
	font-weight: 500;
	margin: 2px 4px 2px auto;
}

.infowindow-active .popup-window .gprs-strength p {
	font-size: 7px;
	margin: 2px auto 2px auto;
}

.popup-window .gprs-strength i {
	margin: 0 2px;
	border-radius: 4px;
	/*box-shadow: 0 0 0 2px black;*/
}

.gprs-strength .icon__signal-strength {
	display: inline-flex;
	align-items: flex-end;
	justify-content: flex-end;
	width: auto;
	height: 9px;
	padding: 0;
}
.infowindow-active .gprs-strength .icon__signal-strength {
	height: 13px;
}


.gprs-strength .icon__signal-strength span {
  display: inline-block;
  width: 1.5px;
  margin-left: 2px;
  transform-origin: 100% 100%;
  background-color: #00cc00;
  border-radius: 2px;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.17, 0.67, 0.42, 1.3);
  animation-fill-mode: both;
  animation-play-state: paused;
}
.infowindow-active .gprs-strength .icon__signal-strength span {
	width: 3px;
}


.gprs-strength .icon__signal-strength .bar-1 {
  height: 25%;
  animation-duration: 0.3s;
  animation-delay: 0.1s;
}
.gprs-strength .icon__signal-strength .bar-2 {
  height: 50%;
  animation-duration: 0.25s;
  animation-delay: 0.2s;
}
.gprs-strength .icon__signal-strength .bar-3 {
  height: 75%;
  animation-duration: 0.2s;
  animation-delay: 0.3s;
}
.gprs-strength .icon__signal-strength .bar-4 {
  height: 100%;
  animation-duration: 0.15s;
  animation-delay: 0.4s;
}

.gprs-strength .icon__signal-strength[data-signal-strength="0"] .bar-1,
.gprs-strength .icon__signal-strength[data-signal-strength="0"] .bar-2,
.gprs-strength .icon__signal-strength[data-signal-strength="0"] .bar-3,
.gprs-strength .icon__signal-strength[data-signal-strength="0"] .bar-4 {
  opacity: 0.2;
}

.gprs-strength .icon__signal-strength[data-signal-strength="1"] .bar-2,
.gprs-strength .icon__signal-strength[data-signal-strength="1"] .bar-3,
.gprs-strength .icon__signal-strength[data-signal-strength="1"] .bar-4 {
  opacity: 0.2;
}

.gprs-strength .icon__signal-strength[data-signal-strength="2"] .bar-3,
.gprs-strength .icon__signal-strength[data-signal-strength="2"] .bar-4 {
  opacity: 0.2;
}

.gprs-strength .icon__signal-strength[data-signal-strength="3"] .bar-4 {
  opacity: 0.2;
}

/********* GPS SIGNAL STUFF INSIDE MARKER POPUP WINDOW *********/

.popup-window .gps-strength {
	display: flex;
}

.gm-style-iw.gm-style-iw-c[engine-status="on"] .gps-strength {
	display: flex;
}

.popup-window .gps-strength {
	display: flex;
  margin-top: 5px;
}

.popup-window .gps-strength > div {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: auto auto 0 15px;
  transform: scale(1.25);
}

.infowindow-active .popup-window .gps-strength > div {
	margin: auto;
}


.popup-window .gps-strength p {
	font-size: 6px;
	font-weight: 500;
	margin: 11px auto 2px auto;
}

.infowindow-active .popup-window .gps-strength p {
	font-size: 7px;
	margin: 15px auto 2px auto;
}

.u-hidden {
  display: none;
}

.internet {
	width: 13px;
	height: 13px;
	margin: auto;
	display: block;
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.infowindow-active .internet {
	width: 18px;
	height: 18px;
	top: 25%;
}

.wifi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.wifi__path {
  fill: #00cc00;
}
.wifi--01 {
  fill-opacity: 0.3;
}
.wifi--02 {
/*
  -webkit-animation: connect 1.3s 1s 3000 ease-in-out alternate;
          animation: connect 1.3s 1s 3000 ease-in-out alternate;
*/
  -webkit-clip-path: circle(0 at 50% 99%);
          clip-path: circle(0 at 50% 99%);
}

.wifi--02[data-signal-strength="1"] {
	-webkit-clip-path: circle(25% at 50% 99%);
            clip-path: circle(25% at 50% 99%);
}
.wifi--02[data-signal-strength="2"] {
	-webkit-clip-path: circle(45% at 50% 99%);
            clip-path: circle(45% at 50% 99%);
}
.wifi--02[data-signal-strength="3"] {
	-webkit-clip-path: circle(65% at 50% 99%);
            clip-path: circle(65% at 50% 99%);
}
.wifi--02[data-signal-strength="4"] {
	-webkit-clip-path: circle(90% at 50% 99%);
            clip-path: circle(90% at 50% 99%);
}


@-webkit-keyframes connect {
  0% {
    -webkit-clip-path: circle(0 at 50% 99%);
            clip-path: circle(0 at 50% 99%);
  }
  25% {
    -webkit-clip-path: circle(20% at 50% 99%);
            clip-path: circle(20% at 50% 99%);
  }
  50% {
    -webkit-clip-path: circle(35% at 50% 99%);
            clip-path: circle(35% at 50% 99%);
  }
  75% {
    -webkit-clip-path: circle(60% at 50% 99%);
            clip-path: circle(60% at 50% 99%);
  }
  100% {
    -webkit-clip-path: circle(90% at 50% 99%);
            clip-path: circle(90% at 50% 99%);
  }
}

@keyframes connect {
  0% {
    -webkit-clip-path: circle(0 at 50% 99%);
            clip-path: circle(0 at 50% 99%);
  }
  25% {
    -webkit-clip-path: circle(20% at 50% 99%);
            clip-path: circle(20% at 50% 99%);
  }
  50% {
    -webkit-clip-path: circle(35% at 50% 99%);
            clip-path: circle(35% at 50% 99%);
  }
  75% {
    -webkit-clip-path: circle(60% at 50% 99%);
            clip-path: circle(60% at 50% 99%);
  }
  100% {
    -webkit-clip-path: circle(90% at 50% 99%);
            clip-path: circle(90% at 50% 99%);
  }
}