@import "variables";
.w-car-by-number-box {
	@media (max-width: 767px) {
		margin-top: -12px;
	}
}
.w-car-by-number {
	.number-search-form {
		position: relative;
		& > .input-group {
			@media (max-width: 767px) {
				max-width: 150px;
			}
			@media (max-width: 449px) {
				max-width: 160px;
			}
			.form-control { text-transform: uppercase; }
		}
		.fan-dropdown {
			@media (max-width: 767px) {
				left: -110px;
			}
		}
	}
	.w-car-by-number__head {
		.preview {
			background-position: 50% 50%;
			background-repeat: no-repeat;
			position: relative;
			min-width: 72px;
			min-height: 48px;
			@media(min-width: 768px) {
				min-height: 140px;
			}
			@media(min-width: 992px) {
				min-height: 120px;
			}
		}
	}
	@media(min-width: 768px) {
		.w-car-by-number__head {
			position: relative;
			.preview {
				border: 4px solid $color_water;
				//padding: 2px;
				img:not(.img-aligner__img) {
					display: block;
					width: 100%;
				}
				.img-aligner__img {
					max-width: 70%;
					max-height: 70%;
				}
			}
			.zoom {
				background: $color_gray_70;
				position: absolute; top: 0; left: 100%;
				z-index: 9999;
				display: block;
				width: 450px;
				margin: 0 0 0 20px;
				padding: 6px;
				visibility: hidden;
				opacity: 0;
				@include transition();
				img {
					display: block;
					width: 100%;
				}
			}
			.change-model { display: none; }
			&:hover {
				.zoom {
					visibility: visible;
					opacity: 1;
				}
			}
		}
		.w-car-by-number__body {
			background: $color_water;
			padding: 4px 8px 8px;
			&:first-child { padding-top: 8px; }
			.change-model { display: inline; }
		}
	}
	@media(max-width: 767px) {
		background: $color_water;
		position: relative;
		margin: 0 -12px;
		padding: 12px;
		font-size: 13px;
		.w-car-by-number__head {
			float: left;
			height: 48px;
			//max-width: 110px;
			padding-right: 15px;
			.preview {
				img:not(.img-aligner__img) {
					display: block;
					width: auto;
					height: 48px;
				}
				.img-aligner__img {
					max-width: 90%;
					max-height: 90%;
				}
			}
			.zoom { display: none; }
			.change-model { display: inline; }
		}
		.w-car-by-number__body {
			//overflow: hidden;
			float: left;
			.change-model { display: none; }
		}
		.number-search-form {
			padding: 0;
			.input-group {
				.input-group-btn {
					.input-group-btn__svg-flag { width: auto; height: 48px; }
					.btn {
						height: 48px;
						padding: 8px 12px;
						font-size: 16px;
						line-height: 30px;
					}
				}
				.form-control {
					width: 120px;
					height: 48px;
					padding: 4px 12px;
					font-size: 20px;
					text-align: center;
				}
			}
		}
	}
	//mod
	&.abt-20432 {
		background: #eaf2fa;
		display: flex;
		padding: 3px;
		.w-car-by-number__head {
			float: none;
			height: auto;
			.preview {
				img {
					height: 66px;
				}
			}
		}
		.w-car-by-number__body {
			float: none;
			flex-grow: 1;
			max-width: 300px;
		}
		.flex-row {
			justify-content: space-between;
		}
		.img-aligner__bg {
			height: 66px;
		}
	}
}