﻿:root {
	--primary-color: #c91c13;
	--hover-color: #212529;
}

body {
	background-image: url('/images/backgrounds/chery.jpg');
	-webkit-box-flex: 1;
	flex-grow: 1;
	background-color: #cbd5e0;
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

html, body, p {
	font-family: Arial;
}

nav .container {
	max-width: 100%;
}

#mainContent {
	margin-top: 8em !important;
	margin-bottom: 1em;
}

#mainContentBody {
	background-color: white;
	padding: 1em;
}

#searchTitle {
	padding: 0 !important;
}

.card {
	background-color: white;
}

	.card.mb-3 {
		border: none !important;
		padding: 0 !important;
		margin-bottom: 0 !important;
	}

.card-body {
	padding: 0 0.5rem !important;
}

#customerBrandingThemed .demo-header {
	border-top: 0.25rem;
	border-top-style: solid;
	border-top-color: var(--primary-color);
	background: #fff;
	height: 5em;
}

.btn-success, .btn-outline-info {
	border-radius: 0;
	width: 100%;
}

.alert-info {
	background: white !important;
	color: black !important;
}


#VehicleSearchFormContainer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 54px;
}

@media (max-width: 768px) {
	#VehicleSearchFormContainer {
		flex-direction: column;
		height: auto;
	}

		#VehicleSearchFormContainer input {
			width: 100%;
			margin-bottom: 10px;
		}
}

#vehicle-search-input {
	width: 290px;
	max-width: 18em;
	font-size: 1.3em;
	color: #495057;
	height: 2.6em;
}

#vehicle-search-button {
	width: 334px;
	height: 2.8em;
	font-size: 1.2em;
}

footer.mt-5 {
	margin-top: 0 !important;
}

.btn-success {
	background: var(--primary-color);
}

	.btn-success:hover {
		border-radius: 0;
		background: var(--hover-color) !important;
	}

.tyre-done-highlight {
	background-color: #70757A4d !important;
	;
}

.k-input:invalid, .tyreInformationTextColour, .details-correct, .axle-details, .text-dark, .tyre-history-text {
	color: #000 !important;
	font-weight: bold;
}

	.text-dark.btn-amend,
	.btn-success,
	.backButton,
	.backButton,
	.backButtonSlide,
	.btn-outline-info,
	.btn-outline-dark {
		color: white !important;
		font-size: 1em;
		background: var(--primary-color) !important;
		background-color: var(--primary-color);
		border: 1px solid var(--primary-color) !important;
	}

		.btn-outline-dark:hover,
		.btn-outline-dark:focus,
		.btn-outline-dark:active,
		.btn-outline-dark:disabled,
		.btn-outline-info:hover,
		.btn-outlive.info:focus,
		.btn-outline-info:active,
		.btn-outline-info:disabled,
		.btn-success:hover,
		.btn-success:focus,
		.btn-success:active,
		.btn-success:disabled,
		.backButton:hover,
		.backButton:focus,
		.backButton:active,
		.backButtonSlide:hover,
		.backButtonSlide:focus,
		.backButtonSlide:active {
			color: white !important;
			border-color: var(--hover-color) !important;
			background: var(--hover-color) !important;
			box-shadow: none !important;
			border-radius: 0;
		}

.tabButton {
	background-color: var(--primary-color) !important;
	color: white !important;
	padding: 0 !important;
	font-size: 1em !important;
	border-radius: 0 !important;
}

	.tabButton.btn-success {
		background-color: var(--primary-color) !important;
		color: white !important;
		border-radius: 0 !important;
		border: none !important;
	}

	.tabButton:hover {
		background-color: var(--hover-color) !important;
		color: white !important;
		border-radius: 0 !important;
	}

	.tabButton:active {
		background-color: var(--hover-color) !important;
		color: white !important;
		border-radius: 0 !important;
	}

.additionalPadding {
	margin: 0;
	padding-left: 1em !important;
	padding-right: 1em !important;
}

.h5 {
	font-size: 1rem !important;
}

.whiteBackground {
	background: #fff !important;
}

.redBackground, .redText {
	color: #000 !important;
	font-weight: bold;
}

#editHistory {
	color: #fff !important;
}

.summary-row,
.tyre-detail-summary-titles span {
	font-weight: normal !important;
	color: black !important;
	background-color: white !important;
}

.header-row {
	margin-top: 0.75rem;
}

.demo-header {
	height: 90px;
}

.vehicle-details-label label {
	font-weight: normal !important;
}

.tyre-history {
	color: black !important;
}

.tyre-details label {
	color: red;
}
