dashboard.css

@font-face {
    font-family: 'DS Digital Bold';
    src: local('DS Digital Bold'), local('DS-Digital-Bold'), url(fonts/DS-Digital-Bold.ttf) format('truetype');
}
@font-face {
    font-family: 'DS Digital Bold Italic';
    src: local('DS Digital Bold Italic'), local('DS-Digital-Bold-Italic'), url(fonts/DS-Digital-Bold-Italic.ttf) format('truetype');
}
@font-face {
    font-family: 'Barlow Regular';
    src: local('Barlow Regular'), local('Barlow-Regular'), url(fonts/Barlow-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'Khand Bold';
    src: local('Khand Bold'), local('Khand-Bold'), url(fonts/Khand-Bold.ttf) format('truetype');
}
@font-face {
    font-family: 'Highway Gothic';
    src: local('Highway Gothic'), local('Highway-Gothic'), url(fonts/Highway-Gothic.ttf) format('truetype');
}
@font-face {
    font-family: 'Highway Gothic Expanded';
    src: local('Highway Gothic Expanded'), local('Highway-Gothic-Expanded'), url(fonts/Highway-Gothic-Expanded.ttf) format('truetype');
}
@font-face {
    font-family: 'Noto Sans SC';
    src: local('Noto Sans SC Regular'), local('NotoSansSC-Regular'), url(fonts/NotoSansSC-Regular.woff2) format('woff2');
}

body { cursor: auto; user-select: none; }
.dashboard {
    background-color: rgb(30, 30, 30);
    overflow: auto;
    position: absolute;
    margin: auto;
}
.hidden { visibility: hidden; }
.visible { visibility: visible; }

._electricOn {
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2048px;
    height: 1152px;
    transform: translate(-50%, -50%);
}

._smallScreen {
    background-color: rgb(34, 34, 34);
    border-radius: 6px;
    box-shadow: inset 0px 0px 3px 0px rgb(69, 69, 69),
                      0px 0px 20px 0px rgba(0, 0, 0, 0.8);
    position: absolute;
    z-index: -1;
    top: 30px;
    left: 659px;
    width: 730px;
    height: 220px;
}
._smallScreen:after {
    content: '';
    background-color: rgb(0, 0, 0);
    box-shadow: 0px 0px 6px 0px rgb(69, 69, 69);
    position: absolute;
    z-index: -1;
    top: 20px;
    left: 20px;
    width: 690px;
    height: 180px;
}
._smallScreen:before {
    content: '';
    background: linear-gradient(to right, rgb(182, 157, 97) 0%, rgb(218, 181, 99) 50%, rgb(182, 157, 97) 100%);
    box-shadow: inset 0px 0px 10px 2px rgb(132, 114, 70),
                inset 0px 0px 1px 1px rgb(255, 255, 255),
                      0px 0px 1px 1px rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 22px;
    left: 22px;
    width: 686px;
    height: 176px;
}

._speedRoundedKMH, ._speedRoundedMPH {
    color: rgb(0, 0, 0);
    font-family: 'DS Digital Bold Italic', sans-serif;
    font-size: 176px;
    line-height: 176px;
    text-align: center;
    visibility: visible;
    position: absolute;
    top: 22px;
    left: 50px;
    width: 275px;
    height: 176px;
}
._speedRoundedMPH { display: none; }
._speedRoundedSymbolKMH, ._speedRoundedSymbolMPH {
    color: rgb(0, 0, 0);
    font-family: 'Barlow Regular', sans-serif;
    font-size: 35px;
    line-height: 35px;
    text-align: center;
    visibility: visible;
    position: absolute;
    top: 135px;
    left: 330px;
    width: 77px;
    height: 35px;
}
._speedRoundedSymbolMPH { display: none; }

._cruiseControlOn {
    color: rgba(0, 0, 0, 0.1);
    font-family: 'DS Digital Bold Italic', sans-serif;
    font-size: 80px;
    line-height: 80px;
    text-align: left;
    position: absolute;
    top: 40px;
    left: 330px;
    width: 130px;
    height: 80px;
    padding-left: 82px;
}
._cruiseControlOn:after {
    content: '';
    background-image: url("images/_symbol.png");
    background-repeat: no-repeat;
    background-position: 0px -700px;
    position: absolute;
    top: 15px;
    left: 0px;
    width: 77px;
    height: 51px;
    opacity: 0.1;
}
._cruiseControlOn:before {
    content: '';
    border-top: 8px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 12px solid rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 15px;
    left: 67px;
    width: 0;
    height: 0;
    transform: rotate(5deg);
}
.dashboard.game-connected.yes ._electricOn.yes ._cruiseControlOn.yes { color: rgb(0, 0, 0); }
.dashboard.game-connected.yes ._electricOn.yes ._cruiseControlOn.yes:after { opacity: 1; }
.dashboard.game-connected.yes ._electricOn.yes ._cruiseControlOn.yes:before {
    border-right: 12px solid rgb(0, 0, 0);
}
._cruiseControlKMH { display: inline; }
._cruiseControlMPH { display: none; }

._hShifterOn {
    background-color: rgb(0, 0, 0);
    color: rgb(182, 157, 97);
    font-family: 'Highway Gothic Expanded', sans-serif;
    font-size: 30px;
    line-height: 33px;
    text-align: center;
    overflow: hidden;
    position: absolute;
    left: 645px;
    top: 55px;
    width: 30px;
    height: 30px;
    opacity: 1;
}
._hShifterOn.yes { opacity: 0.1; }
._hShifterOn.yes:after {
    content: '';
    border-left: 4px solid rgb(182, 157, 97);
    border-right: 4px solid rgb(182, 157, 97);
    position: absolute;
    top: 5px;
    left: 5px;
    width: 4px;
    height: 20px;
}
._hShifterOn.yes:before {
    content: '';
    border-right: 4px solid rgb(182, 157, 97);
    border-bottom: 4px solid rgb(182, 157, 97);
    position: absolute;
    top: 5px;
    left: 6px;
    width: 15px;
    height: 8px;
}

._displayedGear {
    color: rgb(0, 0, 0);
    font-family: 'DS Digital Bold', sans-serif;
    font-size: 95px;
    line-height: 95px;
    text-align: right;
    visibility: visible;
    position: absolute;
    top: 89px;
    left: 530px;
    width: 150px;
    height: 95px;
}
._displayedGearD { display: block; }
._displayedGearH { display: none; }

._noticeShifter, ._noticeDial, ._noticeSpeed {
    background: linear-gradient(to right, rgb(182, 157, 97) 0%, rgb(218, 181, 99) 50%, rgb(182, 157, 97) 100%);
    box-shadow: inset 0px 0px 10px 2px rgb(132, 114, 70),
                inset 0px 0px 1px 1px rgb(255, 255, 255),
                      0px 0px 1px 1px rgba(0, 0, 0, 0.4);
    color: rgb(0, 0, 0);
    font-family: 'Barlow Regular', 'Noto Sans SC', sans-serif;
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: none;
    position: absolute;
    top: 22px;
    left: 22px;
    width: 646px;
    height: 40px;
    padding: 68px 20px;
}

._bigScreen {
    background-color: rgb(34, 34, 34);
    border-radius: 6px;
    box-shadow: inset 0px 0px 3px 0px rgb(69, 69, 69),
                      0px 0px 20px 0px rgba(0, 0, 0, 0.8);
    position: absolute;
    z-index: -1;
    top: 280px;
    left: 659px;
    width: 730px;
    height: 842px;
}
._bigScreen:after {
    content: '';
    background: rgb(0, 0, 0);
    box-shadow: 0px 0px 6px 0px rgb(69, 69, 69);
    position: absolute;
    z-index: -1;
    top: 20px;
    left: 20px;
    width: 690px;
    height: 802px;
}
._bigScreen:before {
    content: '';
    background: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(34, 34, 34) 100%);
    box-shadow: inset 0px 0px 10px 2px rgb(53, 53, 53),
                inset 0px 0px 1px 1px rgb(54, 54, 54),
                      0px 0px 1px 1px rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 22px;
    left: 22px;
    width: 686px;
    height: 798px;
}

._truckBrand, ._currentJob {
    overflow: hidden;
    display: none;
    position: absolute;
    top: 42px;
    left: 42px;
    width: 646px;
    height: 444px;
}
._truckBrand {
    background-image: url("images/_truckBrand.png");
    background-repeat: no-repeat;
    background-position: 0px center;
    display: block;
    height: 646px;
}
._truckBrandATS { background-position: -646px center; }
.dashboard.game-connected.yes ._electricOn.yes ._truckBrand { height: 444px; }
._jobTitle, ._jobCargo, ._jobOrigin, ._jobDestination, ._jobIncome, ._jobRemains {
    background-image: url("images/_symbol.png");
    background-repeat: no-repeat;
    color: rgb(255, 255, 255);
    font-family: 'Barlow Regular', 'Noto Sans SC', sans-serif;
    font-size: 50px;
    line-height: 50px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: none;
    height: 50px;
    padding: 11px 0px 11px 80px;
}
._jobTitle {
    background-position: -900px -398px;
    border-bottom: 3px solid rgb(134, 134, 134);
    display: block;
    padding: 2px 0px 18px 80px;
    margin-bottom: 8px;
}
._jobCargo { background-position: -900px -489px; }
._jobOrigin { background-position: -900px -589px; }
._jobDestination { background-position: -900px -689px; }
._jobIncome { background-position: -900px -789px; }
._jobRemains { background-position: -900px -889px; }
._jobCargo:not([data-value=""]),
._jobOrigin:not([data-value=""]),
._jobDestination:not([data-value=""]),
._jobIncome:not([data-value=""]),
._jobRemains:not([data-value=""]) {
    display: block;
}

._estimatedDistanceKMH, ._estimatedDistanceMPH, ._nextRestStopTime, ._truckWear, ._trailerWear {
    background-image: url("images/_symbol.png");
    background-repeat: no-repeat;
    color: rgb(255, 255, 255);
    font-family: 'Barlow Regular', 'Noto Sans SC', sans-serif;
    font-size: 50px;
    line-height: 50px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    visibility: hidden;
    position: absolute;
    left: 46px;
    width: 360px;
    height: 55px;
    padding-left: 102px;
}
._estimatedDistanceKMH, ._estimatedDistanceMPH {
    background-position: 0px -300px;
    top: 512px;
}
._estimatedDistanceMPH { display: none; }
._nextRestStopTime {
    background-position: 0px -400px;
    top: 582px;
}
._truckWear {
    background-position: 0px -500px;
    top: 652px;
    width: 129px;
}
._trailerWear {
    background-position: 0px -600px;
    top: 652px;
    left: 277px;
    width: 129px;
}
._speedLimit {
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 0px 3px rgb(255, 255, 255);
    border: 10px solid rgb(0, 0, 0);
    border-radius: 50%;
    color: rgb(0, 0, 0);
    font-family: 'Khand Bold', sans-serif;
    font-size: 100px;
    line-height: 152px;
    text-align: center;
    overflow: hidden;
    visibility: hidden;
    position: absolute;
    top: 533px;
    left: 514px;
    width: 148px;
    height: 148px;
}
._speedLimit:after {
    content: '';
    box-shadow: 0px 0px 0px 2px rgb(0, 0, 0),
                0px 0px 0px 5px rgb(255, 255, 255),
                0px 0px 0px 9px rgb(0, 0, 0),
                0px 0px 0px 12px rgb(255, 255, 255),
                0px 0px 0px 16px rgb(0, 0, 0);
    position: absolute;
    top: 0px;
    left: 74px;
    width: 0px;
    height: 148px;
    transform: rotate(45deg);
}
._speedLimit.yes {
    box-shadow: 0px 0px 0px 3px rgb(255, 255, 255);
    border: 15px solid rgb(244, 64, 51);
    width: 138px;
    height: 138px;
}
._gameATS.yes ._speedLimit {
    background-image: url("images/_speedLimit.png");
    background-repeat: no-repeat;
    background-position: 0px -160px;
    box-shadow: 0px 0px 0px 3px rgb(255, 255, 255);
    border: 4px solid rgb(0, 0, 0);
    border-radius: 10px;
    font-family: 'Highway Gothic Expanded', sans-serif;
    font-size: 90px;
    line-height: 220px;
    width: 160px;
    height: 160px;
}
._gameATS.yes ._speedLimit.yes { background-position: 0px 0px; }
._speedLimit.yes:after,
._gameATS.yes ._speedLimit:after {
    content: '';
    box-shadow: none;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
}
._speedLimitKMH, ._speedLimitMPH { display: block; }
._speedLimitMPH { display: none; }
.dashboard.game-connected.yes ._electricOn.yes ._estimatedDistanceKMH:not([data-value=""]),
.dashboard.game-connected.yes ._electricOn.yes ._estimatedDistanceMPH:not([data-value=""]),
.dashboard.game-connected.yes ._electricOn.yes ._nextRestStopTime,
.dashboard.game-connected.yes ._electricOn.yes ._truckWear,
.dashboard.game-connected.yes ._electricOn.yes ._trailerWear:not([data-value=""]),
.dashboard.game-connected.yes ._electricOn.yes ._speedLimit {
    visibility: visible;
}

._status {
    border-top: 3px solid rgb(134, 134, 134);
    position: absolute;
    top: 727px;
    left: 42px;
    width: 646px;
    height: 60px;
    padding-top: 10px;
}
._odometer, ._time, .statusMessage {
    color: rgb(255, 255, 255);
    font-family: 'Barlow Regular', 'Noto Sans SC', sans-serif;
    font-size: 50px;
    line-height: 50px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: none;
    float: left;
    width: 646px;
    height: 50px;
    padding: 5px 0px;
}
._odometer { width: 280px; }
._odometerKMH { display: inline; }
._odometerMPH { display: none; }
._time {
    text-align: right;
    float: right;
    width: 160px;
}
.dashboard.game-connected.yes ._odometer,
.dashboard.game-connected.yes ._time {
    display: block;
}
.statusMessage { font-size: 44px; display: block; }
.dashboard.game-connected.yes .statusMessage { display: none; }

._blinkerLeftOn, ._blinkerRightOn {
    background-image: url("images/_symbol.png");
    background-repeat: no-repeat;
    visibility: visible;
    position: absolute;
    top: 50px;
    left: 0px;
    width: 125px;
    height: 125px;
}
._blinkerLeftOn {
    background-position: 0px -800px;
    left: 504px;
}
._blinkerLeftOn.yes {
    background-position: -200px -800px;
}
._blinkerRightOn {
    background-position: -400px -800px;
    left: 1419px;
}
._blinkerRightOn.yes {
    background-position: -600px -800px;
}

._leftSymbol, ._rightSymbol {
    visibility: visible;
    position: absolute;
    text-align: center;
    top: 670px;
    left: 0px;
    width: 658px;
    height: 100px;
}
._rightSymbol { left: 1390px; }

._fuelWarningOn, ._airPressureWarningOn, ._retarderOn, ._motorBrakeOn, ._parkBrakeOn,
._lightsBeamHighOn, ._lightsBeamLowOn, ._lightsParkingOn, ._lightsBeaconOn, ._wipersOn {
    background-image: url("images/_symbol.png");
    background-repeat: no-repeat;
    display: inline-block;
    width: 100px;
    height: 100px;
}
._fuelWarningOn { background-position: 0px 0px; }
.dashboard.game-connected.yes ._electricOn.yes ._fuelWarningOn.yes { background-position: 0px -100px; }
._airPressureWarningOn { background-position: -100px 0px; }
.dashboard.game-connected.yes ._electricOn.yes ._airPressureWarningOn.yes { background-position: -100px -100px; }
._retarderOn { background-position: -200px 0px; }
.dashboard.game-connected.yes ._electricOn.yes ._retarderOn.yes { background-position: -200px -100px; }
._motorBrakeOn { background-position: -300px 0px; }
.dashboard.game-connected.yes ._electricOn.yes ._motorBrakeOn.yes { background-position: -300px -100px; }
._parkBrakeOn { background-position: -400px 0px; }
.dashboard.game-connected.yes ._electricOn.yes ._parkBrakeOn.yes { background-position: -400px -100px; }
._lightsBeamHighOn { background-position: -500px 0px; }
.dashboard.game-connected.yes ._electricOn.yes ._lightsBeamHighOn.yes { background-position: -500px -100px; }
._lightsBeamLowOn { background-position: -600px 0px; }
.dashboard.game-connected.yes ._electricOn.yes ._lightsBeamLowOn.yes { background-position: -600px -100px; }
._lightsParkingOn { background-position: -700px 0px; }
.dashboard.game-connected.yes ._electricOn.yes ._lightsParkingOn.yes { background-position: -700px -100px; }
._lightsBeaconOn { background-position: -800px 0px; }
.dashboard.game-connected.yes ._electricOn.yes ._lightsBeaconOn.yes { background-position: -800px -100px; }
._wipersOn { background-position: -900px 0px; }
.dashboard.game-connected.yes ._electricOn.yes ._wipersOn.yes { background-position: -900px -100px; }

._rpmDial, ._speedDial {
    color: rgb(255, 255, 255);
    font-family: 'Barlow Regular', sans-serif;
    font-size: 40px;
    line-height: 50px;
    text-align: center;
    text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5);
    visibility: visible;
    position: absolute;
    top: 136px;
    left: 0px;
    width: 658px;
    height: 658px;
}
._speedDial { left: 1390px; }

._dialscaleRPM, ._dialScaleKMH, ._dialScaleMPH {
    background-image: url("images/_bigDial.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width: 658px;
    height: 658px;
}
._dialScaleKMH { display: block; }
._dialScaleMPH { display: none; }

._dialNumber0, ._dialNumber1, ._dialNumber2,
._dialNumber3, ._dialNumber4, ._dialNumber5,
._dialNumber6 {
    position: absolute;
    width: 66px;
    height: 50px;
}
._dialNumber0 { top: 422px; left: 35px; }
._dialNumber1 { top: 238px; left: 15px; }
._dialNumber2 { top: 83px; left: 111px; }
._dialNumber3 { top: 15px; left: 296px; }
._dialNumber4 { top: 83px; left: 481px; }
._dialNumber5 { top: 238px; left: 577px; }
._dialNumber6 { top: 422px; left: 557px; }
._dialInfo, ._dialX100 {
    font-size: 50px;
    line-height: 50px;
    position: absolute;
    top: 429px;
    left: 0px;
    width: 658px;
    height: 50px;
}
._dialX100 {
    opacity: 0.5;
    font-size: 25px;
    line-height: 25px;
    text-align: left;
    top: 452px;
    left: 385px;
    width: 60px;
    height: 25px;
}

.truck-engineRpm,
._speedKMH,
._speedMPH {
    visibility: visible;
    position: absolute;
    top: 107px;
    left: 289px;
    width: 80px;
    height: 444px;
    -webkit-transform: rotate(-115deg);
    -moz-transform: rotate(-115deg);
    -ms-transform: rotate(-115deg);
    -o-transform: rotate(-115deg);
    transform: rotate(-115deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.truck-engineRpm:after,
._speedKMH:after,
._speedMPH:after {
    content: '';
    background-color: rgb(244, 67, 54);
    box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.5);
    border-radius: 12px 12px 0 0 / 40% 40% 0 0;
    position: absolute;
    top: 0px;
    left: 34px;
    width: 12px;
    height: 222px;
}
.truck-engineRpm:before,
._speedKMH:before,
._speedMPH:before {
    content: '';
    background-color: rgb(34, 34, 34);
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    top: 192px;
    left: 10px;
    width: 60px;
    height: 60px;
}
._speedMPH { display: none; }

._fuelDial, ._airPressureDial, ._oilPressureDial, ._waterTemperatureDial {
    background-image: url("images/_smallDial.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    position: absolute;
    top: 800px;
    left: 30px;
    width: 330px;
    height: 330px;
}
._airPressureDial { background-position: -330px 0px; left: 329px; }
._oilPressureDial { left: 1419px; }
._waterTemperatureDial { background-position: -660px 0px; left: 1718px; }
.dashboard.game-connected.yes ._electricOn.yes ._fuelDial { background-position: 0px -330px; }
.dashboard.game-connected.yes ._electricOn.yes ._airPressureDial { background-position: -330px -330px; }
.dashboard.game-connected.yes ._electricOn.yes ._oilPressureDial { background-position: 0px -330px; }
.dashboard.game-connected.yes ._electricOn.yes ._waterTemperatureDial { background-position: -660px -330px; }

._fuelSymbol, ._airPressureSymbol, ._oilPressureSymbol, ._waterTemperatureSymbol {
    background-image: url("images/_symbol.png");
    background-repeat: no-repeat;
    background-position: 0px -200px;
    visibility: visible;
    position: absolute;
    top: 185px;
    left: 185px;
    width: 100px;
    height: 100px;
}
._airPressureSymbol { background-position: -100px -200px; }
._oilPressureSymbol { background-position: -200px -200px; }
._waterTemperatureSymbol { background-position: -300px -200px; }

.truck-fuel,
.truck-airPressure,
.truck-oilPressure,
.truck-waterTemperature {
    visibility: visible;
    position: absolute;
    top: 25px;
    left: 133px;
    width: 64px;
    height: 280px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.truck-fuel:after,
.truck-airPressure:after,
.truck-oilPressure:after,
.truck-waterTemperature:after {
    content: '';
    background-color: rgb(244, 67, 54);
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.5);
    border-radius: 10px 10px 0 0 / 40% 40% 0 0;
    position: absolute;
    top: 0px;
    left: 27px;
    width: 10px;
    height: 140px;
}
.truck-fuel:before,
.truck-airPressure:before,
.truck-oilPressure:before,
.truck-waterTemperature:before {
    content: '';
    background-color: rgb(34, 34, 34);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    top: 120px;
    left: 12px;
    width: 40px;
    height: 40px;
}

._tips {
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: absolute;
    width: 2048px;
    height: 1152px;
}
._tipsAim {
    border: 10px dashed rgb(3, 169, 244);
    position: absolute;
    left: 671px;
    top: 42px;
    width: 686px;
    height: 176px;
}
._tipsAim1, ._tipsAim2 {
    border-radius: 50%;
    top: 280px;
    left: 144px;
    width: 350px;
    height: 350px;
}
._tipsAim2 { left: 1534px; }
._tipsArrow {
    overflow: hidden;
    position: absolute;
    top: 290px;
    left: 974px;
    width: 100px;
    height: 300px;
}
._tipsArrow:after {
    content: '';
    border-top: 20px solid rgb(3, 169, 244);
    border-right: 20px solid rgb(3, 169, 244);
    position: absolute;
    top: 15px;
    left: 25px;
    width: 30px;
    height: 30px;
    transform: rotate(-45deg);
}
._tipsArrow:before {
    content: '';
    background-color: rgb(3, 169, 244);
    position: absolute;
    top: 20px;
    left: 40px;
    width: 20px;
    height: 100%;
}
._tipsArrow1, ._tipsArrow2 {
    top: 450px;
    left: 660px;
    height: 330px;
    transform: rotate(-66deg);
}
._tipsArrow2 {
    left: 1288px;
    transform: rotate(66deg);
}
._tipsTap {
    background-repeat: no-repeat;
    background-position: center center;
    background-color: rgb(255, 255, 255);
    background-image: url("images/_tipsTap.png");
    border: 20px solid rgb(3, 169, 244);
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: 580px;
    left: 824px;
    width: 360px;
    height: 360px;
}

._switchShifter, ._switchDial, ._switchSpeed, ._closeTips {
    cursor: pointer;
    display: block;
    position: absolute;
    left: 681px;
    top: 52px;
    width: 686px;
    height: 176px;
}
._switchDial, ._switchSpeed, ._closeTips {
    border-radius: 50%;
    top: 290px;
    left: 154px;
    width: 350px;
    height: 350px;
}
._switchSpeed { left: 1544px; }
._closeTips {
    top: 600px;
    left: 844px;
    width: 360px;
    height: 360px;
}

._Renault { background-image: url("images/_truckBrandRenault.png"); }
._Scania { background-image: url("images/_truckBrandScania.png"); }
._Volvo { background-image: url("images/_truckBrandVolvo.png"); }
._Daf { background-image: url("images/_truckBrandDaf.png"); }
._Iveco { background-image: url("images/_truckBrandIveco.png"); }
._Man { background-image: url("images/_truckBrandMan.png"); }
._MercedesBenz { background-image: url("images/_truckBrandMercedesBenz.png"); }
._Peterbilt { background-image: url("images/_truckBrandPeterbilt.png"); }
._Kenworth { background-image: url("images/_truckBrandKenworth.png"); }
._International { background-image: url("images/_truckBrandInternational.png"); }
._Freightliner { background-image: url("images/_truckBrandFreightliner.png"); }
._Mack { background-image: url("images/_truckBrandMack.png"); }
._WesternStar { background-image: url("images/_truckBrandWesternStar.png"); }
._Tesla { background-image: url("images/_truckBrandTesla.png"); }
._Ford { background-image: url("images/_truckBrandFord.png"); }
._Sisu { background-image: url("images/_truckBrandSisu.png"); }
._Kamaz { background-image: url("images/_truckBrandKamaz.png"); }
._Hino { background-image: url("images/_truckBrandHino.png"); }