.car_models{
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.car_model {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
cursor: pointer;
background-color: #f5f5f6;
transition: 0.5s;
text-align: center;
}
.car_model:hover,.car_model.active {
background-color: #D12F41 !important;
color: #fff;
}
.palette_search {
display: block;
width: 100%;
margin-bottom: 30px;
position: relative;
}
.palette_search form {
display: block;
width: 100%;
}
.palette_search form input {
width: 100%;
background: #FFFFFF;
border: 1px solid #969BA3;
box-sizing: border-box;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 25px;
padding-right: 50px;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 130%;
color: #000;
}
.palette_search form button {
position: absolute;
top: -5px;
right: 0px;
z-index: 20;
width: 50px;
height: 100%;
opacity: 0.7;
border: none !important;
background-color: transparent !important;
cursor: pointer;
}
.palette {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
padding-top:3px;
}
.palette_item {
width: calc(33.333% - 20px);
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px; }
.palette_item span{display:block;}
.item_color {
display: block;
width: 100%;
height: 90px;
border:1px solid #e5e5e5;
}
.palette_item.active .item_color {
outline-color: #d12f415c;
outline-width: 1.5px;
outline-offset: 2px;
outline-style: solid;
}
.item_name {
font-weight: 600;
color: #000;
margin-top: 10px;
font-size: 14px;
}
.item_code {
font-weight: 300;
color: #000;
font-size: 14px;
}
.palette {
max-height: 522px;
overflow: hidden;
}
.palette.showme {
max-height: inherit;
}
.show_hide_items {
display: flex;
justify-content: center;
align-items: center;
padding-top: 30px;
}
.show_hide_items a {
display: block;
font-weight: 600;
font-size: 14px;
line-height: 130%;
text-align: center;
color: #6F6F6F;
}
.palette_item.out_search,.show_hide_items .hide_colors {
display: none;
}
@media (min-width:1201px){
.car_model:not(:nth-of-type(4n)) {
margin-right: 20px;
}
.car_model {
width: calc(25% - 15px);
margin-bottom: 20px;
}
}
@media (max-width:1200px) and (min-width:601px){
.car_model {
width: calc(33.333% - 10px);
margin-bottom: 15px;
}
.car_model:not(:nth-of-type(3n)) {
margin-right: 15px;
}
}
@media (max-width:600px){
.car_model {
width: calc(50% - 10px);
margin-bottom: 20px;
}
.car_model:not(:nth-of-type(2n)) {
margin-right: 20px;
}
}
@media (max-width:500px){
.palette {
max-height: 654px;
margin-left: -5px;
margin-right: -5px;
}
.palette_item {
width: calc(50% - 10px);
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
}