div.left-nav, div#smart_search {
  display:flex;
  flex-direction: column;
  position: absolute;
  z-index: 2;
  width: 100%;
  left: 0;
  background-color: white;
  margin: unset;
  font-family: Open Sans,Trebuchet MS,sans-serif ;
}
div#div__body>table {
  display: block;
  padding-top: 40px;
  width: auto;
  max-width: 800px;
}
.disabled_spec{
  display: none !important;
}
.hide_from_web_search_Yes, .hide_from_web_search_T {
  display: none!important;
}
td.grid_cell, div.grid_cell {
  display: block;
  width: 175px;
  border: solid 1px #9f9f9f;
  float: left;
  text-align: center;
  padding: 0;
  margin: 0px 5px 10px 0px;
  height: 310px;
}
.grid_cell .overlay {
  position: absolute;
  top: 0;
  left: 0;
}
.grid_cell .thumb {
  display: block;
  min-height: 175px;
  position: relative;
}
.grid_cell a.itemLink {
    color: #353334;
    font-size: 14px;
}
.grid_cell a.itemLink.title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #353334;
  margin: 14px 0 4px 0;
  min-height: 36px;
}
.itemLink.thumb img {
  max-width: 175px;
}
.grid_cell .price {
  background: #e7e5df;
  padding: 5px 0px;
  display: block;
}
#grid-header {
    display: grid;
    grid-template-areas: "title title""pages pages""view sort";
    grid-row-gap: 5px;
    max-width: 800px;
    margin: auto;
}
#gridnav_top {
  grid-area: pages;
}
.grid-title {
  grid-area: title;
  text-align: left;
}
#skinnedSortBy{
  margin-right: unset !important;
  float: unset !important;
  grid-area: sort;
  justify-self: center;
  margin-top: 10px !important;
}
.pageNumLinks{
  grid-area: pages;
  justify-self: center;
  text-align: left;
}
.gridnav {
  clear: both;
  margin: 10px 0px 10px 0px;
  display: inline-grid;
  grid-template-columns: auto;
  grid-row-gap: 10px;
  width: 100%;
  grid-row: 2;
  grid-column: 1/end;

}
.gridnav .pageNumLinks {
  grid-area: unset;
  grid-column: 1 / end;
  justify-self: center;
}
.pageNumLinks div,
.pageNumLinks b {
  border: 1px solid #9f9f9f;
  display: inline-block;
  margin-right: 3px;
  min-height: 10px;
  min-width: 20px;
  padding: 3px;
}
.pageNumLinks b {
  background-color: gray;
  color: white;
}
.pageNumLinks div:hover {
  background-color: #cccccc;
  color: white;
  cursor: pointer;
}
.resultsPerPage, .sortby{
  justify-self: center;
}
.sortby {
  grid-column: 2/end;
}
.resultsPerPage {
  grid-column: 1/2;
  grid-row: 2;
}
.pageNumLinks div.inactive,
.pageNumLinks div.inactive:hover {
  color: gray;
  cursor: default;
  background: none;
}

/*Customer gallery */
#customer_gallery {
  top: 200px;
  left: 75px;
  width: 890px;
  height: 650px;
  background-color: #858585;
  position: absolute;
  z-index: 9999;
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid #797253;
}
.customer_gallery_container {
  position: relative;
}
.customer_gallery_close {
  padding-left: 864px;
}
.customer_gallery_close p {
  cursor: pointer;
  color: white;
  font-size: 16px;
  padding: 0;
  margin: 0;
  font-weight: 800;
  width: 15px;
  padding-bottom: 5px;
}
.customer_gallery_display {
  position: absolute;
  top: 33px;
  left: 6px;
  padding: 0px;
  margin: 0px;
  width: 600px;
}
.customer_gallery_nav {
  position: absolute;
  top: 33px;
  left: 612px;
  width: 250px;
  height: 580px;
  border: 2px inset #ccc;
  overflow: hidden;
  overflow-y: auto;
  padding: 2px 4px 2px 6px;
  margin: 0px;
}
.customer_gallery_nav div.thumb {
  width: 115px;
  float: left;
  position: relative;
}
.customer_gallery_nav div.thumb div.number {
  width: 20px;
  height: 20px;
  top: 86px;
  right: 10px;
  position: absolute;
  background-color: #fff;
}
.customer_gallery_nav h3 {
  font-size: 10px;
  padding: 0px;
  margin: 0px 0px 6px 0px;
}
.customer_gallery_nav img {
  cursor: pointer;
  padding: 3px 3px 3px 3px;
  border: 1px solid #000;
  margin: 0px 0px 2px 0px;
  background-color: #ffffff;
}
.customer_gallery_overlay {
  position: relative;
  padding: 0px;
  margin: 0px;
  top: -600px;
  left: 0px;
}
#card_gridview {
  display: inline-block;
  margin-top: 40px;
  width: 100%; /* safari */
  max-width: 800px; /* safari */
}
#card_gridview > td {
  width: 100%; /* safari */
  display: inline-block; /* safari */
}
#card_gridview tr {
  display: inline; /*ie*/
}
#card_gridview tbody {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 800px; /*ie*/
  justify-content: space-around;
}
.portletHandle tbody {
  text-align: center;
  }
  /* smart search styles */
.description tbody {
  text-align: left;
}
 ul.display {
  display : none;
}
#smart_search h3,#smart_search h4 {
  font-size: 16px;
}
.spec_group h4 {
  color: #333;
  background-color: white;
}
.spec_group:hover h4 {
  color: #EC6B0F;
}
.spec_group ul {
  font-size: 14px;
}
#smart_search_header_dynamic {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  background-color: white;
  cursor: pointer;
  padding: 10px 20px;
  border-bottom:  1px solid #ccc9c1;
}
#smart_search_header_dynamic h3 {
  color: #333;
  padding: unset !important;
}
#hide_filter {
  color: white;
  background-color: #858585;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
}
#hide_filter h3 {
  background-color: unset;
  color: white;
}
.filter{
  width: 20px;
  height: 20px;
  margin-left: 10px;
  transform: rotate(90deg);
}
.exit {
  width: 15px;
  height: 15px;
  position: absolute;
  right: 20px;
  transition: transform .5s;
}
.exit.footer {
  position: relative;
  right: unset;
}
.rotate {
  transition: transform .5s;
  transform: rotate(45deg);
}
.arrowContainer {
  width: 15px;
  height: 15px;
  transition: transform .4s;
}
.arrowContainer.open {
  transition: transform .4s;
  transform: rotate(-180deg);
}
.titleContainer.spec_group {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  animation: fade .3s ease-in;
  position: relative;
  min-width: 185px;
}
.mobile_child {
  display: block;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  animation: fade .3s ease-in;
  position: relative;
  min-width: 185px;
}
@keyframes fade {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }
  50% {
    opacity: .5;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.mobile_child .spec_group {
  width: 100% !important;
}
.titleContainer {
 display: flex;
 width: auto;
 justify-content: space-between;
 align-items: center;
 border-bottom: 1px solid #ccc9c1;
 padding: 0px 20px;
}
.mobile_child.hidden, .titleContainer.hidden, #hide_filter.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10%);
  animation: fadeout .3s ease-out;
  height: 0;
}
@keyframes fadeout {
  0% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    height: 100%;
  }
   50% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    height: 50%;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10%);
    height: 0;
  }
}

#revert_smart_search, #view_all_results{
  cursor: pointer;
  padding: 10px 20px;
  font-size: 14px;
}
/* labels within the smart search */
.filterSelection{
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}
.filterSelection span {
  margin-left: 5px;
}
/* Hide the browser's default checkbox */
.filterSelection input {
  opacity: 0;
  cursor: pointer;
  margin-left: 15px;
}
/* Create a custom checkbox */
.checkMark {
  margin: unset;
  position: absolute;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: white;
  border: solid 2px #707070;
  display:flex;
  align-items:flex-start;
}
/* On mouse-over, add a grey background color */
.smartOptions li:hover input ~ .checkMark {
  background-color: #EC6B0F;
  border: solid 2px #EC6B0F;
}
.smartOptions li:hover {
  color: #EC6B0F;
}
/* When the checkbox is checked, add a blue background */
input:checked ~ .checkMark {
  background-color: #EC6B0F;
  border:2px solid #EC6B0F;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkMark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.filterSelection input:checked ~ .checkMark:after {
  display: block;
}
.filterSelection input:checked ~ .filterTitle, .filterSelection input:checked ~ span {
  color: #EC6B0F;
}
/* Style the checkmark/indicator */
.checkMark:after {
  position: relative;
  margin: 0 auto;
  width: 3px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* Hide the browser's default radio */
#revert_smart_search input, #view_all_results input {
  opacity: 0;
  cursor: pointer;
  margin-left: 15px;
}
#revert_smart_search label, #view_all_results label{
  position: relative;
  cursor: pointer;
}
/* Create a custom checkbox */
.radioReplacement {
  margin: unset;
  position: absolute;
  left: 0;
  top: 0;
  height: 15px;
  width: 15px;
  background-color: white;
  border: solid 2px #707070;
  border-radius: 10px;
  display:flex;
  align-items:flex-start;
}

/* On mouse-over, add a grey background color */
#revert_smart_search li:hover input ~ .radioReplacement,  #view_all_results li:hover input ~ .radioReplacement {
  background-color: #EC6B0F;
}
/* When the checkbox is checked, add a blue background */
input:checked ~ .radioReplacement {
  background-color: #EC6B0F;
}
input:hover ~ .radioReplacement {
  background-color: #EC6B0F;
}
label:hover {
  color: #EC6B0F;
}
/* Create the checkmark/indicator (hidden when not checked) */
.radioReplacement:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.mobile_child input:checked ~ .radioReplacement:after {
  display: block;
}
/* Style the checkmark/indicator */
.radioReplacement:after {
  position: relative;
  margin: 0 auto;
  width: 14px;
  height: 11px;
  border-radius: 10px;
  border: 2px solid white;
}
.smartOptions.display li {
  opacity: 0;
  visibility: hidden;
}
.smartOptions li {
  opacity: 1;
  visibility: inherit;
  animation: dropdown .3s ease-in-out;
}
@keyframes dropdown {
  0% {
    opacity: 0;
  }
  50% {
    opacity: .5;

  }
  100% {
    opacity: 1;
  }
}
/* titles for types of filters */
.selectedInput, .selectedInput h4 {
  background-color: #EAE8E2;
  border-bottom: 1px solid #EAE8E2;
}
 /* responsive smart grid  */
#smartgrid {
  display: inline-flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 10px;
  max-width: 800px; /* for ie */
}
#div__body {
  max-width: 1050px;
  width: auto !important;
  padding: 0% 1% 0% 1% !important;
  display:flex;
  justify-content: flex-start;
  position: relative;
}
.smartOptions li {
padding: 10px 20px;
transition: color .15s ease-out 0s;
}
.medtext, .medtext + td, .bglt {
  display: none !important;
}
/* show more and less styles */
.moreLessContainer {
  width: 10px;
  height: 15px;
  display: inline-block;
  margin-left: 10px;
}
.show_hide_more {
  margin-left: 5px;
}
.moreLessContainer svg {
  stroke: #000;
}
li.show_hide_more:hover svg {
  stroke: #EC6B0F ;
}
@media screen and (min-width: 600px) {
  #div__body {
    padding: 20px 20px 0 20px!important;
  }
  #grid-header {
    grid-template-areas: "title title""pages pages""netpage sort";
  }
  .pageNumLinks {
    grid-area: netpage;
  }
  .gridnav .pageNumLinks {
    grid-area: unset;
    grid-column: 1 / end;
    justify-self: center;
  }
  #skinnedSortBy{
    margin-top: auto !important;
  }
  #smart_search h3, #smart_search h4 {
    max-width: 150px;
  }
  div#div__body>table {
    padding-top: unset;
  }
  div.left-nav, div#smart_search {
    display:block;
    position: relative;
    right: unset;
    width: auto;
    margin: 0px 25px 0px 5px;
  }
  .exit {
    display: none;
  }
  #smart_search_header_dynamic {
    justify-content: space-between;
    padding: 10px 0px;
    cursor: unset;
  }
  .titleContainer {
    padding: 0px 5px;
  }
  .arrowContainer {
    margin-right: 5px;
  }
  .smartOptions li, #revert_smart_search, #view_all_results {
    padding: 10px 0px;
  }
}
@media screen and (min-width: 840px) {
  .gridnav {
    grid-template-columns: 3fr max-content 1fr;
  }
  .gridnav .pageNumLinks {
    grid-column: 1;
  }
  .gridnav .pageNumLinks, .sortby, .resultsPerPage {
    justify-self: unset;
  }
  .resultsPerPage{
    grid-column: 3/4;
    grid-row: 1;
    justify-self: end;
    margin-right: 5px;
  }
  .sortby{
    grid-column: end;
  }
  .grid-header{
    position: relative !important;
    width: auto !important;
    height: auto !important;
  }
  #smartgrid {
    display: inline-flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: unset;
    margin-left: unset;
  }
  #card_gridview {
    margin-top: 10px;
  }
  .pageNumLinks {
    justify-self:unset;
  }
  div.left-nav, div#smart_search {
    margin: 0px 1% 0px 0px;
  }
}