/*
Theme Name: Houzez Child
Theme URI: http://www.favethemes.com/
Author: Favethemes
Author URI: http://www.favethemes.com/
Description: Houzez is a premium WordPress theme for real estate agents where modern aesthetics are combined with tasteful simplicity, and where the ease of use is achieved without compromise in your ability to customise the design. Whether you are a real estate agent looking to build a website for your company or a web developer seeking a perfect WordPress theme for your next project, you are certain to appreciate the numerous features and benefits that our theme provides.
Version: 1.0
Tags: white, right-sidebar, left-sidebar, custom-colors, custom-menu, featured-images, post-formats, theme-options, translation-ready
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: houzez
Template: houzez




Adam's random notes:

Overall site width is in Elementor (edit a page with Elementor to get to this) > Site Settings

The header "CREATE A LISTING" button styling is in Theme Options > Styling > Create Listing Button

The body button colour styling is in Theme Options > Styling > Body > Primary Color etc (yes, it's called "Body" even though you're styling buttons)


colors:

main (light) button color: #D0B400
dark button color: #C0A100


white button hover color: #FBFAF4;


notes for John and Katherine:




*/


@import url("../houzez/style.css");






/* -------------------------------------------------------------------------- */
/* Variables
/* -------------------------------------------------------------------------- */

:root {
  --product-color : #e297b5; /* pink */
  --property-color: #fc7f3f; /* orange */
  --service-color : #67c7c6; /* teal */

  --primary-button-background: #d0b300;
  --primary-button-background-hover: #c0a200;
  --primary-button-background-active: #a38c00;

}




/* -------------------------------------------------------------------------- */
/* Stuff to hide
/* -------------------------------------------------------------------------- */


.hide-for-now { display: none; }


.elementor-element-16d7db1 .property-carousel-buttons-wrap,
.elementor-element-42c7cc0 .property-carousel-buttons-wrap { display: none; }





/* -------------------------------------------------------------------------- */
/* Used everywhere (all pages)
/* -------------------------------------------------------------------------- */

@font-face {
  font-family: "Quicksand-Bold";
  src: url('fonts/Quicksand-Bold.ttf');
}

@font-face {
  font-family: "Quicksand-SemiBold";
  src: url('fonts/Quicksand-SemiBold.ttf');
}

@font-face {
  font-family: "Quicksand-Medium";
  src: url('fonts/Quicksand-Medium.ttf');
}

@font-face {
  font-family: "Quicksand-Regular";
  src: url('fonts/Quicksand-Regular.ttf');
}

@font-face {
  font-family: "Apple-Symbols";
  src: url('fonts/Apple-Symbols.ttf');
}

@font-face {
  font-family: "FuturaRoundDemi";
  src: url('fonts/FuturaRoundDemi.woff2') format('woff2'), url('fonts/FuturaRoundDemi.woff') format('woff');
}



/* buttons - no radius (make them square) */
.btn { border-radius: 0 !important; }

/* buttons - no green border */
.btn-success { border: none !important; }

/* button - "CREATE A LISTING" */
.header-main-wrap .btn-create-listing { background-color: var(--primary-button-background) !important; border: none !important; color: white !important; }
.header-main-wrap .btn-create-listing:hover  { background-color: var(--primary-button-background-hover) !important; border: none !important; box-shadow: none !important; }
.header-main-wrap .btn-create-listing:active  { background-color: var(--primary-button-background-active) !important; border: none !important; box-shadow: none !important; }

/* buttons - secondary */
.btn-secondary { background-color: var(--primary-button-background) !important; border: none !important; }
.btn-secondary:hover { background-color: var(--primary-button-background-hover) !important; border: none !important; box-shadow: none !important; }
.btn-secondary:active { background-color: var(--primary-button-background-active) !important; border: none !important; box-shadow: none !important; }

/* buttons - search buttons */
.btn-search { background-color: var(--primary-button-background) !important; border: none !important; }
.btn-search:hover { background-color: var(--primary-button-background-hover) !important; border: none !important; box-shadow: none !important; }
.btn-search:active { background-color: var(--primary-button-background-active) !important; border: none !important; box-shadow: none !important; }

/* button - red "danger" button */
.btn-danger { background-color: #dc3545 !important; }
.btn-danger:hover { background-color: #c82333 !important; }

/* dropdowns - better hover colour */
button.dropdown-toggle:hover,
button.dropdown-toggle:focus { background-color: #efefef !important; }


/* alerts (like "Profile updated") */
.alert { border-radius: 0 !important; border: none !important; line-height: 24px; }
.alert-success .close { background-color: green !important; color: #ffffff !important; }
.alert-success .close:hover { background-color: #005200 !important; }


/* ---------------------------------- */
/* list view / grid view switcher - hide it (used on every category and search-result page) */
/* ---------------------------------- */
.listing-wrap .listing-switch-view { display: none; }



/* -------------------------------------------------------------------------- */
/* Login / Register modal (used everywhere because it's on every page)
/* -------------------------------------------------------------------------- */

#register-form-tab {}

/* LOGIN and REGISTER tabs  */
.modal .login-register-tabs .nav-link { text-transform: uppercase; font-size: 15px; }

/* input fields - hide icons, no roundedness, border only on bottom, more vertical space, etc */
.modal.login-register-form .form-group { margin-bottom: 16px; }
.modal.login-register-form .form-group-field:after { display: none !important; content: "" !important; }
.modal.login-register-form .form-group-field input { padding-left: 0; border: none; border-bottom: 1px solid #1a322f; border-radius: 0; }
.modal.login-register-form .form-group-field input { font-weight: 600; color: #1a322f; }
.modal.login-register-form .form-group-field input::placeholder { color: #999999; }
.modal.login-register-form .login-form-wrap,
.modal.login-register-form .register-form-wrap { border: none; }

/* close button - remove left border, change font */
.modal.login-register-form .modal-header .close { border-left: none; padding-top: 2px; padding-bottom: 10px; }
.modal.login-register-form .modal-header .close span { font-family: 'Roboto'; /* gives a thin "x" like the mockup */ font-weight: 100 !important; font-size: 44px !important; }

/* submit buttons - all caps */
.modal.login-register-form .btn { text-transform: uppercase; font-size: 16px; }


/* ---------------------------------- */
/* nav */
/* ---------------------------------- */


/* nav - narrower max-width than rest of site (1160px max) */
#header-section.header-desktop .container { max-width: 1220px; }

/* avatar - same height as CREATE A LISTING button (on homepage that button is larger than on subpages) */
body.home .navbar-logged-in-wrap .dropdown-toggle img[alt="author"] { width: 46px; height: 46px; /* 40px square so it's same size as "CREATE A LISTING" button */ }
.navbar-logged-in-wrap .dropdown-toggle img[alt="author"] { border-radius: 0 !important; width: 40px; height: 40px; /* 40px square so it's same size as "CREATE A LISTING" button */ }

/* nav dropdowns - correct height so you don't see a 1px gap */
.main-nav .dropdown-menu { margin-top: -1px; }

/* ---------------------------------- */
/* header */
/* ---------------------------------- */


/* wider header */
@media (min-width: 1200px)
{
  .container { max-width: 1320px; } /* ends up being 1260px because of the 30px padding on both sides */
}

/* better padding, so it lines up better with other things on the page when the browser gets below 1330px wide approx and things would start "touching" the sides if not for this padding */
#header-section .container { padding: 0 30px; }

/* no bottom border */
.header-transparent-wrap .header-v4 { border-bottom: none !important; }

/* "CREATE A LISTING" - taller etc */
.header-transparent-wrap .header-v4 .btn-create-listing { line-height: 46px; }


/* ---------------------------------- */
/* footer */
/* ---------------------------------- */

/* footer - top section */

.footer-top-wrap > .container { padding-right: 0; }

@media (min-width: 992px)
{
  /* row */
  .footer-top-wrap .row { justify-content: flex-end; }
  /* cols - first two cols (with lists) */
  .footer-top-wrap .col-lg-3:first-child { flex: 0 0 16.5%; }
  .footer-top-wrap .col-lg-3:nth-child(2) { flex: 0 0 33.5%; }
  /* col with the form */
  .footer-top-wrap .col-lg-6 { flex: 1; max-width: 100%; padding-left: 120px; }
}


.gro-footer__stay-in-touch-heading { font-family: "FuturaRoundDemi"; font-size: 46px; font-weight: bold; margin-bottom: 20px; }

.gro-footer__form { display: flex; flex-flow: row; background: white; border-radius: 30px; height: 60px; padding-left: 30px; }

.gro-footer__email-input { flex: 1; border: none; border-radius: 30px; font-weight: 700; }

.gro-footer__submit-button { border: none; border-radius: 30px !important; padding: 0 35px; background-color: #D0B400; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.5px; }

@media only screen and (max-width: 500px)
{
  .gro-footer__email-input { width: 100px; }
  .gro-footer__submit-button { padding-left: 15px; padding-right: 15px; }
}


/* Footer - bottom section */

/* allow multiple rows and align to bottom */
.footer-bottom-wrap .d-flex { flex-flow: row wrap; align-items: flex-end; }

/* logo - put on left, make it wide  */
.footer_logo { flex: 1; } 

.footer-social-and-copyright { flex: 0; }

/* social - on right, above copyright */
.footer-social { text-align: right; }

/* copyright line - below the rest, right-aligned */
.footer-copyright { flex: 0 0 100%; margin-top: 10px; text-align: right; color: rgb(224 206 56 / 50%); }


/* footer logo - make smaller */
.footer_logo img { max-width: 194px; }

/* footer social images - spacing, make smaller */
.footer-social a { margin-right: 16px; }
.footer-social a:last-child { margin-right: 0; }
.footer-social img { max-width: 40px; }






/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* Search Tabs */
/* (used on homepage and search results page; the tabs and the search area within each tab) ... */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


/* tabs - uppercase */
#houzez-search-tabs-wrap .nav-link { text-transform: uppercase; font-size: 15px; } 

/* tabs - hover */
#houzez-search-tabs-wrap .nav-link:not(.active):hover { background-color: var(--primary-button-background-hover) !important; }

/* hide all search fields by default, except product type and keyword; if we've toggled ADVANCED FILTERS then we do show some extra fields */
.houzez-ele-search-form-wrapper .form-group { display: none; align-items: flex-end; /* flex-end needed so the input boxes line up whether the label above is 2 lines or 1 */ }

/* since we bulk-hide everything below, we need to selectively show the few that are before ADVANCED FILTERS */
.houzez-ele-search-form-wrapper .form-group[data-gro-search-field-container="states[]"],
.houzez-ele-search-form-wrapper .form-group[data-gro-search-field-container="product-type"],
.houzez-ele-search-form-wrapper .form-group[data-gro-search-field-container="keyword"] { display: flex; }

/* property tab - we have fewer boxes that show so keyword must be wider */
@media (min-width: 768px)
{
  .houzez-ele-search-form-wrapper[data-gro-search-type="property"] .form-group[data-gro-search-field-container="keyword"] { width: 50%; }
}

/* service tab - we show province BEFORE the "ADVANCED FILTERS" */
/*.houzez-ele-search-form-wrapper[data-gro-search-type="service"] .form-group[data-gro-search-field-container="states[]"] { display: flex; }*/

/* service tab - keyword is now part of "ADVANCED FILTERS", so hide at first */
/*.houzez-ele-search-form-wrapper[data-gro-search-type="service"] .form-group[data-gro-search-field-container="keyword"] { display: none; }*/


/* "ADVANCED FILTERS" */

.gro-search-tabs__advanced-filters { flex: 0 0 100%; padding: 5px; font-weight: 700; display: flex; justify-content: flex-start; flex; align-items: center; }

.gro-search-tabs__advanced-filters > span:hover { cursor: pointer; }

.gro-search-tabs__advanced-filters-slider { background-color: #BFBFBF; height: 30px; width: 60px; border-radius: 20px; padding: 4px; position: relative; }
.gro-search-tabs__advanced-filters-slider.not-active { background-color: #BFBFBF; }
.gro-search-tabs__advanced-filters-slider.is-active { background-color: #D0B400; }

.gro-search-tabs__advanced-filters-dot { display: inline-block; height: 22px; width: 22px; z-index: 100; background: #ffffff; border-radius: 16px; position: absolute; left: 4px; } 
.gro-search-tabs__advanced-filters-dot.not-active { /*transform: translateX(0px);*/ animation: advanced_filters_dot_inactive .2s normal forwards; }
.gro-search-tabs__advanced-filters-dot.is-active { /*transform: translateX(40px);*/ animation: advanced_filters_dot_active .2s normal forwards; }

@keyframes advanced_filters_dot_inactive
{
  from { transform: translateX(30px); }
  to { transform: translateX(0px); }
}


@keyframes advanced_filters_dot_active
{
  /*from { transform: translateX(0px); }*/
  to { transform: translateX(30px); }
}


/* when advanced filters are ON ... */

/* product tab, advanced filters on, show these fields in this order */
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="product"] .form-group[data-gro-search-field-container="min-price"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="product"] .form-group[data-gro-search-field-container="max-price"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="product"] .form-group[data-gro-search-field-container="volume-available-grams"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="product"] .form-group[data-gro-search-field-container="growing-method"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="product"] .form-group[data-gro-search-field-container="sativa"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="product"] .form-group[data-gro-search-field-container="indica"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="product"] .form-group[data-gro-search-field-container="thc-content-minimum"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="product"] .form-group[data-gro-search-field-container="cbd-content-minimum"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="product"] .form-group[data-gro-search-field-container="certificate-of-analysis"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="product"] .form-group[data-gro-search-field-container="trimming-method"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="product"] .form-group[data-gro-search-field-container="irradiated"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="product"] .form-group[data-gro-search-field-container="gmp-certification"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="product"] .form-group[data-gro-search-field-container="organic-certification"] { display: flex; }

/* property tab, advanced filters on, show these fields in this order */
/*.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="property"] .form-group { display: flex; }*/

.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="property"] .form-group[data-gro-search-field-container="min-price"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="property"] .form-group[data-gro-search-field-container="max-price"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="property"] .form-group[data-gro-search-field-container="location[]"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="property"] .form-group[data-gro-search-field-container="min-land-area"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="property"] .form-group[data-gro-search-field-container="total-built-out"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="property"] .form-group[data-gro-search-field-container="real-estate-is-included"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="property"] .form-group[data-gro-search-field-container="cannabis-business-monthly-revenue"],
.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="property"] .form-group[data-gro-search-field-container="investment-opportunity-available"] { display: flex; }



/* service tab, advanced filters on, show these fields in this order */

.houzez-ele-search-form-wrapper[data-gro-advanced-filters="showing"][data-gro-search-type="service"] .form-group[data-gro-search-field-container="location[]"] /* city */ { display: flex; }




/* labels - less line-height, un-highlightable */
.houzez-ele-search-form-wrapper label { line-height: 1.4; user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; }

/* search area - inside each tab (this is the white part) */
.houzez-ele-search-form-wrapper { border-radius: 0 !important; }

/* dropdowns - make taller */
.houzez-ele-search-form-wrapper .bootstrap-select .filter-option-inner { line-height: 46px; }

/* selected dropdown - highlight it (so if we hit "province" and type "b" then BC is highlighted) */
.bootstrap-select .dropdown-item.active { background: #e8e8e8; }
.bootstrap-select .dropdown-menu li.active small { color: #6c757d !important; }

/* KEYWORD Optional field - make taller */
.houzez-ele-search-form-wrapper .elementor-field-textual { line-height: 46px; min-height: 48px; border-radius: 0; }

/* KEYWORD Optional - text colour of placeholder */
.houzez-ele-search-form-wrapper input[name="keyword"]::placeholder { color: #a1a7a8; }

/* SEARCH button - make taller */
.houzez-ele-search-form-wrapper button[type="submit"] { line-height: 46px; padding-top: 0; padding-bottom: 0; }

/* KEYWORD Optional field - make taller */
.houzez-ele-search-form-wrapper .elementor-field-textual { line-height: 46px; min-height: 48px; border-radius: 0; }





/* ---------------------------------- */
/* Background images and extra header
/* ---------------------------------- */
/* Used on Search Results page and Category pages only (search tabs header area) */

#compare-property-panel { background: url(/wp-content/uploads/2021/07/gro-product-header.jpg) -99999px -99999px;
background: url(/wp-content/uploads/2021/07/gro-property-header.jpg) -99999px -99999px;
background: url(/wp-content/uploads/2021/07/gro-service-header.jpg) -99999px -99999px; }


.gro-search-tabs-wrapper { margin-top: 0; margin-bottom: 30px; paddings: 30px 20px; /* the background css rule is inline in custom-taxon... because it changes depending on which category page you're on */ }



/*.gro-search-tabs-wrapper--product { background-image: url(/wp-content/uploads/2021/07/gro-product-header.jpg); }
.gro-search-tabs-wrapper--property { background-image: url(/wp-content/uploads/2021/07/gro-property-header.jpg); }
.gro-search-tabs-wrapper--service { background-image: url(/wp-content/uploads/2021/07/gro-service-header.jpg); }*/

.gro-search-tabs-wrapper-inner { padding: 30px 20px; }


.gro-search-tabs-wrapper .container { margin-top: 0; margin-bottom: 50px; z-index: 2; position: relative; }

.gro-search-tabs-heading { font-family: FuturaRoundDemi; font-size: 46px; margin-bottom: 20px; }
.gro-search-tabs-heading span { text-transform: capitalize; }

/* we can't use background images here because then it flashes when we try to swap the bg image with JS when they click a tab, so we have to use this roundabout way instead, with an absolutely-positioned div that has bg images that gets resized (debounced-ly) when the user changes browser size and can swap without a flicker with JS too */
.gro-search-tabs-image { visibility: hidden; position: absolute; top: 0; width: 100%; margin-left: auto; margin-right: auto; z-index: 1; }
.gro-search-tabs-image--product { background: url(/wp-content/uploads/2021/07/gro-product-header.jpg) center center/cover no-repeat; }
.gro-search-tabs-image--property { background: url(/wp-content/uploads/2021/07/gro-property-header.jpg) center center/cover no-repeat; }
.gro-search-tabs-image--service { background: url(/wp-content/uploads/2021/07/gro-service-header.jpg) center center/cover no-repeat; }


/* ---------------------------------- */
/* responsive
/* ---------------------------------- */

@media only screen and (max-width: 1199px)
{
  /* heading - more space below */
  .gro-search-tabs-heading { margin-bottom: 30px; }
}

@media only screen and (max-width: 767px)
{
  /* heading - centered and more space below */
  .gro-search-tabs-heading { text-align: center; margin-bottom: 30px; }
}


@media only screen and (max-width: 500px)
{
  /* tabs - shrink them (less padding, smaller fonts) */
  #houzez-search-tabs-wrap .nav-link { padding-left: 10px !important; padding-right: 10px !important; font-size: 15px !important; }

  /* on subpages (category and search-results) shink even more because we have less width here */
  body.archive #houzez-search-tabs-wrap .nav-link,
  body.page-template-template-search #houzez-search-tabs-wrap .nav-link { padding-left: 8px !important; padding-right: 8px !important; font-size: 3.5vw !important; margin: 0 2px !important; }
}
@media only screen and (max-width: 360px)
{
  /* tabs - shrink them (less padding, smaller fonts) */
  #houzez-search-tabs-wrap .nav-link { padding-left: 10px !important; padding-right: 10px !important; font-size: 12px !important; }

  /* on subpages (category and search-results) shink even more because we have less width here */
  body.archive #houzez-search-tabs-wrap .nav-link,
  body.page-template-template-search #houzez-search-tabs-wrap .nav-link { font-size: 3.4vw !important; }
}


/* end Search Tabs */




/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* Homepage
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


/* ---------------------------------- */
/* Hero section */
/* ---------------------------------- */

/* make sure it's never wider than nav above it (so text lines up with logo on left-hand side of page) */
.gro-homepage__hero { max-width: 1220px; margin-left: auto; margin-right: auto; }

/* "Where cannabis..." and "Create your free listing" - starting font size and then decrease font-size as browser-width shrinks */
body.home .gro-homepage__hero-text .houzez_section_title { font-size: 70px !important; }
body.home .gro-homepage__hero-text .houzez_section_subtitle { font-size: 20px !important; }

@media only screen and (max-width: 1200px)
{
  body.home .gro-homepage__hero-text .houzez_section_title { font-size: 5.8vw !important; }
}
@media only screen and (max-width: 1100px)
{
  /*body.home .gro-homepage__hero-text .houzez_section_title { font-size: 64px !important; }*/
}
@media only screen and (max-width: 960px)
{
  body.home .gro-homepage__hero-spacer-right { width: 30% !important; }
}
/* now the hero is full-width (no spacer-right) */
@media only screen and (max-width: 767px)
{
  /* kill the spacer-top so text centers vertically */
  body.home .gro-homepage__hero-spacer-top .houzez-spacer-inner { height: 0 !important; }
  
  /* font size a bit bigger now because full-width */
  body.home .gro-homepage__hero-text .houzez_section_title { font-size: 10.5vw !important; }
}
@media only screen and (max-width: 400px)
{
  /* pixel-based font size now so we stop shrinking font as browser narrows */
  body.home .gro-homepage__hero-text .houzez_section_title { font-size: 40px !important; }
  body.home .gro-homepage__hero-text .houzez_section_subtitle { font-size: 20px !important; }
}




/* ---------------------------------- */
/* section titles */
/* ---------------------------------- */

/* section titles */
body.home .houzez_section_title { font-family: "FuturaRoundDemi" !important; }

/* section subtitles */
body.home .houzez_section_subtitle { font-family: "Quicksand-Regular" !important; }


/* ---------------------------------- */
/* all buttons */
/* ---------------------------------- */

/*body.home .content-wrap .btn,
body.home .content-wrap .elementor-button-link { min-width: 248px; }*/




/* ---------------------------------- */
/* Featured Listings */
/* ---------------------------------- */

/* some of this is done via Elementor (edit homepage with Elementor, edit search builder, click Style then Tabs Style); custom css is below */
body.home #houzez-listings-tabs-wrap .nav-item { background: #fff; }
body.home #houzez-listings-tabs-wrap .nav-item:first-child { border-radius: 30px 0px 0px 30px; }
body.home #houzez-listings-tabs-wrap .nav-item:last-child { border-radius: 0px 30px 30px 0px; }
body.home #houzez-listings-tabs-wrap .nav-link { background: none !important; border-radius: 30px; font-size: 18px !important; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
body.home #houzez-listings-tabs-wrap .nav-link.active { background: #D0B400 !important; color: white !important; }

/* Featured Listings - square borders */
body.home .grid-view .item-wrap.item-wrap-no-frame .hover-effect { border-radius: 0 !important; }

/* Featured Listings - hide price etc */
body.home .property-cards-module .item-price { display: none; }
body.home .property-cards-module .item-sub-price { display: none; }

/* Featured Listings - font changes */
body.home .gro-homepage__featured-listings #houzez-listings-tabs-wrap .nav-link { font-size: 16px !important; }
body.home .item-amenities li { font-weight: 400; }

/* stack all the li's because looks better (but don't stack THC max) */
body.home .item-amenities li:not(.h-thc-content-minimum):not(.h-thc-content-maximum) { display: block; }


/* property cards (listing cards) - DETAILS button - don't position absolute or it can cover text */
.property-cards-module-3-cols .item-body .btn-item,
#similar-listings-wrap .item-body .btn-item { position: inherit; } /* this line fixes this for individual listings pages */

/* property cards (listing cards)- DETAILS button - right-align it, left align everything else in this section (needed because can't position: absolute which is how Houzes made this right-aligned) */
.property-cards-module-3-cols .item-body,
#similar-listings-wrap .item-body { text-align: right; } /* gets applied to the <a.btn> tag because it's display: inline and sitting in this block */
.property-cards-module-3-cols .item-body *,
#similar-listings-wrap .item-body * { text-align: left; } /* gets applied to all the divs/uls etc that are in this block (everything but the <a.btn> tag) */


/* make height of feature-list tall enough that stuff doesn't hide behind DETAILS button */
/*body.home .gro-homepage__featured-listings ul.item-amenities { min-height: 80px; }*/ /* not needed now that we stack these (above) */

/* icons for "author" (agent who listed this) and "date" - remove them */
body.home .property-cards-module .item-author .houzez-icon,
body.home .property-cards-module .item-date .houzez-icon { display: none; }


/* only show certain features to certain type (otherwise we have empty li's but they still take up space) */

/* product */
.gro-item-amenities-li--product:not(.h-volume-available-grams):not(.h-thc-content-minimum):not(.h-thc-content-maximum):not(.h-product-type) { display: none; }

/* property  */
.gro-item-amenities-li--property:not(.h-land-area):not(.h-area):not(.h-total-built-out) { display: none; }

/* service */
.gro-item-amenities-li--service:not(.h-service-type):not(.h-date-available):not(.h-province) { display: none; }




/* Featured Listings - LOAD MORE button */
body.home #fave-pagination-loadmore .btn { text-transform: uppercase; min-width: 248px; line-height: 68px; }






/* ---------------------------------- */
/* FAQ */
/* ---------------------------------- */

body.home .elementor-tab-title { font-family: "Quicksand-Regular" !important; }


/* toggles - put the + symbol on right */
body.home .elementor-toggle .elementor-tab-title .elementor-toggle-icon.elementor-toggle-icon-left { float: right; }

/* toggles - make them "+" and "-" instead of arrows */
/*body.home .fa-caret-right:before { content: url(https://gr1.adamdevelops.com/wp-content/uploads/2021/04/gro-homepage-contact.jpg); } // unhide this if you want to use custom images instead of fontawesome icons */
body.home .fa-caret-right:before { content: "\f067"; /* fontawesome plus (can get a skinnier one with fontawesome "pro") */ }
body.home .fa-caret-up:before { content: "\f068"; /* fontawesome minus (can get a skinnier one with fontawesome "pro") */ }

/* SEE ALL button */
body.home .gro-homepage__faq .elementor-button-link { min-width: 248px; }



/* ---------------------------------- */
/* "Get In Touch" */
/* ---------------------------------- */

/* fields - grey bg etc */
body.home .gro-homepage__get-in-touch .elementor-field-group .elementor-field-textual { border: none; border-radius: 0; background-color: #E8EAEA !important; }


/* "Please sign" and "SUBMIT" - make area a 50/50 ish grid (on wide monitors only) */
@media (min-width: 1320px)
{
  body.home .gro-homepage__get-in-touch .houzez-gdpr-agreement,
  body.home .gro-homepage__get-in-touch .elementor-field-type-submit { flex: 0 0 50%; }
  body.home .gro-homepage__get-in-touch .elementor-field-type-submit { align-items: flex-start; padding: 10px 0 0 40px !important; }
}



/* label above newsletter checkbox - hide it */
body.home .gro-homepage__get-in-touch label[for="gdpr_agreement"].elementor-field-label { display: none; } /* the label above the "Please sign me up" newsletter is empty (erased that text in Elementor editor) but still takes up space unless we hide it here */

/* checkbox - make bigger */
body.home .gro-homepage__get-in-touch input[name="gdpr_agreement"] { width: 20px; height: 20px; margin-right: 4px; vertical-align: text-bottom; } 

/* "Please sign me up.." text - bigger, bolder etc */
body.home .gro-homepage__get-in-touch .gdpr-text { font-size: 17px; line-height: 24px; font-weight: 600; }








/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* User Dashboard Area
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


/* all dropdowns - hover color */
.bootstrap-select .dropdown-item:focus,
.bootstrap-select .dropdown-item:hover,
#fep-result li a:hover { background-color: rgb(208 180 0 / 22%); color: #231f20; }



/* -------------------------------------------------------------------------- */
/* Messages (Front End PM)
/* -------------------------------------------------------------------------- */

/* no border around everything */
#fep-content { border: none; }

/* better colors */
#fep-result { background-color: #ffffff; border: 1px solid #dce0e0; box-shadow: 0 2px 4px rgba(0, 0, 0, 10%); }
#fep-wrapper a:not(.fep-button, .fep-button-active) { color: #231f20; }

/* make dropdowns look more like Houzez */
#fep-result li { border-top: none; }

/* make inputs more like Houzez */
.fep-field input,
.fep-field textarea { border: 1px solid #dce0e0; padding: .375rem .75rem; }



/* -------------------------------------------------------------------------- */
/* Create A Listing page */
/* -------------------------------------------------------------------------- */

/* temp - hide right sidebar that shows when EDITING a listing (not when CREATING one) */
.dashboard-content-wrap.dashboard-edit-listing > .d-flex > .order-2 { display: none; }


/* hide any fields that we need hidden */
#submit_property_form .gro-create-listing__hide-this-field { display: none; }



/* Description text-box (editor) - hide most buttons there like "ul" and "ol" etc (we only keep: bold, italic, link) */
#submit_property_form #qt_prop_des_toolbar input:not(#qt_prop_des_strong):not(#qt_prop_des_em):not(#qt_prop_des_link) { display: none; }


/* hide the address-autocomplete crap; TODO: this is hacky; waiting for theme-authors to reply; if they don't, we should probably just prevent any autocomplete JS library from running because right now that thing still runs it's just hidden so it'll slow down the page because it's accessing a HUGE list or properties on the fly */
/*.ui-autocomplete { display: none !important; }*/


/* "Listing Settings" - hide this entire section (we might want to un-hide the "Do you want to mark this property as featured?" option in future if we have a payment system and different tiers where users can purchase the ability to mark certain listings as "featured") */
#submit_property_form #settings { display: none; }

/* hide the "Type" "Status" "Label" fields for now; for now that's done via the above ...hide-this-field class */
/*#submit_property_form #description-price .dashboard-content-block:nth-child(2) .row:first-child { display: none; }*/


/* "Description" textarea - red border that shows on error (until user types something in "Description" field); this "is-invalid" class and "aria-invalid" attribute is added and removed via the theme's JS, not my JS; the theme adds "is-invalid" and aria-invalid="true" and we take advantage of that to style things bere */
#submit_property_form .wp-editor-area.is-invalid:not([aria-invalid="false"]) { border: 1px solid #dc3545; } /* this works because ".is-invalid" is added as soon as the user hits Submit/Save Changes (if they left this blank), but at first there's no "aria-invalid" property at all, so this red border shows; if user doesn't fill something in this field and hits Submit/Save Change again, then aria-invalid="true" gets added, but it changes to "false" as soon as user corrects this, so this border only shows when field actually empty */



/* dropdown fields - red border for dropdown errors; this is added and removed via JS */
#submit_property_form .dropdown:not(.show) .gro-create-listing__error--red-border { border: 1px solid #dc3545; }


/* GDPR - red text if invalid; this is added and removed via JS */
#submit_property_form .gro-create-listing__error--red-text { color: #dc3545; }

/* hide the calendar icon in date input fields if it's invalid (outlined red) so the "!" doesn't overlap the calendar icon */
#submit_property_form input.is-invalid + .gro-create-listing__date-available-calendar { display: none; }


/* hide certain sections depending on listing type (JS adds this class to the form) */
.gro-create-listing__product-form #location, /* most location fields are hidden with PHP on a "product" listing type, but we want CANADA so the location block is still is on the page but we hide it from users with CSS and auto-fill Country with Canada and remove all other fields with PHP in location.php; hiding this "#location" div hides the map and lat/long too */
.gro-create-listing__product-form #features,
.gro-create-listing__product-form .gro-create-listing__second-price,
.gro-create-listing__product-form .gro-create-listing__price-postfix,
.gro-create-listing__product-form .gro-create-listing__price-prefix { display: none; }


/* hide "Product Type - Other" by default (we'll show it with JS if necessary) */
.gro-create-listing__product-form div[data-gro-form-field-container="product-type-other"] { display: none; }

/* hide "Service Type - Other" by default (we'll show it with JS if necessary) */
.gro-create-listing__service-form div[data-gro-form-field-container="service-type-other"] { display: none; }



/* on the service listing, certain fields are hidden with php instead; we hide the postal code and map header+section via php (in dashboard/submit/location.php); other things are hidden via CSS; see below:; */

.gro-create-listing__service-form #features { display: none; }




/* form.gro-create-listing__service-form #location h2:nth-child(3), /* hides the "Map" header */
/* form.gro-create-listing__service-form #location .dashboard-content-block:nth-child(4) /* hides the map section incl long/lat fields */ { display: none; }



/*,
form.gro-create-listing__product-form #floorplan,
form.gro-create-listing__product-form #virtual-tour,
form.gro-create-listing__product-form #sub-properties,
form.gro-create-listing__product-form #private-note*/ 



/* Property form - hide some things */

.gro-create-listing__property-form .gro-create-listing__price-postfix,
.gro-create-listing__property-form .gro-create-listing__price-prefix,
.gro-create-listing__property-form div[data-gro-form-field-container="land-area-unit"],
.gro-create-listing__property-form div[data-gro-form-field-container="area-size-unit"] { display: none; }


.gro-create-listing__property-form .gro-create-listing__additional-licenses { display: none; } /* the extra licenses that ppl can type in; we hide this to start then show with JS if needed */

.gro-create-listing__property-form input.form-control[name="additional_features[*][fave_additional_feature_value]"] { display: none; }


/*form.gro-create-listing__property-form div[data-gro-form-field-container="show-listing-company-info-in-listing"],
form.gro-create-listing__property-form div[data-gro-form-field-container="growing-method"],
form.gro-create-listing__property-form div[data-gro-form-field-container="thc-content"],
form.gro-create-listing__property-form div[data-gro-form-field-container="volume-available"],
form.gro-create-listing__property-form .gro-create-listing__other-information-header,
form.gro-create-listing__property-form .gro-create-listing__other-information { display: none; }


/* as of Feb 23 2021 I'm now hiding this via PHP in the "details.php" file, so I hid the CSS below, and I should hide the CSS above and move that to "details.php" as well */


/*form.gro-create-listing__service-form div[data-gro-form-field-container="show-address-in-listing"],
form.gro-create-listing__service-form div[data-gro-form-field-container="growing-method"],
form.gro-create-listing__service-form div[data-gro-form-field-container="thc-content"],
form.gro-create-listing__service-form div[data-gro-form-field-container="trimming-method"],

form.gro-create-listing__service-form div[data-gro-form-field-container="certificate-of-analysis"]

 { display: none; } */




/* hidden for now; might use later; JS adds these to input boxes when they're filled correctly */
/*.gro-create-listing__checkmark { position: absolute; top: 43px; right: 32px; }
.gro-create-listing__checkmark img { color: green; }*/

/* adds a calendar icon to text boxes (called by JS) */
#submit_property_form .gro-create-listing__date-available-calendar { position: absolute; top: 43px; right: 32px; color: #a1a7a8; }

/* explantory text under fields (like "For example:" and error messages) */
#submit_property_form .text-muted,
#submit_property_form .gro-create-listing__error { line-height: 1rem; }

/* error messages */
#submit_property_form .gro-create-listing__error { color: #dc3545; margin-top: .25rem; }









/* -------------------------------------------------------------------------- */
/* Individual listing page (aka "Individual listing page", "property detail page", "property page")
/* -------------------------------------------------------------------------- */


/* ---------------------------------- */
/* hide the sticky nav at top */
/* ---------------------------------- */
.single-property .property-navigation-wrap { display: none !important; }


/* if user unverified, hide certain info, provide link */
.gro-user-not-verified { color: #231f20; text-decoration: underline; }
.gro-user-not-verified:hover { text-decoration: underline; }


/* ---------------------------------- */
/* sidebar contact form area - hide avatar image */
/* ---------------------------------- */
.single-property .property-form-wrap .agent-image { display: none; }
.single-property .property-form-wrap .agent-information { padding-left: 0; }



/* ---------------------------------- */
/* contact form (Front End PM) */
/* ---------------------------------- */
.single-property #sidebar .agent-link { display: none; } /* hide "View Listings" link for now */
.single-property #sidebar .property-form-wrap h2 { font-size: 24px; } /* "Contact Seller" */

/*.single-property .fep-form-field-fep_upload { display: none; }*/ /* hide the file-uploader (file-attacher) */ /* for now, this is done via Font End PM > Settings > General > untick that box */


/* ---------------------------------- */
/* "Overview" section - hide it */
/* ---------------------------------- */

.single-property #property-overview-wrap { /*display: none;*/ /* if you want to hide this entirely */ }

/* "Overview section" - better grid that can handle wider text */
#property-overview-wrap .property-overview-data .flex-fill { width: calc(100% / 2.1); display: inline-block; }
@media only screen and (min-width: 768px) and (max-width: 1199px)
{
  /* "Overview section" - smaller font-size because doesn't fit otherwise */
  #property-overview-wrap .property-overview-data .flex-fill strong { font-size: 15px; }
}

@media only screen and (max-width: 500px)
{
  /* "Overview section" - smaller fonts */
  #property-detail-wrap .detail-wrap { font-size: 16px; }
}

@media only screen and (max-width: 420px)
{

  /* "Overview section" - smaller fonts */
  #property-overview-wrap .property-overview-data .flex-fill strong { font-size: 15px; }
  #property-overview-wrap .gro-individual-listing__hide-under-420px { display: none; }

  /* if you want rows instead of this grid, unhide this */
  /*#property-overview-wrap .property-overview-data .flex-fill { width: 100%; display: flex; justify-content: flex-start; }
  #property-overview-wrap .property-overview-data .flex-fill strong { margin-right: 20px; }*/
}
@media only screen and (max-width: 370px)
{
  /* "Overview section" - smaller fonts (they shrink now as browser shrinks) */
  #property-overview-wrap .property-overview-data .flex-fill strong { font-size: 4.4vw; }
}


/* ---------------------------------- */
/* "Description" section */
/* ---------------------------------- */

@media only screen and (max-width: 767px)
{
  .gro-individual-listing__extra-company-name-heading { display: none; }
}


/* ---------------------------------- */
/* "Product/Property/Service Details" section */
/* ---------------------------------- */

.single-property .detail-wrap { border-radius: 0; border: none; }

/* "Details" section - adam experiment - no bg and padding to match Location - todo: hide this rule below or tell John / Katherine */
/*.single-property #property-detail-wrap .detail-wrap { background: none; padding: 0; }*/

/* "Details" - more room for "Hybrid Greenhouse" etc */
.single-property .block-content-wrap .detail-wrap li span { max-width: 200px; }


/* Location/Address section - make 1 col because ugly otherwise */
.single-property .property-address-wrap .list-2-cols { -webkit-columns: 1; -moz-columns:  1; columns: 1; }
/* Address line - allow it to be wider so looks better; needs padding and more room via 2 lines below */
.single-property .property-address-wrap .list-2-cols li.detail-address strong { padding-right: 20px; }
.single-property .property-address-wrap .list-2-cols li.detail-address span { max-width: 100%; line-height: 1.5em; }


/* "Licenses That Apply..." section - hide this if not on Property page because only applies to Property pages */
.single-property .gro-property-features-wrap--product,
.single-property .gro-property-features-wrap--service { display: none; }

/* "Licenses That Apply..." section - 2 cols looks better than 3, less vertical space here */
.single-property .property-features-wrap .list-3-cols { -webkit-columns: 2; -moz-columns:  2; columns: 2; }
.single-property .property-features-wrap .list-3-cols li { padding-top: 4px; padding-bottom: 4px; line-height: 1.5; }



/* ---------------------------------- */
/* contact modal (for mobile) - hide stuff */
/* ---------------------------------- */
#mobile-property-form .agent-name .houzez-icon { display: none; }
#mobile-property-form .agent-link { display: none; }



/* ---------------------------------- */
/* "Similar Listings" section
/* ---------------------------------- */
#similar-listings-wrap .item-listing-wrap .item-price .gro-user-not-verified { display: none; }



@media only screen and (max-width: 600px)
{
  /* Details section - make the text fit better (prevent text from getting too wide to fit etc) */
  .single-property .block-content-wrap .list-1-cols li { page-break-inside: auto; break-inside: auto; line-height: 28px; align-items: center; /* so the right side is vertically centered compared to the left because the left is sometimes two lines */ }
  .single-property .block-content-wrap .detail-wrap li strong { white-space: normal; padding-right: 10px; /* prevent left side (like "Volume Available") from touching right side ("28g" or whatever)" */ }

  /* "Licenses That Apply..." section 1 col now */
  .single-property .property-features-wrap .list-3-cols { -webkit-columns: 1; -moz-columns:  1; columns: 1; }

}




/* -------------------------------------------------------------------------- */
/* Company page (Agency page)
/* -------------------------------------------------------------------------- */

/* Contact header - make it smaller  */
body.single-houzez_agency .agent-profile-buttons h2 { font-size: 20px; } /* in "main section" */
body.single-houzez_agency .agent-contacts-wrap h2 { font-size: 18px; } /* in sidebar  */


/* Contact in sidebar */
body.single-houzez_agency .agent-contacts-wrap p { font-size: 18px; text-align: left; }


/* hide the area with Types/Status/Cities */
body.single-houzez_agency .agent-stats-wrap { display: none; }

/*body.single-houzez_agency .agent-contacts-wrap { display: none; }*/





/* -------------------------------------------------------------------------- */
/* Search Results page
/* -------------------------------------------------------------------------- */


/* page header */
body.page-template-template-search .page-title h1 { font-family: FuturaRoundDemi; font-size: 36px; }

ul.item-amenities li.h-thc-content-minimum,
ul.item-amenities li.h-cbd-content-minimum { margin-right: 0; }

/* "Save Search" button - no green border */
.save-search-btn,
.save-search-btn:hover,
.save-search-btn:active { border: none !important; }


/* square-off all the rounded borders */
.card,                                                  /* the wrapper around each listing (each result) */
.list-view .item-wrap,                                  /* inner wrapper around each listing (each result) */
.list-view .item-wrap.item-wrap-no-frame .hover-effect, /* the image */
.label { border-radius: 0; }                            /* labels like "PRODUCT: FLOWER" */

/* grid view - square off the rounded borders */
.grid-view .item-wrap.item-wrap-no-frame .hover-effect { border-radius: 0; }

/* make all images same width */
.list-view .item-header { flex-shrink: 0; }

/* "FEATURED" label - put in proper spot */
.card .label-featured { position: relative; top: auto; left: auto; margin-right: 6px; }

/* "DETAILS" button */
.card-deck .btn-item { text-transform: uppercase; line-height: 36px; height: 38px; padding: 0 18px; font-size: 16px; }

/* address (Regina, Sask... etc) */
.card .item-address { margin-bottom: 4px; }





/* -------------------------------------------------------------------------- */
/* Category page / categories page / "custom taxonomy page" (and the "All Listings" page)
/* -------------------------------------------------------------------------- */

/* page header */
body.archive .page-title h1,
body.page-template-template-listing-list-v1-fullwidth .page-title h1 { font-family: FuturaRoundDemi; font-size: 36px; }











/* -------------------------------------------------------------------------- */
/* Front End PM styles that are used everywhere that we include Front End PM
/* -------------------------------------------------------------------------- */

/* "You have 1 message unread" - notification bar */
#fep-notification-bar { border-radius: 0; border: none; background-color: var(--primary-button-background); font-size: 16px; }

/* "You have 1 message unread - "x" button - better vertical centering */
.fep-notification-bar .fep-notice-dismiss { padding: 10px 12px 14px; }

#fep-notification-bar .fep_unread_message_count_text { color: white; }

/* no border around header section (with gravatar and "Welcome: user" */
#fep-header { border: none; margin-bottom: 26px; }


/* buttons - more space between buttons and the content below */
#fep-menu { margin-bottom: 20px; }

/* buttons - no border */
#fep-menu .fep-button,
.fep-button,
.fep-button-active { border-radius: 0; border: none; }

/* buttons - colours */
.fep-button,
.fep-button:hover,
.fep-button-active { color: white !important; font-size: 13px !important; }

/* buttons - "normal" button bg color and "active" button bg color are set in Front End PM Settings > Appearance, but for "hover" to be different we must override here */
.fep-button:hover { background-color: var(--primary-button-background-hover); }

/* button - "Message box (1)" - space before "(" */
#fep-menu-message_box .fep_unread_message_count_hide_if_zero:nth-child(1) { margin-left: 6px; }

/* button - "Message box (1)" - make the (1) white, because red looks bad */
#fep-menu-message_box .fep-font-red { color: white; }



/* headings */
#fep-content > h2 { font-size: 24px; font-weight: bold; margin-bottom: 2px; }

/* labels */
.front-end-pm-form label { padding: 12px 0 6px; } /* "Subject" and "Message" */

/* no borders or rounded edges in message list */
.fep-message .fep-message-title-heading,
.fep-per-message .fep-message-title { border: none; border-radius: 0;  }

/* footer - hid it completely (still has borders that show otherwise) */
#fep-footer { display: none; }


/* "Message sent successfully" */
.fep-success { color: white; background-color: green; border-color: green; }


/* all messages - no roundedness */
.fep-error,
.fep-success,
.fep-wp-error { border-radius: 0; }

/* ---------------------------------- */
/* left sidebar */
/* ---------------------------------- */

/* no row bg because that's ugly */
#fep-content-single-sidebar .fep-odd-even > div:nth-child(odd),
#fep-content-single-sidebar .fep-odd-even > div:nth-child(even) { background: none; }

#fep-content-single-sidebar #fep-content-single-heads .fep-message-head:hover,
#fep-content-single-sidebar #fep-content-single-heads .fep-message-head-active { background-color: #F2F7FC; }






/* -------------------------------------------------------------------------- */
/* User Dashboard
/* -------------------------------------------------------------------------- */

/* left sidebar - needs to push down if Front End PM unread messages notification bar showing */
#fep-notification-bar:not(.fep-hide) ~ #main-wrap > .dashboard-side-wrap .dashboard-logo-wrap { margin-top: 52px; }







/* -------------------------------------------------------------------------- */
/* User Dashboard - Messages page
/* -------------------------------------------------------------------------- */


/* Front End PM - hide the New Message button because we don't want users to be contacting each other here, only via contact forms on listing or company pages */
#fep-menu #fep-menu-newmessage { display: none; }

/* Front End PM - hide the Toggle Messages button (we show all messages by default via code in functions.php, that button is just clutter) */
.fep-message-toggle-all { display: none; }


/* "Participants:" */
.fep-message-title-heading.participants { margin-bottom: 0; font-size: 16px; }






/* -------------------------------------------------------------------------- */
/* User Dashboard - Listings page
/* -------------------------------------------------------------------------- */

/* "Approved" or "ON HOLD" badge (and other "badges") */
.dashboard-table-properties .badge-info,
.dashboard-table-properties .badge-success { border-radius: 0; padding: 8px 12px; }


/* Actions button */
.dashboard-table-properties button.dropdown-toggle:hover,
.dashboard-table-properties button.dropdown-toggle:focus { color: white; background-color: var(--primary-button-background-hover) !important; }

/* Actions dropdown buttons (like "EDIT" and "DELETE") */
.dashboard-table-properties .dropdown-item.active, 
.dashboard-table-properties .dropdown-item:active { background-color: var(--primary-button-background-hover) !important; }






/* -------------------------------------------------------------------------- */
/* User Dashboard - Create A Listing page (the portal where you click one of three listing-types to create)
/* -------------------------------------------------------------------------- */

.gro-create-listing__cards { display: flex; flex-flow: row wrap; justify-content: space-between; max-width: 800px; }


.gro-create-listing__card { display: flex; flex-flow: column wrap; justify-content: space-between; align-items: stretch; box-shadow: 0px 0px 10px 4px rgba(0 0 0 / 8%); width: 32%; padding: 20px; }

/* if user isn't verified, grey-out some options and show it's not link */
.gro-create-listing__card--user-not-verified { filter: grayscale(1); opacity: 0.8; }
.gro-create-listing__card--user-not-verified,
.gro-create-listing__card--user-not-verified .btn { cursor: default !important; }
.gro-create-listing__card--user-not-verified .btn:hover { background-color: var(--primary-button-background); }

/* card - focus */
.gro-create-listing__card:focus { box-shadow: 0px 0px 10px 4px rgb(0, 0, 0, 8%); }

/* card - hover over */
.gro-create-listing__card:hover { box-shadow: 0px 0px 10px 4px rgba(0 0 0 / 8%); }
.gro-create-listing__card:not(.gro-create-listing__card--user-not-verified):hover .btn { background-color: var(--primary-button-background-hover); }
.gro-create-listing__card:not(.gro-create-listing__card--user-not-verified):hover img { animation: card_img_animation .1s forwards; }
@keyframes card_img_animation
{
    to { max-height: 76px; margin: 2px; }
}

/* card - inner elements */
.gro-create-listing__whitespace { height: 40px; }
.gro-create-listing__card img { max-height: 70px; margin: 5px; }

/* card - inner - buttons */
.gro-create-listing__card-btn { margin-bottom: 0; }
.gro-create-listing__card-btn--product { background-color: var(--product-color) !important; border-color: var(--product-color) !important; }
.gro-create-listing__card-btn--property { background-color: var(--property-color) !important; border-color: var(--property-color) !important; }
.gro-create-listing__card-btn--service { background-color: var(--service-color) !important; border-color: var(--service-color) !important; }


.gro-create-listing__verified-accounts-message {max-width: 800px;  margin-top: 30px; background-color: #e8e8e8; /* was #f3f5f4 on mockup but that's too similar to the greyish bg already present in user dashboard */ padding: 20px; }
.gro-create-listing__verified-accounts-message h4 { color: #d0b400; font-size: 20px; margin-bottom: 2px; }
.gro-create-listing__verified-accounts-message p { margin-bottom: 0; font-weight: bold; line-height: 1.4em; }



/* if user not logged in, modify the style a bit... */

/* spacing below the block */
.gro-create-listing__container--user-not-logged-in { margin-bottom: 80px; }

/* Create a Listing heading */
.gro-create-listing__heading-for-logged-out-users { max-width: 800px; margin: 0 auto 30px; font-size: 24px; font-family: "Quicksand"; }

/* center things  */
.gro-create-listing__container--user-not-logged-in .gro-create-listing__cards,
.gro-create-listing__container--user-not-logged-in .gro-create-listing__verified-accounts-message { margin-left: auto; margin-right: auto; }


@media only screen and (max-width: 800px)
{
    .gro-create-listing__cards { display: flex; flex-flow: column nowrap; }
    .gro-create-listing__card { width: 100%; max-width: 320px; margin: 10px auto 10px; }
}



/* ---------------------------------- */
/* User Dashboard - Create A Listing page - the "Verified Accounts Only" modal
/* ---------------------------------- */

.gro-modal { display: none; z-index: 9999; position: fixed; top: 0; left: 0; z-index: 1050; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0; background-color: rgba(0, 0, 0, 0.5); }

.gro-modal.is-showing { overflow-x: hidden; overflow-y: auto; display: block; }

.gro-modal__inner { max-width: 430px; position: relative; width: auto; margin: .5rem; pointer-events: none; }

.gro-modal.is-showing .gro-modal__inner { -webkit-transform: none; transform: none; }

.gro-modal__content { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; pointer-events: auto; background-color: #e0ce38; background-clip: padding-box; borders: 1px solid rgba(0,0,0,.2); border-radius: .3rem; outline: 0; }

.gro-modal__header { overflow: hidden; border: none; border-radius: 4px 4px 0 0; display: flex; align-items: flex-start; justify-content: flex-end; }

.gro-modal__close { padding: 15px 20px; color: #fff; opacity: 1; text-shadow: none; padding-top: 2px; padding-bottom: 10px; float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; background: none; border: none; font-family: 'Roboto'; font-weight: 100 !important; font-size: 44px !important; }

.gro-modal__body { padding: 0 30px 30px; position: relative; flex: 1 1 auto; }


.gro-modal__row { display: flex; flex-flow: row wrap; }
.gro-modal__row--image-and-heading { justify-content: center; align-items: center; }
.gro-modal__row--paragraph { padding: 30px 0; }
.gro-modal__row--buttons { justify-content: space-between; }

/* image-and-heading (top row content) */
.gro-modal__image-container { flex: 0 0 30%; margin-right: 10px; }
.gro-modal__image-container img { max-width: 100%; }
.gro-modal__heading { flex: 0 0 30%; margin-left: 10px; font-family: "FuturaRoundDemi"; }

/* middle row and bottom row content */
.gro-modal__paragraph { margin: 0; text-align: center; font-weight: 600; font-size: 18px; line-height: 1.4em; }
.gro-modal__button { flex: 0 0 48%; border: none; background-color: #1a322f; color: white; line-height: 40px; font-size: 15px; }


@media (min-width: 576px)
{
    .gro-modal__inner { margin: 1.75rem auto; }
}





/* -------------------------------------------------------------------------- */
/* User Dashboard - Account Profile page
/* -------------------------------------------------------------------------- */

/* buttons - set active color and border etc */
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active,
.show>.btn-success.dropdown-toggle { background-color: var(--primary-button-background-active); border-color: var(--primary-button-background-active); }

.btn-success:not(:disabled):not(.disabled).active:focus,
.btn-success:not(:disabled):not(.disabled):active:focus,
.show>.btn-success.dropdown-toggle:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus { box-shadow: none; }


/* profile picture - make sure it's centered */
body.page-template-user_dashboard_profile #houzez_profile_photo { text-align: center; }

/* "Update Profile Picture" button and "Remove Profile Picture" button - allow multiline so we can always see all text in this button */
button#select_user_profile_photo,
button#gro-remove-profile-picture { white-space: normal; padding-top: 9px; padding-bottom: 9px; line-height: 23px; /* this keeps it same height as other buttons but means that when it's multi-line it won't be a huge ugly line-height */ }

/* Remove Picture Profile - don't show text under it until necessary (JS shows this when needed) */
.gro-remove-profile-picture-instructions { display: none; /*line-height: 1.2; margin-top: 10px; */}

/* "About me" text-box (edtior) - hide most buttons there like "ul" and "ol" etc (we only keep: bold, italic, link) */
#qt_about_toolbar input:not(#qt_about_strong):not(#qt_about_em):not(#qt_about_link) { display: none; }

/* "About me" text-box (edtior) buttons - no borders */
#qt_about_toolbar .button,
#qt_about_toolbar .button:hover { border: none !important; color: #fff !important; }

/* License section - hide the download button when user first uploads PDF because it doesn't work until after they save via the "Update Profile" button */
tr.attach-thumb td:nth-child(2) { display: none; }
tr.attach-thumb td.gro-my-profile__view-pdf { display: table-cell; }



/* License - delete "attachment" (delete PDF) button */
body.page-template-user_dashboard_profile .attachment-delete { background-color: #dc3545 !important; }
body.page-template-user_dashboard_profile .attachment-delete:hover { background-color: #c82333 !important; color: white !important; }







/* -------------------------------------------------------------------------- */
/* FAQ (Frequently Asked Questions) and Privacy Policy etc */
/* -------------------------------------------------------------------------- */

/* main page title */
body.page-template-template-page-no-sidebar .page-title-wrap h1 { font-family: 'FuturaRoundDemi'; }

/* page body subtitles (h2s) */
body.page-template-template-page-no-sidebar .page-content-wrap h2 { font-family: 'FuturaRoundDemi'; font-size: 22px; margin: 40px 0 20px; }
body.page-template-template-page-no-sidebar .page-content-wrap h2:first-child { margin-top: 0; }





/* -------------------------------------------------------------------------- */
/* Contact page
/* -------------------------------------------------------------------------- */

/* SUBMIT button */
.gro-contact-page .houzez-submit-button { background-color: var(--primary-button-background) !important; border: none !important; color: white !important; font-family: Quicksand; font-size: 15px; font-weight: 700; text-align: left; text-transform: uppercase; }

/* "Message Sent Successfully!" is a mess height-wise without this fix */
.ele-form-messages .alert { padding: 12px 10px 12px 10px; }


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* WP Admin area - this css file won't get loaded there, so we do this in functions.php
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */