@charset "utf-8";

/* ::::::::::::::::::::::: Filter :::::::::::::::::::::::::::::::*/

/* ::::::::: container */
.side-filter-container {border:4px solid #EDEDED; background:#c7dcdd; padding: 10px 10px 16px;}
.side-filter { background:#FFF; border-radius:6px; padding:12px; margin-bottom:8px;}
.side-filter h3{display:block; width:100%; line-height: 1.2em; margin:0 0 8px; padding:0 0 0px; font-size:1em;}
.side-filter h3 strong{display:inline-block; padding:2px 0px 2px 6px; font-weight:bold; font-size:1.1em; line-height:1.3em; color:#155d61; vertical-align:middle; }
.side-filter h3 span.filter-title-step{display:inline-block; padding:3px 8px; background:#155d61; font-weight:bold; color:#FFF; font-size:11px;  line-height:1.5em; vertical-align:middle; }
.side-filter h3 span.filter-non-require{display:inline-block; font-weight:bold; color:#CC0000; }
.side-filter p {display:inline-block; margin:0 0 10px;}
.side-filter-lead {margin:0; padding:0;}
.btn-filter-toggle { margin:0 auto 10px; border-radius:4px;}/* only sm */

/* ::::::::: filter car */
.side-filter-car input { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: none;}
.side-filter-car label {
  display:inline-block;
  padding:0px 5px auto;
  border-radius:4px;
  border-style: none;
  background:#777;
  color:#FFF;
  text-align:center;
  width:32%;
  max-width:90px;
  height:50px;
  font-size:11px;
  vertical-align:top;
  margin:0 0px 4px 0;}
.side-filter-car label img{ display:block; margin:2px auto; vertical-align:top; }
.side-filter-car label.car_all     { padding-top: 0px; font-size:14px; line-height:50px; }
.side-filter-car label.car_sedan   { padding-top: 8px;}
.side-filter-car label.car_minivan { padding-top: 4px;}
.side-filter-car label.car_compact { padding-top: 10px;}
.side-filter-car label.car_suv     { padding-top: 4px;}
.side-filter-car label.car_sport   { padding-top: 11px;}
.side-filter-car label.car_kcar    { padding-top: 8px;}

.side-filter-car label:hover { background: #111;}
.side-filter-car label.is-checked { background: #111; color:#FFF; font-weight:bold; border:none;}


/* ::::::::: filter type */
.side-filter-type label input { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: none;}

.side-filter-type label {
  display:inline-block;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding:4px 0px 0 26px;
  border-radius:0px;
  border-style: none;
  background:url("./../img/icon_check_x2.png") left -6px no-repeat #FFF;
  background-size:26px 33px;
  color:#222;
  text-align:left;
  width:100%;
  max-width:300px;
  min-height:26px;
  vertical-align:top;
  margin:0 0px 0px 0;
  font-size:1em;
  font-weight:normal;
  line-height:1.2em;
}
.side-filter-type label input{vertical-align:middle;}

.side-filter-type label:hover { font-weight:bold; outline:none;}
.side-filter-type label.is-checked { 
  background-image:url("./../img/icon_check_on_x2.png");
  font-weight:bold; outline:none;
}

/* ::::::::: filter size */

#lineup_size_filter{}

/* select css flat */
.side-filter-size select { -webkit-appearance: none; appearance: none;}
.side-filter-size select::-ms-expand {display: none;}/*IE*/
.side-filter-size select { -moz-appearance: none; text-indent: 0.01px; text-overflow: '';}/*FF*/

.side-filter-size select{
  display:inline-block;
  padding:4px 26px 4px 4px;
  border:2px solid #BBB;
  font-size:1rem;
  background:url("/DTglobal/new/img/icon_select_bk.png") right center no-repeat #FFF;
  background-size:31px 8px;
  border-radius:0px;
}
.side-filter-size select option{ font-size:1.1rem;}

  a.selectClear {display:inline-block; margin:10px 0px 0;}



/* ::::::::: Submit Btn */
.side-filter-submit {
  text-align:center;
}
.side-filter-submit input{
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width:100%;
  max-width:300px;
  padding:10px 0;
  border:none;
  outline:none;
  border-radius:3px;
  font-size:1.1em;
}

/**
 * ===============================================
 * MediaQuery : X-Small
 * ===============================================
 */
@media screen and (max-width: 540px) {

  .filters-container { padding: 10px 10px;}
  .filter-block { padding: 14px ; }

  .filter-block h3{display:block; }

  .filter-car button {
    width:32%;
  }

  .filter-type button {
    width:100%;
    min-height:20px;
    padding:0px 0px 0 28px;
    line-height:1.2;
    margin:0.5em 0 0.5em;
  }


}