@import "src/css/alvadi/variables";
.p-catalog-specify-model {
	@media(min-width: 768px){
		padding-bottom: 200px;
	}
	.pcsm-h1 {
		margin-bottom: 1.25rem;
		font-size: 20px;
		color: #838383;
		h1, .h1,
		h2, .h2,
		h3, .h3 {
			margin: 0;
			font-size: 40px;
			line-height: 1.25;
			@media(max-width: 1199px){
				font-size: 36px;
			}
			@media(max-width: 991px){
				font-size: 32px;
			}
			@media(max-width: 767px){
				font-size: 28px;
			}
		}
	}
	.pcsm-h2 {
		margin-bottom: 1.25rem;
		h1, .h1,
		h2, .h2,
		h3, .h3 {
			margin: 0;
			font-size: 24px;
			color: #747474;
			strong {
				color: #333;
			}
		}
	}
	.pcsm-filter {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -8px 20px;
		padding: 0;
		list-style: none;
		& > li {
			position: relative;
			display: flex;
			align-items: center;
			padding: 6px;
			.pcsm-filter-input {
				border: 1px solid #dde4ec;
				position: relative;
				display: block;
				padding: 7px 12px 8px;
				font-size: 14px;
				@media(max-width: 767px){ font-size: 13px; }
				color: $color_dark;
				white-space: nowrap;
				&.highlight {
					background: lighten(#dde4ec, 3%);
				}
				&.inner {
					border-color: $blue;
					display: none;
					margin-left: -1px;
				}
				&:hover {
					background: #dde4ec;
					cursor: pointer;
				}
				&.active {
					background: $blue;
					border-color: $blue;
					color: $white;
				}
			}
			.pcsm-filter-change {
				display: none;
				padding: 7px 12px 8px;
				a {
					border: 0;
					color: #9B9B9B;
					&:hover {
						color: $blue;
					}
				}
			}
			&.in {
				.pcsm-filter-input {
					&.inner {
						display: block;
					}
				}
				.pcsm-filter-change {
					display: block;
				}
			}
		}
		&.in {
			& > li:not(.in) {
				display: none;
			}
		}
	}
	.pcsm-table-list {}
	.pcsm-table-ballon {
		position: relative;
		padding: 4px 0 0 0;
		@media(max-width: 767px){
			margin-left: 0 !important;
		}
		.ballon {
			position: relative;
			display: inline-block;
			max-width: 360px;
			.ballon-arrow {
				position: relative;
				overflow: hidden;
				height: 16px;
				&:before {
					content: '';
					position: absolute; bottom: 0; left: 20px;
					border: 16px solid transparent;
					border-bottom-color: #d4e6f6;
				}
			}
			.ballon-body {
				background: #d4e6f6;
				padding: 12px 20px 16px;
				font-size: 16px;
				font-weight: bold;
				@include border-radius();
			}
		}
		&.highlight {
			animation: shake 1s linear both 1;
			@keyframes shake {
				10%, 90% { left: -1px; }
				20%, 80% { left: 2px; }
				30%, 50%, 70% { left: -4px; }
				40%, 60% { left: 4px; }
			}
			.ballon {
				.ballon-body {

				}
			}
		}
	}
	.pcsm-table {
		font-size: 13px;
		& + .pcsm-table {
			margin-top: 32px;
		}
		.pcsm-table-row {
			border: 0;
			display: block;
			padding: 0;
			color: #9B9B9B;
			@media(min-width: 768px){
				padding: 3px 8px 4px;
			}
			@media (min-width: 1200px) {
				display: flex;
				align-items: center;
			}
		}
		a.pcsm-table-row {
			&.highlight {
				background: lighten(#dde4ec, 3%);
			}
			&:hover {
				text-decoration: underline;
				@media(min-width: 768px){
					background: $color_light_blue;
				}
			}
			&.disabled {
				color: #9B9B9B;
				.pcsm-table-col {
					&.model {
						//font-weight: normal;
						.model-engine {
							//font-weight: normal;
							color: #9B9B9B;
						}
					}
				}
				.pcsm-table-col.icon {
					opacity: .4;
				}
				.color-black {
					color: #9B9B9B !important;
				}
			}
		}
		.pcsm-table-col {
			&.model {
				position: relative;
				flex-grow: 1;
				margin-right: 20px;
				font-size: 15px;
				font-weight: bold;
				color: #9B9B9B;
				.model-engine {
					//display: inline-block;
					font-weight: bold;
					color: $blue;
				}
			}
			&.description {
				@media (max-width: 767px) {
					display: flex;
					align-items: center;
				}
			}
			&.icon {
				@media (min-width: 768px) {
					display: none;
				}
				@media (max-width: 767px) {
					width: 60px;
					min-width: 60px;
					margin-right: 16px;
					img {
						display: block;
						max-width: 100%;
					}
				}
			}
			&.data {
				@media (min-width: 768px) {
					display: flex;
				}
				/*.pcsm-table-col {
					position: relative;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}*/
			}
			&.power {
				@media (min-width: 768px) {
					width: 160px;
					min-width: 160px;
				}
			}
			&.date {
				@media (min-width: 768px) {
					width: 90px;
					min-width: 90px;
					margin-left: 20px;
				}
			}
			&.body {
				@media (min-width: 768px) {
					width: 90px;
					min-width: 90px;
					margin-left: 20px;
					text-align: right;
				}
				@media (max-width: 767px) {
					display: none;
				}
			}
			&.engine {
				position: relative;
				flex-grow: 1;
				@media (min-width: 768px) {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-left: 32px;
				}
				@media (min-width: 1200px) {
					width: 220px;
					min-width: 220px;
				}
			}
		}
		.pcsm-table__head {
			//font-size: 14px;
			font-weight: bold;
			.pcsm-table-col {
				&.model {
					font-size: 14px;
					color: $black;
				}
				&.description {
					@media(max-width: 1199px){
						display: none;
					}
				}
			}
		}
		.pcsm-table__body {
			margin-top: 12px;
			@media(min-width: 768px){
				margin-top: 4px;
			}
			.pcsm-table-row {
				@media(min-width: 768px){
					border-bottom: 1px solid #e1e1e1;
				}
				& + .pcsm-table-row {
					@media(max-width: 767px){
						margin-top: 12px;
					}
				}
			}
		}
	}
	.pcsm-images {
		position: relative;
		display: flex;
		margin-top: 36px;
		margin-left: -8px;
		margin-right: -8px;
		.pcsm-images__col {
			width: 20%;
			padding: 0 8px;
		}
		@media(min-width: 768px) and (max-width: 991px){
			.pcsm-images__col {
				width: 33.3333%;
				&:nth-child(n+4){
					display: none;
				}
			}
		}
		@media(min-width: 576px) and (max-width: 767px){
			.pcsm-images__col {
				width: 25%;
				&:nth-child(n+5){
					display: none;
				}
			}
		}
		@media(max-width: 575px){
			.pcsm-images__col {
				width: 33.3333%;
				&:nth-child(n+4){
					display: none;
				}
			}
		}
	}
}

.pcsm-backlink {
	@media(max-width: 767px){
		display: none;
	}
	position: relative;
	a {
		border: 0;
		position: relative;
		display: inline-block;
		padding-left: 15px;
		font-size: 13px;
		font-weight: bold;
		color: #9B9B9B;
		.fa {
			position: absolute; top: 4px; left: 0;
		}
		&:hover {
			color: $blue;
		}
	}
}

.pcsm-catalog-side {
	display: none;
	@media(max-width: 767px){
		display: block;
		padding-top: 80px;
	}
}