main .menu > *:not(span:last-of-type) {
	white-space: nowrap;
}

main .menu {
	flex-wrap: wrap;
	justify-content: center;
}

	main .menu > a.active {
		position: relative;
	}

		main .menu > a.active::before {
			content: "";
			position: absolute;
			bottom: -9px;
			left: 0;
			height: 4px;
			width: 100%;
			border-radius: 10px;
			background: var(--saa-yellow);
			transition: 400ms;
		}
/*#region Model*/
#Model {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	height: 600px;
}

	#Model > div {
		position: relative;
		width: 100%;
		height: 100%;
		background: var(--saa-blue);
		overflow: hidden;
	}

		#Model > div:first-of-type {
			position: relative;
			width: 100%;
			height: 100%;
			background: var(--saa-blue);
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 1rem;
		}

			#Model > div:first-of-type > div {
				position: absolute;
				z-index: 97;
				right: 14px;
				top: 6px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 1rem;
				display: none;
			}

				#Model > div:first-of-type > div > a {
					position: relative;
					z-index: 99;
					background: #fff;
					padding: 15px;
					border-radius: 20px;
					height: 30px;
					width: 30px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: 11px;
					text-align: center;
					color: var(--saa-blue);
					gap: 3px;
				}

					#Model > div:first-of-type > div > a > i {
						color: var(--saa-blue);
						font-size: 20px;
					}

		#Model > div::after {
			content: "";
			position: absolute;
			height: 50%;
			width: 100%;
			background: #e9f0f6;
			left: 0;
			bottom: 0;
		}

		#Model > div:first-of-type:before {
			content: "";
			position: absolute;
			height: 534px;
			width: 90%;
			left: -10px;
			top: 44px;
			z-index: 0;
			border-radius: 50%;
			border: 40px solid #19446e;
			outline: 40px solid #183e63;
			background: #1d5181;
		}

		#Model > div:first-of-type > h1 {
			position: relative;
			color: #fff;
			font-size: 45px;
			z-index: 10;
		}

		#Model > div:first-of-type > img {
			position: relative;
			height: 200px;
			top: 4px;
			z-index: 98;
			transform: rotateY(180deg);
		}

		#Model > div:first-of-type > span {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			color: var(--saa-blue);
		}

			#Model > div:first-of-type > span > select {
				background: #fff;
				border: none;
				border-radius: 30px;
				padding: 10px 15px;
				color: var(--saa-blue);
				font-size: 15px;
				outline: none;
			}

		#Model > div:first-of-type > div > select {
			padding: 5px 10px;
			border-radius: 30px;
			background: #fff;
			border: none;
			font-size: 15px;
			font-size: 15px;
			outline: none;
		}

		#Model > div:first-of-type > p {
			position: relative;
			z-index: 98;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 5px;
		}

			#Model > div:first-of-type > p > span {
				height: 20px;
				width: 20px;
				border-radius: 50px;
				background: var(--car-color);
				cursor: pointer;
				border: 1px solid gray;
			}

				#Model > div:first-of-type > p > span.carActive {
					border: 2px solid gray;
				}

		#Model > div:first-of-type > span {
			position: relative;
			z-index: 99;
			color: var(--saa-blue);
			font-weight: 500;
		}





		#Model > div:last-of-type {
			position: relative;
			z-index: 8;
			display: flex;
			flex-direction: column;
			align-items: start;
			justify-content: center;
			gap: 2rem;
		}

			#Model > div:last-of-type > p {
				color: #fff;
				font-size: 30px;
				font-weight: 700;
			}

				#Model > div:last-of-type > p > span {
					display: block;
					font-size: 20px;
					font-weight: 500;
				}

			#Model > div:last-of-type > div {
				display: flex;
				align-items: center;
				gap: 1rem;
			}

				#Model > div:last-of-type > div > form {
					position: relative;
					z-index: 99;
					background: #fff;
					border: 3px solid #e9f0f6;
					border-radius: 1rem;
					padding: 1rem;
					box-shadow: 0px 0px 10px 0px rgb(193 213 230 / 45%);
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 300px;
				}
				
					#Model > div:last-of-type > div > form > p {
						font-size: 17px;
						color: var(--saa-blue);
						font-weight: 500;
					}

					#Model > div:last-of-type > div > form > input,
					#Model > div:last-of-type > div > form > div:first-of-type > input {
						width: 235px;
						padding: 8px 16px;
						font-size: 12px;
						border-radius: 30px;
						outline: none;
						color: #b9b9b9;
						margin-top: 12px;
						background: #f6f6f6;
						border: solid 1px #dfdfdf52;
						transition: 200ms;
					}

						#Model > div:last-of-type > div > form > input::placeholder,
						#Model > div:last-of-type > div > form > div:first-of-type > input::placeholder {
							color: #b9b9b9;
						}

					#Model > div:last-of-type > div > form > div:first-of-type {
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 12px;
						width: 268px;
					}

						#Model > div:last-of-type > div > form > div:first-of-type > input {
							width: 50%;
						}

							#Model > div:last-of-type > div > form > input:hover,
							#Model > div:last-of-type > div > form > div:first-of-type > input:hover {
								border: solid 1px #b7b7b7;
							}

					#Model > div:last-of-type > div > form > p:last-of-type {
						height: 46px;
						overflow: auto;
						font-size: 9px;
						width: 259px;
						color: #cfcfcf;
						margin: 10px 0;
					}
					#Model > div:last-of-type > div > form > small {
						font-size: 10px;
						color: gray;
						width: 259px;
						margin-bottom: 8px;
						border-bottom: 1px solid #8080805c;
						padding-bottom: 6px;
					}
						#Model > div:last-of-type > div > form > small > a {
							text-decoration: underline;
							color: var(--saa-blue);
						}
						#Model > div:last-of-type > div > form > .OfferCheckBoxLabel {
							width: 259px;
							font-size: 12px;
							color: gray;
							margin-bottom: 10px;
							display: flex;
							align-items: center;
							gap: 5px;
						}
						#Model > div:last-of-type > div > form > .OfferCheckBoxLabel a {
							text-decoration: underline;
							color: var(--saa-blue);
						}
						#Model > div:last-of-type > div > form > p:last-of-type::-webkit-scrollbar {
							width: 6px;
						}

					#Model > div:last-of-type > div > form > p:last-of-type::-webkit-scrollbar-thumb {
						background-color: var(--saa-yellow);
						border-radius: 6px;
					}

					#Model > div:last-of-type > div > form > p:last-of-type::-webkit-scrollbar-track {
						background-color: #e9e9e9;
						border-radius: 20px;
						width: 10px;
					}

					#Model > div:last-of-type > div > form > button {
						position: relative;
						z-index: 99;
						background: var(--saa-yellow);
						border: none;
						border-radius: 30px;
						font-weight: 500;
						color: var(--saa-blue);
						padding: 7px 70px;
						cursor: pointer;
						font-size: 14px;
						text-align:center;
					}

					#Model > div:last-of-type > div > form > span {
						font-size: 12px;
						color: #9e9e9e;
						margin: 5px 0 0 0;
						font-weight: 500;
						text-align:center;
					}
						#Model > div:last-of-type > div > form > span.passiveModel {
							padding:1rem;
							position: absolute;
							background: #ffffffc9;
							top: 0;
							right: 0;
							bottom: 0;
							left: 0;
							z-index: 333;
							display: grid;
							place-items: center;
							font-size: 25px;
							border-radius: 20px;
						}

				#Model > div:last-of-type > div > div {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 1rem;
				}

					#Model > div:last-of-type > div > div > div {
						position: relative;
					}

						#Model > div:last-of-type > div > div > div > a {
							position: relative;
							z-index: 99;
							background: #fff;
							padding: 15px;
							border-radius: 20px;
							height: 40px;
							width: 40px;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							font-size: 11px;
							text-align: center;
							color: var(--saa-blue);
							gap: 3px;
						}

						#Model > div:last-of-type > div > div > div > div {
							display: none;
							justify-content: center;
							align-items: center;
							width: 130px;
							height: 60px;
							background: var(--saa-lightBlue);
							position: absolute;
							z-index: 10000;
							bottom: 50%;
							right: 0;
							transform: translate(108%, 50%);
							font-size: 26px;
							border-radius: 50px;
							transition: 0.5s;
						}

#socialMediaIcons > i {
	cursor: pointer;
}
#Model > div:last-of-type > div > div > div > a{

	cursor: pointer;
}
#Model > div:last-of-type > div > div > div > a > i {
	color: var(--saa-blue);
	font-size: 25px;
}

#Model > div:last-of-type > div > div > div > div > i:nth-of-type(2) {
	margin-left: 20px;
}

#Model > div:last-of-type > div > div > a {
	position: relative;
	z-index: 99;
	background: #fff;
	padding: 15px;
	border-radius: 20px;
	height: 40px;
	width: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	text-align: center;
	color: var(--saa-blue);
	gap: 3px;
	cursor:pointer;
}

	#Model > div:last-of-type > div > div > a > i {
		color: var(--saa-blue);
		font-size: 25px;
	}

/*#endregion */

/*#region brandInfo*/
#brandInfo * {
	color: #4f4f4f !important;
	font-weight: 500 !important;
	font-family: Gilroy, Arial !important;
}

#brandInfo :is(h1,h2,h3,h4,h5,h6) {
	font-size: 18px !important;
	margin: 30px 0 9px 0 !important;
}

#brandInfo a *,
#brandInfo a {
	text-decoration: underline;
}
/*#endregion*/


#ChartDateFilter {
	text-align: center;
	display: flex;
	justify-content: center;
}

	#ChartDateFilter > button {
		display: inline-block;
		color: #003658;
		background-color: #fff;
		padding: 5px 15px;
		font-size: 17px;
		font-weight: bold;
		border: solid 1px;
		cursor: pointer;
		border-right: 0;
	}

		#ChartDateFilter > button:last-of-type {
			border-right: 1px solid;
		}

.ActiveChartYear {
	display: inline-block !important;
	color: #fff !important;
	background-color: #153655 !important;
	padding: 5px 15px !important;
	font-size: 17px !important;
	font-weight: bold !important;
	border: 0 !important;
	cursor: pointer !important;
}


/*#region fixedForm*/
#Model > div:last-of-type > div > form.fixedForm {
	position: fixed;
	top: -100px;
	left: 0;
	width: calc(100% - 2rem);
	flex-direction: row;
	gap: 6px;
	border-radius: 0;
	animation: slideDown 0.5s forwards;
}

@keyframes slideDown {
	from {
		top: -100px;
	}

	to {
		top: 0;
	}
}



#Model > div:last-of-type > div > form.fixedForm > p:not(p:last-of-type),
#Model > div:last-of-type > div > form.fixedForm > span {
	display: none;
}

#Model > div:last-of-type > div > form.fixedForm input:not(input[type="checkbox"]) {
	max-width: 100px;
	min-width: 100px;
	margin: 0;
	color: black;
	border: solid 1px #b7b7b7;
}

	#Model > div:last-of-type > div > form.fixedForm input:not(input[type="checkbox"]):hover {
		border: solid 1px var(--saa-blue);
	}

	#Model > div:last-of-type > div > form.fixedForm input:not(input[type="checkbox"])::placeholder {
		color: black;
	}

#Model > div:last-of-type > div > form.fixedForm > button {
	padding: 7px 27px;
	font-size: 14px;
	white-space: nowrap;
}

#Model > div:last-of-type > div > form.fixedForm > p:last-of-type {
	height: 30px;
	width: 10%;
	overflow-x: hidden;
	margin: 0;
	color: #b0b0b0;
	font-weight: 100;
	font-size: 8px;
}

#Model > div:last-of-type > div > form.fixedForm > .OfferCheckBoxLabel {
	width: max-content;
	margin: 0;
}

#Model > div:last-of-type > div > form.fixedForm > div:first-of-type {
	gap: 7px;
	width: auto;
}

#Model > div:last-of-type > div > form.bmwForm{
	position:relative;
}


main .menu > *:not(span:last-of-type) {
	font-size: 16px;
}


#vehicleMenu {
	border-radius: 30px;
	font-size: 12px;
	border: 1px solid var(--saa-blue);
	padding: 5px;
	outline: none;
	height: 33px;
	display: none;
	width: max-content;
	margin: 2rem auto;
}

.passiveCarPageDetail {
	display: grid !important;
	place-items: center;
	color: #9e9e9e;
	font-weight: 500;
	text-align: center;
	font-size: 1.4rem;
	max-height: 100px;
}
/*#endregion */
@media(max-width:1400px) {
	/*#region Model */
	#Model > div:first-of-type:before {
		height: 434px;
		top: 72px;
		border: 35px solid #19446e;
		outline: 35px solid #183e63;
	}

	#Model > div:first-of-type > img {
		top: 11px;
	}
	/*#endregion */
}

@media(max-width:1200px) {
	/*#region Model */
	#Model > div:first-of-type > img {
		height: 150px;
	}

	#Model > div:last-of-type > div > form {
		width: 330px;
	}
	/*#endregion */

}

@media(max-width:992px) {

	#Model > div:last-of-type > div> form.fixedForm{
		display:none;
	}

	@keyframes slideDown {
		from {
			top: -100px;
		}

		to {
			top: 68px;
		}
	}

	#Model > div:last-of-type > div > form.fixedForm input:not(input[type="checkbox"]) {
		max-width: 60px;
		min-width: 60px;
	}

	#Model > div:last-of-type > div > form.fixedForm > p:last-of-type {
		height: 42px;
		width: 13%;
	}

	#Model > div:last-of-type > div > form.fixedForm > .OfferCheckBoxLabel {
		font-size: 10px;
	}

main	.menu {
		gap: 1rem;
	}

	/*#region Model */
	#Model {
		flex-direction: column;
		height: auto;
	}

		#Model > div:first-of-type {
			height: 450px;
			justify-content: end;
			padding-bottom: 50px;
		}

			#Model > div:first-of-type::after {
				height: 45%;
			}

		#Model > div:last-of-type {
			background: var(--saa-lightBlue);
			align-items: center;
			justify-content: start;
			overflow: inherit;
			height: 550px;
		}

			#Model > div:last-of-type > div > form {
				width: 300px;
			}

			#Model > div:last-of-type::after {
				background: #fff;
			}

			#Model > div:last-of-type > p {
				text-align: center;
				color: var(--saa-blue);
			}

		#Model > div:first-of-type:before {
			width: 90%;
			left: 15px;
		}

		#Model > div:last-of-type > div > div {
			display: none !important;
		}

		#Model > div:first-of-type > div {
			display: flex !important;
		}
	/*#endregion */
}

@media(max-width:768px) {
	#vehicleMenu {
		display: block;
		margin: 0 auto;
		
	}

	main .menu {
		display: none !important;
	}

	#Model > div:last-of-type {
		height: 448px;
	}
}

@media(max-width:576px) {

	/*#region Model */
	#Model > div:first-of-type > h1 {
		font-size: 35px;
		text-align: center;
	}

	#Model > div:first-of-type:before {
		width: 91%;
		left: -17px;
		top: 100px;
		height: 300px;
	}

	#Model > div:first-of-type > h1 > span {
		display: block;
	}

	#Model > div:first-of-type > img {
		height: 125px;
	}

	#Model > div:first-of-type > span {
		flex-direction: column;
		font-size: 15px;
	}

		#Model > div:first-of-type > span > select {
			font-size: 13px;
		}

	#Model > div:first-of-type > div {
		gap: 10px;
	}

		#Model > div:first-of-type > div > a {
			height: 20px;
			width: 20px;
			font-size: 10px;
			gap: 3px;
		}

			#Model > div:first-of-type > div > a > i {
				font-size: 15px;
			}




	#Model > div:last-of-type > div > form {
		width: 300px;
	}

	#Model > div:last-of-type > p {
		font-size: 25px;
	}

		#Model > div:last-of-type > p > span {
			font-size: 18px;
		}
	/*#endregion */


	main .menu {
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 1rem;
	}

		main .menu > *:not(span:last-of-type) {
			width: 30%;
		}
}