/*#region Regular Q_styles*/
/*#datepicker .ui-datepicker-prev:before {
	content: "\f104" !important;
	
}
#datepicker .ui-datepicker-next:before {
	content: "\f105" !important;
	
}*/
.ui-datepicker-next {
	cursor: pointer;
}

.ui-datepicker-prev {
	cursor: pointer;
}

#datepicker .ui-datepicker-inline {
	background: var(--Background-Primary, #FFF) !important;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !important;
	display: block;
	height: 275px !important;
	width: 300px !important;
}

#datepicker .ui-state-active {
	color: var(--User-Accent, #0A7AFF) !important;
	border-radius: 22px !important;
	background-color: rgba(10, 122, 255, 0.12) !important;
	font-weight: 500 !important;
}

#datepicker .ui-widget-header {
	color: var(--Label-Primary, #000) !important;
	font-feature-settings: 'clig' off, 'liga' off !important;
	font-family: Inter;
	font-size: 17px !important;
	font-style: normal !important;
	font-weight: 500 !important;
	line-height: 24px !important; /* 141.176% */
	letter-spacing: -0.43px !important;
}

#datepicker .ui-datepicker th {
	color: #000 !important;
	font-family: Inter !important;
	font-size: 13px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 18px !important; /* 138.462% */
	text-transform: uppercase !important;
}

.nav_check_align {
	margin-top: -5px;
	margin-left: 2px;
}

#datepicker .ui-datepicker-calendar {
	color: #4A4A4A !important;
	text-align: center !important;
	font-feature-settings: 'clig' off, 'liga' off !important;
	font-family: Roboto;
	font-size: 20px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 24px !important; /* 120% */
	text-transform: uppercase !important;
}

#datepicker .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
	color: var(--Autovance-Grey, #515251) !important;
}

#datepicker .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	font-weight: 400 !important;
}

.q_popup {
	border-radius: 8px !important;
	background: white !important;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !important;
	display: flex;
	flex-direction: column;
	/*height: 80vh;*/ /* Ensure it doesn't shrink */
	max-height: 90vh; /* Adjust to fit within viewport */
}

.text-blue {
	color: #0054A6;
}

.q_modal-close {
	width: 26.732px;
	height: 27px;
	flex-shrink: 0;
}

.q_text {
	color: var(--autovance-grey, #515251) !important;
	font-family: Open Sans;
	font-size: 14px !important;
	font-style: normal;
	font-weight: 400 !important;
	line-height: normal;
}

.q_modalHeader {
	color: var(--quorum-black, #000) !important;
	font-family: Open Sans;
	font-style: normal;
	line-height: normal;
}

.q_addRepair {
	color: var(--subtle-dark, #61646B);
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px; /* 150% */
	letter-spacing: 0.2px;
}

.q_serviceHistory {
	color: var(--quorum-black, #000);
	font-family: Open Sans;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

.q_serviceHistoryDate {
	color: #4A4A4A;
	font-family: Open Sans;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 24px; /* 171.429% */
	letter-spacing: 0.2px;
}

.q_serviceHistoryDesc {
	color: #000;
	font-family: Open Sans;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px; /* 171.429% */
	letter-spacing: 0.2px;
}

.q_recallHeader {
	color: #000;
	font-family: Roboto;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

input[type='checkbox'].q_check {
	position: relative;
	left: -999em; /* hide the real checkbox */
}

	input[type='checkbox'].q_check + span.q_check-target:after {
		color: black;
		content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38" fill="none"><path d="M11.0832 7.91666C9.33675 7.91666 7.9165 9.33691 7.9165 11.0833V26.9167C7.9165 28.6631 9.33675 30.0833 11.0832 30.0833H26.9165C28.6629 30.0833 30.0832 28.6631 30.0832 26.9167V11.0833C30.0832 9.33691 28.6629 7.91666 26.9165 7.91666H11.0832ZM11.0832 26.9167V11.0833H26.9165L26.9197 26.9167H11.0832Z" fill="%234A4A4A"/></svg>')
	}

	input[type='checkbox'].q_check:checked + span.q_check-target:after {
		content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38" fill="none"><path d="M26.9165 30.0833H11.0832C10.2433 30.0833 9.43786 29.7497 8.844 29.1558C8.25013 28.562 7.9165 27.7565 7.9165 26.9167V11.0833C7.9165 10.2435 8.25013 9.43802 8.844 8.84415C9.43786 8.25029 10.2433 7.91666 11.0832 7.91666H26.9165C27.7564 7.91666 28.5618 8.25029 29.1557 8.84415C29.7495 9.43802 30.0832 10.2435 30.0832 11.0833V26.9167C30.0832 27.7565 29.7495 28.562 29.1557 29.1558C28.5618 29.7497 27.7564 30.0833 26.9165 30.0833ZM11.0832 11.0833V26.9167H26.9165V11.0833H11.0832ZM17.4165 24.3232L13.1415 20.1321L15.3582 17.8679L17.4165 19.8803L22.6415 14.7076L24.8582 16.9591L17.4165 24.3216V24.3232Z" fill="%231E5697"/></svg>');
	}

input[type='checkbox'].q_check_sm {
	position: relative;
	left: -999em; /* hide the real checkbox */
}

	input[type='checkbox'].q_check_sm + span.q_check_sm-target:after {
		color: black;
		content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 38 38" fill="none"><path d="M11.0832 7.91666C9.33675 7.91666 7.9165 9.33691 7.9165 11.0833V26.9167C7.9165 28.6631 9.33675 30.0833 11.0832 30.0833H26.9165C28.6629 30.0833 30.0832 28.6631 30.0832 26.9167V11.0833C30.0832 9.33691 28.6629 7.91666 26.9165 7.91666H11.0832ZM11.0832 26.9167V11.0833H26.9165L26.9197 26.9167H11.0832Z" fill="%234A4A4A"/></svg>')
	}

	input[type='checkbox'].q_check_sm:checked + span.q_check_sm-target:after {
		content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 38 38" fill="none"><path d="M26.9165 30.0833H11.0832C10.2433 30.0833 9.43786 29.7497 8.844 29.1558C8.25013 28.562 7.9165 27.7565 7.9165 26.9167V11.0833C7.9165 10.2435 8.25013 9.43802 8.844 8.84415C9.43786 8.25029 10.2433 7.91666 11.0832 7.91666H26.9165C27.7564 7.91666 28.5618 8.25029 29.1557 8.84415C29.7495 9.43802 30.0832 10.2435 30.0832 11.0833V26.9167C30.0832 27.7565 29.7495 28.562 29.1557 29.1558C28.5618 29.7497 27.7564 30.0833 26.9165 30.0833ZM11.0832 11.0833V26.9167H26.9165V11.0833H11.0832ZM17.4165 24.3232L13.1415 20.1321L15.3582 17.8679L17.4165 19.8803L22.6415 14.7076L24.8582 16.9591L17.4165 24.3216V24.3232Z" fill="%231E5697"/></svg>');
	}

.q_accordion {
	margin-top: 1em;
	margin-bottom: 1em;
	margin-right: .5em;
	margin-left: .5em;
	font-family: 'Open Sans';
}

.tab {
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.tab_selected {
	border: 1px solid #0054A6;
}
/* Core styles/functionality */
.tab input {
	position: absolute;
	opacity: 0;
	z-index: -1;
}

.tab__content {
	max-height: 0;
	overflow: hidden;
	transition: all 0.35s;
	color: #000;
	font-family: Open Sans;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%; /* 19.6px */
}

.tab input:checked ~ .tab__content {
	max-height: 25rem;
}

.tab__label,
.tab__close {
	display: flex;
	color: white;
	background: var(--theme);
	cursor: pointer;
}

.tab__label {
	color: #000;
	font-family: Open Sans;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 140%;
	width: 100%;
	border-radius: 4px;
	background: #FFF;
	padding: 0px;
	justify-content: space-between;
	display: inline-flex !important;
}

	.tab__label::after {
		content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"><path d="M13 1.625C9.99443 1.66126 7.12217 2.87134 4.99675 4.99675C2.87134 7.12217 1.66126 9.99443 1.625 13C1.66126 16.0056 2.87134 18.8778 4.99675 21.0032C7.12217 23.1287 9.99443 24.3387 13 24.375C16.0056 24.3387 18.8778 23.1287 21.0032 21.0032C23.1287 18.8778 24.3387 16.0056 24.375 13C24.3387 9.99443 23.1287 7.12217 21.0032 4.99675C18.8778 2.87134 16.0056 1.66126 13 1.625ZM19.5 13.8125H13.8125V19.5H12.1875V13.8125H6.5V12.1875H12.1875V6.5H13.8125V12.1875H19.5V13.8125Z" fill="%230054A6" /></svg>');
		width: 1em;
		height: 1em;
		text-align: center;
		transform: rotate(90deg);
		transition: all 0.35s;
		padding: 12px;
		margin-right: -5px;
	}

.tab input:checked + .tab__label::after {
	content: url('data:image/svg+xml,<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_763_3339)"><path d="M10.9569 10.9567C8.85729 13.1076 7.68195 15.9942 7.68195 19C7.68195 22.0058 8.85729 24.8924 10.9569 27.0433C13.1078 29.143 15.9945 30.3183 19.0003 30.3183C22.006 30.3183 24.8927 29.143 27.0436 27.0433C29.1432 24.8924 30.3186 22.0058 30.3186 19C30.3186 15.9942 29.1432 13.1076 27.0436 10.9567C24.8927 8.85704 22.006 7.6817 19.0003 7.6817C15.9945 7.6817 13.1078 8.85704 10.9569 10.9567ZM24.171 14.9783L20.1493 19L24.171 23.0217L23.0219 24.1707L19.0003 20.149L14.9786 24.1707L13.8295 23.0217L17.8512 19L13.8295 14.9783L14.9786 13.8293L19.0003 17.851L23.0219 13.8293L24.171 14.9783Z" fill="%230054A6"></path></g><defs><clipPath id="clip0_763_3339"><rect width="26" height="26" fill="white" transform="translate(0.615234 19) rotate(-45)"></rect></clipPath></defs></svg>');
	padding: 5px;
	margin-right: -5px;
}

.tab__content p {
	margin: 0;
	padding: 1rem;
}

.tab__close {
	justify-content: flex-end;
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
}

.accordion label:hover, .accordion label:focus {
	background: transparent !important;
}

.max-h-popup {
	max-height: 75vh !important;
}

.q_addRepairPrice {
	color: #4A4A4A;
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px; /* 150% */
	letter-spacing: 0.2px;
}


.q_landingNew_btn {
	display: flex !important;
	height: 48px !important;
	padding: 14px 0px !important;
	justify-content: center !important;
	align-items: center !important;
	align-self: stretch !important;
	width: 173px !important;
	color: var(--neutral-n-0, #FFF) !important;
	text-align: center !important;
	/* heading / bold / base-heading-16 | 128% | 0% */
	font-family: Roboto;
	font-size: 16px !important;
	font-style: normal !important;
	font-weight: 500 !important;
}

.q_GrayBorder {
	color: #AFB1B6 !important;
}

.q_buttonCancel {
	border-radius: 2px;
	border: 1px solid var(--dark-medium, #4F4F4F);
	background: var(--White, #FFF);
	color: var(--dark-medium, #4F4F4F);
	font-family: Roboto;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	display: flex;
	width: 124px;
	height: 35px;
	padding: 14px 20px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.q_buttonOkay {
	border-radius: 2px;
	background: #005998;
	color: var(--grey-light, #F5F5F5);
	font-family: Roboto;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	display: flex;
	width: 124px;
	height: 35px;
	padding: 14px 20px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

button:focus {
	outline: none;
}

.q_landing_title {
	font-family: Roboto;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 23px !important;
	letter-spacing: 0em !important;
	text-align: left !important;
}

.q_landing_title_lo {
	width: 800px !important;
	justify-content: space-between;
}

.q_landingTextBox {
	width: 643px !important;
	height: 48px !important;
	padding: 12px !important;
	align-items: center !important;
	gap: 10px !important;
	flex-shrink: 0 !important;
	border-radius: 2px !important;
	color: var(--subtle-2, #AFB1B6) !important;
	font-family: Inter;
	/*font-size: 14px !important;*/
	font-style: normal !important;
	font-weight: 500 !important;
	line-height: 24px !important; /* 171.429% */
	letter-spacing: 0.2px !important;
}

.q_landing_btn {
	width: 122px !important;
	border-radius: 2px;
	display: flex !important;
	height: 48px !important;
	padding: 14px 0px !important;
	justify-content: center !important;
	align-items: center !important;
	align-self: stretch !important;
	font-family: Inter;
	font-size: 18px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: normal !important;
	color: white !important;
}

.q_status_text {
	color: #000;
	font-family: Roboto;
	font-size: 14px !important;
	font-style: normal !important;
	font-weight: 400;
	line-height: normal !important;
}

.q_landing_title_input {
	width: 800px !important;
}

.q_invalidUser {
	color: #4A4A4A;
	text-align: center;
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
}

/*switch styles*/
.btn-color-mode-switch {
	display: inline-block;
	margin: 0px;
	position: relative;
	font-family: Open Sans;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 18px;
}

	/*entire switch */
	.btn-color-mode-switch > label.btn-color-mode-switch-inner {
		margin: 0px;
		width: 100px;
		height: 30px;
		overflow: hidden;
		position: relative;
		transition: all 0.3s ease;
		display: block;
		border-radius: 5px;
		border: 2px solid rgba(0,0,0,0.5);
		opacity: .8;
		background: #F0F0F0;
		box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.15) inset;
	}

		/*right side toogle OFF text*/
		.btn-color-mode-switch > label.btn-color-mode-switch-inner:before {
			content: attr(data-on);
			position: absolute;
			top: 4px;
			right: 20px;
		}
		/*left side toogle on*/
		.btn-color-mode-switch > label.btn-color-mode-switch-inner:after {
			content: attr(data-off);
			position: absolute;
			left: 1px;
			top: 1px;
			text-align: center;
			transition: all 0.3s ease;
			padding: 0px 0px;
			width: 46px;
			height: 24px;
			border-radius: 5px;
			border: 0px solid #FFF;
			background: var(--primary-color);
			box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.35);
			color: white;
			line-height: 24px;
			opacity: 1 !important;
		}

	.btn-color-mode-switch input[type="checkbox"] {
		width: 50px;
		height: 25px;
		opacity: 0;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		margin: 0px;
	}

		/*left text*/
		.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner {
			color: black;
		}

			/*right toggle ON*/
			.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after {
				content: attr(data-on);
				top: 1px;
				left: 49px;
				border: 0px solid #FFF;
				background: var(--primary-color);
				box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.35);
				color: white;
				opacity: 1 !important;
			}

			/*Left text toggle OFF*/
			.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before {
				content: attr(data-off);
				right: auto;
				left: 17px;
			}

.q_navigation_btn {
	height: 30px !important;
	width: 84px !important;
	color: #FFF;
	text-align: center;
	font-family: Open Sans;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 18px;
	align-items: center;
}

.q_back {
	background: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21' width='24' height='20' fill='none' style='padding-right:3px' %3E%3Cpath d='M13.8299 15.96C13.6805 15.9604 13.5329 15.9327 13.3979 15.8789C13.263 15.8252 13.144 15.7467 13.0499 15.6492L8.21992 10.6092C8.07284 10.4589 7.99243 10.2704 7.99243 10.0758C7.99243 9.88123 8.07284 9.6927 8.21992 9.5424L13.2199 4.5024C13.3897 4.33085 13.6336 4.22298 13.898 4.2025C14.1624 4.18202 14.4257 4.25062 14.6299 4.3932C14.8341 4.53578 14.9626 4.74066 14.9869 4.96278C15.0113 5.1849 14.9297 5.40605 14.7599 5.5776L10.2899 10.08L14.6099 14.5824C14.7322 14.7057 14.8099 14.8558 14.8338 15.0151C14.8576 15.1743 14.8267 15.3359 14.7447 15.4808C14.6626 15.6258 14.5328 15.7479 14.3707 15.8328C14.2086 15.9177 14.021 15.9619 13.8299 15.96Z' fill='white' /%3E%3C/svg%3E") left no-repeat;
}

.q_next {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20'  viewBox='0 0 21 17' style='margin-left:-3px' fill='none' %3E%3Cpath d='M8.81383 3.66679C8.94331 3.66643 9.07123 3.68952 9.18822 3.73433C9.3052 3.77915 9.40826 3.84458 9.48983 3.92579L13.6758 8.12579C13.8033 8.25104 13.873 8.40815 13.873 8.57029C13.873 8.73243 13.8033 8.88954 13.6758 9.01479L9.3425 13.2148C9.19539 13.3577 8.984 13.4476 8.75483 13.4647C8.52566 13.4818 8.29748 13.4246 8.1205 13.3058C7.94351 13.187 7.83221 13.0162 7.81108 12.8311C7.78995 12.646 7.86072 12.4617 8.00783 12.3188L11.8818 8.56679L8.13783 4.81479C8.03185 4.71204 7.96453 4.58692 7.94384 4.45424C7.92314 4.32155 7.94993 4.18686 8.02105 4.06609C8.09216 3.94532 8.20462 3.84353 8.34512 3.77277C8.48561 3.702 8.64827 3.66523 8.81383 3.66679Z' fill='white'/%3E%3C/svg%3E") right no-repeat;
}

.q_navigation_svg {
	width: 24px;
	height: 20.16px;
}

.q_vehicleSelectionHeader {
	color: #000;
	font-family: Inter;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.q_vehicleContainer {
	border-radius: 4px;
	border: 1px solid var(--surfaces-overlay, rgba(33, 33, 33, 0.08));
	background: var(--surfaces-surface, #FFF);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	padding: 20px;
	width: 404px;
	height: 155px;
}

.q_vehicleText {
	color: var(--text-iconography-high-emphasis-active, rgba(0, 0, 0, 0.87));
	font-family: Roboto;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px; /* 120% */
}

.q_vehicleTextYMM {
	color: var(--text-iconography-high-emphasis-active, rgba(0, 0, 0, 0.87));
	font-family: Roboto;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px; /* 120% */
}

.q_vehicleMlieageText {
	color: var(--text-iconography-medium-emphasis-inactive, rgba(0, 0, 0, 0.60));
	font-family: Roboto;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px; /* 142.857% */
	letter-spacing: 0.25px;
}

.q_vehicleImage {
	width: 150px;
	flex-shrink: 0;
}

.q_svcsVehicleImage {
	width: 150px;
	flex-shrink: 0;
}

.q_dropdowns {
	border-radius: 2px !important;
	border: 2px solid var(--subtle-2, #AFB1B6) !important;
	background: var(--white, #FFF) !important;
	color: var(--subtle-1, #61646B);
	font-family: Inter;
	/*font-size: 14px;*/
	font-style: normal;
	font-weight: 500;
	line-height: 20px; /* 142.857% */
	letter-spacing: 0.4px;
	cursor: pointer !important;
}

.q_addVehicleVIN {
	font-family: Inter;
	/*font-size: 14px;*/
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.4000000059604645px;
	text-align: left;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield !important;
}

.q_codeText {
	color: #000;
	font-family: Roboto;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	text-align: center;
}

.q_codeBtn {
	display: flex !important;
	height: 48px !important;
	padding: 14px 0px !important;
	justify-content: center !important;
	align-items: center !important;
	align-self: stretch !important;
	width: 180px !important;
	color: var(--neutral-n-0, #FFF) !important;
	text-align: center !important;
	/* heading / bold / base-heading-16 | 128% | 0% */
	font-family: Roboto;
	font-size: 16px !important;
	font-style: normal !important;
	font-weight: 500 !important;
}

.q_codeCancelBtn {
	color: #2F384F !important;
	border: 1px solid #2F384F;
}

.q_vehAddVinDesc {
	color: #000;
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.q_vehicleBox {
	border-radius: 4px;
	background: #FFF;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	width: 450px;
	height: 150px;
}

.q_vehicleFont {
	color: var(--text-iconography-high-emphasis-active, rgba(0, 0, 0, 0.87));
	font-family: Roboto;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px; /* 120% */
}

.q_mileage {
	color: var(--Autovance-Black, #1C1C1C);
	font-family: Roboto;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.25px;
}

.q_noRecallBox {
	border-radius: 4px;
	border: 1px solid #3D5D1D;
	background: var(---Gray-White, #FFF);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	width: 450px;
	height: 150px;
}

.q_hasRecallBox {
	border-radius: 4px;
	border: 1px solid #AB0505;
	background: var(---Gray-White, #FFF);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	width: 450px;
	height: 150px;
}

.q_recallText {
	color: var(--Secondary-Dark-Color, #54595E);
	font-family: Roboto;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	white-space: nowrap;
}

.q_vehicleServiceHistory {
	color: var(--Quorum-Blue, #005998);
	text-align: center;
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	padding-top: 12px
}

.q_vehicleViewRecalls {
	color: #0054A6;
	font-family: Roboto;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	padding-top: 12px
}

.q_servicesHeader {
	color: #000;
	font-family: Inter;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.q_serviceList {
	background: rgba(175, 177, 182, 0.08);
}

.q_serviceListHeader {
	color: #000;
	font-family: Roboto;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.q_serviceDesc {
	color: #4A4A4A;
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px; /* 150% */
	letter-spacing: 0.2px;
	padding-left: 8px;
}

.q_serviceDescText {
	color: #4A4A4A;
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px; /* 150% */
	letter-spacing: 0.2px;
	padding-left: 10px;
}

.q_servicePrice {
	color: #4A4A4A;
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px; /* 150% */
	letter-spacing: 0.2px;
}

.q_otherServices_btn {
	border-radius: 2px;
	background: #0054A6;
	display: flex;
	width: 173px;
	height: 38px;
	color: var(--neutral-N-0, #FFF);
	justify-content: center;
	/* heading / bold / base-heading-16 | 128% | 0% */
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
}

.q_selectedServiceIcon {
	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z" stroke="%231E5697" stroke-width="2"/><path d="M10 5.5H10.009" stroke="%231E5697" stroke-width="2" stroke-linecap="round"/><path d="M8.2002 9.09998H10.0002V13.6M8.2002 13.6H11.8002" stroke="%231E5697" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.q_notSelectedServiceIcon {
	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none"><path d="M10.5 19.5C15.4706 19.5 19.5 15.4706 19.5 10.5C19.5 5.52944 15.4706 1.5 10.5 1.5C5.52944 1.5 1.5 5.52944 1.5 10.5C1.5 15.4706 5.52944 19.5 10.5 19.5Z" stroke="%234A4A4A" stroke-width="2"/><path d="M10.5 6H10.509" stroke="%234A4A4A" stroke-width="2" stroke-linecap="round"/><path d="M8.7002 9.59998H10.5002V14.1M8.7002 14.1H12.3002" stroke="%234A4A4A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
}

.q_selectedServiceListItem {
	border-bottom: none !important;
	border-left: 2px solid #1E5697 !important;
	background: var(--primary-subtle, #F7F5FF) !important;
}

.q_selectedBlue {
	color: #1E5697 !important;
}

.q_outstandingRecallsIcon {
	content: url('data:image/svg+xml,<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 42C27.5228 42 32.5228 39.7614 36.1421 36.1421C39.7614 32.5228 42 27.5228 42 22C42 16.4772 39.7614 11.4772 36.1421 7.85786C32.5228 4.23858 27.5228 2 22 2C16.4772 2 11.4772 4.23858 7.85786 7.85786C4.23858 11.4772 2 16.4772 2 22C2 27.5228 4.23858 32.5228 7.85786 36.1421C11.4772 39.7614 16.4772 42 22 42Z" fill="white" stroke="%233D5D1D" stroke-width="4" stroke-linejoin="round" /><path d="M14 22L20 28L32 16" stroke="%233D5D1D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /></svg>');
}

.q_noOutstandingRecallsIcon {
	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none" ><path d="M15 6C15.3978 6 15.7794 6.15804 16.0607 6.43934C16.342 6.72064 16.5 7.10218 16.5 7.5V16.5C16.5 16.8978 16.342 17.2794 16.0607 17.5607C15.7794 17.842 15.3978 18 15 18C14.6022 18 14.2206 17.842 13.9393 17.5607C13.658 17.2794 13.5 16.8978 13.5 16.5V7.5C13.5 7.10218 13.658 6.72064 13.9393 6.43934C14.2206 6.15804 14.6022 6 15 6ZM15 21C14.6022 21 14.2206 21.158 13.9393 21.4393C13.658 21.7206 13.5 22.1022 13.5 22.5C13.5 22.8978 13.658 23.2794 13.9393 23.5607C14.2206 23.842 14.6022 24 15 24C15.3978 24 15.7794 23.842 16.0607 23.5607C16.342 23.2794 16.5 22.8978 16.5 22.5C16.5 22.1022 16.342 21.7206 16.0607 21.4393C15.7794 21.158 15.3978 21 15 21Z" fill="%23AB0505" /><path fill-rule="evenodd" clip-rule="evenodd" d="M15 0C6.7155 0 0 6.7155 0 15C0 23.2845 6.7155 30 15 30C23.2845 30 30 23.2845 30 15C30 6.7155 23.2845 0 15 0ZM3 15C3 18.1826 4.26428 21.2348 6.51472 23.4853C8.76515 25.7357 11.8174 27 15 27C18.1826 27 21.2348 25.7357 23.4853 23.4853C25.7357 21.2348 27 18.1826 27 15C27 11.8174 25.7357 8.76515 23.4853 6.51472C21.2348 4.26428 18.1826 3 15 3C11.8174 3 8.76515 4.26428 6.51472 6.51472C4.26428 8.76515 3 11.8174 3 15Z" fill="%23AB0505" /></svg>');
}

.q_recallBoxLine {
	border-top: 1px solid rgba(204,0,0,0.7);
}

.q_noRecallBoxLine {
	border-top: 1px solid rgba(61,93,29,0.7);
}

.q_noServicesDue {
	height: 75px !important;
}

.q_confirm_vehicle_image {
	display: flex;
	height: 150px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	border: 2px solid var(--subtle-light, #AFB1B6);
	background: url(<path-to-image>), lightgray 50% / cover no-repeat, #EFEFF0;
}

.q_confirm_vehType {
	color: #000;
	font-family: Roboto;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.q_confirm_vehDetailsFieldHeader {
	color: #000;
	font-family: Roboto;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.q_confirm_vehDetailsField {
	font-weight: 400 !important;
}

.q_bookedServices {
	color: #000;
	font-family: Roboto;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.q_bookedServiceLine {
	color: #000;
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px; /* 150% */
	letter-spacing: 0.2px;
}

.q_bookedServiceCost {
	color: #000;
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px; /* 150% */
	letter-spacing: 0.2px;
}

.q_bookedServicePriceDisclaimer {
	font-size: 12px !important;
	font-weight: 400;
	line-height: normal;
}

.q_confirmCustomerInfo {
	color: #4A4A4A !important;
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 1.28px;
	height: 60px;
}

.q_confirmTextBox {
	border-radius: 4px;
	border: 2px solid var(--Border-Subtle, #AAA);
	background: var(--Surface, #FFF);
}

.q_confirmFinal {
	color: #000;
	font-family: Roboto;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.q_confirmApptDate {
	color: #000;
	font-family: Roboto;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.q_confirm_btn {
	height: 38px !important;
	display: inline-flex !important;
	padding: 12.5px 14px !important;
	justify-content: center !important;
	align-items: center !important;
	color: var(--quorum-white, #FFF);
	text-align: center !important;
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
}

.radio-button input[type="radio"] {
	display: none;
}

.radio-checkmark {
	display: inline-block;
	position: relative;
	width: 16px;
	height: 16px;
	margin-right: 10px;
	border: 2px solid var(--primary-color);
	border-radius: 50%;
}

	.radio-checkmark:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0);
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: var(--primary-color);
		transition: all 0.2s ease-in-out;
	}

.radio-button input[type="radio"]:checked ~ .radio-checkmark:before {
	transform: translate(-50%, -50%) scale(1);
}

.radio-button:hover::after {
	transform: scale(1.2);
	box-shadow: 0 0 20px var(--primary-color);
}

.q_vehicleType {
	min-height: 115px;
}

.emailError {
	border-color: red !important;
}

.q_transportation_card {
	height: 36px;
	flex-shrink: 0;
	border-radius: 2px;
	border: 0.5px solid #AFB1B6;
	color: #4A4A4A;
	font-family: Roboto;
	font-size: 12px;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
	display: flex;
	align-items: center;
	padding: 6px;
}

.q_transportation_selected_card {
	height: 36px;
	flex-shrink: 0;
	border-radius: 2px;
	border: 1px solid #0054A6;
	background: rgba(48, 79, 254, 0.10);
	color: #0054A6;
	font-family: Roboto;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.q_advisor_dropdown {
	border-radius: 2px !important;
	border: 2px solid var(--subtle-2, #AFB1B6) !important;
	background: var(--white, #FFF) !important;
	color: var(--subtle-1, #61646B);
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0.6px;
	height: 36px;
	padding: 10px 12px;
	align-items: center;
	gap: 16px;
	display: flex;
	width: 340px !important;
	cursor: pointer !important;
}

.q_advisorText {
	color: var(--subtle-1, #61646B);
	font-family: Roboto;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0.6px;
}

.q_date_titles {
	font-family: Roboto;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 23px !important;
	letter-spacing: 0em !important;
	text-align: left !important;
}

.q_listStyle ul > li {
	list-style: disc;
	margin: 0 0 0 1.25rem;
}

	.q_listStyle ul > li:first-child {
		margin: 1rem 0 0 1.25rem;
	}

	.q_listStyle ul > li:last-child {
		margin: 0 0 1rem 1.25rem;
	}
/*#endregion */
/*#region @media sized Q styles*/
@media (min-height: 840px) {
	.max-h-96 {
		max-height: 25rem !important;
	}
}

@media (min-height: 920px) {
	.max-h-96 {
		max-height: 30rem !important;
	}
}

@media(min-width:1024px) {
	.nav_check_align {
		margin-top: -2px;
		margin-left: 4px;
	}
}

@media (max-width: 1024px) {

	.q_noRecallBox {
		height: 120px;
	}

	.q_hasRecallBox {
		height: 120px;
	}

	.q_vehicleBox {
		height: 120px;
	}

	.q_vehicleFont {
		font-size: 18px;
		line-height: 20px; /* 120% */
	}

	.q_vehicleViewRecalls {
		padding-top: 8px
	}

	.q_vehicleServiceHistory {
		font-size: 14px;
		padding-top: 8px
	}

	.q_confirmCustomerInfo {
		height: 50px;
		/*font-size: 14px;*/
	}

	.q_confirm_vehicle_image {
		height: 90px;
	}

	.q_bookedServiceLine {
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: 20px; /* 150% */
		letter-spacing: 0.2px;
	}

	.q_vehicleType {
		min-height: 90px;
	}

	.q_vehicleSelectionHeader {
		font-size: 16px;
	}

	.q_confirm_vehType {
		font-size: 14px;
		font-weight: 600;
	}

	.q_bookedServices {
		font-size: 14px;
		font-weight: 600;
	}

	.q_bookedServiceCost {
		font-size: 14px;
		font-weight: 600;
	}
}

@media (max-width: 900px) {
	.q_landing_title_lo {
		width: 550px !important;
	}

	.q_landing_title_input {
		width: 550px !important;
	}

	.q_landingTextBox {
		display: flex !important;
		width: 440px !important;
		height: 38px !important;
		padding: 12px !important;
		align-items: center !important;
		gap: 10px !important;
		flex-shrink: 0 !important;
		color: var(--subtle-2, #AFB1B6) !important;
		font-family: Inter;
		/*font-size: 14px !important;*/
		font-style: normal !important;
		font-weight: 500 !important;
		line-height: 24px !important; /* 171.429% */
		letter-spacing: 0.2px !important;
	}

	.q_landing_btn {
		height: 38px !important;
		display: inline-flex !important;
		padding: 12.5px 14px !important;
		justify-content: center !important;
		align-items: center !important;
		color: var(--quorum-white, #FFF);
		text-align: center !important;
		font-family: Roboto;
		font-size: 12px !important;
		font-style: normal !important;
		font-weight: 500 !important;
		line-height: normal !important;
	}

	.q_landingNew_btn {
		height: 38px !important;
		display: flex !important;
		width: 160px !important;
		padding: 0px 16px !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px !important;
		color: var(--neutral-n-0, #FFF) !important;
		text-align: center !important;
		font-family: Roboto;
		font-size: 12px !important;
		font-style: normal !important;
		font-weight: 300 !important;
		display: flex !important;
		padding: 12.5px 0px 11.5px 0px !important;
		justify-content: center !important;
		align-items: center !important;
		align-self: stretch !important;
		border-radius: 2px;
	}

	.q_codeBtn {
		display: flex !important;
		height: 38px !important;
		padding: 0px 16px !important;
		justify-content: center !important;
		align-items: center !important;
		align-self: stretch !important;
		width: 140px !important;
		text-align: center !important;
		/* heading / bold / base-heading-16 | 128% | 0% */
		font-size: 12px !important;
		font-style: normal !important;
		font-weight: 300 !important;
	}

	.q_vehicleFont {
		font-size: 16px;
		line-height: 20px; /* 120% */
	}

	.q_noRecallBox {
		width: 400px;
		height: 100px;
	}

	.q_hasRecallBox {
		width: 400px;
		height: 100px;
	}

	.q_vehicleBox {
		width: 400px;
		height: 100px;
	}

	.q_servicesHeader {
		font-size: 16px;
	}

	.q_serviceListHeader {
		font-size: 16px;
	}

	.q_serviceDesc {
		font-size: 14px;
	}

	.q_serviceDescText {
		font-size: 14px;
	}

	.q_servicePrice {
		font-size: 14px;
	}

	.q_otherServices_btn {
		width: 75px;
		padding: 0px 12px;
		gap: 6px;
		font-size: 12px;
		font-weight: 500;
		height: 30px;
		line-height: normal;
	}

	.q_svcsVehicleImage {
		width: 120px;
		flex-shrink: 0;
	}

	.q_vehicleViewRecalls {
		font-size: 12px;
		padding-top: 6px
	}

	.q_vehicleServiceHistory {
		font-size: 12px;
		padding-top: 6px
	}
}

@media (max-width: 765px) {
	.q_serviceDesc {
		font-size: 12px;
	}

	.q_noRecallBox {
		width: 380px;
		height: 60px;
	}
	.q_outstandingRecallsIcon {
		height:30px;
	}
	.q_noOutstandingRecallsIcon {
		height: 30px;
	}
	.q_hasRecallBox {
		width: 380px;
		height: 80px;
	}
	.q_recallText {
		font-size:14px;
	}
	.q_vehicleBox {
		width: 380px;
		height: 80px;
	}

	.q_date_titles {
		font-size: 14px !important;
	}
}

@media (max-width: 640px) {
	.q_status_text {
		font-size: 12px !important;
	}

	.q_addRepairPrice {
		font-size: 12px !important;
		line-height: 18px !important;
	}

	.q_addRepair {
		font-size: 12px !important;
		line-height: 18px !important;
	}

	.q_serviceHistoryDesc {
		font-size: 12px !important;
		line-height: 18px !important;
	}

	.q_serviceHistoryDate {
		font-size: 12px !important;
		line-height: 18px !important;
	}

	.q_landing_title {
		font-family: Roboto;
		font-size: 12px !important;
		font-weight: 400 !important;
		line-height: 14px !important;
		letter-spacing: 0em !important;
		text-align: center !important;
	}

	.q_landing_title_lo {
		width: 350px !important;
		justify-content: space-between;
	}

	.q_landing_title_input {
		width: 350px !important;
	}

	.q_landing_btn {
		width: 75px !important;
	}

	.q_landingTextBox {
		width: 275px !important;
		display: flex !important;
		height: 44px !important;
		padding: 12px !important;
		align-items: center !important;
		gap: 10px !important;
		flex-shrink: 0 !important;
		font-family: Inter;
		/*font-size: 14px !important;*/
		font-style: normal !important;
		font-weight: 500 !important;
		line-height: 24px !important; /* 171.429% */
		letter-spacing: 0.2px !important;
	}
	/*switch styles*/
	.btn-color-mode-switch {
		font-size: 10px !important;
	}

		.btn-color-mode-switch > label.btn-color-mode-switch-inner {
			width: 70px !important;
			height: 26px !important;
		}

			/*right side toogle OFF text*/
			.btn-color-mode-switch > label.btn-color-mode-switch-inner:before {
				top: 1px !important;
				right: 12px !important;
			}

			.btn-color-mode-switch > label.btn-color-mode-switch-inner:after {
				width: 32px !important;
				height: 20px !important;
				line-height: 18px !important;
			}

		.btn-color-mode-switch input[type="checkbox"] {
			width: 35px !important;
			height: 24px !important;
		}

			/*right toggle ON*/
			.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after {
				top: 1px !important;
				left: 34px !important;
				border: 0px solid #FFF !important;
			}

			/*Left text toggle OFF*/
			.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before {
				left: -15px !important;
			}

	.q_vehicleContainer {
		border-radius: 4px;
		border: 1px solid var(--surfaces-overlay, rgba(33, 33, 33, 0.08));
		background: var(--surfaces-surface, #FFF);
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
		padding: 15px;
		width: 345px;
		height: 108px;
	}

	.q_vehicleText {
		font-size: 14px;
	}

	.q_vehicleTextYMM {
		font-size: 14px;
	}

	.q_vehicleMlieageText {
		font-size: 12px;
	}

	.q_vehicleImage {
		width: 120px;
	}

	.q_codeText {
		font-size: 14px;
	}

	.q_vehAddVinDesc {
		font-size: 14px;
	}

	.q_codeBtn {
		width: 120px !important;
	}


	.q_vehicleFont {
		font-size: 14px;
		line-height: 20px; /* 120% */
	}

	.q_servicesHeader {
		font-size: 14px;
	}

	.q_serviceListHeader {
		font-size: 14px;
	}

	.q_serviceDescText {
		font-size: 12px;
	}

	.q_servicePrice {
		font-size: 12px;
	}

	.q_svcsVehicleImage {
		width: 100px;
		flex-shrink: 0;
	}

	.q_vehicleViewRecalls {
		padding-top: 4px;
	}

	.q_vehicleServiceHistory {
		padding-top: 4px;
	}

	.q_advisor_dropdown {
		width: 100% !important;
	}
}

@media (max-width: 361px) {

	.q_status_text {
		font-size: 9px !important;
	}

	.q_addRepairPrice {
		font-size: 9px !important;
		line-height: 10px !important;
	}

	.q_addRepair {
		font-size: 9px !important;
		line-height: 10px !important;
	}

	.q_serviceHistoryDesc {
		font-size: 9px !important;
		line-height: 10px !important;
	}

	.q_serviceHistoryDate {
		font-size: 9px !important;
		line-height: 10px !important;
	}

	.q_landing_title {
		font-family: Roboto;
		font-size: 9px !important;
		font-weight: 400 !important;
		line-height: 10px !important;
		letter-spacing: 0em !important;
		text-align: center !important;
	}

	.q_vehicleSelectionHeader, .q_vehicleText, .q_servicesHeader, .q_date_titles, .q_vehicleSelectionHeader {
		font: 13px National-Regular !important;
	}

	.q_landing_title_lo {
		width: 300px !important;
		justify-content: space-between;
	}

	.q_landing_title_input {
		width: 300px !important;
	}

	.q_landing_btn {
		width: 75px !important;
	}

	.q_landingTextBox {
		width: 225px !important;
		display: flex !important;
		height: 38px !important;
		padding: 10px !important;
		align-items: center !important;
		gap: 10px !important;
		flex-shrink: 0 !important;
		font-family: Inter;
		/*font-size: 10px !important;*/
		font-style: normal !important;
		font-weight: 500 !important;
		line-height: 18px !important; /* 171.429% */
		letter-spacing: 0.2px !important;
	}
	/*switch styles*/
	.btn-color-mode-switch {
		font-size: 10px !important;
	}

		.btn-color-mode-switch > label.btn-color-mode-switch-inner {
			width: 70px !important;
			height: 26px !important;
		}

			/*right side toogle OFF text*/
			.btn-color-mode-switch > label.btn-color-mode-switch-inner:before {
				top: 1px !important;
				right: 12px !important;
			}

			.btn-color-mode-switch > label.btn-color-mode-switch-inner:after {
				width: 32px !important;
				height: 20px !important;
				line-height: 18px !important;
			}

		.btn-color-mode-switch input[type="checkbox"] {
			width: 35px !important;
			height: 24px !important;
		}

			/*right toggle ON*/
			.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after {
				top: 1px !important;
				left: 34px !important;
				border: 0px solid #FFF !important;
			}

			/*Left text toggle OFF*/
			.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before {
				left: -15px !important;
			}

	.q_vehicleContainer {
		border-radius: 4px;
		border: 1px solid var(--surfaces-overlay, rgba(33, 33, 33, 0.08));
		background: var(--surfaces-surface, #FFF);
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
		padding: 15px;
		width: 345px;
		height: 108px;
	}

	.q_vehicleText {
		font-size: 11px;
	}

	.q_vehicleTextYMM {
		font-size: 11px;
	}

	.q_vehicleMlieageText {
		font-size: 10px;
	}

	.q_vehicleImage {
		width: 120px;
	}

	.q_codeText {
		font-size: 14px;
	}

	.q_vehAddVinDesc {
		font-size: 12px;
	}

	.q_codeBtn {
		width: 120px !important;
	}


	.q_vehicleFont {
		font-size: 12px;
		line-height: 14px; /* 120% */
	}

	.q_servicesHeader {
		font-size: 11px;
	}

	.q_serviceListHeader {
		font-size: 11px;
	}

	.q_serviceDescText {
		font-size: 9px;
	}

	.q_servicePrice {
		font-size: 9px;
	}

	.q_svcsVehicleImage {
		width: 100px;
		flex-shrink: 0;
	}

	.q_vehicleViewRecalls {
		padding-top: 4px;
	}

	.q_vehicleServiceHistory {
		padding-top: 4px;
	}

	.q_advisor_dropdown {
		width: 100% !important;
	}
}

.q_popup-buttons {
	display: flex;
	justify-content: flex-end;
	padding-top: 10px;
	border-top: 1px solid #ccc; /* Optional: Add a subtle separator */
}

.scroll-container {
	flex-grow: 1; /* Takes up available space */
	overflow-y: auto; /* Enables scrolling when needed */
	min-height: 100px; /* Ensures it doesn’t collapse */
	max-height: calc(90vh - 100px); /* Adjusts dynamically */
	position: relative;
}
/*#endregion */
input, textarea, select {
	font-family: Roboto !important;
	font-size: 16px !important;
}

input {
	font-size: 16px !important;
	transform: scale(0.875);
	transform-origin: left top;
}
html, body, iframe {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

@media (max-height: 650px) {
	/* force flex-none when screen is short */
	.short-screen\:flex-none {
		flex: none !important;
	}
	.q_otherServices_btn {
		width: 75px;
		padding: 0px 12px;
		gap: 6px;
		font-size: 12px;
		font-weight: 500;
		height: 30px;
		line-height: normal;
	}
	.short-screen\:pt-0 {
		padding-top: 10px !important; /* Tailwind's pt-4 */
	}
}