.filter_n{clear: both; width: 100%; margin-top: 10px; margin-bottom: 5px; text-align: left; font-weight: bold; padding: 5px 0px;}
#filter_co{margin: 0px; border: none; width: 100%;}
.filter_v{width: 100%;}
.filter_co_sep2{width: auto; margin: 0px;}
ul.filter_v li{clear: both; width: 100%; display: block;}
.filter_n.first{margin-top: 0px;}
/* all original filter elements above. just did to put it in the right panel from its original position in the left. */

#y_filters .box_content{padding-left: 20px;} /* new filter box in the left panel*/

.remove_filter_link{padding-right: 5px; padding-left: 5px; font-weight: bold; color: #fff; background-color:  red; margin-left: 5px;}
.remove_filter_link:visited{color: #fff;} /* X icon besides each element in the filters on the left panel*/

.button_content{text-align: center;}
#y_filters{display: none;}
#filter{border: none; margin: 0px; padding: 0px;} /* filter on the right*/

.filter_expand{display: block; padding: 0px 0px 0px 14px; background-color: #f00; float: right; color: #fff; text-decoration: none; cursor: pointer;}
.filter_expand:hover{background-color: #0f0;} /* + icon on the right filters */


.compare_error_container{text-align: center; padding: 10px 0px;}
#compare_error, .custom_error{display: none; padding: 5px; background-color: #FFCCCB; color: red; border: 1px dashed red; font-weight: bold;}
/* error displayed when other than 2-5 are selected */

.filter_v{display: none;}


#left_inner{margin-bottom: 20px;}

input[name="compare"]{margin-right: 10px;} /* compare button */
a.cancel_compare, a.cancel_compare:visited{padding: 5px; font-weight: bold; background-color: red; color: white;}
/* cancel compare button */

.custom_error{display: inline; margin-top: -10px; padding: 5px; margin-bottom: 20px;}

#ajax_results{margin-bottom: 10px;} /* loading icons on doing ajax*/

.only_one_element .y_visible input[type="checkbox"]{visibility: hidden;} /* when there is only one filter element */