/*  text result */
.result { display: block; float: left; font-size: 13px; }
.result strong { color: #ff61a4; font-weight: 900; margin-right: 8px; margin-right: 5px; font-size: 19px;}

/* item car */
.item-car ul { display: flex; flex-wrap: wrap; width: 100%; margin: 22px -2% 22px 0; }
.item-car ul li { display: block; width: 31.33%; margin: 14px 2% 14px 0; border: 4px solid #000; padding: 6px; box-shadow: 5px 5px 0px #b1e2e7; }
.item-car .images-item { position: relative; }
.item-car .images-item .tag {width: 50px; position: absolute; top: 8px; left: -12px;  }
.item-car .images-item .tag-red { background: url(../images/usedcar-list/ribbon-red.png) no-repeat top left; width: 50px; height: 23px; background-size: contain; color: #fff; font-weight: 300; font-size: 12px; text-align: center; display: inline-block; padding: 2px 8px 2px 4px; margin: 0 0 5px;}
.item-car .images-item .tag-pink { background: url(../images/usedcar-list/ribbon-pink.png) no-repeat top left; width: 59px; height: 23px; background-size: contain; color: #fff; font-weight: 300; font-size: 12px; text-align: center; display: inline-block; padding: 2px 8px 2px 4px; }
.item-car .name-item { text-align: center; padding: 8px 0; display: block; font-size: 12px; font-weight: 900; }
.item-car .name-item strong { font-size: 16px; }
.item-car .data-item { background: url(../images/bg-patten-blue.jpg); padding: 8px; text-align: center; display: flex; width: 100%; justify-content: space-around; }
.item-car .data-item span { display: inline-block; text-align: center; }

.item-car .data-item_add {  padding: 8px; text-align: center; display: flex; width: 100%; justify-content: space-around; }
.item-car .data-item_add span { display: inline-block; text-align: center; }

.item-car .price-item {display: block;text-align: right;font-size: 17px;font-weight: 900;/*color: #ff0024;*/padding: 4px 0;letter-spacing: 0px;line-height: 10px;}
.item-car .price-item small {font-size: 12px;font-weight: 500;color: #000;}
.item-car a.btn-highlight { display: block; font-size: 14px; width: 80%; padding: 12px; text-align: center; margin: 8px auto; font-weight: 900; color: #fff; }
.item-car a.btn-highlight img { margin-right: 12px; }


/*---------------sort---------------*/
.sort-search{font-size: 12px;/* color:#919191; *//* padding: 18px 0 10px; */position: relative;text-align: center;/* border-bottom: 1px dashed #666; */margin-bottom: 14px;float: left;}
.sort-search span{display: inline-block;border-right: 1px solid #e2e2e2;padding: 0 10px;height: 17px;/* line-height: 33px; */visibility: z;vertical-align: middle;}
.sort-search span:last-child{border: 0;}
.sort-search span strong{}
.sort-search button{background: #8cd6e2;border-radius: 111px;border: none;width: 24px;height: 24px;line-height: 25px;position: relative;/* top: -1px; */color: #000000;padding: 0 3px;margin: 0 3px;cursor: pointer;font-size: 9px;line-height: 12pt;/* background: #FFF; */}
.sort-search button:hover{background: #000 !important;color: #FFF !important;}
.sort-active{/* border: 2px solid #FBF162 !important; */background: #000 !important;color: #FFF !important;}

.sort-Bt{ display: none;}

/* filter search */
.search {position: fixed;width: 100%;bottom: 0;left: 0;right: 0;/*z-index: 201;*/}
.search .input-filter { display: none; max-height: 400px; overflow-y: auto; padding: 0 !important;}
.title-search { display: block; width: 235px; text-align: center; padding: 8px 18px; cursor: pointer; background: #86d9f7; margin-bottom: -2px; transition: all 0.3s; overflow: hidden; }
.title-search:hover { box-shadow: inset 3px 3px 6px #13c5ee; }
.title-search .blink{ display: inline-block; margin-left: 8px; -webkit-animation:blink-1 1.8s infinite both;animation:blink-1 1.8s infinite both; }
    @-moz-keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0}}
    @-webkit-keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0}}
    @keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0}}
.filter-search { background: #e7f7fd; padding: 18px 10px; display: flex; flex-wrap: wrap; }
.filter-search .filter { width: 30%; border-right: 1px solid #c0ced2; padding: 5px; }
.filter-search .filter-btn { width: 10%; padding: 8px; line-height: 0; text-align: center; }
.filter-search .btn-search { background: #fff600; border: 2px solid #000; box-shadow: inset 3px 3px 0px #fff; padding: 12px; }
.filter-search .btn-clear { padding: 8px 12px; line-height: 0; background: #313131; border: 2px solid #313131; margin-top: 8px; }

.filter ul { display: block; }
.filter ul li { display: flex; flex-wrap: wrap; width: 100%; align-items: center; }
.filter .title {display: block;padding: 6px;width: 24%;text-align: left;font-weight: 500;}
.filter .data {display: block;padding: 5px 3px;width: 76%;text-align: left;}
.reservation .data span { display: inline-block; padding: 4px 0; }
.filter select{min-width: 105px;-webkit-appearance:none;-moz-appearance:none;}
.filter select::-ms-expand{ display: none;}
.filter select.style-select{  background: url(../images/usedcar-list/select-arrow.png) no-repeat right center #fff; padding-right: 18px; }
.input-default { padding: 6px; border: 1px solid #000; background-color: #fff; display: inline-block; font-size: 12px; }


/* filter color */
.filter .fillter-color{ width: 25px; height: 30px; border: 2px solid #000; display: inline-block; margin: 2px;}
.filter .fillter-color.color1{ background: #fff;}
.filter .fillter-color.color2{ background: #000;}
.filter .fillter-color.color3{ background: #ff1800;}
.filter .fillter-color.color4{ background: #0036ff;}
.filter .fillter-color.color5{ background: #fcff00;}
.filter .fillter-color.color6{ background: #15e000;}
.filter .fillter-color.color7{ background: #ac7500;}
.filter .fillter-color.color8{ background: url(../images/usedcar-list/color2.png) no-repeat center; background-size: 100%; }
.filter .fillter-color.color9{ background: url(../images/usedcar-list/color4.png) no-repeat center; background-size: 100%; }
.filter .fillter-color.color10{ background: #dcdcdc;}
.filter .fillter-color.color11{ background: #ff9c00;}
.filter .fillter-color.color12{ background: #ba00ff;}
.filter .fillter-color.color13{ background: #ffa4dc;}
.filter .fillter-color.color14{ background: #ffebb0;}
.filter .fillter-color.color15{ background: url(../images/usedcar-list/color3.png) no-repeat center; background-size: 100%; }
.filter .fillter-color.color16{ background: #6e6e6e;}
.filter .fillter-color.color17{ background: #002aa3;}
.filter .fillter-color.color18{ background: url(../images/usedcar-list/color.png) no-repeat center; background-size: 100%; }
.filter input[type=checkbox]{ display:none }
.filter input[type=checkbox]:checked + .fillter-color{ border: 2px solid #00bbff;}
.pc-color{ display: block;}
.sp-color{display: none;}


/* modal link */
.select-link { box-shadow: 0px 0px 0px 6px rgba(204, 204, 204, 0.75); border: 0; }
.modal-link {display: block;text-align: center;padding: 11px 12px;}
.border-top { height: 4px; width: 100%; margin-bottom: 18px; }
.btn-link-car { margin: 8px 1%; width: 45%; display: inline-block; color: #fff!important; font-size: 18px; font-weight: 500; padding: 20px 6px; text-align: center; }
.modal-body .title-default {
    display: block;
    padding: 10px 0
}
@media(max-width:1200px) {
    .filter-search { padding: 0; }
    .filter select {min-width: 73px;}

}

@media(max-width:1200px) {
    .filter-search { padding: 12px; }
    .filter-search .filter { width: 50%; border: 0; }
    .filter-search .filter-btn { width: 50%; display: flex; justify-content: center; align-items: center; }
    .filter-search .btn-clear { margin-top: 0; margin-left: 18px; padding: 29px 12px; }
}

@media(max-width:767px) {
    .item-car ul li { width: 48%; }

    .filter .title{ width: 25%; }
    .filter .data { width: 75%; }

    .filter-search { padding: 0px; }
    .filter-search .filter {padding: 0 0px;}
    .filter-search .filter-btn { width: 50%; display: flex; justify-content: center; align-items: center; }
    .filter-search .btn-clear { margin-top: 0; margin-left: 18px; padding: 29px 12px; }
    .pc-color{ display: none;}
    .sp-color{display: block;}

    .title-search {
        width: 200px;
        padding: 8px 5px;
    }
    .title-search  img{ width:130px;}
    .search .input-filter { max-height: 900px; }


    .blink{ font-size:10px;}
    .page-number {
        width: 100%;
    }
    .sort-Bt{
        display: block;
        background: #f3f3f3;
        float: left;
        border-radius: 5px;
        height: 30px;
        line-height: 30px;
        padding: 0px 28px 0 12px;
        margin: 0 0 0 10px;
        position: relative;
        font-size: 13px;
    }
    .sort-Bt:after{
        content: '+';
        color: #fff;
        font-size: 22px;
        font-weight: bold;
        position: absolute;
        background: #8cd6e2;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 25px;
        top: 5px;
        right: 2px;
    }
    .sort-Bt.active:after{
        content: '-' !important;
        line-height: 15px;
        font-size: 25px;
    }
    
    
    .sort-search{display: none;width: 100%;}
    .sort-search span{
    display:block;
    border-right: none;
    padding: 0 10px;
    margin: 5px;
    height:auto;
    background:#f3f3f3;
    padding:5px;
    }
    .sort-search span strong{
        width:55px;
        display:inline-block;
        text-align:left;
    }
    
    .filter-search .filter-btn { width: 44%; text-align: center; }
    .filter-search .btn-search { width: 44%; height: 50px; padding: 0px;}
    .btn-search img{ height: 80%;}
    .filter-search .btn-clear {  width: 44%;  height: 50px; padding: 0px;}
    .color-list{ padding: 0 0 0 10px;}
    .color-list-title{ padding: 0 0 0 10px !important;}
    

}




@media(max-width:520px) {
    .item-car a.btn-highlight { width: 100%; }
}

@media(max-width:460px) {
    .item-car ul li {width: 49%;margin: 5px auto;border: 2px solid #000;box-shadow: 2px 2px 0px #b1e2e7;padding: 3px;}
    .item-car .data-item {
        padding: 3px;
        font-size:12px;
    }

    .item-car .data-item_add {
        padding: 3px;
        font-size:12px;
    }

    .item-car .name-item { padding: 2px;}
    .item-car .name-item strong {
        font-size: 14px;
        display: block;
    }
    .item-car a.btn-highlight {padding: 5px;}

    .item-car .data-item {
        display: block;         
         width: 100%;
    }

    .item-car .data-item_add {
        display: block;         
         width: 100%;
    }

    .item-car .price-item {
        letter-spacing: 0px;
    }
    .item-car .images-item .tag-red { width: 45px; height: 23px; font-weight: 300; font-size: 11px;  padding: 2px 0 0 2px; margin: 0 0 5px; text-align:left;}
    .item-car .images-item .tag-pink { width: 45px; height: 23px; font-weight: 300; font-size: 11px; padding: 2px 0 0 2px;  text-align:left;}

    .item-car .images-item .tag {
        top: 0px;
        left: -3px;
    }

}

@media(max-width:767px) {
    .filter-search .filter { width: 100%; }
    .filter-search .filter-btn { width: 100%; }
    .filter select {width: 45%;}
    .modal-link { padding: 12px;}
    .btn-link-car { width: 80%; margin: 8px auto; }

}

@media(max-width:420px) {
    .filter select { width: 45%; }
    .pc-only { display: none;}


}