/*Hide problematic filters*/
	/*Bertoia Collection - NO LONGER VALID*/
	.tf-checkbox:has(input[id="cat10_HTM_fa_4201"]) {

    display: none;

}
	/*End of Filter Hiding*/
 	/* Modal overlay on PDP styles */
		.modal {
			position: fixed;
			z-index: 1000;
			padding-top: 60px;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0, 0, 0, 0.7);
		}
		
		.modal-content {
			background-color: #fefefe;
			margin: 5% auto;
			padding: 20px;
			border: 1px solid #ccc;
			/* Make it 80% of the viewport, not capped at 600px */
			width: 80vw;
			max-width: 80vw;
			/* Optional: limit height and scroll overflow */
			max-height: 80vh;
			overflow-y: auto;
			border-radius: 0px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
		}
		
		.close {
			color: #aaa;
			float: right;
			font-size: 28px;
			font-weight: bold;
			cursor: pointer;
		}
		/*End of Modal Styles */
	.body_container {
	    padding-top: 102px!important;
	}
	.gen-surfacefinishes-module .body_container {
		padding-top: 0px!important;
	}

	#advproduct_search {
	    padding: 0px!important;
	    display: flex;
	    flex-direction: row;
	    width: 100%;
	    float: none;
	    justify-content: space-between;
	    align-items: flex-end;
	}
	.essentials-leadtime {
		display:none;
	}
	p.landing {
		/*display: none;*/
		padding: 0 20px 20px 0;
	}
	p.landing a {
		text-decoration: underline;
	}
	ul.planning .delete{
		float: left;
		width: 11px;
		height: 11px;
		background: url(../images/selection_cancel.gif) no-repeat 0 0;
		padding: 0;
		margin: 4px 8px 0 0;
	}
	/*.planning_ideas .thumbs{
		padding-top: 35px;
		padding-bottom: 40px;
	}
	*/
	ul.size {
		float: left;
		padding-bottom: 35px;
	}
	ul.size li.high {
		width: 900px;
	}
	ul.sub-size.padding {
		padding: 17px 0 0;
	}
	ul.sub-size li {
		float: left;
		width: 320px;
	}
	#navigation ul li .sub_menu ul li .sub_menu_level3.superNav{
		width: 764px;
	}
	#navigation ul li .sub_menu ul li .sub_menu_level3{
		width: 321px;
		display: none;
		position: absolute;
		border: 1px solid #efefef;
		background: #fff;
		padding: 17px 0 20px 19px;
		margin-left:-16px;
		/*left: -16px;
		*/
		top: 35px;
		border-top: 2px solid #efefef;
	}
	#navigation ul li .sub_menu ul li .sub_menu_level3.superNav ul.span6{
		float:left;
		width:190px;
	}
	#navigation ul li .sub_menu ul li .sub_menu_level3.superNav ul.span6.last {
		width: 160px;
	}
	#navigation ul li .sub_menu ul li .sub_menu_level3 ul div{
		float:left;
		width:160px;
	}
	/* #navigation ul li .sub_menu ul li .sub_menu_level3 ul{
		float: left;
		width: 100%;
		-moz-column-count: 2;
		-webkit-column-count: 2;
		-moz-column-gap:10px;
		-webkit-column-gap:10px;
		column-count: 2;
		column-gap: 10px;
	}
	*/
	#navigation ul.span6 {
		width: 45%;
	}
	/*safety first */
	.span6 {
		float: left;
		width: 45%
	}
	#navigation ul li .sub_menu ul li .sub_menu_level3 ul.span6 li.superNav3 {
		float: left;
		width: 160px;
		font: 12px/16px 'HelveticaNeueW01-75Bold',Arial, Helvetica, sans-serif;
		padding: 0px 0 8px 0;
		color: #333;
	}
	#navigation ul li .sub_menu ul li .sub_menu_level3 ul.span6 li.superNav4 {
		float: left;
		width: 160px;
		padding: 0 0 8px 0;
		color: #777777;
	}
	#navigation ul li .sub_menu ul li .sub_menu_level3 ul.span6 li.superNav4 a {
		float: left;
		font: 12px/13px 'HelveticaNeueW01-55Roma',Arial, Helvetica, sans-serif;
		color: #333;
		padding: 0 0 0 0;
	}
	#navigation ul li .sub_menu ul li .sub_menu_level3 ul.span6 li.superNav4 a:hover {
		color: #dc3a0f;
	}
	.planningIdeas_gallery {
		height: 105px !important;
	}
	/*Rockwell Style*/
	#ofcdesk-explorer {
		max-width: 1060px;
		margin: auto;
	}
	.login-box, .register-box {
		margin: auto !important;
	}
	.modal-body {
		padding-top: 160px !important;
		padding: 23.5em;
	}
	#outer_header {
		z-index: 1;
	}
	#header .search {
		height: auto;
		width: auto;
	}
	header {
		margin-top: 0 !important;
	}
	#ofcdesk-integration label.select::after {
		z-index: 0;
	}
	#outer_advproduct_search {
		z-index: 0;
		margin-bottom: 10px!important;
	}
	#advproduct_search .left {
    float: left;
    width: auto!important;
}
	.accordion_row h4 {
		background: none !important;
	}
	/* Typicals finder styles */
	.active-filters-container:first-of-type {
		display: none;
	}

	.right_portion .active-filters-container {
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
	}
	.right_portion .active-filters-container {
		max-height: fit-content;
		padding: 10px 0 0;
		margin-bottom: 0px;
		transition: max-height 0.5s ease, margin 0.5s ease, padding 0.5s ease;
	}
	.right_portion .active-filter {
		position: relative;
		display: inline-block;
		align-items: center;
		padding: 7px 10px 7px 25px;
		background-color: #333;
		border-radius: 30px;
		font-family: 'HelveticaNeueW01-65Medi',Arial, Helvetica, sans-serif;
		font-size: 12px;
		line-height:12px;
		cursor: pointer;
		color: #fff;
	}
	.right_portion .active-filter:hover,.left_portion .selections .clear-all-btn:hover {
		background-color: #ccc;
		color: #333;
	}
	.right_portion .active-filter .remove-filter {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: transparent; /* Ensure it doesn't obscure content */
		border: none;
		cursor: pointer;
		z-index: 1;
		pointer-events: auto; /* Allow the button to be clickable */
		color: transparent; /* Hide the text, but the button still exists */
	}
	.right_portion .active-filter .remove-filter::before, .left_portion .selections .clear-all-btn:before {
	    content: "";
	    background-image: url(/images/close.svg);
	    position: absolute;
	    top: 5px;
	    left: 5px;
	    height: 12px;
	    width: 12px;
	    background-size: 8px;
	    background-position: center;
	    background-color: transparent;
	    background-repeat: no-repeat;
	    border: 2px solid black;
	    border-radius: 50%;
	    filter: invert(1);
	}
	.right_portion .active-filter:hover .remove-filter::before, .left_portion .selections .clear-all-btn:hover::before{
		filter: unset;
	}
.category-section {
    margin-bottom: 20px;
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}
.category-title {
    font-weight: bold;
    /* margin-bottom: 10px; */
    width: 100%;
    /* height: 10px; */
    font-family: 'HelveticaNeueW01-75Bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 0 10px;

}
.gen-surfacefinishes-module .category-title {
    font-family: 'HelveticaNeueW01-75Bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 10px 0px!important;
    border-top: 1px solid #ccc !important;
    width: calc(100% - 40px)!important;
    margin-left: 10px!important;
}
.gen-surfacefinishes-module .category-section:first-of-type .category-title {
	border-top: none!important;
}
	.planning_idea {
		display: none;
	}
	.planning_ideas {
		border-top: none;
	}
	.swatchHead .resultsFound {
		float: left;
		width: fit-content;
		margin-right: 0;
	}
	.swatchHead .resultsFound h4 {
		float: left;
		color: #333;
		text-transform: uppercase;
		margin-right: 0;
		font: 11px/11px 'HelveticaNeueW01-75Bold',Arial,Helvetica,sans-serif;
		letter-spacing: 1px;
	}
	h3#noResultsMsg {
		font: 16px/22px 'HelveticaNeueW01-65Medi',Arial,Helvetica,sans-serif;
		color: #dc3a0f;
		margin-top: -35px;
		margin-left: 5px;
	}
	.tf-planningIdeas .swatchHead {
		padding-bottom: 0;
	}
	.swatchHead .sort {
		float: right;
		width: auto;
		padding: 5px 0 0 0;
		/*display: none;
		*/
	}
	.swatchHead .sort label {
		float: left;
		width: auto;
		color: #333;
		font: 11px/22px 'HelveticaNeueW01-75Bold',Arial,Helvetica,sans-serif;
		letter-spacing: 1px;
		text-transform: uppercase;
	}
	.swatchHead .sort select {
		float: right;
		width: 116px;
		color: #777;
		font: 11px/20px 'HelveticaNeueW01-55Roma',Arial,Helvetica,sans-serif;
	}
	.tf-planningIdeas .swatchHead .sort .newListSelected {
		background: url(../images/drop-arrow.png) no-repeat 95% 50%;
		width: 200px;
		height: 22px;
		padding-top: 1px;
		margin: -5px 0 0 9px;
		border: none;
		border-bottom: 3px solid #333;
		padding: 6px 6px 7px;
		cursor: pointer;
	}
	.tf-planningIdeas .swatchHead .sort .SSContainerDivWrapper {
		width: 213px;
	}
	.stylish-select ul.newList a {
		color: #333;
		text-decoration: none;
		display: block;
		padding: 3px 8px;
		font: 13px/21px 'Helvetica65MediumRegular',Arial,Helvetica,sans-serif!important;
		width: auto;
		float: none;
		cursor: pointer;
	}
	.right_portion section#fvList {
	    width: calc(100% + 40px);
	    margin-left: -10px;
	    display: flex;
	    flex-wrap: wrap;
	    gap: 20px;
	}
	.planning_ideas .swatch {
	    float: none;
	    flex: calc(25% - 40px);
	    max-width: calc(25% - 40px);
	    height: auto;
	    padding: 10px;
	    margin: 0px!important;
	    position: relative;
	    transition: box-shadow 0.1s ease, transform 0.1s ease;
	}
	.planning_ideas .swatch:hover {
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.2);
	}
	.planning_ideas .swatch h5 {
		max-height: none!important;
		margin-bottom: 3px;
	}
	.swatch h5 a {
		color: #333;
	}
	.planning_ideas .swatch a img {
		aspect-ratio:1 / 1;
		width: 100%;
		height: 100%;
	}
	#fvList.planning_ideas .fvListItem.swatch span {
		float: left;
		width: auto;
		margin-bottom: 0px;
		color: #333;
		display: inline!important;
		font: 14px/18px 'HelveticaNeueW01-55Roma',Arial,Helvetica,sans-serif;
		padding-right:5px;
	}
	#fvList.planning_ideas .fvListItem.swatch a span  {
		float: left;
		width: 100%;
		margin-bottom: 3px;
		color: #333;
		font: 14px/18px 'HelveticaNeueW01-75Bold',Arial,Helvetica,sans-serif;
	}
	.right_portion .swatch .thumbs .orange_hover {
		display: none!important;
	}
	.planning_ideas .hidden_field {
		display: none;
	}
	/*.tf-planningIdeas .tf-tabs1.tf-tabs-new:before {
		content: "FILTERS";
		border-bottom: 1px solid #ccc;
		padding-bottom: 8px;
		color: #333;
		font: 11px/22px 'HelveticaNeueW01-75Bold',Arial,Helvetica,sans-serif;
		text-transform: uppercase;
		margin-bottom: 10px;
		display: block;
		letter-spacing: 1px;
	}
	*/
	.tf-tabs-list {
		display: none;
	}
	.left_portion {
		float: left;
		width: 300px!important;
		margin-top:91px;
	}
	.gen-surfacefinishes-module	.left_portion {
		margin-top:46px;
	}
	.wrapper .tf-planningIdeas .right_portion {
		padding: 0px 0 0 30px!important;
		width: calc(100% - 330px)!important;
		right:0;
		position: relative;
	}

	.wrapper .tf-planningIdeas .right_portion .swatchHead {
		border-bottom: 1px solid #ccc;
		padding-bottom: 10px;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: end;
		min-height: 36px;
	}
	.left_portion .selections {
		padding: 0 0 15px 0;
	}
	.left_portion .selections h3 {
		font: 15px/18px 'HelveticaNeueW01-75Bold',Arial,Helvetica,sans-serif;
		color: #333;
	}
	.left_portion .selections div.tf-revit {
		float: left;
		width: calc(100% - 32px);
		;
		background: #f5f5f5;
		border: 1px solid #e2e2e2;
		padding: 10px 15px 10px;
	}
	.left_portion .selections div.clearAll {
		position: relative;
		padding-bottom: 48px;
		border-bottom: 1px solid #dddddd;
	}
	.left_portion .selections div.clearAll {
		position: relative;
		padding-bottom: 0px;
		border-bottom: none;
		top: -97px;
	}
	/*.left_portion .selections .clear-all-btn {
		font: 11px/22px 'HelveticaNeueW01-65Medi',Arial,Helvetica,sans-serif;
		cursor: pointer;
		position: absolute;
		text-align: right;
		padding: 4px 0px;
		display: block;
		background: #fff;
		color: #dc3a0f;
		text-decoration: underline;
		top: 6px;
	}
	*/
	.left_portion .selections .clear-all-btn {
		position: absolute;
	    display: inline-block;
	    align-items: center;
	    padding: 7px 10px 7px 25px;
	    background-color: #333;
	    border-radius: 30px;
	    font-family: 'HelveticaNeueW01-65Medi', Arial, Helvetica, sans-serif;
	    font-size: 12px;
	    cursor: pointer;
	    color: #fff;
	    text-decoration: none;
	}
	.left_portion .selections a {
		float: left;
		font: 11px/20px 'HelveticaNeueW01-65Medi',Arial,Helvetica,sans-serif;
		color: #777;
	}
	.left_portion .tf-tabs-new {
		margin: 0;
		padding: 0;
		border: none;
	}
	.left_portion .tf-tabs-new .tf-tabs-list {
		margin-bottom: 0;
		padding-bottom: 0px;
		display: none;
	}
	.filterList ul {
		float: left;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.tf-wrap-fields, .popup-wrapper .first {
		font-size: 12px;
	}
	.tf-tabs-list {
		padding-top: 4px !important;
		font-family: 'HelveticaNeueW01-75Bold',Arial, Helvetica, sans-serif;
		text-transform: uppercase;
		color: #aaaaaa;
		/* font-weight: 600;
		*/
		letter-spacing: 0.05em;
		font-size: 12px;
		margin-bottom: 8px;
	}
	.left_portion .tf-tabs-new .tf-wrap-fields li {
		color: #333;
		font: 16px/18px 'HelveticaNeueW01-65Medi', Arial, Helvetica, sans-serif;
		margin-bottom: 10px;
		cursor: pointer;
		padding: 12px 16px;
		text-transform: capitalize !important;
		background: #f5f5f5;
		text-align: center;
		display: block;
		border-radius: 5px;
		width: calc(100% - 32px);
	}
	.left_portion .tf-tabs-new .tf-wrap-fields li:hover {
		background: #ccc;
	}
	.left_portion .tf-tabs-new .tf-wrap-fields li.active {
		font: 16px/18px 'HelveticaNeueW01-65Medi', Arial, Helvetica, sans-serif;
		color: #fff;
		background: #dc3a0f;
	}
	.left_portion .filter-sec-tab .filter-tab-menu {
		display: none;
		align-items: center;
		border-bottom: 1px solid #DDDDDD;
	}
	.left_portion .filter-sec-tab .filter-tab-content .filter-opt-tab.active, .filter-sec-tab .filter-tab-content .filter-search-tab.active {
		display: block;
	}
	.left_portion .filter-sec-tab .filter-tab-content .filter-opt-tab, .filter-sec-tab .filter-tab-content .filter-search-tab {
		display: none;
	}
	.left_portion .tf-tabs-content {
		padding: 0;
		margin: 0;
	}
	.left_portion .tf-tabs-content > div.active {
		display: inline;
		/* background-color: #f5f5f5;
		*/
	}
	.left_portion .tf-tabs-content > div {
		display: none;
	}
	.left_portion .tf-tabs-content div .column.tf_checkbox, .filter-section .tf-price_range {
		padding-bottom: 0;
		padding-top: 0;
		margin-bottom: 0;
	}
	.left_portion .tf-tabs-content div .column.tf_checkbox {
		/*border-top: 1px solid #dddddd;
		*/
		padding-top: 8px;
		padding-bottom: 4px;
		overflow-y: auto;
		max-height: 350px;
	}
	.left_portion .tf_checkbox {
		padding-top: 0;
		padding-bottom: 16px;
	}
	.left_portion .filter-sec-tab .filter-tab-menu #filter-opt-tab.active {
		background-image: url(../images/filter-active.png);
	}
	.left_portion .filter-sec-tab .filter-tab-menu #filter-opt-tab {
		background-image: url(../images/filter-inactive.png);
	}
	.left_portion .filter-sec-tab .filter-tab-menu #filter-search-tab.active {
		background-image: url(../images/search-active.png);
	}
	.left_portion .filter-sec-tab .filter-tab-menu #filter-search-tab {
		background-image: url(../images/search-inactive.png);
	}
	.left_portion .filter-sec-tab .filter-tab-menu a.active {
		color: #333;
	}
	.left_portion .filter-sec-tab .filter-tab-menu a {
		max-width: 50%;
		flex: 0 0 50%;
		position: relative;
		background-size: 18px;
		background-position-x: 0;
		background-position-y: center;
		background-repeat: no-repeat;
		padding-left: 30px;
		box-sizing: border-box;
		padding-top: 10px;
		padding-bottom: 10px;
		text-transform: uppercase;
		font-size: 10.5px;
		letter-spacing: 1px;
		font-family: 'HelveticaNeueW01-75Bold', Arial, Helvetica, sans-serif;
		color: #949494;
	}
	.filter-search-tab .filter-opt-area {
		position: relative;
		padding-bottom: 16px;
		padding-right: 10px;
		padding-top: 16px;
	}
	.filter-search-tab .filter-opt-area .search-area-box {
		border: 1px solid #DDDDDD;
		width: 100%;
		padding: 5px;
		line-height: 1.9;
		font-size: 0.75em;
		padding-right: 25px;
		box-sizing: border-box;
	}
	div.inputSearch input.finderSearchString {
		color: #777;
		font: 11px/18px 'HelveticaNeueW01-65Medi',Arial, Helvetica, sans-serif;
		border: solid;
		border-width: 1px;
		width: 80%;
		border-radius: 2px;
		padding-left: 4px;
		padding-bottom: 4px;
		margin-bottom: 10px;
	}
	div.inputSearch input.finder_sub {
		background: url(../images/mag.png) no-repeat scroll center rgba(0, 0, 0, 0);
		float: right;
		width: 26px;
		border: none;
		height: 28px;
		cursor: pointer;
		/* margin-top: 10px;
		*/
		/* padding-right: 5px;
		*/
		position: absolute;
		right: 12px;
		top: 18px;
		z-index: 10;
	}
	.resultsForm input[type=submit], input[type=button] {
		background: none repeat scroll 0 0 #999;
		border: 0 none;
		color: #ffffff;
		font-weight: 700;
		font-size: 9pt;
		text-transform: uppercase;
		width: 95%;
		height: 40px;
		cursor: pointer;
		font-family: Helvetica;
	}
	.shareResults {
		font: 9px/30px 'HelveticaNeueW01-75Bold',Arial,Helvetica,sans-serif !important;
		color: #fff !important;
		float: left !important;
		background-color: #333;
		width: 160px;
		letter-spacing: 0.05em;
		text-align: center;
		margin: 15px 5px 15px 0;
		display: none;
	}
	.revit {
		float: left;
		width: 130px;
		background: #f5f5f5;
		border: 1px solid #e2e2e2;
		padding: 10px 15px 19px;
		display: none;
	}
	.left_portion .filter-sec-tab {
		float: left;
		width: 100%;
		margin-top: 0;
	}
	.left_portion .tf-tabs-content div .column.tf_checkbox {
		padding-bottom: 0;
		padding-top: 0;
		margin-bottom: 0;
		min-height: 40px;
	}
	.left_portion .tf-tabs-content .tf_checkbox .tf-wrap-fields {
		font-size: 12px;
		padding-bottom: 60px;
		padding-left: 26px;
		overflow: hidden;
		position: relative;
	}
	.left_portion .tf-tabs-content .tf-title {
		padding-top: 15px;
		padding-bottom: 17px;
		padding-right: 10px;
		padding-left: 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: -45px;
		box-sizing: border-box;
		line-height: 20px;
		background: white;
		position: absolute;
		z-index: 999;
		width: 300px;
		border-top: 1px solid #ccc;
	}
	.left_portion .tf-tabs-content div.tf-title:after {
		right: 20px;
		/*top: 50%;
		transform: translateY(-50%);
		*/
		left: unset;
		background: url(https://www.knoll.surf/images/filter-arrow-down.svg) no-repeat 0 0;
		background-size: auto;
		height: 12px;
		width: 12px;
		transition: 0.3s ease-in-out;
		background-position: center right;
		background-repeat: no-repeat;
		appearance: none;
		padding-right: 0;
		background-color: transparent;
		content: '';
		cursor: pointer;
		transform: scaleY(-1);
	}
	.left_portion .tf-tabs-content div.tf-title.active:after {
		transform: scaleY(1);
	}
	.left_portion .tf-tabs-content div.tf-title p.caption {
		color: #333;
		font: 15px/18px 'HelveticaNeueW01-75Bold', Arial, Helvetica, sans-serif;
		cursor: pointer;
		float: left;
		position: absolute;
		left: 25px;
	}
	.left_portion .tf-tabs-content div.level2 {
		padding-top: 0;
		padding-bottom: 10px;
		padding-right: 0;
		padding-left: 0;
		display: block;
		justify-content: space-between;
		align-items: center;
		width: 170px;
		margin: 0;
		box-sizing: border-box;
		line-height: 20px;
	}
	.left_portion .tf-tabs-content div.level2 p {
		color: #333;
		font: 13px/15px 'HelveticaNeueW01-75Bold', Arial, Helvetica, sans-serif;
		line-height: 20px;
	}
	.planningIdeaDetail h1 span {
		all: unset!important;
	}
	.planningIdeaDetail h1 span b {
		color: #333;
		font: 24px/30px 'HelveticaNeueW01-75Bold', Arial, Helvetica, sans-serif;
	}
	.items_details .label {
		color: #333;
		font: 13px/15px 'HelveticaNeueW01-75Bold', Arial, Helvetica, sans-serif;
		padding-right: 10px;
		word-wrap: nowrap;
	}
	.items_details .values {
		color: #333;
		font: 13px/15px 'HelveticaNeueW01-55Roma', Arial, Helvetica, sans-serif;
	}
	.details .items_details.disclaimer .values p {
		color: #333;
		font: 13px/15px 'HelveticaNeueW01-55Roma', Arial, Helvetica, sans-serif!important;
		padding-top: 10px;
	}
	.items_details.disclaimer .values p a {
		text-decoration: underline;
	}
	.planningIdeasLibrary label {
		padding: 4px 0 0 6px;
		font: 11px/15px 'HelveticaNeueW01-55Roma', Arial, Helvetica, sans-serif;
		color: #464646;
		display: block;
		margin-bottom: 6px;
	}
	.left_portion .tf-tabs-content .tf-title .tf-reset {
		color: #dc3a0f;
		font-family: 'HelveticaNeueW01-65Medi', Arial, Helvetica, sans-serif;
		font-size: 11px;
		margin-right: 35px;
		padding: 11px 5px;
		user-select: none;
		cursor: pointer;
		margin-bottom: 0;
		text-decoration: underline;
		line-height: 1.6;
		height: 14px;
		position: absolute;
		top: 2px;
		right: -39px;
		background: white;
	}
	.left_portion .tf-tabs-content .tf-title span {
		margin: 0;
	}
	.disabledFilter {
		color: #D9D9D9 !important;
		cursor: no-drop !important;
	}
	.tf-checkbox input[type=checkbox]+label+label.disabledFilter {
		border: 1px solid #D9D9D9;
	}
	.tf-checkbox label.disabledFilter {
		color: #D9D9D9;
	}
	.tf-checkbox input[type=checkbox] {
		display: none;
	}
	.tf-checkbox input {
		outline: none;
	}
	.tf-checkbox input, .tf-checkbox span {
		margin: 0;
	}
	.tf-checkbox input[type=checkbox] + label {
		background: none repeat scroll 0 0 #555555;
		border-radius: 0;
		color: #333333;
		float: left;
		height: 9px;
		width: 9px;
		left: 3px;
		position: relative;
		top: 3px;
		display: none;
		/* !important;
		*/
		z-index: 2;
		vertical-align: baseline;
		cursor: pointer;
	}
	.tf-checkbox .color-checkboxes input[type=checkbox] + label {
		background: none repeat scroll 0 0 #555555;
		border-radius: 50%;
		color: #333333;
		float: left;
		height: 11px;
		width: 11px;
		left: 4px;
		position: relative;
		top: 2px;
		display: none;
		z-index: 2;
		vertical-align: baseline;
		cursor: pointer;
	}
	.tf-checkbox .color-checkboxes input[type=checkbox] + label::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 45%;
		width: 8px; /* Size of the checkmark */
		height: 8px;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="white" stroke="white" stroke-width="2" viewBox="0 0 24 24"><path d="M20.285 6.709a1 1 0 0 0-1.414 0L10 14.586 5.121 9.707a1 1 0 0 0-1.414 1.414l6 6a1 1 0 0 0 1.414 0l10-10a1 1 0 0 0 0-1.414z"/></svg>');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		transform: translate(-50%, -50%); /* Center the checkmark */
		z-index: 2;
	}

	.tf-checkbox input[type=checkbox] + label + label {
		border: 1px solid #777;
		border-radius: 0;
		color: #333333;
		display: block !important;
		float: left;
		height: 13px;
		position: absolute;
		width: 13px;
		background-color: #ffffff;
		z-index: 1;
		cursor: pointer;
		vertical-align: baseline;
		margin-bottom: 6px;
	}
	.tf-checkbox .color-checkboxes input[type=checkbox] + label + label {
		border:none!important;
	}
	.tf-checkbox input[type=checkbox] + label + label + label {
		display: block;
		position: relative;
		padding-left: 26px;
		margin-right: 10px;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		color: #333;
		font: 13px/18px 'HelveticaNeueW01-55Roma', Arial, Helvetica, sans-serif;
		margin-bottom: 10px !important;
		margin-left: 0;
	}
	.tf-checkbox .color-checkboxes input[type=checkbox]:checked + label + label + label {
		padding-left:15px;
	}
	.tf-checkbox label.caption {
		display: block;
		position: relative;
		padding-left: 26px;
		cursor: pointer;
		font-size: 22px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		color: #333;
		font: 15px/18px 'HelveticaNeueW01-55Roma', Arial, Helvetica, sans-serif;
		margin-bottom: 10px !important;
		margin-left: 0;
	}
	/* General styles for the checkbox container */
	.tf-wrap-fields {
		display: flex; /* Ensures overall layout is flex */
		flex-direction: column; /* Stack groups vertically */
	}

	/* Specific wrapper for color checkboxes */
	.tf-checkbox .color-checkboxes {
		display: flex;
		flex-wrap: wrap; /* Allows wrapping for only color checkboxes */
		align-items: baseline; /* Aligns items vertically in the center */
	}

	/* Style for color checkboxes */
	#cat10_HTM_co_DivToggle {
		display: flex;
		gap: 3px;
		flex-direction: row;
		flex-wrap: wrap;
		padding-bottom: 50px;
	}

	#cat10_HTM_co_DivToggle > div {
		display: flex;
		flex: 45%;
	}
	.tf-checkbox .color-checkboxes div {
		display: flex;
	}
	.tf-checkbox .color-checkboxes .circle-checkbox {
		border-radius: 50%; /* Ensure circles are perfectly round */
		width: 15px; /* Set width to 15px */
		height: 15px; /* Set height to 15px */
		display: inline-block; /* Allows for inline display */
		position: relative; /* Needed for positioning the checkbox tick */
		margin-right: 10px; /* Space between checkboxes */
		vertical-align: middle; /* Align with text */
		border: 2px solid rgba(200, 200, 200, 0.5);
		/* Light border for unchecked state */
	}

	.tf-checkbox .color-checkboxes label {
		font: 13px/18px 'HelveticaNeueW01-55Roma', Arial, Helvetica, sans-serif;
		color: 333; /* Default font color */
		display: flex;
		align-items: center; /* Align checkbox and label in the same line */
		gap: 10px; /* Space between the checkbox and label text */
	}

	.tf-checkbox .color-checkboxes input[type="checkbox"]:checked + .circle-checkbox {
		position: relative; /* Positioning for the overlay */
	}

	.tf-checkbox .color-checkboxes input[type="checkbox"]:checked + .circle-checkbox::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 12px; /* Size of the black circle */
		height: 12px;
		background-color: black; /* Black background for the circle */
		border-radius: 50%; /* Make it circular */
		transform: translate(-50%, -50%); /* Center the black circle */
		z-index: 1;
	}

	.tf-checkbox .color-checkboxes input[type="checkbox"]:checked + .circle-checkbox::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 10px; /* Size of the checkmark */
		height: 10px;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="white" stroke="white" stroke-width="2" viewBox="0 0 24 24"><path d="M20.285 6.709a1 1 0 0 0-1.414 0L10 14.586 5.121 9.707a1 1 0 0 0-1.414 1.414l6 6a1 1 0 0 0 1.414 0l10-10a1 1 0 0 0 0-1.414z"/></svg>');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		transform: translate(-50%, -50%); /* Center the checkmark */
		z-index: 2;
	}


	/* Style for the unchecked state of color checkboxes */
	.tf-checkbox .color-checkboxes input[type="checkbox"]+.circle-checkbox {
		background-color: rgba(255, 255, 255, 0.8); /* Light background */
	}

	/* Styles for multi-color image checkboxes */
	.tf-checkbox .color-checkboxes img.multicolor-image {
		width: 15px; /* Set width to 15px */
		height: 15px; /* Set height to 15px */
		display: inline-block; /* Allows for inline display */
		vertical-align: middle; /* Aligns with text */
	}

	/* Ensure that the multi-color checkbox is styled appropriately */
	.tf-checkbox .color-checkboxes input[type="checkbox"]:checked+img.multicolor-image {
		border: 2px solid #4CAF50;
		/* Example border color for multi-color image checkbox */
	}

	/* Hover effect for checkboxes */
	.tf-checkbox .color-checkboxes .circle-checkbox:hover {
		cursor: pointer; /* Change cursor on hover */
		opacity: 0.9; /* Slightly darken on hover */
	}

	.tf-checkbox .color-checkboxes input[type="checkbox"]:disabled+.circle-checkbox+label
	{
		color: #D9D9D9 !important; /* Greyed out when disabled */
	}

	.tf-checkbox .color-checkboxes .disabledFilter {
		color: #D9D9D9 !important; /* Greyed out when disabled */
		cursor: no-drop !important;
	}

	/* Disabled state for color checkboxes */
	.tf-checkbox .color-checkboxes input[type="checkbox"].disabledFilter+.circle-checkbox
	{
		background-color: #F0F0F0; /* Lighter background for disabled state */
		border: 2px solid #D9D9D9; /* Light border for disabled state */
		cursor: no-drop; /* No-drop cursor to indicate disabled state */
	}

	/* Disabled state for multi-color image checkboxes */
	.tf-checkbox .color-checkboxes input[type="checkbox"].disabledFilter+.circle-checkbox img.multicolor-image
	{
		opacity: 0.5; /* Reduced opacity for disabled multi-color image */
		cursor: no-drop; /* No-drop cursor for disabled multi-color */
	}

	/* Apply the disabled styling to the label */
	.tf-checkbox .color-checkboxes label.disabledFilter {
		color: #D9D9D9; !important; /* Greyed out font for disabled labels */
		cursor: no-drop; /* No-drop cursor to indicate disabled state */
	}
	.top {
		position: absolute;
		bottom:75px;
		right:40px;
		width: 24px;
		height: 28px;
		background: url(/images/back_to_top.png) no-repeat 0 0;
		z-index: 1000;
	}
	.tf-checkbox span.tip_info {
		position: relative;
		font-size: 0;
		cursor: pointer;
		display: inline-block;
		font-style: italic;
		font-family: serif;
		font-weight: bold;
		margin-left: 3px;
		text-align: center;
		width: 10px;
	}
	.tf-checkbox span.tip_info::after {
		content: "";
		height: 10px;
		width: 10px;
		padding: 0;
		background-size: 10px;
		background-image: url(https://www.knoll.surf/Typicals/resources/images/info.png);
		background-repeat: no-repeat;
		background-position: center;
		background-color: transparent;
		border: none;
		outline: none !important;
		box-shadow: none;
		position: absolute;
		margin: 0;
		inset: -1px 0px 0px 9px;
	}
	/* Typicals details page */
	.details ul.attr_details {
		float: left;
		width: 100%;
	}
	.details ul.attr_details li {
		width: 33% !important;
		padding-left: 2px !important;
	}
	.details ul.attr_details li.center {
		display: inline-block;
	}
	.details ul.attr_details li.right {
		display: inline-block;
	}
	.zoom_button_overlay {
		/*position: absolute;
		bottom: 4px;
		left: 0;
		*/
		background: #fff;
		padding: 1px;
		z-index: 999;
	}
	#advproduct_search span.searchBox {
	    margin-bottom: 25px;
	    display: flex;
	    justify-content: flex-end;
	}
	#advproduct_search div#searchFinderContainer {
		height: 41px;
		overflow: hidden;
		display: flex;
		width: 50%;
		min-width: 350px;
		justify-content: flex-end;
	}
	#advproduct_search .searchBox .search{
		float: right;
		width: auto;
		padding: 0;
		position:relative;
	}
	#advproduct_search .searchBox .text01 {
		float: left;
		width: 70%;
		height: auto!important;
		font: 13px/22px 'HelveticaNeueW01-55Roma',Arial, Helvetica, sans-serif!important;
		color: #333;
		padding: 0px 10px!important;
		border: 1px solid #ccc;
	}
	.searchBox .search_btn{
		float: left;
		width: auto;
		height: 100%!important;
		letter-spacing: 1px;
		cursor: pointer;
		color: #fff;
		font: 12px/18px 'HelveticaNeueW01-75Bold',Arial, Helvetica, sans-serif;
		background: #dc3a0F;
		padding: 0 14px;
		width: 30%;
	}
	#ui-id-1 {
		display: block;
		z-index: 99999!important;
		width: 346px!important;
		border: 1px solid #ccc!important;
		border-top: none!important;
		margin-left: -5px;
		padding: 0!important;
	}
	.ui-corner-all {
		border-radius: 0!important;
	}
	.ui-menu .ui-menu-item a {
		font: 13px/22px 'HelveticaNeueW01-55Roma',Arial, Helvetica, sans-serif!important;
		color: #333!important;
		padding: 2px 10px!important;
	}
	/* Pre-load image animation */
	.planning_ideas .swatch .content-animate .row1,.planning_ideas .swatch .thumbs {
		position: relative;
		width: 100%;
		aspect-ratio: 1;
		background-color: #fafafa;
		z-index: 44;
		top: 0;
		bottom: 0;
		overflow: hidden;
		border-radius: 0;
		margin-bottom: 5px;
	}
	.planning_ideas .swatch .content-animate .row1 {
		width: 75%;
	}
	.planning_ideas .swatch .content-animate .row1::after,.planning_ideas .swatch .thumbs::after {
		content: "";
		position: absolute;
		left: -45%;
		width: 45%;
		display: block;
		top: 0;
		bottom: 0;
		background-image: linear-gradient(to left, rgba(251, 251, 251, .05), rgba(251, 251, 251, .3), rgba(251, 251, 251, .6), rgba(251, 251, 251, .3), rgba(251, 251, 251, .05));
		background-image: -moz-linear-gradient(to left, rgba(251, 251, 251, .05), rgba(251, 251, 251, .3), rgba(251, 251, 251, .6), rgba(251, 251, 251, .3), rgba(251, 251, 251, .05));
		background-image: -webkit-linear-gradient(to left, rgba(251, 251, 251, .05), rgba(251, 251, 251, .3), rgba(251, 251, 251, .6), rgba(251, 251, 251, .3), rgba(251, 251, 251, .05));
		animation: loading 1.4s infinite;
		z-index: 45;
	}
	.planning_ideas .swatch .content-animate {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.planning_ideas .swatch .content-animate .row1 {
		height: 30px;
	}
	/*.planning_ideas .swatch h5,.planning_ideas .swatch>span,*/
	.planning_ideas .swatch.show .content-animate,.planning_ideas .swatch.show .thumbs::after {
		display: none !important;
	}
	/*PlanningIdeas Deatil View*/
	.planningIdeaDetail.pad {
		margin: 0px 0 200px 0;
		display: flex;
		flex-flow: wrap;
		align-items: flex-start;

	}
	.planningIdeaDetail .right_container.new {
		width: calc(50% - 80px);
		margin-left: 40px;
		float: right;
	}
	.planningIdeaDetail nav {
		width: 100%;
		border-bottom: 1px solid #ccc;
	}
	.planningIdeaDetail nav ul {
		display: flex;
		flex-direction: row-reverse;
	}
	.planningIdeaDetail nav ul li {
		flex: 0 0 50%;
		margin-right: 0!important;
	}
	.planningIdeaDetail .right_container.new {
		background: #fff;
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}
	.planningIdeaDetail .right_container.new h2 {
		order: 1;
	}
	.planningIdeaDetail .right_container.new .details {
		order: 2;
		padding-top: 20px;
	}
	.details ul.items_details {
		float: left;
		width: 100%;
		padding: 0;
	}
	.planningIdeaDetail .right_container.new #accordion10 {
		order: 3;
	}
	.planningIdeaDetail .right_container.new .downloadAll {
		order: 4;
	}
	.planningIdeaDetail .left_container {
		width: 50%;
		float: left;
		clear: both;
		flex-shrink: 0;
		position: sticky;
		top: 50px;
	}
	.planningIdeaDetail .left_container .image_carousel .pannel {
		float: left;
		width: 100%;
		position: relative;
		display: flex;
		margin-top: 20px;
	}
	.planningIdeaDetail .left_container .image_carousel .pannel .img {
		margin: 0 auto;
	}
	.planningIdeaDetail .left_container .image_carousel .pannel img {
	    width: 100%!important;
	    height: 100%!important;
	}
	.planningIdeaDetail .print_recept {
		font: 9px/30px'HelveticaNeueW01-65Medi',Arial,Helvetica,sans-serif;
		color: #333;
		float: left;
		background-color: #fff!important;
		width: auto!important;
		letter-spacing: 1px;
		text-align: center;
		margin: 0;
		border-radius: 30px;
		padding: 3px 0;
		letter-spacing: .4px;
		text-transform: capitalize;
	}
	.planningIdeaDetail .print_recept:hover {
		background-color: #555;
	}
	#searchForm > section.wrapper > section > nav > ul > li:nth-child(1) a {
		float: right;
	}
	#searchForm > section.wrapper > section > nav > ul > li:nth-child(2) a {
		float: left;
	}
	#searchForm > section.wrapper > section > nav > ul > li:nth-child(2) a:before, #searchForm > section.wrapper > section > nav > ul > li:nth-child(1) a:after {
		content: "";
		display: inline;
		background: url(/images/down-blk.png) no-repeat 0 0;
		width: 25px;
		height: 25px;
		background-size: 25px;
		float: left;
		margin: 2px 10px;
		transform: scaleY(-1);
		transform: rotate(90deg);
	}
	#searchForm > section.wrapper > section > nav > ul > li:nth-child(1) a:after {
		float: right;
		transform: rotate(270deg);
	}
	.planningIdeaDetail .right_container .details h6 {
		font: 13px/15px 'HelveticaNeueW01-55Roma', Arial, Helvetica, sans-serif;
		color: #333;
		width: calc(40% - 20px);
		margin-right: 20px;
	}
	.planningIdeaDetail .right_container .details ul li {
		width: 100%;
		padding-left: 5px;
	}
	.planningIdeaDetail .right_container .details ul.items_details>li {
		border-top: 1px solid #ccc;
		padding-left: 0;
		padding: 10px 0 10px;
		display: flex;
		margin: 0;
	}
	.planningIdeaDetail .right_container .details ul.items_details li:last-child {
		display: block;
	}
	.planningIdeaDetail .right_container .details ul.items_details li ul {
		float: right;
		width: 60%;
	}
	.planningIdeaDetail .right_container .details ul.items_details li ul li {
		font: 13px/15px'HelveticaNeueW01-65Medi',Arial,Helvetica,sans-serif!important;
		color: #333;
		padding: 0 0 5px 0 ;
	}
	.planningIdeaDetail .right_container .details ul li span {
		display: inline-block;
	}
	.planningIdeaDetail .right_container .details ul li span br {
		display: none;
	}
	.planningIdeaDetail .right_container .details em {
		width: 75%!important;
		padding: 20px 0 10px;
		float: none;
		display: inline-block;
	}
	.planningIdeaDetail .right_container .details em, .planningIdeaDetail .right_container .details ul li span {
		font: 13px/15px'HelveticaNeueW01-65Medi',Arial,Helvetica,sans-serif!important;
		color: #333;
		padding-bottom: 5px;
	}
	.planningIdeaDetail .downloadAll {
		float: left;
		margin: 0 0 30px 0;
		display: block;
		width: 100%;
	}
	.planningIdeaDetail .downloadAll a {
		width: 100%;
		border-radius: 30px;
	}
	.planningIdeaDetail .downloadAll em {
		display: none;
	}
	#accordion10 {
		border: none!important;
		width: 100%;
	}
	#accordion10 .accordion_size.new {
		width: calc(100%);
		padding: 0px;
		margin-bottom: 20px;
	}
	.accordion .accordion_size.new.active {
		background: #fff;
	}
	#accordion10 .accordion_size.new .list05 {
		padding: 10px 0;
		width: calc(100% + 10px);
	}
	#accordion10 .accordion_size.new .list05 li {
		padding: 10px 10px 0px 0;
		background: none;
		width: calc(33.333% - 10px);
		min-width: 100px;
	}
	#accordion10 .accordion_size.new .list05 li span {
		width: 100%!important;
	}
	#accordion10 .accordion_size.new .list05 li a:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		border-width: 0 12px 12px 0;
		border-style: solid;
		border-color: #fff #fff #e0e0e0 #e0e0e0;
		background: #e0e0e0;
		display: block;
		width: 0;
		-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
		-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
		box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
		transition: .1s linear;
	}
	#accordion10 .accordion_size.new .list05 li a {
		color: #333;
		text-decoration: underline;
		text-transform: uppercase;
		/* border: 1px solid #ccc;
		*/
		text-decoration: none;
		text-transform: capitalize;
		padding: 8px 12px;
		display: block;
		position: relative;
		overflow: hidden;
		background: #f5f5f5;
	}
	#accordion10 .accordion_size.new .list05 li a:hover {
		background: #fafafa;
	}
	.planningIdeaDetail .downloadAll a {
		width: 100%;
		border-radius: 0;
		background-color: #dc3a0f;
		font: 13px/40px 'HelveticaNeueW01-65Medi',Arial,Helvetica,sans-serif;
		position: relative;
		overflow: hidden;
		text-transform: capitalize;
	}
	.planningIdeaDetail .downloadAll a:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		border-width: 0 12px 12px 0;
		border-style: solid;
		border-color: #fff #fff #b5300d #b5300d;
		background: #b5300d;
		display: block;
		width: 0;
		-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
		-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
		box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
	}
	.planningIdeaDetail .downloadAll a:hover {
		background-color: #dc3a0f;
	}
	.accordion .accordion_size.new h3 {
		background-position-x: 96%;
		width: calc(100%);
		font: 13px/15px'HelveticaNeueW01-65Medi',Arial,Helvetica,sans-serif!important;
		color: #333;
		text-transform: capitalize;
		padding-top: 10px;
	}
	.spec-icons {
		display: flex;
		gap: 10px;
	}
	.spec-icon-container {
		display: inline-block;
		width: 18px
	}
	.spec-icon-container:last-child {
		padding-right: 0
	}
	.spec-icon-container .spec-icon-description {
		color: #fff;
		max-width: 240px;
		display: block
	}
	.spec-icon-container .popper-trigger+.tooltip[x-placement^=top] {
		margin-bottom: 16px;
		opacity: 1;
		transition: opacity .25s
	}
	.spec-icon-container .popper-trigger+.tooltip[x-placement^=top][aria-hidden=true] {
		opacity: 0
	}
	.spec-icon-container .popper-trigger+.tooltip[x-placement^=top] .tooltip-arrow {
		border-top-color: #1f2532;
		bottom: -7px
	}
	spec-icon-container .popper-trigger+.tooltip[x-placement^=top] .tooltip-inner {
		font-weight: 500;
		letter-spacing: normal;
		font-size: 12px;
		font-size: .75rem;
		line-height: 18px;
		line-height: 1.125rem;
		background: #1f2532;
		padding: 4px 16px
	}
	.family {
		font-style: italic;
	}
	.feature {
		margin-left: 20px;
	}
	table {
		width: calc(100% - 20px);
		border-collapse: collapse;
		margin-bottom: 20px;
		margin-left: 20px;
		border-top: 0;
	}
	th, td {
		border: none;
		padding: 8px 20px 8px 10px;
		text-align: left;
		font: 12px/15px 'HelveticaNeueW01-55Roma', Arial, Helvetica, sans-serif;
		color: #333;
	}
	th {
		font: 12px/15px 'HelveticaNeueW01-75Bold', Arial, Helvetica, sans-serif;
		background: #f8f8f8;
	}
	.hidden {
		display: none;
	}
	table.hidden, table.hidden th, table.hidden td, table.hidden tr {
		height: 0px;
		overflow: hidden;
	}
	.type-header {
		text-align: left;
		cursor: pointer;
		position: relative;
		padding: 10px 20px 10px 0;
		font: 13px/15px 'HelveticaNeueW01-75Bold', Arial, Helvetica, sans-serif;
		color: #333;
		background: none;
		margin-top: 10px;
		margin-left: 20px;
		border-bottom: 2px solid #333;
	}
	.type-header.collapsed {
		font: 13px/15px 'HelveticaNeueW01-55Roma', Arial, Helvetica, sans-serif;
		border-bottom: 1px solid #ccc;
	}
	.subcategory+.feature,.subcategory {
		border-top: 1px solid #ccc;
	}
	td.subcategory {
		width: 40%;
	}
	.type-header::after, .type-header.collapsed::after {
		content: "";
		display: block;
		background: url(https://www.knoll.surf/images/filter-arrow-down.svg) no-repeat 0 0;
		background-size: auto;
		width: 12px;
		position: absolute;
		right: 8px;
		height: 12px;
		top: 11px;
		transition: 0.3s ease-in-out;
		transform: none;
	}
	.type-header::after, .type-header::after {
		transform: scaleY(-1);
	}
	@media only screen and (max-width: 1280px) {
		/*.body_container .allbody-wrapper .wrapper {
			padding: 0 20px;
			width: 100%;
		}*/
		.wrapper .tf-planningIdeas .right_portion {
			width: calc(100% - 300px)!important;
		}
		.searchBox .text01 {
			height: calc(100% - 0px)!important;
		}
		.planning_ideas .swatch {
	    flex: calc(25% - 20px);
	    max-width: calc(25% - 20px);
	}
	}
	@media only screen and (max-width: 1199px) {
		.planningIdeaDetail .right_container.new {
			width: 50%;
			margin-left: 0px;
			float: right;
		}
	}
	@media only screen and (max-width: 1100px) {
		.accordion .accordion_size {
			border: none!important;
		}
	}
	@media only screen and (max-width: 992px) {
		.selections {
			display: block!important;
		}

		#searchForm #outer_advproduct_search .left h2.section_head {
			font: 24px/28px"HelveticaNeueW01-75Bold",Arial,Helvetica,sans-serif!important;
		}
		.right_portion section#fvList {
	    width: calc(100% + 20px);
	    margin-left: 0px;
	}
		.planning_ideas .swatch {
			float: left;
			flex: calc(50% - 20px);
			max-width: calc(50% - 20px);
			height: auto;
			padding: 0;
			position: relative;
		}
	}
	@media only screen and (max-width: 767px) {
		section#outer_advproduct_search {
			padding-bottom: 30px;
			margin-bottom: 0px;
		}
		#advproduct_search {
	    flex-direction: column;
	    align-items: flex-start;
	}
	#advproduct_search div#searchFinderContainer {
	  
	    width: 100%;
	    min-width: 350px;
	    justify-content: flex-start;
	}
		div#searchFinderContainer {
			width: 100%;
		}
		.tf-planningIdeas .left_portion {
			width: 100%;
		}
		.planning_ideas .left_portion .selections div.tf-revit, .left_portion .tf-tabs-new .tf-wrap-fields li {
			width: calc(100vw - 40px);
		}
		.wrapper .tf-planningIdeas .right_portion {
			padding: 2px 0;
			width: 100%;
		}
		.swatchHead .resultsFound,.swatchHead .sort {
			float: left;
			width: 100%!important;
			margin-right: 0;
		}
		.swatchHead .resultsFound h4 {
			padding: 8px 0 8px 0px;
		}
		.planningIdeaDetail .right_container.new {
			width: 100%;
			padding: 0;
		}
		.planning_ideas .swatch {
			flex: calc(25% - 20px);
			max-width: calc(25% - 20px);
			height: auto;
			position: relative;
		}
		.body_container {
			padding-top: 84px!important;
		}
		.wrapper .tf-planningIdeas .right_portion {
			width: 100% !important;
			padding-left: 0 !important;
		}
	.right_portion section#fvList {
	    width: calc(100% + 20px);
	    margin-left: 0;
	}
		.wrapper .tf-planningIdeas .right_portion .swatchHead {
		    border-bottom: 1px solid #ccc;
		    padding-bottom: 0px;
		    display: flex;
		    flex-direction: column-reverse;
		    align-items: flex-start;
		}
		.right_portion .active-filters-container {
		    padding: 12px 0;
		}
		.tf-planningIdeas .filter-section {
			position: fixed;
			left: -100vw;
			right: -100vw;
			padding: 0 20px 30px 20px;
			padding-bottom: 85px;
			height: 100vh;
			top: 0;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			background: white;
			max-width: 100%;
			z-index: 9999;
			overflow-y: auto;
			transition: 0.3s ease-in-out;
		}
		.left_portion .filter-sec-tab {
			float: left;
			width: 80%;
			margin-top: 0;
		}
		.tf-planningIdeas .filter-section.show {
			left: 0;
			right: 0;
			min-width: 100%;
			width: 100%;
			z-index: 9999999999;
			margin-top: 0;
			padding-top: 96px;
		}

		.show-filter-section {
			max-width: 100%;
			flex: 0 0 100%;
			display: flex;
			justify-content: flex-start;
			margin-bottom: 10px;
			margin-top:-50px;

		}
		.show-filter-section #showFilter:before {
			content: "";
			display: inline-block;
			background: url(https://www.knoll.surf/images/filter-black.png)no-repeat 0 0;
			width: 20px;
			height: 20px;
			background-size: 20px;
			margin-bottom: -5px;
			padding-left: 4px;
			color: #333;
			z-index: 999999999;
			font-size: 13px;
			line-height: 21px;
		}
		.show-filter-section #showFilter {
			white-space: nowrap;
			background: none;
			border: none;
			padding: 10px 0px;
			border-radius: 0px;
			color: #333;
			font: 12px/15px"HelveticaNeueW01-75Bold",Arial,Helvetica,sans-serif!important;
			letter-spacing: 1px;

		}
		.filter-sec-close-icon-btn {
			display: none;
			background-image: url(/images/close.svg);
			height: 40px;
			width: 40px;
			background-size: 15px;
			background-position: center;
			position: fixed;
			background-color: transparent;
			border: none;
			background-repeat: no-repeat;
			right: 10px;
			top: 10px;
			z-index: 999;
		}
		.filter-section.show .filter-sec-close-icon-btn {
			display: block;
		}

		.filter-section.show .footer-btn-apply {
			display: block;
		}

		.tf-planningIdeas .filter-section.show .footer-btn-apply {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 24px 20px;
			background: white;
			z-index: 999;
			box-shadow: 0 0 4px rgb(0 0 0 / 15%);
		}

		.tf-planningIdeas .filter-section .footer-btn-apply button {
			border: none;
			padding: 10px 40px;
			margin: auto;
			display: block;
			background: #f05024;
			color: white;
			border-radius: 30px;
		}
		.planningIdeaDetail .left_container {
			width: 100%;
			float: left;
			clear: both;
			flex-shrink: 0;
			position: sticky;
			top: 50px;
		}
		
	}
	@media only screen and (max-width: 575px) {

		.planning_ideas .swatch {
		    float: left;
		    flex: calc(50% - 20px);
		    max-width: calc(50% - 20px);
		    height: auto;
		    padding: 0;
		    position: relative;
	}
	}

	@media ( min-width : 768px) {
		.filter-section .footer-btn-apply {
			display: none;
		}

		.filter-sec-close-icon-btn,
		.show-filter-section {
			display: none;
		}
	}