.voyah-car-color-select{
	max-width: 100%;
}
#voyah-color-indicators-wrap{
	position: relative;
	z-index: 2;
}
@media (min-width: 768px){
	#voyah-color-indicators-wrap{
		justify-self: end;
	}
}
#voyah-color-indicators{
	z-index: 10;
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
@media (min-width: 768px){
	#voyah-color-indicators{
		/* justify-content: end; */
	}
}
#voyah-color-indicators li{
	width: 28px;
	height: 28px;
	border-radius: 50%;
	overflow: hidden;
}
	#voyah-color-indicators li:not(:first-child){
		margin-left: 20px;
	}

#voyah-color-cars{
	list-style-type: none;
	position: relative;
	z-index: 1;
	
	max-width: 100%;
	margin: auto;
	padding: 0;
}

#voyah-color-cars li{
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto 1fr;
	width: 100%;
}

#voyah-color-cars li .color-name{
	font-size: 28px;
	font-weight: 100;
	text-transform: uppercase;
}
#voyah-color-cars li .color-name{}
#voyah-color-cars li .img-wrap{
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
@media (min-width: 768px){
	#voyah-color-cars li{}
	#voyah-color-cars li .color-name{
		font-size: 60px;
	}
	#voyah-color-cars li .img-wrap{}
}
@media (min-width: 1024px){
	#voyah-color-cars li{
		display: grid;
		grid-template-columns: 1fr 966px 1fr;
		grid-template-rows: auto 1fr;
		width: 100%;
	}
	#voyah-color-cars li .color-name{
		grid-column: 1 / 4;

	}
	#voyah-color-cars li .img-wrap{
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}
}


#voyah-color-cars li .color-name strong{
	font-weight: 600;
}
#voyah-color-cars li .img-wrap{

}
#voyah-color-cars li .img-wrap.img-wrap-bl{
	opacity: 0;
	transition: opacity .4s ease-out;
}
#voyah-color-cars li.black-line .img-wrap.img-wrap-bl{
	opacity: 1;
}

@media (min-width: 767px){
	#voyah-color-cars{
		/* margin-top: -62px; */
	}
}
	#voyah-color-cars li{
		position: absolute;
		top: 0px;
		opacity: 0;
		margin: auto;
		transition: opacity .4s ease-out;
	}
		#voyah-color-cars li.active{
			position: relative;
			opacity: 1;
			z-index: 2;
		}


		
#voyah-color-indicators-highlight{
	margin-top: -5px;
	margin-left: -5px;
	height: 38px;
	width: 38px;
	border: 3px solid #fff;
	border-radius: 50%;
	transition: transform .4s ease-out;
	transform: translateX('0px');
}

/*Layout controller*/
.voyah-color-controls{
	display: grid;
	row-gap: 15px;
	grid-template-rows: auto auto;
}

	.color-radioBtn-outer{
		
	}
	#voyah-color-indicators-wrap{

	}
@media (min-width: 767px){
	.voyah-color-controls{
		display: grid;
		column-gap: 15px;
		grid-template-columns: 1fr 1fr;
	}
}




/*Styling of radios*/
.color-radioBtn-wrap{
	display: grid;
	grid-template-columns: 32px auto;
	gap: 10px;
	margin-bottom: 10px;
}
#voyah-color-type-radios{
	border: none;
	display: flex;
	gap: 25px;
	padding: 0;
	margin: 0;
}
.radio-car-type{
	display: grid;
	place-content: center;

	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	margin: 0;
	font: inherit;
	color: currentColor;
	width: 32px;
	height: 32px;
	border: 1.5px solid #fff;
	border-radius: 4px;

}
	.radio-car-type[disabled]{
		color: #C8CDD2;
		border: 1.5px solid #C8CDD2;
	}

	.radio-car-type::before {
		content: "";
		display: block;
		width: 16px;
		height: 16px;
		background-color: #0041A0;
		border-radius: 4px;
		transform: scale(0);
		transition: 400ms transform ease-in-out;
		box-shadow: inset 1em 1em var(--form-control-color);
	}
	.radio-car-type:checked::before {
		transform: scale(1);
	}

.color-radioBtn-wrap label{
	padding-top: 7px;
	/* text-transform: uppercase; */
	font-size: 20px;
	font-weight: 500;
}

.color-radioBtn-wrap .radio-car-type[disabled] + label{
	color: #C8CDD2;
}