/* Common style for car markers */

.custom-marker {
  color: white;
  font-weight: bold;
  border-radius: 50%;
  text-align: center;
  line-height:13px;
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.small-marker {
  color: white;
  font-weight: bold;
  border-radius: 50%;
  text-align: center;
  line-height:13px;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.custom-marker::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
}

.custom-marker.alarm::after {
  border-top: 10px solid #f00;
}

.custom-marker.payment::after {
  border-top: 10px solid #0f0;
}

.custom-marker .passenger::after {
  content: "\1F385";
  font-size:18px;
  position: absolute;
  top: -15px;
  margin:auto;
  transform: translateX(-50%);
  width: 40px;
  height: 0;
  text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black;
}

.custom-marker.small, .custom-marker.small.text {
  width: 20px;
  height: 20px;
}

.custom-marker.small::after {
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
}

.custom-marker .speedometer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(#ccca 5deg, transparent 120deg, transparent 240deg, #ccca 355deg);
  border-radius: 50%;
  z-index: 50;
}

.custom-marker .needle {
  position: absolute;
  width: 2px;
  height: 20px;
  background-color: red;
  top: 0px;
  left: 50%;
  z-index: 100;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

.custom-marker .text {
  position: absolute;
  height: 40px;
  width: 40px;
  z-index: 200;
  text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black;
}

.custom-marker.small .text {
  height: 20px;
  width: 20px;
  line-height:7px;
}

.custom-marker.unknown .text, .custom-marker.offduty .text, .custom-marker.available .text, .custom-marker.alarm .text {
  text-shadow: -1px 0 1px white, 0 1px 1px white, 1px 0 1px white, 0 -1px 1px white;
}

span.passenger {
  font-size:18px;
  text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black;
}


.custom-marker.alarm, .small-marker.alarm {
  border: 2px solid #f00;
  color: #f00;
}

.custom-marker.payment, .small-marker.payment {
  border: 2px solid #0f0;
  color: #0f0;
}

.custom-marker.unknown, .small-marker.unknown {
  background:#FFF;
  color: black;
}

.custom-marker.offline, .small-marker.offline {
  background:#666;
}

.custom-marker.offduty, .small-marker.offduty {
  background:#AAA;
  color: black;
}

.custom-marker.available, .small-marker.available {
  background:#0F0;
  color: black;
}

.custom-marker.assignment, .small-marker.assignment {
  background:#070;
}

.custom-marker.assigned, .small-marker.assigned {
  background:#07F;
}

.custom-marker.assigned-arrived, .small-marker.assigned-arrived {
  background:#037;
}

.custom-marker.assigned-occupied, .small-marker.assigned-occupied {
  background:#700;
}

.custom-marker.assigned-soon-available, .small-marker.assigned-soon-available {
  background:#F00;
}

.custom-marker.streethire, .small-marker.streethire {
  background:#F70;
}

.custom-marker.streethire-soon-available, .small-marker.streethire-soon-available {
  background:#FF0;
}

.custom-marker.occupied, .small-marker.occupied {
  background:#000;
}

.custom-marker.oncall, .small-marker.oncall {
  background:#F0F;
}

.custom-marker.pause, .small-marker.pause {
  background:#707;
}