@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
body{
  margin: 0;
  background-image: url('bg.png');
  background-size: cover;
  overflow: hidden;
}
.mapborder {
  width: 13.90625vw;
  height: 23.61111vh;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-sizing: content-box;
  border-radius: 50%;
  position: absolute;
  bottom: calc(1.20370vh - 3px);
  left: calc(0.83333vw - 3px);
}
.threetwo .mapborder{
  width: 16.54761vw;
  height: 23.80952vh;
  bottom: calc(1.23809vh - 3px);
  left: calc(0.71428vw - 3px);
}
.fourthree .mapborder{
  width: 18.59375vw;
  height: 23.98148vh;
  bottom: calc(1.20370vh - 3px);
  left: calc(0.625vw - 3px);
}
.fivethree .mapborder{
  width: 14.89583vw;
  height: 23.88888vh;
  bottom: calc(1.20370vh - 3px);
  left: calc(0.78125vw - 3px);
}
.fivefour .mapborder{
  width: 19.84375vw;
  height: 23.88888vh;
  bottom: calc(1.20370vh - 3px);
  left: calc(0.57291vw - 3px);
}
.sixteenten .mapborder{
  width: 15.52083vw;
  height: 23.88888vh;
  bottom: calc(1.20370vh - 3px);
  left: calc(0.78125vw - 3px);
}
.circle{
  fill: none;
  stroke: #1b1b1bb9;
  stroke-width: 1.6px;
  transform-origin: center;
  transform: rotate(-90deg);
  transition: 0.2s;
}
#grad1 stop{
  transition: 0.2s;
}
.black{
  filter: drop-shadow(0px 0px 10px #1b1b1bb9);
}
.tacho .circle{
  stroke-width: 1px;
  stroke: #ffffff;
}
.tacho{
  filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.7));
  width: 260px;
	height: 260px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.speed{
  stroke: #874cff;
}
.speedometer-part{
  position: absolute;
}
.speedometer{
  position: absolute;
  width: 300px;
  height: 300px;
  bottom: -20px;
  right: 10px;
}
.speedometer-digital{
  text-align: right;
  color: #fff;
  font-weight: 900;
  font-family: 'Roboto', sans-serif;
  width: 105px;
  position: absolute;
	top: 47%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.speedometer-digital p{
  margin: 0;
  line-height: 90%;
}
.gps{
  font-size: 16px;
}
.speed-digital{
  font-size: 60px;
}
.speed-unit{
  font-size: 24px;
}
.active{
  fill: #ffffff;
}
.icons{
  background-color: rgba(20, 20, 20, 0.85);
  border-radius: 5px;
  display: flex;
  justify-content: space-around;
  width: 100px;
  height: 44px;
  align-items: center;
  position: relative;
  padding: 0 5px 0 5px;
  top: 218px;
  right: 20px;
}
.icons svg{
  margin: 0 3px 0 3px;
}
.speedometer-minimalistic{
  display: none;
  border-radius: 5px;
  color: #fff;
  height: 44px;
  font-family: 'Poppins', sans-serif;
  padding: 0 15px 0 15px;
  font-size: 14px;
  position: absolute;
  bottom: 18px;
  right: 0px;
  align-items: center !important;
}
.speedometer-minimalistic .icons{
  position: relative;
  top: 0;
  left: 0;
}
.speedometer-minimalistic-digital{
  width: 160px;
  height: 44px;
  display: flex;
  background-color: rgba(20, 20, 20, 0.85);
  border-radius: 5px;
  margin-left: 15px;
}
.speedometer-minimalistic-part{
  text-align: right;
  display: block;
  line-height: 44px;
  width: 50%;
}
.minimalistic-speed{
  padding-right: 10px;
  box-sizing: content-box;
  float: right;
  font-size: 14px;
}
.minimalistic-gps{
  font-size: 11px;
  text-align: center;
  box-sizing: content-box;
  padding-left: 10px;
}
.streetlabel{
  display: none;
  background-color: rgba(20, 20, 20, 0.85);
  border-radius: 5px;
  color: #fff;
  height: 44px;
  font-family: 'Poppins', sans-serif;
  padding: 0 15px 0 15px;
  font-size: 14px;
  position: absolute;
  bottom: 18px;
  right: 315px;
  align-items: center !important;
}
.streetlabel p {
  display: inline-block;
  margin: 0;
}
.direction{
  text-align: right;
  width: 40px;
  padding-left: 5px;
  font-size: 18px;
}
@media only screen and (max-width: 1601px) {
  .speedometer{
    position: absolute;
    transform: scale(0.8);
    bottom: -50px;
    right: -30px;
  }
  .streetlabel{
    position: absolute;
    transform: scale(0.8);
    bottom: 6px;
    right: 220px;
  }
  .streetminimalist{
    right: 230px;
  }
  .speedometer-minimalistic{
    position: absolute;
    transform: scale(0.8);
    right: -34px;
    bottom: 6px;
  }
}

@media only screen and (max-width: 1281px) {
  .speedometer{
    position: absolute;
    transform: scale(0.6);
    bottom: -75px;
    right: -40px;
  }
  .streetlabel{
    position: absolute;
    transform: scale(0.6);
    bottom: -1px;
    right: 160px;
  }
  .streetminimalist{
    right: 170px;
  }
  .speedometer-minimalistic{
    position: absolute;
    transform: scale(0.6);
    right: -44px;
    bottom: -1px;
  }
}