/**
 * @author:	Emmanuel SMITH <hey@emmanuel-smith.me>
 * project:	ets2-dashboard-skin
 * file: 	test.scss
 * Date: 	01/05/2020
 * Time: 	17:40
 */

@import "~bourbon/core/bourbon";

@font-face {
	font-family: 'DSDIGI';
	src: url('../assets/font/DSDIGI.eot');
	src: local('DSDIGI'), url('../assets/font/DSDIGI.woff') format('woff'), url('../assets/font/DSDIGI.ttf') format('truetype');
}

.rd-info {
	background: #4d0000;
	
	.wrapper-area {
		display: flex;
		justify-content: center;
		align-items: center;
		
		> span {
			line-height: inherit;
			//margin-top: .5rem;
		}
	}
	
	.dashboard {
		position: absolute;
		background: url("../assets/img/bg-on.png") top left no-repeat;
		transform-origin: top left;
		left: 50%;
		top: 50%;
	}
	
	.trailer-name{
		color: #FF0000;
		font-size: 60px;
		font-weight: bold;
		position: absolute;
		left: 1px;
		top: 271px;
		width: 951px;
		height: 121px;
		justify-content: flex-start;
		
		> span { margin-left: 2.5rem; }
	}
	.job-sourceCity{
		color: #FF0000;
		font-size: 60px;
		font-weight: bold;
		position: absolute;
		top: 401px;
		left: 1px;
		width: 951px;
		height: 151px;
		justify-content: flex-start;
		
		> span { margin-left: 2.5rem; }
		
	}
	.job-destinationCity{
		color: #FF0000;
		font-size: 60px;
		font-weight: bold;
		position: absolute;
		top: 560px;
		left: 1px;
		width: 951px;
		height: 151px;
		justify-content: flex-start;
		
		> span { margin-left: 2.5rem; }
	}
	.job-remainingTime{
		color: #FF0000;
		font-size: 60px;
		font-weight: bold;
		position: absolute;
		top: 720px;
		left: 1px;
		width: 951px;
		height: 151px;
		justify-content: flex-start;
		
		> span { margin-left: 2.5rem; }
	}
	._jobIncome {
		color: #FF0000;
		font-size: 60px;
		font-weight: bold;
		position: absolute;
		top: 881px;
		left: 1px;
		width: 951px;
		height: 151px;
		justify-content: flex-start;
		
		> span { margin-left: 2.5rem; }
	}
	.truck-fuel {
		color: #FF0000;
		font-size: 80px;
		font-weight: bold;
		position: absolute;
		left: 150px;
		top: 1070px;
		font-family: Arial, Helvetica, sans-serif;
	}
	.truck-fuelAverageConsumption {
		color: #FF0000;
		font-size: 80px;
		font-weight: bold;
		position: absolute;
		left: 150px;
		top: 1240px;
	}
	._fuelAvg {
		color: #FF0000;
		font-size: 50px !important;
		font-weight: bold;
		position: absolute;
		left: 150px;
		top: 1330px;
	}
	.truck-make {
		color: #FF0000;
		font-size: 60px;
		font-weight: bold;
		position: absolute;
		left: 966px;
		top: 271px;
		width: 951px;
		height: 121px;
		justify-content: flex-start;
		
		> span { margin-left: 2.5rem; }
	}
	.truck-displayedGear {
		color: #FF0000;
		font-size: 150px;
		font-weight: bold;
		position: absolute;
		left: 870px;
		top: 40px;
	}
	.truck-wearEngine {
		color: #FF0000;
		font-size: 60px;
		font-weight: bold;
		position: absolute;
		left: 1200px;
		top: 401px;
		height: 150px;
		width: 231px;
	}
	.truck-wearCabin {
		color: #FF0000;
		font-size: 60px;
		font-weight: bold;
		position: absolute;
		left: 1200px;
		top: 560px;
		height: 150px;
		width: 231px;
	}
	.truck-wearWheels {
		color: #FF0000;
		font-size: 60px;
		font-weight: bold;
		position: absolute;
		left: 1200px;
		top: 720px;
		height: 150px;
		width: 231px;
	}
	.truck-wearTransmission {
		color: #FF0000;
		font-size: 60px;
		font-weight: bold;
		position: absolute;
		left: 1700px;
		top: 410px;
		height: 150px;
		width: 231px;
	}
	.truck-wearChassis {
		color: #FF0000;
		font-size: 60px;
		font-weight: bold;
		position: absolute;
		left: 1700px;
		top: 560px;
		height: 150px;
		width: 231px;
	}
	.trailer-wear {
		color: #FF0000;
		font-size: 60px;
		font-weight: bold;
		position: absolute;
		left: 1700px;
		top: 720px;
		height: 150px;
		width: 231px;
	}
	
	.truck-lightsParkingOn {
		background-image: url("../assets/img/auxlights-off.png");
		position: absolute;
		left: 1000px;
		top: 950px;
		width: 200px;
		height: 200px;
	}
	.truck-lightsParkingOn.yes {
		background-image: url("../assets/img/parklight-on.png");
	}
	.truck-lightsBeamLowOn {
		background-image: url("../assets/img/auxlights-off.png");
		position: absolute;
		left: 1225px;
		top: 950px;
		width: 200px;
		height: 200px;
	}
	.truck-lightsBeamLowOn.yes {
		background-image: url("../assets/img/lowbeam-on.png");
	}
	.truck-lightsBeamHighOn {
		background-image: url("../assets/img/auxlights-off.png");
		position: absolute;
		left: 1450px;
		top: 950px;
		width: 200px;
		height: 200px;
	}
	.truck-lightsBeamHighOn.yes {
		background-image: url("../assets/img/highbeam-on.png");
	}
	._auxLights {
		background-image: url("../assets/img/auxlights-off.png");
		position: absolute;
		left: 1675px;
		top: 950px;
		width: 200px;
		height: 200px;
	}
	._auxLights.yes {
		background-image: url("../assets/img/auxlights-on.png");
	}
	.truck-parkBrakeOn {
		background-image: url("../assets/img/dashalert-off.png");
		position: absolute;
		left: 1000px;
		top: 1200px;
		width: 200px;
		height: 200px;
	}
	.truck-parkBrakeOn.yes {
		background-image: url("../assets/img/parkbrake-on.png");
	}
	.truck-cruiseControlOn {
		background-image: url("../assets/img/dashalert-off.png");
		position: absolute;
		left: 1225px;
		top: 1200px;
		width: 200px;
		height: 200px;
	}
	.truck-cruiseControlOn.yes {
		background-image: url("../assets/img/cruisecontrol-on.png");
	}
	._airPressureOn {
		background-image: url("../assets/img/dashalert-off.png");
		position: absolute;
		left: 1450px;
		top: 1200px;
		width: 200px;
		height: 200px;
	}
	._airPressureOn.yes {
		background-image: url("../assets/img/airpressure-on.png");
	}
	._dangerWarning {
		background-image: url("../assets/img/dashalert-off.png");
		position: absolute;
		left: 1675px;
		top: 1200px;
		width: 200px;
		height: 200px;
	}
	._dangerWarning.yes {
		background-image: url("../assets/img/warning-on.png");
	}
	
	._gameBrakeBar {
		background-image: url("../assets/img/sidebar01.png");
		position: absolute;
		left: 132px;
		top: 52px;
		width: 606px;
		height: 56px;
	}
	._userBrakeBar {
		background-image: url("../assets/img/sidebar02.png");
		position: absolute;
		left: 132px;
		top: 162px;
		width: 606px;
		height: 56px;
	}
	._gameThrottleBar {
		background-image: url("../assets/img/sidebar01.png");
		position: absolute;
		left: 1270px;
		top: 52px;
		width: 606px;
		height: 56px;
	}
	._userThrottleBar {
		background-image: url("../assets/img/sidebar02.png");
		position: absolute;
		left: 1270px;
		top: 162px;
		height: 56px;
	}
	
	.trailer-name,
	.job-sourceCity,
	.job-destinationCity,
	.job-remainingTime,
	._jobIncome,
	.truck-fuel,
	.truck-fuelAverageConsumption,
	._fuelAvg,
	.truck-make,
	.truck-displayedGear,
	.truck-wearEngine,
	.truck-wearTransmission,
	.truck-wearCabin,
	.truck-wearChassis,
	.truck-wearWheels,
	.trailer-wear,
	._userThrottleBar,
	._userBrakeBar,
	._gameBrakeBar,
	.navigation-speedLimit,
	._gameThrottleBar {
		visibility: hidden;
		font-family: 'DSDIGI', Arial, Helvetica, sans-serif;
		font-size:85px;
	}
	
	.truck-displayedGear {
		font-family: 'DSDIGI';
		font-size: 200px;
		font-weight: bold;
		position: absolute;
		left: 806px;
		top: 0px;
		width: 310px;
		height: 261px;
		
	}
	.navigation-speedLimit {
		position: absolute;
		left: 610px;
		color: #FF0000;
		top: 1090px;
		font-size: 200px;
		font-weight: bold;
		text-align: center;
		width: 205px;
	}
	
	
	.dashboard.game-connected.yes .truck-displayedGear,
	.dashboard.game-connected.yes ._userThrottleBar,
	.dashboard.game-connected.yes ._userBrakeBar,
	.dashboard.game-connected.yes ._gameBrakeBar,
	.dashboard.game-connected.yes ._gameThrottleBar,
	.dashboard.game-connected.yes .truck-make,
	.dashboard.game-connected.yes .truck-wearEngine,
	.dashboard.game-connected.yes .truck-wearTransmission,
	.dashboard.game-connected.yes .truck-wearCabin,
	.dashboard.game-connected.yes .truck-wearWheels,
	.dashboard.game-connected.yes .truck-wearChassis,
	.dashboard.game-connected.yes .truck-fuel,
	.dashboard.game-connected.yes .truck-fuelAverageConsumption,
	.dashboard.game-connected.yes .navigation-speedLimit,
	.dashboard.game-connected.yes ._fuelAvg {
		visibility: visible;
	}
	.hasJob.yes .trailer-name,
	.hasJob.yes .job-sourceCity,
	.hasJob.yes .job-destinationCity,
	.hasJob.yes .job-remainingTime,
	.hasJob.yes .trailer-wear,
	.hasJob.yes ._jobIncome {
		visibility: visible;
	}
}