@import url(sunlight.css);
@import url(frame.css);

*,:before,:after {
	box-sizing: border-box;	
	
}

html {
	font-size: 10px;
}

body {
	font-family: "GT America",sans-serif;
	font-size: 10px;
	font-weight: 400;
	background: #fff;
	color: #000;
	width: 100%;
	font-weight: 500;
	text-rendering: optimizeLegibility;
	padding: 0px;
	overflow-x: hidden;
	padding-top: var(--sunlight-header-height);
}

body.loading {
	overflow: hidden;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}

body.loading #loader {
	display: flex;
}

#navigation {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 0px;
	height: 0px;
	margin: 0px;
	padding: 0px;
	z-index: 10000001;
}

#loader {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	z-index: 10000001;
	background: #ffffff;
	align-items: center;
	justify-content: center;
}

#loader video {
	width: 100%;
	height: 100%;	
	max-width: 1440px;
}

#control,
#topNavi {
	display: none;
}


body.step-Extra #control,
body.step-Result #control {
	display: block;
}

body.step-Extra #content {
	padding-bottom: 0px;
}

body.step-Extra footer,
body.step-Extra #footer-menu {
	display: none !important;
}

#toolTip {
	padding: 10px;
	justify-content: center;
	align-items: center;
	gap: 10px;	
	border-radius: 3px;
	background: #757575;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	color: #FFF;
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

#control a {
	color: #757575;
	text-align: center;
	font-size: 10px;
	font-style: normal;
	font-weight: 400; 
	line-height: normal;
	text-decoration: none;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	transition: all 1s ease-out;
}

#control a:hover {
	color: #000000;
}

#control a img {
	height: 12px;
}

#btnLoadConfig,
#btnFilter {
	display: flex;
	padding: 7px 20px 7px 23px;
	flex-direction: row;
	align-items: center;
	gap: 2px;	
	border-radius: 99px;
	border: 1px solid #757575;
	color: #000;
	font-family: "GT America";
	font-size: 16.2px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;	
	background: transparent;
	position: absolute;
	right: 30px;
	margin-top: 18px;
	cursor: pointer;
}

#btnLoadConfig img,
#btnFilter img {
	height: 24px;
}

#btnFilter {
	display: none;
}

.flags {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

#content .flags span {
	display: inline-block !important;
	color: #ffffff;
	text-align: center;
	font-family: "GT America";
	font-size: 11px;
	font-style: normal;
	font-weight: 300;
	display: flex !important;
	padding: 5px 10px;
	justify-content: center;
	align-items: center;
	gap: 5px;
	border-radius: 99px;
	background: #757575;
	width: auto;
	white-space: nowrap;
}

#col2 .layout .flags {
	left: 16px;
	max-width: 65%
}

#col3 label .flags {
	right: 15px;
	top: 15px;
	left: auto;
	justify-content: flex-end;
}

#col3 label .flags span {
	color: #000000;
	background: #EAEAEA;
}

#content .flags span.flagSale, #content .flags span.flagHot {
	color: #000000;
	background: #FFE476;
}

#content .flags span.flag-schlafdach-optional,
#content .flags span.flag-schlafdach,
#content .flags span.flag-hubbett-optional,
#content .flags span.flag-hubbett {
	background: #D9D9D9;
	color: #757575;
}

.flags span.flagSale:before {
	content: "";
	background: url(icons/discount.svg) no-repeat;
	background-size: 100% 100%;
	height: 18px;
	width: 18px;
	display: inline-block;
}

.flags span.flagHot:before {
	content: "";
	background: url(icons/hot.svg) no-repeat;
	background-size: 100% 100%;
	height: 18px;
	width: 18px;
	margin: -2px 0 -2px -5px;
	display: inline-block;
}

.flags span.flag-schlafdach-optional:before,
.flags span.flag-schlafdach:before {
	content: "";
	background: url(icons/rooftop.svg) no-repeat;
	background-size: 100% 100%;
	height: 18px;
	width: 18px;
	margin: -2px 0 -2px 0px;
	display: inline-block;
}

.flags span.flag-hubbett-optional:before,
.flags span.flag-hubbett:before {
	content: "";
	background: url(icons/pullbed.svg) no-repeat;
	background-size: 100% 100%;
	height: 18px;
	width: 18px;
	margin: -2px 0 -2px 0px;
	display: inline-block;
}

#content {
	float: left;
	width: 100%;
	padding: 25px 24px 50px 24px;
}

#content h1.title {
	font-family: "Pano";
	font-size: 34px;
	font-weight: 700;
	line-height: 100%;
	width: 80%;
	margin: 18px 0px;
}

.filterHeadline, #col1 .btn {
	display: none;
}

#filter {
	float: left;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 12px 0px;
	gap: 30px;
	font-size: 11px;

}

#filter > div {
	color: #666;
	font-weight: 500;	
}

#filter .filterBox {
	flex: none;
	order: 0;
	flex-grow: 0;
	position: relative;
}

#filter .filterBox#filterLaenge {
	display: none;
}

#filter .filterBox#filterLaenge {
	width: 320px;
	padding-bottom: 50px;
}

#filter .filterBox .filterBoxList {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0px;
	gap: 10px;
	margin-top: 10px;
}

#filter .filterBox input {
	display: none;
}

#filter .filterBox label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 7px 10px;
	gap: 1px;
	border: 1px solid #666666;
	color: #666666;
	border-radius: 3px;
	min-width: 90px;
	font-weight: 300;
}

#filter .filterBox label img {
	opacity: .75;
}

#filter .filterBox label:hover {
	background-color: #eaeaea;
}

#filter .filterBox input:checked + label {
	border-color: #000000;
	color: #000000;
	
}

#filter .filterBox input:checked + label img {
	opacity: 1;
}

#filter .filterBox .ui-slider {
	position: relative;
	text-align: left;
	background-color: #EAEAEA;
	height: 9px;
	border-radius: 8px;
	width: 100%;
	margin-top: 10px;
}

#filter .filterBox .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
	top: -4px;
	height: 16px;
	background-color: #44483C;
}

#filter .filterBox .ui-slider-handle {
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
	width: 16px;
	height: 16px;
	position: absolute;
	z-index: 1;
	top: -4px;
	margin-left: -7px;
}

#filter .filterBox#filterLaenge #filterSliderMin,
#filter .filterBox#filterLaenge #filterSliderMax {
	position: absolute;
	top: 60px;
	color: #000000;
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	left: 0px;	
}

#filter .filterBox#filterLaenge #filterSliderMax {
	right: 0px;
	text-align: right;
}

#col2 {
	border: 0px;
}

#col2 #results {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

#col2 .headline {
	grid-column-end: span 2;
	width: 100%;
	background: transparent;
	text-transform: uppercase;
	font-size: 14px;
	color: #000000;
	font-weight: 500;
	padding: 40px 0px 10px 0px;
	margin: 0px;
}

#col2 .headline:hover {
	background: transparent;
}

#col2 .headline.producer {
	display: none;
}

#col2 .container {
	width: 100%;
	border-radius: 10px;
	padding: 0px;
	margin: 0px;
	border: 1px solid #D9D9D9;
	overflow: hidden;
	text-align: left;
	position: relative;
}

#col2 .container:hover {
	border-color: #000000;
}

#col2 .container:before {
	position: absolute;
	bottom: 30px;
	right: 30px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 20px 30px;
	gap: 10px;

	margin: 0 auto;
	color: #ffffff;
	background: #000000;
	border-radius: 30px;
	
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	transition: all 1s ease-out;
	
}

#col2 .container:hover:before {
	background: #2D2D2D;	
}

#col2 .container div.img {
	background: #eaeaea;
	padding: 20px 0px 0px 0px;
	height: 315px;
}

#col2 .container div.img:after,
#col2 .row .layout:after
 {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 7%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: top right;
}

#col2 .row .layout:after {
	width: 12%;
}

#col2 .container.chassis-fiat-ducato div.img:after,
#col2 .row.chassis-fiat-ducato .layout:after,
#similar .vehInfo.chassis-fiat-ducato:after {
	content: "";
	background-image: url(icons/fiat.svg);
}

#col2 .container.chassis-ford-transit div.img:after,
#col2 .row.chassis-ford-transit .layout:after,
#similar .vehInfo.chassis-ford-transit:after {
	content: "";
	background-image: url(icons/ford.svg);
}

#col2 .container.chassis-citroen-jumper div.img:after,
#col2 .row.chassis-citroen-jumper .layout:after,
#similar .vehInfo.chassis-citroen-jumper:after {
	content: "";
	background-image: url(icons/citroen.svg);
}

#col2 .container.chassis-peugeot-boxer div.img:after,
#col2 .row.chassis-peugeot-boxer .layout:after,
#similar .vehInfo.chassis-peugeot-boxer:after {
	content: "";
	background-image: url(icons/peugeot.svg);
}

#col2 .container div.img img {
	margin: 0px;
	position: static;
	height: 100%;
	width: 100%;
	object-fit: contain;
	
}

#col2 .container h2 {
	background: transparent;
	font-size: 26px;
	text-transform: uppercase;
	font-family: "Pano";
	font-weight: 700;
	padding: 50px 30px 15px 30px;
	text-align: left;
	color: #000000;
	position: relative;
	width: 100%;
}

#col2 .container:hover h2 {
	background: transparent;	
}

#col2 .container h2:before,
#col2 .row h1:before {
	text-transform: uppercase;
	font-family: "GT America";
	font-size: 14px;
	width: 100%;
	display: inline-block;
	font-weight: 500;
}

#col2 .container h2:before {
	margin-top: -2rem;	
}

#col2 .container[class*="adventure"] h2:before,
#col2 .row[class*="adventure"] h1:before {
	content: "Adventure";
}

#col2 .container[class*="xx"] h2:before,
#col2 .row[class*="xx"] h1:before {
	content: "20 Years Edition";
}

#col2 .container h3 {
	background: transparent;
	font-size: 16px;
	font-weight: 400;
	padding: 0px 30px 30px 30px;
	text-align: left;
	color: #666666;
	position: relative;
	width: 100%;
}

#col2 .container span {
	display: none;
}

#col2 .container .seriesTech {
	float: left;
	width: auto;
	text-align: left;
	padding: 10px 30px 30px 30px;
	bottom: 0px;
	left: 0px;
}

#col2 .container .seriesTech span {
	display: inline;
	text-align: left;
	padding: 0px;
}

#col2 .container .seriesTech .seriesTechName {
	font-size: 11px;
	font-weight: 500;
	color: #666666;
}

#col2 .container .seriesTech .seriesTechValue {
	font-size: 30px;
	font-weight: 400;
	color: #000000;	
}

#col2 .container .seriesTech .seriesTechValue span {
	font-size: 30px;
	font-weight: 400;
	color: #757575;
	text-decoration-line: line-through;	
	width: auto;
	float: none;
}

#col2 label {
	width: 100%;
	cursor: pointer;
}


#col2 label:before {
	position: absolute;
	bottom: 30px;
	right: 30px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 10px 30px;
	gap: 10px;
	margin: 0 auto;
	color: #ffffff;
	background: #000000;
	border-radius: 30px;
	width: calc(55% - 60px);
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	transition: all 1s ease-out;
}

#col2 .row input:checked + ul {
	position: absolute;
	width: 100%;
	height: 100%;
}

#col2 .row input:checked + ul:before {
	position: absolute;
	bottom: 29px;
	right: 29px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 11px 30px;
	gap: 10px;
	margin: 0 auto;
	color: #000000;
	border: solid 1px #000000;
	background: #ffffff;
	border-radius: 30px;
	width: calc(55% - 58px);
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	transition: all 1s ease-out;
	z-index: 1000;
}

#col2 label:hover:before {
	background: #2D2D2D;	
}


#col2 .row {
	width: 100%;
	height: auto;
	border-radius: 10px;
	padding: 0px;
	margin: 0px;
	border: 1px solid #D9D9D9;
	overflow: hidden;
	text-align: left;
	position: relative;
	cursor: pointer;
}

#col2 .row:hover {
	border-color: #000000;
	background: transparent;
}


#col2 .row .checkbox {
	position: absolute;
	width: 100%;
	height: 0px;
	padding: 0px;
	right: 0px;
	bottom: 0px;
}

#col2 .row input {
	display: none;
}

#col2 .row .layout {
	width: 45%;
	background: #eaeaea;
	float: left;
	padding: 30px 0px;
	height: 400px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

#col2 .row .layout img {

}

#col2 .row .layout .options {
	position: absolute;
	top: 120px;
	right: 30px;
	width: 12%;
	height: 50%;
	z-index: 1;
}

#col2 .row .layout .options span {
	display: block;
	background-color: #D9D9D9;
	border-radius: 3px;
	padding: 5px;
	width: 100%;
	height: auto;
}

#col2 .row .layout .options span img {
	width: 100%;
	height: auto;
	float: none;
	
}

#col2 .row .masses {
	display: none;
}

#col2 .row h1 b,
#col2 .row h1 sup,
#col2 .row h2,
#col2 .row h3,
#col2 .row .fahrgestell {
	display: none;
}



#col2 h1 {
	width: 55%;
	padding: 24px 30px 5px 30px;
	color: #000000;
	font-family: Pano;
	font-size: 22.5px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;		
}

#col2 h1 .modelInfo {
	width: 100%;
	font-family: "GT America";
	padding-top: 5px;
	font-weight: 400;
	font-size: 13.2px;
	color: #666666;
	display: block;
	text-transform: none;	
}

#col2 .modelTech {
	position: absolute;
	padding: 0px 30px;
	width: 20%;
}

#col2 .modelTech .modelTechName {
	color: #666666;
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	width: 100%;
	display: block;	
}

#col2 .modelTech .modelTechValue {
	color: #000000;
	font-size: 13.2px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;	
	width: 100%;
	display: block;	
	padding-top: 5px;
}

#col2 .modelTech0 {
	left: 45%;
	top: 120px;
	width: 20%;
}

#col2 .modelTech1 {
	left: 65%;
	top: 120px;
	width: 30%;
}

#col2 .modelTech2 {
	left: 45%;
	top: 170px;
	width: 20%;
}

#col2 .modelTech3 {
	left: 65%;
	top: 170px;
	width: 15%;
	width: 40%;
}

#col2 .modelTech4 {
	left: 45%;
	bottom: 90px;
	width: 55%;
}

#col2 .modelTech4 .modelTechName {
	font-size: 11px;
	font-weight: 500;
}

#col2 .modelTech4 .modelTechValue {
	font-size: 30px;
	font-weight: 400;
}

#col2 .modelTech4 .modelTechValue span {
	color: #757575;
	text-decoration-line: line-through;	
}

#errorOverlay {
	background-color: #000000;
}

#errorWindow, #agreeAlert > div {
	top: 200px;
	left: 10%;
	width: 80%;
	padding: 75px 25px 25px 25px;
	margin: 0px 0px 0px 0px;
	border-radius: 8px;
	background: #FFF;
	box-shadow: none;
	color: #000000;
	font-family: "GT America";
	font-size: 13.2px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	/* max-height: calc(100vh - 500px); */
	/* overflow-y: auto; */
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
}

#errorWindow:after {
	content: "";
	height: 25px;
	width: 100%;
	display: block;
	position: absolute;
	bottom: -25px;
}

#errorWindow a {
	color: #000000;
}

#errorWindow .errorWindowClose {
	position: absolute;
	width: 30px;
	height: 30px;
	top: 25px;
	right: 25px;
	background: url(icons/close.svg) no-repeat;
	cursor: pointer;
}

#errorWindow .errorWindowClose:hover {
	background: url(icons/closeHover.svg) no-repeat;
}

#errorWindow h1#title, #agreeAlert h1 {
	color: #000;
	font-family: Pano;
	font-size: 26px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	margin-bottom: 15px;
}

#errorWindow h1#title.modelTitle {
	font-size: 34px;
}

body[class*="adventure"] #errorWindow h1#title.modelTitle:before {
	content: "Adventure";
	text-transform: uppercase;
	font-family: "GT America";
	font-size: 14px;
	width: 100%;
	display: inline-block;
	margin-top: -2rem;
	font-weight: 500;
}

#errorWindow .errorWindowCode {
	padding: 0px 35px 50px 35px;
	margin-top: -25px;
}

#errorWindow .errorWindowDetails .p {
	padding-top: 50px;
	max-width: 550px;
}

#errorWindow .errorWindowDetails p {
	max-width: 500px;
}

#errorWindow .errorWindowDetails img {
	margin-top: 50px;
	width: 100%;
	border-radius: 8px;
	max-width: 500px;
}

#loadConfigForm {
	margin: 60px 0px 0px 0px;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 00px;
}

#loadConfigCode {	
	width: 500px;
	display: grid;
	align-items: center;
	gap: 15px;
	grid-template-columns: repeat(8, 49px);
	position: relative;
	float: left;
}

#loadConfigCode input.token {
	position: absolute;
	border: 0px;
	background: transparent;
	color: #000000;
	text-align: left;
	font-family: "GT America";
	font-family: monospace;
	font-size: 18.754px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	width: 600px;
	height: 100%;
	padding: 0px 0px 0px 18px;
	letter-spacing: 53.9px;
	top: 0px;
	left: 0px;
	text-transform: uppercase;
	outline: none;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#loadConfigCode input.token::placeholder {
	color: #BDBDBD;
}

#loadConfigCode input.token::selection {
	//background: transparent;
}

#loadConfigCode .token-fake {
	display: flex;
	width: 49px;
	height: 67px;
	padding: 10px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 3px;
	background: #EAEAEA;
	border: solid 1px transparent;
}

#loadConfigCode .token-overflow {
	display: flex;
	width: 49px;
	height: 67px;
	padding: 10px;
	background: #ffffff;
	z-index: 1;
}

#loadConfigCode.error .token-fake {
	border-color: #dc3545;
}

.errorWindowCode .small {
	padding: 20px 0px; 
	width: 433px;
}

.btn {
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 20px 30px;
	gap: 10px;
	width: 450px;
	color: #ffffff;
	background: #000000;
	border-radius: 30px;
	border: 0px;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	transition: all 1s ease-out;
	cursor: pointer;
	z-index: 2;
	font-family: "GT America",sans-serif;
	text-decoration: none;
}

.btn:hover {
	background: #2D2D2D;
}

.btn svg {
	margin: -20px 0px;
	position: relative;
}

.btn.btnSecondary {
	background: transparent;
	color: #000000;
	border: solid 1px #AEAEAE;
	padding: 18px 28px;
}

.btn.btnSecondary:hover {
}

.btnResults {
	width: 100%;
}

.small {
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;	
}




#modelbox {
	position: static;
	width: 100%;
	height: 100%;
}

#model, #model.fixed {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	background: transparent;
	display: flex;
	align-items: center;
	overflow: unset;
	justify-content: space-between;
}

#model #pic,
#model #layout {
	display: none;
}

#content #model h1 {
	background: transparent;
	margin: 0px;
	padding: 0px;
	width: auto;
	color: #000;
	font-family: Pano;
	font-size: 22.5px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	flex-grow: 1;
	display: flex;
	gap: 14px;
	white-space: nowrap;
	align-items: center;
	height: 100%;
}

body.step-Result #content #model h1 {
	height: auto;
}

body.step-Extra #content #model > h1 {
	max-width: calc(100% - 540px);
}

#content #model h1 br {
	display: none;
}

#content #model h1 a {
	color: #000;
	font-family: "GT America";
	font-size: 13.2px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
	width: 185px;
	display: inline-block;
	text-transform: none;
	margin: 0px 0px;
	white-space: normal;
	max-width: 200px;
}

body[class*="sunlight-adventure"] #model h1:before {
	content: "Adventure";
	text-transform: uppercase;
	font-family: "GT America";
	font-size: 14px;
	width: 100%;
	display: inline-block;
	font-weight: 500;
	position: absolute;
	top: 0px;
}

#model h1 b {
	display: none;
}

#model #code {
	display: none;
}

#model #config {
	height: 27px;
	line-height: 1;
	width: auto;
	float: right;
}

#content #model h1.weights {
	width: 100%;
	padding: 8px 10px;
	justify-content: center;
	align-items: center;
	gap: 4px;	
	border-radius: 5px;
	background: #757575;
	color: #ffffff;
	text-transform: none;
	font-family: "GT America";
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.11px;
	margin-bottom: 10px;
	text-align: left;
	flex-grow: unset;
	flex-basis: content;
}

#content #model h1.weights a {
	width: auto;
	margin: 0px;
}

#content #model h1.weights .infoBox {
	background-color: #ffffff;
}

#content #model h1.weights .infoBox:after {
	color: #000000;
}

#content #model h1.weights:before {
	content: "" !important;
	display: none;
}

#model #config.weights {
	position: absolute;
	top: -220px;
	
	min-width: 300px;
	max-width: 400px;
	height: 200px;
	
	display: flex;
	padding: 8px;
	flex-direction: column;
	align-items: flex-start;
	border-radius: 8px;
	background: #D9D9D9;
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	
	height: auto;
	top: unset;
	bottom: calc(100% + 20px);

}

#model #config.weights .weightsToggle {
	display: none;
}

#content #model #config.weights h3 {
	width: 100%;
	height: auto;
	display: grid;
	gap: 8px;
	grid-template-columns: 50% 1fr;
}

#model #config.weights h3 span {
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;	
	text-transform: none;
	white-space: unset;
	text-align: left;
	color: #000000;
}

#content #model h3,
#content #model h2 {
	display: none;
	color: #666;
	font-family: "GT America";
	font-size: 9.5px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-transform: uppercase;
	height: 100%;
	width: auto;
	float: left;
	padding: 0px;
	gap: 7px;
	align-items: center;
}

#content #model h3:first-child,
#content #model h2 {
	display: flex;
}

#content #model h2 {
	margin-left: 20px;
	border-left: solid 1px #000;
	padding-left: 20px;
	font-size: 27.684px;
	color: #000000;
	white-space: nowrap;
	text-transform: initial;
}

#model h2 span {
	display: none;
}

#model h2 .sumTitle {
	display: block;
	font-size: 9.5px;
	white-space: normal;
	text-align: left;
	text-transform: uppercase;
}

#model h2 sup {
	display: none;
}

#model h2 .sumTitle sup {
	display: none;
}

#model h2 .sumTitle em {
	position: relative;
	display: inline-block;
	margin: -16px 0px 0px 0px;
	text-transform: initial;
}

#content #model h3 em {
	position: relative;
	display: inline-block;
	margin: -16px 0px 0px 0px;
	text-transform: initial;
}

body.step-Result #content #model h3:first-child, body.step-Result #content #model h2 {
	flex-direction: row;
	flex-wrap: wrap;
}

#model h3 span {
	color: #757575;
	text-align: right;
	font-family: "GT America";
	font-size: 27.684px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	display: block;
	white-space: nowrap;
	text-transform: initial;
}

#model .btn {
	display: none;
}

#col3, #col4 {
	width: 100%;
	height: calc(100vh - 70px - var(--sunlight-header-height));
	display: grid;
	grid-template-columns: 1fr 30%;
	gap: 20px;
	overflow: hidden;
	margin-top: 15px;
}

#col4 {
	height: auto;
	overflow: unset;
}

#gallery {
	border-radius: 8px;
	background: #EAEAEA;
	min-height: 0;
	height: 100%;
	overflow: hidden;
	position: relative;
}

#gallery #galleryDisclaimer {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 100%;
	color: #666;
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;	
	z-index: 1;
}

#gallery #galleryNavi {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: #D9D9D9;
	border-radius: 4px;
	right: 10px;
	top: 20px;
	position: absolute;
	overflow: hidden;
	z-index: 1;
}

#gallery #galleryNavi a {
	display: flex;
	width: 52px;
	height: 52px;
	padding: 13.553px;
	justify-content: center;
	align-items: center;
	gap: 12.321px;
	color: #000000;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
}

#gallery #galleryNavi a.hidden {
	display: none;
}

#gallery #galleryNavi a.toggleExterieur.act {
	background-image: url(icons/galleryExtHover.svg);
}
#gallery #galleryNavi a.toggleExterieur,
#gallery #galleryNavi a.toggleExterieur:hover {
	background-image: url(icons/galleryExt.svg) ;
}
#gallery #galleryNavi a.toggleInterieur.act {
	background-image: url(icons/galleryIntHover.svg);
}
#gallery #galleryNavi a.toggleInterieur,
#gallery #galleryNavi a.toggleInterieur:hover {
	background-image: url(icons/galleryInt.svg);
}
#gallery #galleryNavi a.toggleLayout.act {
	background-image: url(icons/galleryLayoutHover.svg);
}
#gallery #galleryNavi a.toggleLayout,
#gallery #galleryNavi a.toggleLayout:hover {
	background-image: url(icons/galleryLayout.svg);
}


#gallery #galleryNavi a.act {
	background-color: #757575;
	color: #ffffff;
}

#gallery #galleryNavi a:hover {
	background-color: #ffffff;
}

#gallery #gallerySlider {
	width: 100%;
	height: 100%;
}

#gallery #gallerySlider div {
	width: 100%;
	height: 100%;
}

#gallery #gallerySlider img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#gallery #gallerySlider img.padding {
	padding: 25px;
	object-fit: contain;
}

#gallery #gallerySlider div[data-group="layout"] {
	position: relative;
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
}

#gallery #gallerySlider div[data-group="layout"] div {
	width: auto;
	height: auto;
}

#gallery #gallerySlider div[data-group="layout"] .layoutBox {
	width: 70%;
	margin: 0px 10% 35px 10%;
	padding: 0px;
	position: relative;
}

#gallery #gallerySlider div[data-group="layout"] .layoutWidth {
	position: absolute;
	left: -50px;
	top: 0px;
	font-size: 12px;
	width: 20px;
	height: 100%;
	display: flex;
	align-items: center;
}

#gallery #gallerySlider div[data-group="layout"] .layoutWidth:before {
	content: "";
	width: 8px;
	height: 100%;
	border-right: solid 1px #000000;
	position: absolute;	
}

#gallery #gallerySlider div[data-group="layout"] .layoutWidth:after {
	content: "";
	width: 15px;
	height: 100%;
	border-top: solid 1px #000000;
	border-bottom: solid 1px #000000;
	position: absolute;
	left: 0px;
}

#gallery #gallerySlider div[data-group="layout"] .layoutWidth span {
	display: inline-block;
	background: #EAEAEA;
	color: #000000;
	padding: 2px 10px;
	transform: rotate(-90deg);
	white-space: nowrap;
	margin-left: -23px;
}

#gallery #gallerySlider div[data-group="layout"] .layoutLength {
	position: absolute;
	left: 0px;
	bottom: -50px;
	font-size: 12px;
	width: 100%;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#gallery #gallerySlider div[data-group="layout"] .layoutLength:before {
	content: "";
	width: 100%;
	height: 0px;
	border-top: solid 1px #000000;
	position: absolute;
	z-index: 0;	
}

#gallery #gallerySlider div[data-group="layout"] .layoutLength:after {
	content: "";
	width: 100%;
	height: 15px;
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
	position: absolute;	
}

#gallery #gallerySlider div[data-group="layout"] .layoutLength span {
  display: inline-block;
  background: #EAEAEA;
  color: #000000;
  padding: 2px 10px;
  white-space: nowrap;
  margin-left: -20px;
  z-index: 1;
}

#gallery #gallerySlider div[data-group="layout"] img {	
	margin: 0px 0px;
	padding: 0px;
	border: solid 0px #4d657f;
	background-color: transparent;
	float: none;
	height: 150px;
	max-width: 100%;
	object-fit: contain;
	height: auto;
}

#gallery #gallerySlider .slick-arrow {
	position: absolute;
	display: block;
	width: 60px;
	height: 52px;
	padding: 20px;
	border-radius: 3px;
	background-color: #D9D9D9;
	border: 0px;
	font-size: 0px;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
	z-index: 1;
}

#gallery #gallerySlider .slick-arrow:hover {
	background-color: #757575;
}

#gallery #gallerySlider .slick-prev {
	left: 15px;
	top: 50%;
	background-image: url(icons/arrow-prev.svg);
}

#gallery #gallerySlider .slick-prev:hover {
	background-image: url(icons/arrow-prevHover.svg);
}

#gallery #gallerySlider .slick-next {
	right: 15px;
	top: 50%;
	background-image: url(icons/arrow-next.svg);
}

#gallery #gallerySlider .slick-next:hover {
	background-image: url(icons/arrow-nextHover.svg);
}

#content .slick-dots {
	display: flex !important;
	position: absolute;
	bottom: 12px;
	width: 100%;
	justify-content: center;
	gap: 6px;
	flex-direction: row;
}

#content .slick-dots li:hover {
	background: transparent;
}

#content .slick-dots button {
	border: 0px;
	border-radius: 3px;
	background-color: #757575;
	height: 6px;
	width: 6px;
	font-size: 0px;
	padding: 0px;
	cursor: pointer;
	transition: all 0.2s ease-out;
}

#content .slick-dots .slick-active button {
	width: 20px;
}

#col3 #extras {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 5px;
	min-height: 0;
	height: 100%;
	border-radius: 8px;	
	overflow: hidden;
}

#col3 #extrasNavi {
	display: flex;
	width: 100%;
	padding-bottom: 8px;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	background: #fff;
}

#col3 #extrasNavi .extrasNaviTitle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	color: #666;
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

#col3 #extrasNavi .extrasNaviRange {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
}

#col3 #extrasNavi .extrasNaviRange a {
	display: inline-block;
	background-color: #EAEAEA;
	height: 5px;
	width: 100%;
}

#col3 #extrasNavi .extrasNaviRange a.act,
#col3 #extrasNavi .extrasNaviRange a:hover {
	background-color: #44483C;
}

#col3 #extrasList {
	overflow-y: auto;
}

#col3 ul {
	padding: 0px 0px 0px 0px;
	display: grid;
	gap: 15px;
	overflow-y: auto;
}

#col3 .headline, #col3 .headline:hover {
	color: #000;
	font-family: Pano;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	background: transparent;
	padding: 0px 0px 15px 0px;
	width: 100%;
	position: relative;
	cursor: pointer;
}

#col3 .headline:after {
	content: "";
	background-image: url(icons/minus.svg);
	background-repeat: no-repeat;
	width: 18px;
	height: 18px;
	position: absolute;
	right: 0px;
	top: 0px;
}

#col3 .headline.collapse:after {
	background-image: url(icons/plus.svg);
}

#col3 .row {
	border: 0px;
	background: transparent;
	padding: 0px;
	width: 100%;
	height: auto;
}

#col3 .row input {
	display: none;
}

#col3 ul li:hover {
	background: transparent;	
}

#col3 label {
	width: 100%;
	display: flex;
	padding-bottom: 10px;
	flex-direction: column;
	align-items: center;
	border-radius: 8px;
	border: 1px solid #D9D9D9;	
	cursor: pointer;
	position: relative;
}

#col3 label:hover {
	border-color: #000000;
	background: transparent;
}

#col3 .exImage {
	width: 100%;
	min-height: 20px;
	max-height: 210px;	
	border-radius: 3px;
	overflow: hidden;
}

#col3 .exImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

#col3 .exArea {
	display: grid;
	width: 100%;
	padding: 22px 17.5px 0px 17.5px;
	justify-content: space-between;
	align-items: flex-start;	
	gap: 20px;
	grid-template-columns: 32px 1fr;
}

#col3 .exCheck {
	border-radius: 50%;
	border: solid 1px #D9D9D9;
	width: 32px;
	height: 32px;
}

#col3 .exName {
	color: #000;
	font-size: 13.2px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	width: 100%;
	display: block;
}

#col3 .exText {
	color: #757575;
	font-size: 13.2px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;	
	width: 100%;
	display: block;	
	padding-top: 5px;
}

#col3 .exArea a {
	color: #000;
	font-size: 13.2px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
	padding-top: 7px;
	display: inline-block;	
}

#col3 .exArea a:hover {
	text-decoration: none;
}

#col3 .exFooter {
	width: 100%;
	display: flex;
	justify-content: end;
	align-items: center;
	padding: 0px 17.5px 0px 17.5px;
	gap: 30px;
}

#col3 .exWeight {
	color: #757575;
	font-size: 13.2px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	white-space: nowrap;
}

#content .infoBox {
	width: 13px !important;
	height: 13px !important;
	border-radius: 50%;
	display: inline-block !important;
	background-color: #666666;
}

#content .infoBox span {
	display: none !important;
	position: absolute;
	width: 220px !important;
	padding: 10px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 3px;
	background: #757575;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	color: #fff;
	white-space: normal;	
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin: -30px 0px 0px -105px;
	z-index: 10000;
}

#content .infoBox:hover span {
	display: block !important;
}

#content #col3 .infoBox span {
	right: 10px;
	bottom: 10px;
	margin: 0px;
}

#content .infoBox span a {
	font-weight: 400;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
	color: #ffffff !important;
}

#content .infoBox:after {
	content: "i";
	color: #fff;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
}

#col3 .exPrice {
	color: #000;
	font-size: 18.754px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;	
	white-space: nowrap;
}


#col3 input:checked + label {
	background: #44483C;
	border-color: #44483C;
}

#col3 input:checked + label .exName,
#col3 input:checked + label .exText,
#col3 input:checked + label .exArea a,
#col3 input:checked + label .exWeight,
#col3 input:checked + label .exPrice {
	color: #ffffff;
}

#col3 input:checked + label .exCheck {
	background: url(icons/check.svg) no-repeat;
	background-position: center center;
	background-size: 17.3px;
	background-color: #000000;
	border-color: #000000;
}

#col3 .rowColor {
	display: block;
	padding: 15px;
	border-radius: 8px;
	border: 1px solid #D9D9D9;
}

#col3 .rowColor .row {
	width: 79px;
	height: 79px;
	float: left;
	margin: 0px 5px;
}

#col3 .rowColor label {
	width: 100%;
	height: 100%;
	padding: 0px;
	border-radius: 3.5px;
}

#col3 .rowColor input:checked + label,
#col3 .rowColor label:hover {
	padding: 4px;
	background: transparent;
}

#col3 .rowColor label .flags,
#col3 .rowColor label .exArea,
#col3 .rowColor label .exFooter {
	display: none;
}

#col3 .rowColor .exName {
	padding: 0px 0px 20px 0px;
}

#col3 .rowColor .exFooter {
	padding: 20px 0px 0px 0px;
}


body.step-Result #gallery {
	height: 60vh;
	min-height: 600px;
}

body.step-Result #modelbox {
	/* position: fixed; */
	height: 100%;
	width: 100%;
	border-radius: 10px;
	border: 1px solid #D9D9D9;
	background: #EAEAEA;
}

#col4 #extrasCalc {
	align-self: start;
	position: sticky;
	height: 100%;
	width: 100%;
	top: calc(var(--sunlight-header-height) + 53px);
}

body.step-Result #model,
body.step-Result #model.fixed {
	padding: 30px 15px;
	flex-direction: column;
	gap: 14.25px;
	align-items: baseline;
	justify-content: start;
}

body.step-Result #content #model h1 {
	font-size: 14px;
	order: 1;
	flex-grow: 0;
	display: block;
}

body.step-Result #content #model h1 span {
	width: 100%;
	display: block;
}

body.step-Result[class*="sunlight-adventure"] #model h1:before {
	font-size: 9.5px;
	position: static;
}

body.step-Result #content #model h1 a {
	width: 100%;
	margin: 0px;
	font-size: 9.5px;
}

body.step-Result #model #layout {
	display: block;
	order: 2;
	padding: 0px 0px;
	text-align: center;
	width: 100%;
}

body.step-Result #model #layout img {
	width: 90%;
	height: 120px;
	object-fit: contain;
	object-position: center;
	float: none;
	background: transparent;
}

body.step-Result #model #config {
	order: 3;	
	height: auto;
	width: 100%;
	display: flex;
	gap: 14px;
}

body.step-Result #content #model h3:first-child, 
body.step-Result #content #model h2 {
	flex-direction: column;
	align-items: flex-start;
}

body.step-Result #content #model h2 {
	margin: 0px;
	padding: 0px;
	border: 0px;
	order: -1;
}

body.step-Result #model h2 .sumTitle {
	width: 100%;
	text-align: left;
}

/* body.step-Result #model h2 .sumTitle sup { */
	/* display: none; */
	/* position: absolute; */
	/* margin: -3px 0px 0px 2px; */
/* } */

body.step-Result #model h3 span {
	font-size: 13.2px;
}

body.step-Result #model #config.weights {
	position: static;
	padding: 0px;
	background: transparent;
	gap: 1px;
	order: 8;
}

body.step-Result #content #model #config.weights h3 {
	order: 2;
	display: block;
}

body.step-Result #model #config.weights h3 span {
	float: none;
	font-size: 11px;
	display: inline;
}

body.step-Result #model #config.weights h3 span.key {
	color: #666666;
}

body.step-Result #content #model h1.weights {
	padding: 0px;
	background: transparent;
	color: #000;
	font-size: 13.2px;
	font-weight: 400;
}

body.step-Result #content #model h1.weights a {
	width: auto;
}

body.step-Result #content #model h1.weights .infoBox {
	background-color: #757575;
}

body.step-Result #content #model h1.weights .infoBox::after {
	color: #ffffff;
}

body.step-Result #model .btn {
	display: inline-flex;
	order: 3;
	width: 100%;
}

#resultList h2 {
	width: 100%;
	color: #000000;
	font-family: Pano;
	font-size: 26px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	text-align: left;
	padding: 30px 0px 58px 0px;
	border-bottom: solid 0.5px #757575;
	float: left;
}

body[class*="sunlight-adventure"] #resultList h2:before {
	content: "Adventure";
	text-transform: uppercase;
	font-family: "GT America";
	font-size: 14px;
	width: 100%;
	display: inline-block;
	margin-top: -2rem;
	font-weight: 500;
}

#resultList h3 {
	width: 100%;
	color: #000000;
	font-family: Pano;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	padding: 58px 0px 30px 0px;
}

#resultList ul {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	align-self: stretch;
	width: 100%;
}

#resultList .headline, #resultList .headline:hover {
	color: #000000;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	text-transform: uppercase;
	background: transparent;
	padding: 0px;
	margin: 20px 0px 0px 0px;
}

#resultList .headline a {
	float: right;
	color: #000000;
	text-decoration: none;
	display: flex;
	gap: 3px;
}

#resultList .headline a:after {
	content: "";
	background: url(icons/pen.svg) no-repeat;
	width: 19.5px;
	height: 19.5px;

}

#resultList .row {
	border-radius: 11px;
	border: 1px solid #000000;
	padding: 5px;
	display: grid;
	grid-template-columns: 60% 1fr;
	gap: 50px;
}

#resultList .exImage {
	width: 200px;
	min-height: 124px;
	float: left;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	margin-right: 30px; 
}

#resultList .exImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
}

#resultList .exArea {
	width: 100%;
	padding: 0px 0px 0px 0px;
}

#resultList .exInfo {
	width: 100%;
	padding: 20px 0px 20px 20px;
}

#resultList .exName {
	color: #000;
	font-size: 13.2px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	width: 100%;
	display: block;
}

#resultList .exText {
	color: #757575;
	font-size: 13.2px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;	
	width: 100%;
	display: block;	
	padding-top: 5px;
}

#resultList .exArea a {
	color: #000;
	font-size: 13.2px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
	padding-top: 7px;
	display: block;	
}

#resultList .exArea a:hover {
	text-decoration: none;
}

#resultList .exFooter {
	width: 100%;
	display: flex;
	justify-content: end;
	align-items: end;
	padding: 20px 10px;
	gap: 30px;
}

#resultList .exWeight {
	color: #757575;
	font-size: 13.2px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	white-space: nowrap;
}

#resultList .exPrice {
	color: #000;
	font-size: 18.754px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	white-space: nowrap;	
}

#similar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	align-self: stretch;	
	border-top: solid 0.5px #757575;
	margin-top: 50px;
	padding: 30px 0px;
	width: 100%;
}

#similar h3 {
	margin: 0px;
	padding: 0px;
	color: #000000;
	font-family: "GT America";
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	text-transform: uppercase;	
}

#similar h4 {
	margin: 0px;
	padding: 0px;
	color: #000000;
	font-family: "GT America";
	font-size: 13.2px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	border: 0px;
	width: 100%;
}

#similar .simVehicles {
	display: grid;
	align-items: center;
	gap: 32px;
	align-self: stretch;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

#similar .simVehicle {
	display: flex;
	width: 100%;
	height: auto;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	color: #000000;
}

#similar .vehMatch {
	display: flex;
	height: 30px;
	padding: 8px;
	justify-content: center;
	align-items: center;
	gap: 4px;
	position: absolute;
	right: 15px;
	top: 10px;
	border-radius: 8px;
	background: #FFE476;
	backdrop-filter: blur(26px);
	z-index: 1;
}

#similar .vehImage {
	width: 100%;
	height: 15vw;
	overflow: hidden;
	background-color: #D9D9D9;
	background-image: url(https://www.sunlight.de/wp-content/themes/sun/img/logo-black.svg);
	background-repeat: no-repeat;
	background-size: 60%;
	background-position: center center;
}

#similar .vehImage img {
	width: 100%;
	height: 15vw;
	object-fit: cover;
}

#content #similar .vehImage .slick-dots button {
	background: #ffffff;
}

#similar .vehInfo {
	width: 100%;
	border: solid 1px #D9D9D9;
	border-top: 0px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	padding: 16px;
	display: flex;
	gap: 16px;
	flex-direction: column;
	position: relative;
	height: calc(100% - 200px);
}

#similar .simVehicle:hover .vehInfo {
	border-color: #757575;
}

#similar .vehInfo:after {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 12%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: top right;
}

#similar .vehName {
	color: #000000;
	font-family: Pano;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	min-height: 45px;
	width: 80%;
}

#similar .vehProps {
	display: flex;
	align-items: flex-start;
	align-content: flex-start;
	gap: 4px;
	flex: 1 0 0;
	flex-wrap: wrap;
}

#similar .vehProps div {
	display: flex;
	padding: 3.3px 6.5px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 80px;
	background: #EAEAEA;
	color: #757575;
	font-weight: 400;
}

#similar .vehPrice {
	color: #666666;
	font-family: "GT America";
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	width: 100%;
}

#similar .vehPrice span {
	color: #000000;
	font-family: "GT America";
	font-size: 18.754px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	width: 100%;
	display: block;
}

#similar .vehDealer {
	color: #666666;
	font-family: "GT America";
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	width: 100%;
}

#similar .vehDealer b {
	color: #000000;
	font-weight: 400;
	width: 100%;
	display: block;
}

#similar .btn {
	margin: 0px auto;
}




#modelDetails {
	display: flex;
	
}

#modelDetails > div:first-child {
	flex-grow: 1;
}

#modelDetails .modelNavi {
	padding: 50px 0px 20px 0px;
}

#modelDetails .modelNavi .btn {
	font-size: 11px;
	border-color: #757575;
	color: #757575;
	width: auto;
	padding: 10px 15px;
	text-transform: none;
}

#modelDetails .modelNavi .btn.act {
	border-color: #000000;
	color: #000000;
}

#modelDetails .modelAccordeon {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	align-self: stretch;
}

#modelDetails .modelAccordeon > div {
	border-radius: 8px;
	border: 1px solid #D9D9D9;
	width: 100%;
}

#modelDetails .modelAccordeon .modelAccName {
	display: flex;
	padding: 20px;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	align-self: stretch;
	position: relative;
	cursor: pointer;
	color: #000;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	text-transform: uppercase;
}

#modelDetails .modelAccordeon .modelAccName:after {
	content: "";
	background-image: url(icons/plus.svg);
	background-repeat: no-repeat;
	width: 18px;
	height: 18px;
	position: absolute;
	right: 18px;
	top: 18px;
}

#modelDetails .modelAccordeon .act .modelAccName:after {
	background-image: url(icons/minus.svg);
}

#modelDetails .modelAccordeon .modelAccInfo {
	margin: 0px;
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	align-self: stretch;
	padding: 0px 20px 20px 20px;
}

#modelDetails .modelAccordeon .act {
	background-color: #EAEAEA;
	border-color: #EAEAEA;
}

#modelDetails .modelAccordeon .act .modelAccInfo {
	//display: flex;
}

#modelDetails .modelAccordeon .modelAccInfo li, #modelDetails .modelAccordeon .modelAccInfo li:hover {
	margin: 0px;
	padding: 0px;
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: flex-start;	
	background-color: transparent;
	color: #000;
	font-size: 13.2px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

#modelDetails .modelAccordeon .modelAccInfo li.package, #modelDetails .modelAccordeon .modelAccInfo li.package:hover {
	font-size: 11px;
	margin-top: -10px;
}

#modelDetails .modelAccordeon .modelAccInfo span {
	
}

#modelLayout {
	padding: 0px 50px;
}

#errorWindow #modelLayout img {
	width: 250px;
	height: auto;
	margin: 0px;

}

#errorWindow b {
	width: 100%
}

#modelDetails .small {
	color: #757575;
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	padding-top: 10px;
	width: 100%;
}

#errorWindow.errorCheck {
	max-width: 670px;	
	padding: 40px;
	text-align: center;
}

#errorWindow.errorCheck h1#title {
	text-align: center;
	font-size: 25px;
	text-transform: unset;
}

#errorWindow.errorCheck b {
	background: transparent;
	color: #000;
	text-align: center;
	font-family: "GT America";
	font-size: 13.2px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}
#errorWindow.errorCheck p {
	width: 100%;
	max-width: 400px;
	margin: 0px auto 75px auto;
}

#errorWindow.errorCheck #matchForm,
#errorWindow.errorCheck #onlyForm,
#errorWindow.errorCheck #weightForm {
	display: block;
	width: 100%;
	clear: both;
}

#errorWindow.errorCheck #matchForm ul,
#errorWindow.errorCheck #onlyForm ul,
#errorWindow.errorCheck #weightForm ul {
	display: flex;
	width: 100%;
	max-width: 400px;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;	
	padding: 45px 0px 45px 0px;
	margin: 0px auto;
}

#errorWindow.errorCheck #matchForm input,
#errorWindow.errorCheck #onlyForm input,
#errorWindow.errorCheck #weightForm input {
	display: none;
}

#errorWindow.errorCheck .btn {
	width: auto;
}

#errorWindow .row,
#errorWindow .row:hover {
	border: 0px;
	background: transparent;
}

#errorWindow label {
	display: flex;
	gap: 30px;
	align-items: center;
}

#errorWindow label:before {
	content: "";
	width: 15px;
	height: 15px;
	border: solid 1px #000000;
	border-radius: 3px;
	min-width: 15px;
}

#errorWindow input:checked + label:before {
	background: url(icons/check.svg) no-repeat;
	background-size: 11px;
	background-position: center center;
	background-color: #000000;
}

#errorWindow label .exInfo {
	flex-grow: 1;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 5px;
}

#errorWindow label .exInfo .errorAction {
	display: block;
	width: 100%;
	color: #000;
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.11px;
}

#errorWindow label .exInfo .exName {
	display: block;
	width: 100%;
	color: #000;
	font-size: 13.2px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

#errorWindow label .exInfo .exFooter {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
}

#errorWindow label .exInfo .exPrice {
	color: #000;
	font-size: 18.754px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	order: 1;
}

#errorWindow label .exInfo .exWeight {
	order: 2;
}

#agreeAlert {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	justify-items: center;
	align-items: center;
	background: rgba(0,0,0,.70);
	z-index: 1000;
}

#agreeAlert > div {
	padding: 80px 80px 80px 80px;
	padding: 0px;
	top: unset;
	overflow: hidden;
	max-width: 1000px;
}

#agreeAlert h1 {
	max-width: 600px;
	font-size: 22.5px;
	margin: 80px 80px 20px 80px;
	width: 100%;
}

#agreeAlert .agreeText {
	overflow-y: auto;
	max-height: 50vh;
	margin: 0px 25px 25px 80px;
	padding: 0px 55px 110px 0px;
}

#agreeAlert .btn {
	float: right;
	width: auto;
}

#agreeAlert .agreeNavi {
	display: flex;
	width: 100%;
	background-color: #000000;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(20px);
	padding: 20px 25px 20px 25px;
	margin-top: -100px;
	position: absolute;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 10px;	
}

#agreeAlert img {
	max-width: 100%;
}

#k_footer {
	width: 100%;
	color: #666666;
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	padding: 0px 24px;
}

#k_footer a {
	color: #000000;
}

body.step-Result #k_footer,
body.step-Model #k_footer {
	display: block;
}

body.step-Result #k_footer {
	width: 68%;
}

body.step-Extra #k_footer {
	display: none;
}