﻿.dash-scope {
  background-image: url('dash-scope70x50.png');
  background-color: transparent;
  background-repeat: no-repeat;
  width: 70px;
  height: 50px;
  display: block;
}
.consumption-blue {
  width: 75px;
  height: 50px;
  background-position: 0px 0px;
}
.consumption-green {
  width: 75px;
  height: 50px;
  background-position: 0px -51px;
}
.consumption-navy {
  width: 75px;
  height: 50px;
  background-position: 0px -102px;
}
.consumption-orange {
  width: 75px;
  height: 50px;
  background-position: 0px -153px;
}
.consumption-purple {
  width: 75px;
  height: 50px;
  background-position: 0px -204px;
}
.consumption-red {
  width: 75px;
  height: 50px;
  background-position: 0px -255px;
}
.day-night-blue {
  width: 75px;
  height: 50px;
  background-position: 0px -306px;
}
.day-night-green {
  width: 75px;
  height: 50px;
  background-position: 0px -357px;
}
.day-night-navy {
  width: 75px;
  height: 50px;
  background-position: 0px -408px;
}
.day-night-orange {
  width: 75px;
  height: 50px;
  background-position: 0px -459px;
}
.day-night-purple {
  width: 75px;
  height: 50px;
  background-position: 0px -510px;
}
.day-night-red {
  width: 75px;
  height: 50px;
  background-position: 0px -561px;
}
.header-blue {
  width: 75px;
  height: 50px;
  background-position: 0px -612px;
}
.header-green {
  width: 75px;
  height: 50px;
  background-position: 0px -663px;
}
.header-navy {
  width: 75px;
  height: 50px;
  background-position: 0px -714px;
}
.header-orange {
  width: 75px;
  height: 50px;
  background-position: 0px -765px;
}
.header-purple {
  width: 75px;
  height: 50px;
  background-position: 0px -816px;
}
.header-red {
  width: 75px;
  height: 50px;
  background-position: 0px -867px;
}
.odometer-blue {
  width: 75px;
  height: 50px;
  background-position: 0px -918px;
}
.odometer-green {
  width: 75px;
  height: 50px;
  background-position: 0px -969px;
}
.odometer-navy {
  width: 75px;
  height: 50px;
  background-position: 0px -1020px;
}
.odometer-orange {
  width: 75px;
  height: 50px;
  background-position: 0px -1071px;
}
.odometer-purple {
  width: 75px;
  height: 50px;
  background-position: 0px -1122px;
}
.odometer-red {
  width: 75px;
  height: 50px;
  background-position: 0px -1173px;
}
.trip-distance-blue {
  width: 75px;
  height: 50px;
  background-position: 0px -1224px;
}
.trip-distance-green {
  width: 75px;
  height: 50px;
  background-position: 0px -1275px;
}
.trip-distance-navy {
  width: 75px;
  height: 50px;
  background-position: 0px -1326px;
}
.trip-distance-orange {
  width: 75px;
  height: 50px;
  background-position: 0px -1377px;
}
.trip-distance-purple {
  width: 75px;
  height: 50px;
  background-position: 0px -1428px;
}
.trip-distance-red {
  width: 75px;
  height: 50px;
  background-position: 0px -1479px;
}
.trip-time-blue {
  width: 75px;
  height: 50px;
  background-position: 0px -1530px;
}
.trip-time-green {
  width: 75px;
  height: 50px;
  background-position: 0px -1581px;
}
.trip-time-navy {
  width: 75px;
  height: 50px;
  background-position: 0px -1632px;
}
.trip-time-orange {
  width: 75px;
  height: 50px;
  background-position: 0px -1683px;
}
.trip-time-purple {
  width: 75px;
  height: 50px;
  background-position: 0px -1734px;
}
.trip-time-red {
  width: 75px;
  height: 50px;
  background-position: 0px -1785px;
}
.trips-blue {
  width: 75px;
  height: 50px;
  background-position: 0px -1836px;
}
.trips-green {
  width: 75px;
  height: 50px;
  background-position: 0px -1887px;
}
.trips-navy {
  width: 75px;
  height: 50px;
  background-position: 0px -1938px;
}
.trips-orange {
  width: 75px;
  height: 50px;
  background-position: 0px -1989px;
}
.trips-purple {
  width: 75px;
  height: 50px;
  background-position: 0px -2040px;
}
.trips-red {
  width: 75px;
  height: 50px;
  background-position: 0px -2091px;
}
.upcoming-service-blue {
  width: 75px;
  height: 50px;
  background-position: 0px -2142px;
}
.upcoming-service-green {
  width: 75px;
  height: 50px;
  background-position: 0px -2193px;
}
.upcoming-service-navy {
  width: 75px;
  height: 50px;
  background-position: 0px -2244px;
}
.upcoming-service-orange {
  width: 75px;
  height: 50px;
  background-position: 0px -2295px;
}
.upcoming-service-purple {
  width: 75px;
  height: 50px;
  background-position: 0px -2346px;
}
.upcoming-service-red {
  width: 75px;
  height: 50px;
  background-position: 0px -2397px;
}
.dash-scope-lg {
  background-image: url('dash-scope.png');
  background-color: transparent;
  background-repeat: no-repeat;
  width: 140px;
  height: 100px;
  display: block;
}
@media (max-width: 768px) {
  .dash-scope-lg {
    background-image: url('dash-scope70x50.png');
    background-color: transparent;
    background-repeat: no-repeat;
    width: 35px;
    height: 25px;
    display: block;
  }
}
.consumption-blue-lg {
  width: 140px;
  height: 100px;
  background-position: 0px 0px;
}
.consumption-green-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -101px;
}
.consumption-navy-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -202px;
}
.consumption-orange-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -303px;
}
.consumption-purple-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -404px;
}
.consumption-red-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -505px;
}
.day-night-blue-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -606px;
}
.day-night-green-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -707px;
}
.day-night-navy-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -808px;
}
.day-night-orange-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -909px;
}
.day-night-purple-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -1010px;
}
.day-night-red-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -1111px;
}
.header-blue-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -1212px;
}
.header-green-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -1313px;
}
.header-navy-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -1414px;
}
.header-orange-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -1515px;
}
.header-purple-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -1616px;
}
.header-red-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -1717px;
}
.odometer-blue-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -1818px;
}
.odometer-green-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -1919px;
}
.odometer-navy-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -2020px;
}
.odometer-orange-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -2121px;
}
.odometer-purple-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -2222px;
}
.odometer-red-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -2323px;
}
.trip-distance-blue-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -2424px;
}
.trip-distance-green-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -2525px;
}
.trip-distance-navy-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -2626px;
}
.trip-distance-orange-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -2727px;
}
.trip-distance-purple-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -2828px;
}
.trip-distance-red-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -2929px;
}
.trip-time-blue-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -3030px;
}
.trip-time-green-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -3131px;
}
.trip-time-navy-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -3232px;
}
.trip-time-orange-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -3333px;
}
.trip-time-purple-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -3434px;
}
.trip-time-red-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -3535px;
}
.trips-blue-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -3636px;
}
.trips-green-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -3737px;
}
.trips-navy-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -3838px;
}
.trips-orange-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -3939px;
}
.trips-purple-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -4040px;
}
.trips-red-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -4141px;
}
.upcoming-service-blue-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -4242px;
}
.upcoming-service-green-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -4343px;
}
.upcoming-service-navy-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -4444px;
}
.upcoming-service-orange-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -4545px;
}
.upcoming-service-purple-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -4646px;
}
.upcoming-service-red-lg {
  width: 140px;
  height: 100px;
  background-position: 0px -4747px;
}
@media (max-width: 768px) {
  .consumption-blue-lg {
    width: 75px;
    height: 50px;
    background-position: 0px 0px;
  }
  .consumption-green-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -51px;
  }
  .consumption-navy-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -102px;
  }
  .consumption-orange-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -153px;
  }
  .consumption-purple-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -204px;
  }
  .consumption-red-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -255px;
  }
  .day-night-blue-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -306px;
  }
  .day-night-green-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -357px;
  }
  .day-night-navy-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -408px;
  }
  .day-night-orange-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -459px;
  }
  .day-night-purple-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -510px;
  }
  .day-night-red-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -561px;
  }
  .header-blue-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -612px;
  }
  .header-green-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -663px;
  }
  .header-navy-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -714px;
  }
  .header-orange-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -765px;
  }
  .header-purple-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -816px;
  }
  .header-red-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -867px;
  }
  .odometer-blue-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -918px;
  }
  .odometer-green-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -969px;
  }
  .odometer-navy-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1020px;
  }
  .odometer-orange-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1071px;
  }
  .odometer-purple-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1122px;
  }
  .odometer-red-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1173px;
  }
  .trip-distance-blue-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1224px;
  }
  .trip-distance-green-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1275px;
  }
  .trip-distance-navy-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1326px;
  }
  .trip-distance-orange-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1377px;
  }
  .trip-distance-purple-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1428px;
  }
  .trip-distance-red-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1479px;
  }
  .trip-time-blue-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1530px;
  }
  .trip-time-green-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1581px;
  }
  .trip-time-navy-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1632px;
  }
  .trip-time-orange-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1683px;
  }
  .trip-time-purple-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1734px;
  }
  .trip-time-red-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1785px;
  }
  .trips-blue-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1836px;
  }
  .trips-green-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1887px;
  }
  .trips-navy-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1938px;
  }
  .trips-orange-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -1989px;
  }
  .trips-purple-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -2040px;
  }
  .trips-red-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -2091px;
  }
  .upcoming-service-blue-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -2142px;
  }
  .upcoming-service-green-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -2193px;
  }
  .upcoming-service-navy-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -2244px;
  }
  .upcoming-service-orange-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -2295px;
  }
  .upcoming-service-purple-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -2346px;
  }
  .upcoming-service-red-lg {
    width: 75px;
    height: 50px;
    background-position: 0px -2397px;
  }
}