search-filters.css

.search-filters-css {
  /* RETAIN, needed for topics to appear under tab. */
  /* Retain for now even if causing space at top of ds earth. */
  /* change to display when "Topics" clicked. */
  display: inline !important;
}
#filterEmbedHolder {
    display: block !important;
}
#selectProduct {
    cursor: pointer;
    background-color: #fff;
}
.selectMenu {
    font-size: 14px;
    height: 34px;
    margin-right: 6px;
    min-height: 34px;
}
.hero-bucket #state_select, #hero-rect #state_select {
  font-size: 24px;
  max-width: 300px;
  padding: 10px;
  border-radius: 20px;
}
.dark .hero-bucket #state_select, .dark #hero-rect #state_select {
  color: #fff;
}
.select-menu-arrow-holder {
    position:absolute; right:4px; top:4px;
}
.stateFilters {
  padding-top:10px;
}
#appSelectHolder .showApps {
  padding-right:4px;
}
.showApps > .material-icons {
  color: #ccc;
  font-size:36px;
  cursor:pointer;
}
.showApps.active > .material-icons {
  color: #eee;
}
@media (prefers-color-scheme: dark) {
  #filterFieldsHolder {
    /* background-color: #333; */
  }
}
.filterFieldsHolderFixed {
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgb(239 239 239);
  border-bottom: #aaa;
  z-index: 9999;
}
/* brave still sees this since it's darkmode ignores the use of prefers-color-scheme: dark */
@media (not (prefers-color-scheme: dark)) {
  #filterFieldsHolder {
    background-color: inherit;
    background-color: rgb(250 250 250);
    border-bottom: 1px solid #eee;
    border-bottom: 0px solid #eee;
  }
  .filterFieldsHolderFixed {
    background-color: rgb(255 255 255/95%);
  }
  .dark #filterFieldsHolder, .dark .filterFieldsHolderFixed {
    background-color: rgb(60 60 60/95%);
    border-bottom: 0px solid #686868;
  }
}
/*
#filterFieldsHolder, .filterFieldsHolderFixed {
  background-color: rgba(33,33,33,0.75);
}
*/
.filterFieldsHolderFixed .hamburger-circle {
  content: url("/localsite/img/icon/hamburger-lite.png");
}
#filterFieldsMain {
    min-height:54px;
    overflowX: hidden;
    position: relative;
}
#stateFiltersHolder {
  padding-right: 40px;
  max-height: 52px;
}
#filterLocations {
  background-color: #eee;
}
.dark #filterLocations {
  background-color: #555;
}
@media (max-width: 600px) {
  #mapFilters {
    padding-left: 10px;
  }
  #stateFiltersHolder {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (min-width: 600px) {
  #filterFieldsMain {
      padding:2px 0 0px 60px; /* Moves filters to right of left icon(s) */
  }
  .filterFieldsHolderFixed #filterFieldsMain {
    padding-left: 20px;
    padding-left: 62px; /* Allows for menu icon to the left */
  }
  #locationFilterHolder #filterLocations {
    padding-left: 60px; /* Margin for menu icon */
  }
  .bodyLeftMargin #locationFilterHolder #filterLocations {
    padding-left: 20px;
  }
}
@media (min-width: 600px AND max-width: 1100px) {
  #filterFieldsMain {
    padding-left: 40px;
  }
  #locationFilterHolder {
    padding-left: 40px;
  }
}
.dark #locationFilterHolder {
  background-color: rgb(33 33 33/95%);
}
.bodyLeftMargin #filterFieldsMain, .bodyLeftMarginList #filterFieldsMain  {
    padding-left: 15px;
}
.fieldSelector {
	display: none;
}
.filterField {
	margin-right: 6px;
	float: left;
}
@media (max-width: 600px) {
  .filterFieldXX {
    float: none;
    margin-right:0px;
    clear: both;
  }
  #appSelectHolderXX {
    clear: both;
  }
}
.filterClick {
    position: relative;
    cursor: pointer;
    border-radius: 20px;
    border: 0px;
    /*
    border-left: 1px solid #e0e0e0;
    border-top: 1px solid #ddd;
    */
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    padding: 0px 9px 0px 12px;
    min-height: 34px !important;
    vertical-align: baseline;
    background-color: #fff;
    color: #686868;
    text-shadow: none;
    float: left;
    z-index: 1;
}
.dark .filterClick, .dark.filterClick {
  background-color: #555;
  color: #fff;
  border: #555 solid 0px;
  border-bottom: #555 solid 0px !important; /* to override bootstrap css */
}
.dark .filterClick::placeholder, .dark.filterClick::placeholder {
  color: #bbb;
}
input.filterClick[type="text"] { 
    outline: none; /* prevents jagged edge when clicking to use search field. */
}

@media (max-width: 600px) {
  .filterClick {
    float:none;
  }
}
.filterClickText {
    font-size: 11pt;
    line-height: 12pt;
    white-space: nowrap;
    padding-top:8px;
    padding-right:23px;
}
.filterClickActive {
    border-top: 1px solid #eee;
    border-bottom: 0px solid #fff;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-bottom:-12px;
    height: 46px; /* 45px to short for Locations tab due to unresolved height issue  */
    background-color: #fcfcfc;
    background-color: #eee; /* matches .lite */
}
.dark .filterClickActive {
  background-color: #555;
  color: #fff;
}
.detailbutton {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    line-height: 14px;

    cursor: pointer;
    border-radius: 20px;
    padding: 9px 10px 0px 10px;
    
    color: #555;
    background-color: #f3f3f3;

    float: left;
    box-sizing: border-box;
    margin-right: 6px;
    min-height: 30px;
}
.detailbutton:hover {
    background-color: #eee;
}
.dark .detailbutton {
  background-color: orange;
  color: #fff;
  border: 0px solid #fff !important;
}
.dark .detailbutton:hover {
    background-color: #22aa22;
}
.greenbutton {
    color: #fff;
    background-color: green;
}
.greenbutton:hover {
    background-color: #22aa22;
}

#keywordsTB {
    width:100%;
    max-width:400px;
}
@media (max-width: 800px) {
    #keywordsTB {
        max-width:100px;
    }
}
#goSearch {
    padding-top:8px;
}
.filterLabel {
    padding-bottom: 4px;
    padding-top: 4px;
}
.filterLabelMain {
    display: none;
}
@media (max-width: 600px) {
  .filterLabelMainXX {
    clear: both;
    display: block;
    float: left;
    width: 100px;
  }
}
.filterBubble {
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    -webkit-transition-property: width;
    -moz-transition-property: width;
    -o-transition-property: width;
    transition-property: width;
    display: block;
    -webkit-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    border-radius: 6px;
    border: 1px solid #d0d5cb;
    position: absolute;
    z-index: 1001; /* to cover map zoom */
    font-size: 15px;
    line-height: 1.5;
    background: #fff;
    padding: 15px;
    vertical-align: baseline;
    pointer-events: auto; /* catch click through to keep open location filter */
}
.dark .filterBubble {
  background: #555;
}

.hideAdvanced {
  pointer-events: auto; /* catch click through to keep open location filter */
  z-index: 1000;
}
#geoListHolder {
    displayX: flex;
    overflow: hidden;
    padding-left: 15px;
    padding-right: 20px;
    height: 530px;
    border: 10px solid blue;
}
.listHolderFooterX {
  position:absolute;
  bottom:0;
  left:0px;
  right:0px;
  margin-top:5px;
  padding-left: 30px;
  z-index:2;
}
#geomap {
  width:700px;
  height:520px; /* Optimal for gstate zoom */
  position: relative;
}
#geomapHolder {
  float:left;
}
@media (max-width: 1350px) {
  #geomapHolder, #geomap {
    width:700px;
  }
}
@media (max-width: 1150px) {
  #geomapHolder, #geomap {
    width:500px;
  }
}
.bodyLeftMargin #geomapHolder {
  width:50%;
}
.bodyLeftMargin #geomap {
  width:100%;
}
@media (max-width: 1000px) {
  #geomapHolder, #geomap {
    width: 100%;
    margin-right: 30px;
  }
  #geoListHolder, .listHolderFooter {
    padding-left: 0px;
    padding-right: 0px;
  }
  #geomapHolder {
    float: none;
  }
}

.mobileView #geomapHolder, .mobileView #geomap {
  width: 100%;
}
.mobileView #geomapHolder {
  padding-right: 30px;
  padding-bottom: 20px;
}
.mobileView #geoListHolder, .mobileView .listHolderFooter {
  padding-left: 0px;
}
.mobileView #geomapHolder {
  float: none;
}
.bodyLeftMarginList #geomapHolder, .bodyLeftMarginList #geomap {
  width: 100%;
}
.bodyLeftMarginList #geomapHolder {
  padding-right: 30px;
  padding-bottom: 20px;
}
.bodyLeftMarginList #geoListHolder, .bodyLeftMarginList .listHolderFooter {
  padding-left: 0px;
}
.bodyLeftMarginList #geomapHolder {
  float: none;
}

.close-X {
  cursor:pointer;
  padding:7px 26px 15px 26px;
  font-size:23px;
  color:#bbb;
}
#honeycombPanel {
    text-align: center;
    margin:0 auto;
}
.bigThumbWidth { /* allows margin to reside within percent */
    floatX:left;
    position: relative;
}
.bigThumbWidthXXXX:after {
  content: "";
  display: block;
  padding-bottomX: 100%;
}
.bigThumbUl {
    margin: 0px;
    list-style-type: none;
    /*
    padding-right: -30px;
    border:1px solid #fff;
    */
}
.bigThumbHolder {
    width: 100%;
    height: 180px;
    position: absolute;
    float: left;
    text-align: center;
    color: #777;
}
.bigThumbHolder:hover {
  color: #333;

}

.bigThumbHolder a:link {
  color: #777;
  text-decoration: none;
}
.bigThumbHolder a:link:hover {
  color: #333;
  text-decoration: none;
}
/* visited link */
.bigThumbHolder a:visited {
  color: #777;
}
.bigThumbHolder a:visited:hover {
  color: #333;
  text-decoration: none;
}

.bigThumb {
    background-color: #fff;
    background-size: cover;
    opacity: 0.7;
    cursor: pointer;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin: 40px;
    margin: 0 auto;
    position: relative;
    line-height: 1em;
}
.bigThumbMenuContent {
  display:inline-block;
}
.bigThumbWidth {
  padding:0 20px 0 20px;
  padding:0px !important;
  margin:0px !important;
}
.bigThumb:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}
.bigThumb a {
  position: absolute; /* allows href to cover space */
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  text-align: center; /* no effect */
  cursor: pointer;
}
.bigThumbText {
  overflow: visible;
  padding-top: 9px;
  font-size: 16px;
  font-family: 'Roboto Condensed', sans-serif;
  text-decoration: none;
}
#listingsPanelScroll .bigThumbText {
  color: #fff;
}
.bigThumb:hover .bigThumbText {
  font-weight: 400;
}
.bigThumbStatus {
  position: absolute;
  top: 0;
  right: -10px;
  height: 30px;
  background-color: #ccc;
  height: 30px;
  width: 30px;

  height: 18px;
  width: 18px;

  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #888;
  display: inline-block;
}
.bigThumbSelected {
  margin-top: 2px;
  height: 12px;
  width: 12px;
  background-color: #ddd;
  border-radius: 50%;
  display: inline-block;
}
.bigThumbActive .bigThumbSelected {
  background-color: blue;
}
.bigThumbSecondary {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
}
.bigThumbMenu {
    clear: both; /* clear close X */
    display: flex;
    justify-content: center;
    border-bottomX: 1px solid #eee;
}
.bigThumbMenuInner {
  display: grid;
  overflow: auto;
  padding: 20px;
  padding-bottom: 10px;
}
.contentpadding .bigThumbMenuInner {
  padding: 0px;
}
.contentpadding .bigThumbMenu {
  padding: 0px;
  padding-top: 20px;
}

@media (min-width: 350px) {
  .bigThumbMenuInner{
    grid-template-columns: 1fr 1fr
  }
  .showSearch {
    /*
    display: none !important;
    */
  }
}
@media (min-width: 600px) {
  .bigThumbMenuInner{
    grid-template-columns: 1fr 1fr 1fr
  }
}
@media (min-width: 800px) {
  .bigThumbMenuInner{
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
  }
}
@media (min-width: 1000px) {
  .bigThumbMenuInner {
    /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
  }
}
@media (min-width: 1200px) {
  .bigThumbMenuInner {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}
.bigThumbWidth {
    width: 180px;
    height: 170px;
}

/* Full Screen */
@media (min-width: 1000px) {
    .primaryTitle {
        font-size: 58px;
    }
    .bigThumbWidth {
      widthX: 16.66%;
    }
}
/* Narrow Div */

  .bigThumbMenu {
    display: block;
    overflow: auto;
    background-colorX: #fff; /* honeycombPanel line 78 also sets bg color above icons */
    background-colorX: #fcfcfc;
  }
  .bigThumbMenuInner {
    grid-template-columns: auto;
    display: block;
  }
  .bigThumbMenuContent {
    float: left;
  }
  .bigThumbWidth {
    widthX: 100%;
    display: block !important;
  }
  .bigThumbText {
    padding-top: 5px;
  }

#county-table {
  padding-right:12px;
}
#county-table thead th
{
    position: sticky; 
    top: 0; 
    z-index: 2;
    background-color: #fafafa;
}
.output_table {
    border-collapse: collapse;
}
.output_table table {
    width:100%;
}
.output_table th {
    white-space: nowrap;
    padding: 5px;
    cursor:pointer;
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
    text-align: left;
}
.output_table td {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding:10px;
}

/* For embedded location filters */
.headerOffset {
    height: 100px;
}
#headerLarge {
  position: fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  background-color: #fff;
  z-index: 1001;
  /* box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); */
  overflow: visible;
  min-height: 56px;
}
.headerLargeHide {
  display: none;
}
#fixedFooter {
  position: fixed;
  bottom:0;
  background-color: #595959;
  color:#fff;
  left:0;
  right:0;
  width:100%;
  z-index: 9999999;
  text-align: center;
  padding: 5px;
}
#fixedFooter > div {
  display: inline-block;
}
#fixedFooter > div > div {
  float:left;
  padding-left:20px;
  padding-right:20px;
  font-weight:400;
  font-size:16px;
  line-height:38px;
  height:38px;
  cursor: pointer;
}
#fixedFooter > div > div:hover {
  background-color: #333;
}
#fixedFooter a {
  color: #fff;
}

.pagebutton {
  border-radius: 4px;
  border: 1px solid #dfdfdf;
  padding: 0px 4px 0 6px;
  height: 34px;
  min-height: 34px;
  vertical-align: middle;
  cursor: pointer;
  /* text-transform: uppercase; */
  font-family: 'Open Sans', 'Helvetica Neue', HelveticaNeue, calibri, arial, sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1;
}
.pagebutton:hover {
  background-color:#aaa;
  color:#fff;
}
.listOptions {
  display:none;
  position:absolute;
  left:auto;
  right: 0;
  top: 44px;
  max-width: 600px;
}
#mainHero #datascape {
    position: absolute;
    width: 100%;
    z-index: 1000;
}
#mainHero #filterFieldsHolder {
  background-color: rgba(33,33,33,0.3);
}
#mainHero #filterFieldsHolder > #showNavColumn {
  color: #fff;
  background-color: rgba(33,33,33,0.3);
}