@import "variables";
.w-compatibility {
	max-width: 360px;
	margin-bottom: 16px;
	.w-panel {
		border: 1px solid $gray;
		padding: 8px;
		@include border-radius(4px);
		& + .w-panel {
			margin-top: 8px;
		}
		.w-panel__message {
			position: relative;
			padding-left: 24px;
			.icon {
				position: absolute; top: 50%; left: 0;
				display: block;
				width: 16px;
				height: 16px;
				margin-top: -8px;
			}
		}
		.media {
			margin-top: 8px;
			font-size: 13px;
			line-height: normal;
			a {
				border: 0;
				&:hover {
					text-decoration: underline;
				}
			}
			.media-left {
				padding-right: 8px;
			}
		}

		&.success {
			background: #EBFFD6;
			border-color: #B8E986;
			.w-panel__message {
				color: $green_dark;
				.icon {
					color: $green;
				}
			}
		}
		&.danger {
			background: #FFEBEB;
			border-color: #FFB3B3;
			.w-panel__message {
				color: #2D2D2D;
				.icon {
					color: $red;
				}
			}
		}
	}
	.w-buttons {
		margin-top: 8px;
		@media(max-width: 575px){
			text-align: center;
		}
		.btn {
			padding: 12px 16px;
			font-size: 18px;
			line-height: normal;
			.fa {
				margin-left: 4px;
			}
		}
	}
}

.w-compatibilityCar {
	.w-compatibilityCar__path {
		display: flex;
		align-items: center;
		//flex-wrap: wrap;
		margin: 0 0 32px;
		padding: 0;
		list-style: none;
		& > li {
			padding-left: 4px;
			padding-right: 4px;
			a {
				border: none;
				display: block;
				color: $black;
				.fa {
					font-size: 16px;
				}
				&:hover {
					color: $blue;
				}
			}
		}
	}
	.w-compatibilityCar__head {
		margin-bottom: 16px;
		font-size: 24px;
		line-height: 1.25rem;
		font-weight: bold;
		color: $blue;
	}
	.w-compatibilityCar__search {
		position: relative;
		margin-bottom: 16px;
		.fa-search {
			position: absolute; top: 50%; left: 12px;
			display: block;
			width: 16px;
			height: 16px;
			line-height: 16px;
			margin-top: -8px;
			color: $color_gray_40;
		}
		.field {
			.form-control {
				padding-left: 32px;
				padding-right: 32px;
			}
			.closer {
				top: 50%; right: 8px;
				margin-top: -8px;
				display: none;
			}
			&.active {
				.closer {
					display: block;
				}
			}
		}
	}
	ul.w-compatibilityCar__result {
		margin: 0 -8px;
		padding: 0;
		list-style: none;
		line-height: 1.25;
		& > li {
			&:not(:first-child){
				margin-top: 4px;
			}
			a {
				border: none;
				display: block;
				padding: 4px 8px 5px;
				color: $color_dark;
				&:hover {
					background: $color_gray_05;
					color: $blue;
				}
			}
		}
	}
	dl.w-compatibilityCar__result {
		margin: 0;
		padding: 0;
		& + dl.w-compatibilityCar__result {
			margin-top: 24px;
		}
		dt {
			margin: 0;
			padding: 0;
			font-size: 16px;
		}
		dd {
			margin: 0;
			padding: 0;
			font-size: 13px;
			&:not(:first-child){
				margin-top: 6px;
			}
			a {
				border-bottom-color: transparent;
				&:hover {
					border-bottom-color: $blue;
				}
			}
		}
	}
}

#modal-compatibility {
	.modal-body {
		min-height: 300px;
	}
}