@import url( "elements.css" );


/*=== Generics ===============================================================*/
html,
body{
	height: 100%;
}

[aria-hidden=""],
[aria-hidden="true"]{
	display: none !important;
}
/*=== Generics ===============================================================*/



/*=== Fonts ==================================================================*/
html{
	font-size: 62.5%;
}

body{
	height: calc( 100vh - calc( 100vh - 100% ));
	color: white;
	line-height: 1.5;
	font-family: "Poppins", sans-serif;
	font-size: 1.8rem;
}
	body.outer{
		color: black;
	}

.chrome,
.chrome a{
	color: black;
	text-decoration: none;
}

main h1{
	font-size: 3.4rem;
}
/*===== End Fonts ============================================================*/


/*=== Structure ==============================================================*/
body{
	display: grid;
	grid-template-columns: 60px auto;
	grid-template-rows: 60px auto 40px;
	gap: 0;
	background-color: white;
}

body > header{
	display: flex;
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	justify-content: space-between;
	line-height: 60px;
	background-color: var( --main-black );
}
	body.outer > header{
		background-color: white;
	}
	.logo.brand{
		margin: 20px 0 0 -53px;
		background-size: cover;
		width: 45px;
		height: 19px;
	}
		body.brand-moto .logo.brand{
			background-image: url( '/assets/img/rm-logo-light.svg' );
		}

		body.brand-auto .logo.brand{
			background-image: url( '/assets/img/ra-logo-light.svg' );
		}

	.logo.garage{
		position: relative;
		display: block;
		margin-left: 115px;
		width: 130px;
	}
		.inner .logo.garage img{
			filter: invert( 100% );
		}

		.logo.garage img{
			width: 100%;
		}

		.logo.garage::after{
			position: absolute;
			display: inline-block;
			top: 20px;
			left: 140px;
			border-radius: 10px;
			padding: 4px 6px;
			content: "beta";
			color: white;
			background-color: var( --ram-blue );
			line-height: 1;
			z-index: 99;
		}

	body > header nav{
		display: flex;
		position: relative;
		width: 60px;
	}
		body.outer > header nav{
			width: 170px;
		}

		body > header nav i.fa{
			padding-right: 5px;
		}

		body > header ul.menu.user{
		}
			body > header ul.menu.h.user li{
				padding: 0 10px;
			}

		body > header nav .profile-img{
			margin: 10px 10px 0 0;
			border: 1px solid black;
			width: 40px;
			height: 40px;
			vertical-align: top;
			cursor: pointer;
		}

	#user-menu{
		position: absolute;
		top: 64px;
		right: 20px;
		border: 1px solid #333333;
		border-radius: 8px;
		background-color: white;
		padding: 0 0 8px;
		width: 270px;
		color: var( --main-black );
		text-align: center;
		overflow: hidden;
		z-index: 10;
	}
		#user-menu header{
			position: relative;
			margin-bottom: 40px;
			height: 70px;
		}
			body.brand-moto #user-menu header{
				background-color: var( --ram-red );
			}

			body.brand-auto #user-menu header{
				background-color: var( --ram-blue );
			}

			#user-menu .profile-img{
				position: absolute;
				bottom: -30px;
				left: 50%;
				margin-left: -30px;
				width: 60px;
				height: 60px;
			}

		#user-menu span{
			display: block;
			padding: 8px 0;
			height: 30px;
			line-height: 14px;
			font-size: 1.4rem;
		}

		#user-menu .username{
			font-size: 2.1rem;
		}

		#user-menu ul{
			margin-top: 5px;
			border-top: 1px solid #666666;
			text-align: left;
			font-size: 1.6rem;
		}
			#user-menu li{
				height: 42px;
				line-height: 16px;
			}
				#user-menu li:before{
					content: "";
				}

				#user-menu li:hover{
					background-color: #EFEFEF;
				}

				#user-menu a{
					display: block;
					padding: 13px 10px;
					color: var( --main-black );
				}

body > nav{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 4;
}
	body > nav ul{
		justify-content: center;
		height: 100%;
	}
		body > nav li{
			position: relative;
			margin-bottom: 12px;
			height: 55px;
			line-height: 55px;
			text-align: center;
		}
			.chrome li a{
				color: var(--grey);
			}
				body.brand-moto nav.chrome a:hover,
				body.brand-moto nav.chrome li.active-path a:hover{
					color: var( --ram-red );
				}

				body.brand-auto nav.chrome a:hover,
				body.brand-auto nav.chrome li.active-path a:hover{
					color: var( --ram-blue );
				}

			nav.chrome li.active-path a{
				color: var(--main-black);
			}
				body > nav li.active-path a:before{
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					border-radius: 0 8px 8px 0;
					content: "";
				}
					body.brand-moto > nav li.active-path a:before{
						border-right: 8px solid var( --ram-red );
					}

					body.brand-auto > nav li.active-path a:before{
						border-right: 8px solid var( --ram-blue );
					}

body > main{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	background-color: var( --main-black );
	padding: 25px 50px;
	overflow-x: hidden;
	overflow-y: auto;
}
	body.outer > main {
		background-color: white;
	}

	main #messages{
		text-align: center;
	}
		main #messages span{
			display: inline-block;
			margin-top: 10px;
			border-radius: 10px;
			background-color: #FF6666;
			padding: 15px 20px;
		}

	main > header{
		display: flex;
		height: 60px;
		line-height: 60px;
	}
		main > header h1{
			margin: 0 20px 0 0;
		}
	body > main li a{
		color: white;
	}

	.bikes{
		display: grid;
		grid-template-columns: repeat( auto-fill, minmax( 260px, 260px ));
		gap: 30px;
		text-align: center;
	}

body > footer{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 3;
	grid-row-end: 4;
	flex-grow: 0;
	background-color: var( --main-black );
	padding-right: 20px;
	line-height: 40px;
	text-align: right;
	color: white;
}
	body.outer > footer{
		background-color: white;
		color: black;
	}
/*============================================================================*/

/*=== Typography =============================================================*/
body > header nav,
body > header nav a,
body > header nav a:active{
	color: white;
}
/*============================================================================*/


/*=== Pages ==================================================================*/
/* Bike Index */
/* Define badge wiggle */
@keyframes wiggle{
	0%{ transform: rotate( 3deg ); }
	50%{ transform: rotate( -3deg ); }
	100%{ transform: rotate( 3deg ); }
}

.bikes .vehicle-badge:not(.add):hover{
	animation: wiggle .3s 2;
}

/* Homepage */
#main-homepage a{
	color: white;
	font-weight: bold;
}

/* Bike View */
#page-vehicle-overview{
	margin: 0 auto;
	max-width: 1100px;
}
	
	#page-vehicle-overview header,
	#page-vehicle-logs header{
		margin: 30px 0;
		height: 50px;
		line-height: 60px;
	}

	#vehicle-view li.active-path a{
		text-decoration: underline;
	}

/* Vehicle Pages */
#page-vehicle-overview,
#page-vehicle-logs,
#page-vehicle-specs,
#page-vehicle-settings{
	margin: 0 auto;
	width: 95%;
	max-width: 1200px;
}
	

/* Bike Overview */
#main-vehicle-overview{
}
	#main-vehicle-overview #overview-content{
		display: grid;
		grid-template-columns: repeat( auto-fill, minmax( 340px, 500px ));
		gap: 30px;
	}


/* Bike Logs */
#main-vehicle-logs{
}
	#page-vehicle-logs{
	}

		#page-vehicle-logs > header{
			display: flex;
			height: 60px;
		}
			#page-vehicle-logs > header > h1{
				margin: 0;
			}

	#main-vehicle-logs #table-logs{
		display: grid;
		grid-template-columns: repeat( auto-fill, minmax( 500px, 1fr ));
		gap: 30px;
		margin: 0 auto;
	}
		#page-vehicle-logs #table-logs .log{
			display: grid;
			grid-template-columns: 70px 24% 22% auto;
			grid-template-rows: 35px 35px;
			border-radius: 10px;
			background-color: white;
			padding-right: 15px;
			min-width: 300px;
			line-height: 35px;
			color: var(--main-black);
		}
			#page-vehicle-logs #table-logs .log a{
				color: var(--main-black);
			}

			#page-vehicle-logs #table-logs .log .icon{
				grid-row-start: 1;
				grid-row-end: 3;
				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;
				line-height: 70px;
				text-align: center;
				color: white;
				font-size: 2.0rem;
			}
				#page-vehicle-logs #table-logs .log .icon.fuel{
					background-color: orange;
				}
					#page-vehicle-logs #table-logs .log .icon.fuel.electric{
						background-color: green;
					}

				#page-vehicle-logs #table-logs .log .icon.mileage{
					background-color: black;
				}

				#page-vehicle-logs #table-logs .log .icon.service{
					background-color: #0d86ff;
				}

			#page-vehicle-logs #table-logs .log > span{
				padding: 0 12px;
			}

			#main-vehicle-logs #table-logs .log .date{
				grid-column-start: 2;
				grid-column-end: 3;
				min-width: 132px;
			}

			#page-vehicle-logs #table-logs .log span.mileage{
				grid-column-start: 3;
				grid-column-end: 4;
				display: flex;
				min-width: 125px;
			}
				#page-vehicle-logs #table-logs .log span.mileage i.fa{
					margin-right: 8px;
					line-height: 35px;
				}

			#main-vehicle-logs #table-logs .log .fuel-report{
				grid-column-start: 2;
				grid-column-end: 5;
				grid-row-start: 2;
				grid-row-end: 3;
			}

			#main-vehicle-logs #table-logs .log .description{
				grid-column-start: 2;
				grid-column-end: 5;
				grid-row-start: 2;
				grid-row-end: 3;
			}
				#main-vehicle-logs #table-logs .log .description.medium,
				#main-vehicle-logs #table-logs .log .description.small{
					display: none;
				}

				#main-vehicle-logs #table-logs .log .description.none{
					text-align: center;
					color: #C1C1C1;
				}

			#page-vehicle-logs #table-logs .log .action-items{
				grid-column-start: 4;
				grid-column-end: 5;
				justify-self: end;
				text-align: center;
			}
				#page-vehicle-logs #table-logs .log .action-items li{
					padding: 0;
					width: 34px;
					text-align: center;
				}

				#page-vehicle-logs #table-logs .log .action-items li.edit{
					display: none;
				}

			#page-vehicle-logs #table-logs .log.empty p{
				margin: 0;
				width: 100%;
				text-align: center;
			}


/* Bike Add */
form.add-bike{
}
	form.add-bike #licensePlateState,
	form.settings #licensePlateState{
		width: 40%;
	}

	form.add-bike #licensePlateNo,
	form.settings #licensePlateNo{
		width: 60%;
	}

/* Tasks */
#main-tasks{
}
	#main-tasks .tasks{
		margin-top: 35px;
	}
		#main-tasks .task{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20px;
			border-radius: 10px;
			background-color: white;
			width: 100%;
			max-width: 700px;
			height: 45px;
			color: var( --main-black );
		}
			#main-tasks .task input[type="checkbox"]{
				margin: 0 10px;
			}

			#main-tasks .task .text{
				flex-grow: 1;
			}

			#main-tasks .task .date-label{
				margin: 0 5px;
				border-radius: 6px;
				background-color: #02b702;
				padding: 2px 6px;
				color: white;
				font-size: 1.2rem;
			}
				#main-tasks .task .date-label i.fa{
					margin-right: 5px;
				}

			#main-tasks .task .delete-button{
				display: none;
				width: 45px;
				text-align: center;
			}
				#main-tasks .task:hover .delete-button{
					display: inline;
				}

				#main-tasks .task .delete-button a{
					color: var( --main-black );
				}
					#main-tasks .task .delete-button:hover a{
						color: red;
					}
/*=== End Pages ==============================================================*/



/*=== Elements ===============================================================*/
ul.menu{
	margin: 0;
	padding: 0;
}
	ul.menu.h{
		display: flex;
	}
		ul.menu.h li{
			padding: 0 10px;
			list-style: none;
		}

	ul.menu.v{
		display: flex;
		flex-direction: column;
	}
		ul.menu.v li{
		}

.ui-button{
	color: white;
	font-size: 2.4rem;
}
	.ui-button i:hover{
		color: var(--accent-color);
	}

	.ui-button.open{
		margin: 0 10px;
		line-height: normal;
	}

	.ui-button.fuel-color{
		border-radius: 5px;
		background-color: orange;
		padding: 2px 10px;
		text-decoration: none;
		font-size: 2.0rem;
	}

	.ui-button.mileage-color{
		border-radius: 5px;
		background-color: black;
		padding: 2px 10px;
		text-decoration: none;
		font-size: 2.0rem;
	}

	.ui-button.service-color{
		border-radius: 5px;
		background-color: #0d86ff;
		padding: 2px 10px;
		text-decoration: none;
		font-size: 2.0rem;
	}

form.standard{
	margin: 0 auto;
	width: 100%;
	max-width: 400px;
}
	form.standard .input-groups{
		display: flex;
	}
		form.standard .input-groups .input-group{
			width: 100%;
		}

		form.standard .input-groups .input-group:not(:first-child){
			margin-left: 15px;
		}

	form.standard .input-group{
		position: relative;
		display: flex;
		padding: 10px 0;
	}
		form.standard .input-group.attached{
		}

		form.standard .input-group.clipboard-copy{
			position: relative;
		}
			form.standard .input-group.clipboard-copy button{
				position: absolute;
				top: 50%;
				right: 2px;
				margin-top: -16px;
				border: none;
				background-color: var(--main-black);
				height: 32px;
				color: white;
			}

		form.standard .input-group label{
			position: absolute;
			top: 0;
			left: 10px;
			z-index: 2;
			background-color: var(--main-black);
			padding: 1px 5px;
			font-size: 1.3rem;
		}
			.outer form.standard .input-group label{
				top: -10px;
				left: 0px;
				background-color: transparent;
			}

			form.standard .input-group.required label::after{
				content: " *";
				color: red;
			}

	form.standard input,
	form.standard select{
		border-radius: 5px;
		border: 1px solid #DEDEDE;
		background-color: var(--main-black);
		padding: 6px;
		width: 100%;
		height: 35px;
		color: white;
	}
		/* Override browser default styling */
		form.standard input[type="datetime-local"],
		form.standard select{
			-webkit-appearance: none;
		}

		form.standard .input-group.attached *:nth-child(2){
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

		form.standard .input-group.attached *:last-child{
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			border-right: 1px solid #DEDEDE !important;
		}

		form.standard .input-group.attached :not(*:first-child){
			border-right: 0;
		}
	
	form.standard .required-warning{
		margin-top: 0;
		font-size: smaller;
		text-align: right;
	}

	form.standard ::-webkit-calendar-picker-indicator {
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23ffffff" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
	}

	form.standard input[type="submit"]{
		cursor: pointer;
	}
		form.standard input[type="submit"]:hover{
			background-color: #0d86ff;
		}
	
	form.standard a{
		color: white;
	}

.tooltip{
	position: relative;
	font-size: smaller;
}
	.tooltip::before{
		display: none;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 100%;
		margin-left: 15px;
		border-radius: 8px;
		background-color: black;
		padding: 10px;
		width: 200px;
		color: white;
		content: attr(data-text);
		text-align: center;
	}
	
	.tooltip::after{
		display: none;
		position: absolute;
		left: 100%;
		top: 50%;
		transform: translateY(-50%);
		margin-left: -5px;
		border: 10px solid black;
		border-color: transparent black transparent transparent;
		content: "";
	}
		.tooltip:hover:before,
		.tooltip:hover:after{
			display: block;
		}

.weather-display{
	display: inline-block;
	border-radius: 10px;
	width: 150px;
	background-color: black;
	padding: 10px 15px;
	text-align: center;
}
	.weather-display img{
		width: 90px;
	}

	.weather-display span{
		display: block;
	}
/*=== End Elements ===========================================================*/


/*=== Classes ================================================================*/
.circle-mask{
	border-radius: 50%;
}

.hilight{
	color: var(--primary-color);
}

.yes-mobile{
	display: none;
}

.card{
	border-radius: 10px;
	background-color: white;
	padding: 10px 20px;
	color: black;
}
	.card a{
		color: black;
	}

	.card.styled{
		border-left: 20px solid #DEDEDE;
	}
		.card.styled h3{
			margin: 6px 0 10px;
			font-size: 1.9rem;
		}

		.card.styled td:first-child{
			padding-right: 20px;
		}

.outer,
body.outer a{
	color: black;
}
/*===== End Classes ==========================================================*/


/*=== Components =============================================================*/
.vehicle-badge{
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 8px;
	background-color: white;
	width: 260px;  /* Default but can be overriden */
	height: 350px;  /* Default but can be overriden */
	font-size: 1.8rem; /* Default but can be overriden */
	color: black;
	text-decoration: none;
	text-align: center;
}
	.vehicle-badge.add{
		border: 4px dashed #BCBCBC;
		background-color: #333333;
		padding: 50px 25px 10px;
		color: white;
		vertical-align: middle;
	}
		.vehicle-badge.add:hover{
			background-color: #555555;
		}

	.vehicle-badge .top{
		display: grid;
		grid-template-columns: 31% 38% 31%;
		grid-template-rows: 100%;
		place-items: center center;
		width: 100%;
		height: 8.622%;
	}
		.vehicle-badge .top .slot{
			grid-column-start: 2;
			border-radius: 5px;
			background-color: black;
			width: 100%;
			height: 16.667%;
		}

		.vehicle-badge .top .year{
			font-size: 83.333%;
		}

	.vehicle-badge .make{
		margin-bottom: 11.63%;
		width: 100%;
		height: 12.645%;
		line-height: 264%;
		font-weight: bold;
	}

	.vehicle-badge .name-1,
	.vehicle-badge .name-2{
		display: block;
		height: 11.4%;
		font-family: "Audiowide", sans-serif;
	}
		.vehicle-badge .name-1{
			font-size: 144.444%;
		}

		.vehicle-badge .name-2{
			font-size: 83.333%;
		}

	.vehicle-badge img{
		width: 70%;
	}

	.vehicle-badge .metrics{
		margin-top: 9.69%;
		display: grid;
		grid-template-columns: 22% 28% 22% 28%;
		grid-template-rows: 55% 45%;
		grid-auto-flow: column;
		padding: 0 3.8%;
		width: 100%;
		height: 11.495%;
	}
		.vehicle-badge i.fa{
			grid-row-start: span 2;
			font-size: 200%;
		}

		.vehicle-badge .metric-name{
			font-size: 66.666%;
		}

.vin-box{
	position: relative;
	display: block;
	background-color: black;
	padding: 0 12px 0 32px;
	height: 35px;
	line-height: 35px;
	color: white;
	font-size: 1.9rem;
}
	.vin-box::before{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		background-color: #0d86ff;
		padding-bottom: 3px;
		width: 20px;
		content: "VIN";
		font-family: 'Roboto Mono', monospace;
		font-size: 0.9rem;
		font-weight: bold;
		line-height: 20px;
		writing-mode: vertical-rl;
		text-orientation: upright;
		letter-spacing: -3px;
		text-align: center;
	}

#vehicle-view{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	margin-top: 30px;
	border-radius: 10px;
	background-color: white;
	padding: 10px 200px 10px 20px;
	color: black;
}
	#vehicle-view a{
		color: black;
	}

	#vehicle-view .vehicle-badge{
		position: absolute;
		top: -40px;
		right: 20px;
		border: 1px solid black;
		width: 179px; /* override */
		height: 240.961px; /* override */ 
		font-size: 1.2rem; /* override */ 
	}

	#vehicle-view h2{
		margin: 0 30px 20px 0;
	}
		#vehicle-view h2 span{
			letter-spacing: 4px;
		}

	#vehicle-view .menu{
		width: 100%;
	}
		#vehicle-view .menu a{
			text-decoration: none;
		}

.license-plate{
	background-image: url( '/assets/img/ra-license-plate.svg' );
	background-size: cover;
	background-repeat: no-repeat;
	padding-top: 2px;
	width: 175px;
	height: 100px;
	color: var(--main-black);
	font-size: 2.8rem;
	text-align: center;
}
	.license-plate span{
		display: block;
	}

	.license-plate .state{
		font-size: 0.7em;
	}

	.license-plate .no{
		font-weight: bold;
	}
/*=== End Components =========================================================*/