@charset "UTF-8";
/*
    Style TOC
*/
/*!
    Theme Name:   TPJ Child Theme
    Theme URI:    https://www.thepropertyjungle.com/
    Description:  TPJ Child Theme
    Author:       The Property Jungle
    Author URI:   https://www.thepropertyjungle.com/
    Template:     hello-elementor
    Version:      1.2.12
    Text Domain:  tpj-child-theme
*/
/*
    Theme info is added here so that it is processed at line one
    of the generated style.css file. If included in style.scss,
    it is always dumped at the end of the processed SCSS and
    breaks the theme.
*/
/*
    Components TOC
*/
/*
    ATTENTION
    =========
    /blade-views/components/broadband-info.blade.php

    You can include a link in your property details that
    will display broadband speeds and providers for the 
    viewed property.

    You will need to add credentials to the TPJ Settings, then
    call the following include on your single-property.blade.php
    file:

    @include('components/broadband-info', [
        'property' => $property
    ])

    Service used: https://apidocs.broadbandavailability.uk/
*/
.tpj-broadband-info .loading-state {
  display: none;
}

/*
    ATTENTION
    =========
    /blade-views/components/google-places-elementor-popup.blade.php

    If you wish to use Google Places autocomplete within an Elementor
    Popup, please include the above file.

    Elementor Popups do not render within the page until you click
    on the link that triggers them. So additional JavaScript is
    required for Google Places to work correctly.
*/
/*
    ATTENTION
    =========
    /blade-views/components/google-places.blade.php

    Include file file in your search facility if you
    wish to use Google Places autocomplete.
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    Default Bootstrap colours to get up and running
*/
#leadPro-val textarea {
  height: 150px;
}
#leadPro-val .tpj-postcode-error {
  color: #dc3545;
  display: none;
}
#leadPro-val .tpj-form-general-errors p {
  color: #dc3545;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/global-load-more-info.blade.php

    This shows the number of properties loaded and total number
    of properties on a website for the 'Load More' search results.
*/
.tpj_load-more-info .tpj_total-properties-loaded {
  font-weight: bold;
}
.tpj_load-more-info .tpj_total-properties {
  font-weight: bold;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/load-more.blade.php

    If you want your search results to auto load, rather
    then be paginated, you can use load-more.

*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/location-autocomplete.blade.php

    The location autocomplete uses property address
    data within the website to autocomplete the
    address_keyword within your search form(s).

    This provides a similar function to Google Places
    without using any Google APIs. It does not include
    any geospacial functionality, so do not get it
    confused. This feature cannot use bounding boxes,
    centre points or radius features.
*/
.locations_popup {
  position: absolute;
  width: 100%;
  left: 0;
  top: 60px;
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px;
  border-color: #e9ecef;
  z-index: 100;
  -webkit-box-shadow: 5px 12px 16px -14px #343a40;
          box-shadow: 5px 12px 16px -14px #343a40;
}

.location_link:link {
  display: block;
  padding: 5px 10px;
  color: #0d6efd;
  text-decoration: none;
}
.location_link:link:hover, .location_link:link:focus, .location_link:link:active {
  color: #198754;
}

.selected_location_entry {
  background-color: #dee2e6;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/map-leafletjs-property-single.blade.php

    You can swap Google Maps out with a Leaflet Map using this component.

    Please see /blade-views/single-property.blade.php line: 106
*/
#leaflet-map-single-property-container {
  border: 1px solid #dee2e6;
  min-height: 450px;
  z-index: 1;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/map-leafletjs-search.blade.php

    You can swap Google Maps out with a Leaflet Map using this component
    for your map search page.
*/
#leaflet-map-container {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  height: 600px;
}
#leaflet-map-container .tpj_load_info {
  position: absolute;
  height: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  z-index: 1;
}
#leaflet-map-container .tpj_map_no_results {
  position: absolute;
  height: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  z-index: 1;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/map-properties-search.blade.php

    This is the default for Google Map search results.
*/
.search-map-results {
  position: relative;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  height: 600px;
}
.search-map-results .tpj_load_info {
  position: absolute;
  height: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 100%;
  z-index: 1;
}
.search-map-results .tpj_map_no_results {
  position: absolute;
  height: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 100%;
  z-index: 1;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /src/scss/components/map-property-single-embedded.scss

    You can use this component in your single-property.blade.php
    file instead of /blade-views/components/map-property-single.blade.php

    This file will use the standard Google Maps iFrame embed method.
*/
.property-map-embedded {
  border: 1px solid #dee2e6;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/map-property-single.blade.php

    This is used on single-property.blade.php to
    show a Google Map using the properties
    latitude and longitude data.
*/
.property-map {
  border: 1px solid #dee2e6;
  min-height: 450px;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/mortgage-calculator.blade.php

    You can include this in your /blade-views/single-property.blade.php
    file using the @include method below:

    @include('components/mortgage-calculator', [
        'loan_amount' => 200000, 
        'length_of_loan_in_years' => 25, 
        'interest_rate' => 2.9, 
        'autocalculate_if_preffield' => true, 
        'use_inline_currency_format_on_load' => false, // override default
        'use_inline_currency_format' => false, // override default
        'use_currency_symbol' => '£', // override default
    ])
*/
.mortgage_calculator_success {
  background-color: rgba(25, 135, 84, 0.3);
  padding: 20px;
}
#mortgage_calculator_error {
  background-color: rgba(220, 53, 69, 0.3);
  padding: 20px;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/multiple-property-type-select.blade.php

    This component will add an input in your search include that
    looks like a select element. It will allow the end-user to select
    multiple property types to search for in a nicely styled feature.
*/
.tpj-multiple-property-select {
  min-width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.tpj-mp-types-ui {
  position: relative;
}

.tpj-select-types {
  border: solid 1px #cccccc;
  min-height: 20px;
  border-radius: 4px;
  padding: 7px 15px;
  padding-right: 25px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 35px;
  z-index: 10;
  cursor: pointer;
}

.tpj-select-types-placeholder {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: 7px 15px;
  color: #cccccc;
  z-index: 5;
}

.tpj-pt-selected-item {
  border: 1px #e9e9eb solid;
  background-color: #f4f4f5;
  color: #909399;
  border-radius: 4px;
  padding: 0px 9px;
  cursor: default;
}

.tpj-pt-selected-item {
  margin-right: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.p-type-title {
  margin-right: 8px;
}

.p-type-close {
  background: #c0c4cc;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  font-size: 0.6rem;
}

.p-type-close:hover {
  background: #bdbfc2;
}

.tpj-mp-types-arrow {
  position: absolute;
  top: 7px;
  right: 7px;
  color: #828282;
}

.tpj-mp-types-list {
  position: absolute;
  z-index: 100;
  width: 100%;
  top: 40px;
  left: 0;
  max-height: 250px;
  overflow-y: auto;
  padding-top: 10px;
  border: solid 1px #cccccc;
  background: #ffffff;
  border-radius: 4px;
  display: none;
}

.tpj-mp-types-list.active {
  display: block;
}

.mp-types-entry {
  padding: 5px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  cursor: pointer;
}

.mp-types-entry .entry-checked {
  color: green;
  display: none;
}

.mp-types-entry.selected .entry-checked {
  display: block;
}

.mp-types-entry.selected .entry-label {
  color: #409eff;
}

.mp-types-entry:hover {
  background: #f5f7fa;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/qr.blade.php

    With this file, you can display a QR code
    on your /blade-views/single-property.blade.php file.

    Check the TPJ Settings within WP Admin for style and
    logo options.
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/rental-yield-calculator-sliders.blade.php

    You can use this rental yield calculator on any
    page by shortcode or @include on Blade templates.

    [blade_dynamic_shortcode view_name="components/rental-yield-calculator-sliders"]
*/
.rentalYield-estimate {
  background-color: #e9ecef;
  padding: 20px;
}
.rentalYield-estimate p {
  text-align: center;
}
.rentalYield-estimate .tpj_estimated_gross_rental {
  font-weight: bold;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/shortlist-sidebar.blade.php

    You can include this file using a shortcode
    or @include in your Blade template to display
    the properties shortlist on your page.
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /src/scss/components/shortlist.scss

    You can create a page in your website and
    display a shortlist within it using a shortcode.

    [blade_dynamic_shortcode view_name="components/shortlist"]
*/
#tpj-shortlist h1 {
  font-size: 1.6rem;
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  border-bottom: 0.1rem solid rgba(112, 112, 112, 0.19);
}
@media (max-width: 576px) {
  #tpj-shortlist h1 {
    text-align: center;
  }
}

/* ------------------------------------------------------------ *\
	section-search - the div called section search is a class 
    added to the container on the wordpress page which holds the shortcode
\* ------------------------------------------------------------ */
.section-shortlist {
  position: relative;
  padding: 3.8rem 0 5.5rem;
}
.section-shortlist:before {
  content: "";
  width: 100%;
  height: 26rem;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background-color: var(--e-global-color-accent);
}
@media (max-width: 767px) {
  .section-shortlist:before {
    height: 39.5rem;
  }
}
.section-shortlist .section__inner {
  position: relative;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/transportation-stations.blade.php

    You can @include this file into your /blade-views/single-property.blade.php
    to display nearest tube and rail stations.
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    This is a universal video embed component.
    The idea is to remove any issues with varying
    URLs from both YouTube and Vimeo.

    You can use it by including the component and
    adding some parameters, for example:

    @include('components/video-embed', [
        'videoUrl' => $property['virtual_tours'][0]['media_url'],
        'title' => $property['Address']['display_address']
    ])
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
.viewing-gform .viewing-gform__address {
  color: #ffffff;
  font-family: var(--e-global-typography-primary-font-family), Sans-serif;
  font-size: var(--e-global-typography-c4c7b85-font-size);
  font-weight: var(--e-global-typography-c4c7b85-font-weight);
  text-transform: var(--e-global-typography-c4c7b85-text-transform);
  line-height: var(--e-global-typography-c4c7b85-line-height);
  letter-spacing: var(--e-global-typography-c4c7b85-letter-spacing);
  word-spacing: var(--e-global-typography-c4c7b85-word-spacing);
  text-align: center;
  padding: 0 1em;
}
.viewing-gform .viewing-gform__heading {
  color: var(--e-global-color-primary);
  font-family: var(--e-global-typography-primary-font-family), Sans-serif;
  font-size: var(--e-global-typography-e1876ea-font-size);
  font-weight: var(--e-global-typography-e1876ea-font-weight);
  text-transform: var(--e-global-typography-e1876ea-text-transform);
  line-height: var(--e-global-typography-e1876ea-line-height);
  letter-spacing: var(--e-global-typography-e1876ea-letter-spacing);
  word-spacing: var(--e-global-typography-e1876ea-word-spacing);
}
.viewing-gform .gform_wrapper.gravity-theme .gform_fields {
  grid-row-gap: 2.5em !important;
}
.viewing-gform h3.gsection_title {
  margin: 30px 0 20px 0;
}
.viewing-gform .form-subheads {
  text-align: center;
  padding: 5em 0;
  border: 0;
  position: relative;
  border-bottom: 0 !important;
}
.viewing-gform .form-subheads::after {
  content: "";
  width: 79px;
  border: 0;
  height: 2px;
  background: var(--e-global-color-22ddcc9);
  position: absolute;
  left: 45.5%;
  bottom: 0;
}
@media (max-width: 912px) {
  .viewing-gform .form-subheads::after {
    left: 42.5%;
    bottom: 0;
  }
}
@media (max-width: 767px) {
  .viewing-gform .form-subheads::after {
    left: 35%;
  }
}
.viewing-gform .form-subheads h3 {
  line-height: 2em !important;
  letter-spacing: 2px;
  font-size: 24px !important;
  font-weight: 800 !important;
  text-align: center;
  color: var(--e-global-color-22ddcc9) !important;
}
@media (max-width: 767px) {
  .viewing-gform .form-subheads h3 {
    line-height: 1.3em !important;
  }
}
.viewing-gform label.gfield_label {
  font-family: var(--e-global-typography-primary-font-family) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #333 !important;
  line-height: 1.44 !important;
}
.viewing-gform select,
.viewing-gform input[type=text],
.viewing-gform input[type=number],
.viewing-gform input[type=tel],
.viewing-gform input[type=email] {
  padding: 10px !important;
  margin-bottom: 3rem;
  border: 0 !important;
  border-radius: 0;
  background-color: #eee !important;
  font-size: 1.6rem;
  color: #333;
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
}
.viewing-gform textarea {
  padding: 3.4rem 1rem;
  margin-bottom: 3rem;
  border: 0;
  border-radius: 0;
  background: #eee !important;
  font-size: 1.6rem;
  color: #333;
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
}
.viewing-gform input[type=submit],
.viewing-gform .gform_button {
  padding: 1em 5em !important;
  background: var(--e-global-color-primary) !important;
  color: #fff !important;
  font-family: var(--e-global-typography-primary-font-family), Sans-serif !important;
  font-size: var(--e-global-typography-8e54566-font-size) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: var(--e-global-typography-8e54566-line-height) !important;
  letter-spacing: var(--e-global-typography-8e54566-letter-spacing) !important;
  word-spacing: var(--e-global-typography-8e54566-word-spacing) !important;
  fill: var(--e-global-color-secondary) !important;
  border: none !important;
  border-radius: 0 !important;
}
.viewing-gform input[type=submit]:hover,
.viewing-gform .gform_button:hover {
  color: #fff !important;
  background: var(--e-global-color-secondary) !important;
}
.viewing-gform .gchoice {
  margin-bottom: 1.5em;
}
.viewing-gform .gchoice .gform-field-label::before {
  color: var(--e-global-color-22ddcc9);
  margin-bottom: 5px;
}
.viewing-gform .gfield_description {
  margin-bottom: 2rem !important;
  font-size: 1.5rem !important;
  font-family: var(--e-global-typography-primary-font-family), Sans-serif !important;
  color: #333 !important;
  font-weight: 400 !important;
}
.viewing-gform .gfield_consent_label {
  font-size: 1rem !important;
  font-family: var(--e-global-typography-primary-font-family), Sans-serif !important;
  color: #333 !important;
  font-weight: 400 !important;
}
.viewing-gform .gfield--type-html p {
  font-size: 1rem !important;
  font-family: var(--e-global-typography-primary-font-family), Sans-serif !important;
  color: #333 !important;
  font-weight: 400 !important;
}
.viewing-gform legend.gfield_label {
  font-family: var(--e-global-typography-primary-font-family), Sans-serif !important;
  margin-bottom: 2rem !important;
  font-weight: 700 !important;
}
.viewing-gform .card.card--gdpr {
  -webkit-box-shadow: 0 0 0px rgba(0, 0, 0, 0);
          box-shadow: 0 0 0px rgba(0, 0, 0, 0);
  padding: 1.3rem 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}
.viewing-gform .card.card--gdpr .card-title {
  font-family: var(--e-global-typography-primary-font-family);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 800;
  margin-bottom: 1rem;
}
.viewing-gform .card.card--gdpr p.card-text {
  margin: 0 0 0.5rem 0;
}
.viewing-gform .card.card--gdpr label {
  margin: 0 !important;
}
.viewing-gform .card.card--gdpr .card-body {
  position: relative;
  padding: 0rem;
}
.viewing-gform .gform_wrapper.gravity-theme .gsection {
  border-bottom: none !important;
  padding: 0px !important;
}
.viewing-gform .gform_wrapper.gravity-theme .gfield_checkbox label {
  font-size: 1rem !important;
  font-weight: 400;
}
.viewing-gform .gform_wrapper.gravity-theme .gfield_label {
  font-weight: 400 !important;
}

/*
    Helpers TOC
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    Your place for CSS helpers and fixes.
*/
input[type=text],
input[type=email] {
  /*  Bootstrap 5 .form-control class
      looks different when applied on
      select and input elements. This
      normalises it.
  */
}
input[type=text].form-control,
input[type=email].form-control {
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  border-color: #dee2e6;
}

/*
    ATTENTION
    =========
    Overrides the parent themes default styles
    for all hrefs.
*/
a {
  text-decoration: none !important;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.lazy-load-html {
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.lazy-load-html.loaded {
  opacity: 1;
}

/*
    Pages TOC
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/page-branches.blade.php

    Use for styling your list of branches template.
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/page-developments.blade.php

    Used for displaying developments created 
    using the Developments editor within the
    websites WP Admin.
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/page-negotiators.blade.php

    Used for displaying negotiators created 
    by creating new users within the
    websites WP Admin.
*/
/*
    Partials TOC
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/cookies-policy.blade.php

    Default text for you to use on a dedicated
    page on your website.

    [blade_dynamic_shortcode view_name="partials/cookies-policy"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/copyright.blade.php

    The referenced file above can be used as a shortcode to
    easily add a copyright year and other company specific
    data on your website. The classes included will help you
    add your own custom styles.
*/
.tpj_copyright .tpj_copyright__currentYear {
  margin-right: 5px;
}
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    You can reference this partial in any Blade template
    or using a shortcode within other pages to show featured
    properties.

    [blade_featured_properties view_name="partials/featured-properties" instruction_type="Sale" max_featured_results="6"]
*/
.swiper.swiper__featured {
  padding-bottom: 3.8rem;
}
@media (max-width: 576px) {
  .swiper.swiper__featured {
    padding-bottom: 1.8rem !important;
  }
}
.swiper.swiper__featured .card {
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 0px;
  border-bottom: 1px solid #ccc;
}

.swiper-pagination.featured-swiper-pagination {
  bottom: 0 !important;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/grid-property.blade.php

    This partial controls the display of property
    data within the grid search results.
*/
.property-grid {
  position: relative;
}
.property-grid:hover, .property-grid:active, .property-grid:focus {
  -webkit-box-shadow: 0 0 9px rgb(216.75, 216.75, 216.75);
          box-shadow: 0 0 9px rgb(216.75, 216.75, 216.75);
}
.property-grid.property--featured {
  background-color: rgba(255, 193, 7, 0.3);
}
.property-grid .property__meta .property__address {
  font-family: var(--e-global-typography-secondary-font-family), Serif;
  font-weight: 300;
}
.property-grid .property__meta .property__price {
  font-weight: 300;
}
.property-grid .property__meta .property__price span {
  font-size: 1rem;
}
.property-grid .property__meta .property__rooms {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  margin-bottom: 1.3rem;
}
@media (max-width: 991px) {
  .property-grid .property__meta .property__rooms {
    margin-bottom: 1.4rem;
  }
}
@media (max-width: 767px) {
  .property-grid .property__meta .property__rooms {
    font-size: 0.8rem;
  }
}
@media (max-width: 576px) {
  .property-grid .property__meta .property__rooms {
    margin-bottom: 1.5rem;
  }
}
.property-grid .property__meta .property__rooms ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.property-grid .property__meta .property__rooms li {
  position: relative;
}
.property-grid .property__meta .property__rooms li + li {
  margin-left: 8px;
  padding-left: 8px;
}
.property-grid .property__meta .property__rooms li + li:before {
  content: "";
  width: 0.1rem;
  height: 1.4rem;
  background-color: var(--e-global-color-primary);
  opacity: 0.2;
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.property-grid .property__meta .list-card-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
}
@media (max-width: 1200px) {
  .property-grid .property__meta .list-card-btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.property-grid .property__meta .list-card-btns .shortlist__btns,
.property-grid .property__meta .list-card-btns .list-details-btn {
  font-style: normal;
  color: var(--e-global-color-primary);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.082em;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}
.property-grid .property__meta .list-card-btns .shortlist__btns:hover,
.property-grid .property__meta .list-card-btns .list-details-btn:hover {
  color: var(--e-global-color-secondary);
}
.property-grid .property__meta .list-card-btns .shortlist__btns svg,
.property-grid .property__meta .list-card-btns .list-details-btn svg {
  width: 13px;
  height: 13px;
  margin-bottom: 3px;
  margin-right: 2px;
  fill: var(--e-global-color-primary);
}
.property-grid .property__meta .list-card-btns .shortlist__btns i,
.property-grid .property__meta .list-card-btns .list-details-btn i {
  font-style: normal !important;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/leadpro-valuation-success.blade.php

    This is the success message from a successful LeadPro
    Online valuation request.
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/list-property.blade.php

    This partial controls the display of property
    data within the list search results.
*/
.property {
  margin-bottom: 2rem;
  border-bottom: 0.1rem solid rgba(112, 112, 112, 0.19);
}
.property .card {
  border: none;
  border-radius: 0px;
  position: relative;
}
.property .property__image {
  margin-bottom: 1.7rem;
  overflow: hidden;
}
.property .property__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
}
@media (max-width: 991px) {
  .property .property__image {
    margin-bottom: 2rem;
  }
}
@media (max-width: 767px) {
  .property .property__image {
    margin-bottom: 1.7rem;
    height: auto;
  }
}
@media (max-width: 576px) {
  .property .property__image {
    margin-bottom: 1.7rem;
    height: auto;
  }
}
.property .property__body {
  background-color: #045642;
  margin-top: 2rem;
  position: relative;
  display: block;
  padding: 2rem 8.2rem 2rem 6.1rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: white;
}
@media (max-width: 991px) {
  .property .property__body {
    margin-top: 0rem;
    padding: 0rem 2rem 3rem 2rem;
  }
}
@media (max-width: 767px) {
  .property .property__body {
    padding: 1.7rem 1rem 2.3rem 1rem;
  }
}
@media (max-width: 576px) {
  .property .property__body {
    padding: 1rem 1rem 0.7rem;
  }
}
.property .property__meta .property__address {
  font-family: var(--e-global-typography-secondary-font-family), Serif;
  font-weight: 300;
}
.property .property__meta .property__price {
  font-weight: 300;
}
.property .property__meta .property__price span {
  font-size: 1rem;
}
.property .property__meta .property__summary {
  margin: 1.5rem 0;
}
.property .property__meta .property__rooms {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  margin-bottom: 1.3rem;
}
@media (max-width: 991px) {
  .property .property__meta .property__rooms {
    margin-bottom: 1.4rem;
  }
}
@media (max-width: 767px) {
  .property .property__meta .property__rooms {
    font-size: 0.8rem;
  }
}
@media (max-width: 576px) {
  .property .property__meta .property__rooms {
    margin-bottom: 1.5rem;
  }
}
.property .property__meta .property__rooms ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.property .property__meta .property__rooms li {
  position: relative;
}
.property .property__meta .property__rooms li + li {
  margin-left: 8px;
  padding-left: 8px;
}
.property .property__meta .property__rooms li + li:before {
  content: "";
  width: 0.1rem;
  height: 1.4rem;
  background-color: var(--e-global-color-primary);
  opacity: 0.2;
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.property .property__meta .list-card-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
}
@media (max-width: 1200px) {
  .property .property__meta .list-card-btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.property .property__meta .list-card-btns .shortlist__btns,
.property .property__meta .list-card-btns .list-details-btn {
  font-style: normal;
  color: var(--e-global-color-primary);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.082em;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}
.property .property__meta .list-card-btns .shortlist__btns:hover,
.property .property__meta .list-card-btns .list-details-btn:hover {
  color: var(--e-global-color-secondary);
}
.property .property__meta .list-card-btns .shortlist__btns svg,
.property .property__meta .list-card-btns .list-details-btn svg {
  width: 13px;
  height: 13px;
  margin-bottom: 3px;
  margin-right: 2px;
  fill: var(--e-global-color-primary);
}
.property .property__meta .list-card-btns .shortlist__btns i,
.property .property__meta .list-card-btns .list-details-btn i {
  font-style: normal !important;
}

/* ------------------------------------------------------------ *\
	section-search - the div called section search is a class 
    added to the container on the wordpress page which holds the shortcode
\* ------------------------------------------------------------ */
.section-search {
  position: relative;
  padding: 3.8rem 0 5.5rem;
}
.section-search:before {
  content: "";
  width: 100%;
  height: 36rem;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background-color: #fff;
}
@media (max-width: 767px) {
  .section-search:before {
    height: 39.5rem;
  }
}
.section-search .section__inner {
  position: relative;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/privacy-policy.blade.php

    Default text for you to use on a dedicated
    page on your website.

    [blade_dynamic_shortcode view_name="partials/privacy-policy"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/recent-properties.blade.php

    By default, search results will show the most recently added properties
    in descending order. To display the most recently added properties as a
    section on your website, you can use the following shortcode.

    [blade_list_search results_per_page="3" instruction_type="sale" view_name="partials/recent-properties"]

    Please see https://tpjwiki.wpengine.com/wordpress/basic-search-query-parameters/ for a list of search parameters that you can use in the above shortcode.
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/related-properties.blade.php

    You can include file file into /blade-views/single-property.blade.php
    to show related properties to the one being viewed.
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/search-core-example.blade.php

    Please make sure you have set your search pages
    within your website and created your Global
    Dynamic Options.

    You'll need to add your main search page to
    the forms action="" attribute.

    E.g. {{ $global_options['dynamic_options']['search_list']['permalink'] }}

    If in doubt, please refer to:
    https://tpjwiki.wpengine.com/wordpress/tpj-plugin-global-options-explained/
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
        ATTENTION
        =========
        /blade-views/partials/search-elementor-popup-example.blade.php

        This search form is specific to displaying within an Elementor
        popup. If you plan to use a search form in an Elementor popup
        on your website, this is the one to use. Elementor injects
        popups when required, and does not always render them in the
        HTML. This means it can affect JavaScript behaviour.

        This is a starter search form to get you going, it does not
        include all possible query variables, but it does cover most
        use cases.
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/search-filters.blade.php

    You can sort your search results using these options.
    Just make sure your search form has an hidden input
    for the 'orderby' name.
*/
#orderby {
  border: 1px solid #ccc;
  width: 100% !important;
  border-radius: 0px;
  text-transform: uppercase;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/search-views.blade.php

    If your website is using multiple views for the
    search results, you can build a group of links.
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/terms-of-use.scss

    Default text for you to use on a dedicated
    page on your website.

    [blade_dynamic_shortcode view_name="partials/terms-of-use"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
        ATTENTION
        =========
        /blade-views/partials/search-modal.blade.php

        This search form is specific to displaying within an Elementor
        popup. If you plan to use a search form in an Elementor popup
        on your website, this is the one to use. Elementor injects
        popups when required, and does not always render them in the
        HTML. This means it can affect JavaScript behaviour.

        This is a starter search form to get you going, it does not
        include all possible query variables, but it does cover most
        use cases.
*/
h4.property-search-title {
  position: relative;
  color: #fff;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 3rem;
  line-height: 1;
  font-family: var(--e-global-typography-secondary-font-family), Serif !important;
}
@media (max-width: 767px) {
  h4.property-search-title {
    margin-bottom: 2rem;
  }
}

.form-group {
  margin: 10px 0;
}

#search-form--modal {
  position: relative;
  padding: 10% 10px 10px 10px;
  color: white;
  font-family: var(--e-global-typography-primary-font-family), Sans-serif !important;
}
#search-form--modal span {
  color: white;
}
#search-form--modal button[type=submit], #search-form--modal a {
  width: 100%;
  background: transparent;
  border: 2px #fff solid;
}
#search-form--modal button[type=submit]:hover, #search-form--modal a:hover {
  border: 2px #fff solid;
  background: var(--e-global-color-primary);
}
#search-form--modal .nav-tabs {
  border: none;
}
#search-form--modal .nav-tabs .nav-link {
  background: none;
  color: white;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: rgba(255, 255, 255, 0) solid 2px;
  padding: 0 0rem 1rem 0rem !important;
  margin: 0 1.5rem 2rem 1.5rem !important;
}
@media (max-width: 767px) {
  #search-form--modal .nav-tabs .nav-link {
    padding: 10px;
  }
}
#search-form--modal .nav-tabs .nav-link.active {
  color: white;
  border-bottom: rgba(255, 255, 255, 0.5) solid 2px;
}
#search-form--modal .nav-tabs #sales-tab {
  float: right;
}
#search-form--modal input[type=text]::-webkit-input-placeholder {
  border-radius: 0;
  background: transparent;
  color: white;
}
#search-form--modal input[type=text]::-moz-placeholder {
  border-radius: 0;
  background: transparent;
  color: white;
}
#search-form--modal input[type=text]:-ms-input-placeholder {
  border-radius: 0;
  background: transparent;
  color: white;
}
#search-form--modal input[type=text]::-ms-input-placeholder {
  border-radius: 0;
  background: transparent;
  color: white;
}
#search-form--modal select, #search-form--modal input[type=text], #search-form--modal input[type=text]::placeholder {
  border-radius: 0;
  background: transparent;
  color: white;
}
#search-form--modal select, #search-form--modal input[type=text] {
  border: none;
  background: rgba(0, 0, 0, 0.09);
  padding: 10px;
}
#search-form--modal option {
  background: white;
  color: black;
}
#search-form--modal .icon__search {
  width: 1.2rem;
  fill: white;
}

.sales-showstc, .lettings-showstc {
  width: 80px;
  height: 26px;
  background: transparent;
  margin-left: 15px;
  position: relative;
  border-radius: 50px;
  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
          box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.sales-showstc:after, .lettings-showstc:after {
  content: "OFF";
  color: #fff;
  position: absolute;
  right: 10px;
  top: 2px;
  z-index: 0;
  font-size: 1rem;
}
.sales-showstc:before, .lettings-showstc:before {
  content: "ON";
  color: #fff;
  position: absolute;
  top: 2px;
  left: 10px;
  z-index: 0;
  font-size: 1rem;
}
.sales-showstc label, .lettings-showstc label {
  display: inline-block;
  width: 34px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  background: #fff;
  border-radius: 50px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.sales-showstc input[type=checkbox], .lettings-showstc input[type=checkbox] {
  visibility: hidden;
}
.sales-showstc input[type=checkbox]:checked + label, .lettings-showstc input[type=checkbox]:checked + label {
  left: 43px;
}

/*
    Partials Rest TOC
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/rest/map-info-window.blade.php

    This styles the info window on Google and LeafletJS
    property search maps.
*/
.map-info-window {
  width: 250px;
  text-align: center;
}
.map-info-window .map-info-window__image {
  border: 1px solid #dee2e6;
  margin-bottom: 10px;
}
.map-info-window .map-info-window__address {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.map-info-window .map-info-window__price {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.map-info-window .map-info-window__rooms {
  list-style: none;
  padding: 0;
}
.map-info-window .map-info-window__rooms li {
  display: inline-block;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/rest/property-rest-output.blade.php

    This partial is used to display your property search
    results in the load more search results.

    It's a copy of /blade-views/partials/list-property.blade.php.

    You can modify or use your own custom styles here.
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/rest/shortlist-property.blade.php

    This partial is used to display your shortlisted
    properties.

    It's a copy of /blade-views/partials/list-property.blade.php.

    You can modify or use your own custom styles here.
*/
/*
    Search Results TOC
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/search-results-corner-flash.blade.php

    A universal include file used across multiple
    templates.
*/
.property__corner-flash {
  position: absolute;
  z-index: 1;
  border-top-left-radius: 3px;
  border-bottom-right-radius: 3px;
  padding: 0.5rem;
  background-color: var(--e-global-color-primary);
  color: #ffffff;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/page-grid-search.blade.php

    Search results comprise of a series of partials.
    This file can be used to style all of your search
    results, or just the parent page.
*/
@media (max-width: 767px) {
  #tpj-grid-search h2.main-title {
    margin-bottom: 2rem;
  }
}
#tpj-grid-search .sort-options .line-divide {
  display: block;
  width: 1px;
  height: 20px;
  background: #ccc;
  margin: 0 10px 0 10px;
}
#tpj-grid-search .sort-options a {
  font-style: normal;
  text-decoration: none;
  text-transform: uppercase;
}
#tpj-grid-search .sort-options a.active {
  opacity: 0.4;
}
@media (max-width: 576px) {
  #tpj-grid-search .property-header-section {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}
#tpj-grid-search .view-btn {
  font-size: 16px;
  color: var(--e-global-color-primary);
  text-transform: uppercase;
}
#tpj-grid-search .view-btn:hover {
  color: var(--e-global-color-secondary);
}
#tpj-grid-search .view-btn svg {
  width: 16px;
  margin-bottom: 3px;
  margin-right: 5px;
  fill: var(--e-global-color-primary);
}
#tpj-grid-search .icon__search {
  width: 1.2rem;
  fill: var(--e-global-color-primary);
}
#tpj-grid-search .card {
  border: none;
  border-radius: 0px;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/page-list-search.blade.php

    Search results comprise of a series of partials.
    This file can be used to style all of your search
    results, or just the parent page.
*/
@media (max-width: 767px) {
  #tpj-list-search h2.main-title {
    margin-bottom: 2rem;
  }
}
#tpj-list-search .sort-options .line-divide {
  display: block;
  width: 1px;
  height: 20px;
  background: #ccc;
  margin: 0 10px 0 10px;
}
#tpj-list-search .sort-options a {
  font-style: normal;
  text-decoration: none;
  text-transform: uppercase;
}
#tpj-list-search .sort-options a.active {
  opacity: 0.4;
}
@media (max-width: 576px) {
  #tpj-list-search .property-header-section {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}
#tpj-list-search .view-btn {
  font-size: 16px;
  color: var(--e-global-color-primary);
  text-transform: uppercase;
}
#tpj-list-search .view-btn:hover {
  color: var(--e-global-color-secondary);
}
#tpj-list-search .view-btn svg {
  width: 16px;
  margin-bottom: 3px;
  margin-right: 5px;
  fill: var(--e-global-color-primary);
}
#tpj-list-search .icon__search {
  width: 1.2rem;
  fill: var(--e-global-color-primary);
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/map-leafletjs-search.blade.php

    This page is used for search results displayed on
    a LeafletJS Map. (https://leafletjs.com/)
*/
#leaflet-map-container {
  border: 1px solid #dee2e6;
  border-radius: 3px;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/components/map-properties-search.blade.php

    This page is used for search results displayed on
    a Google Map.

    Pay attention to the @include('components/map-properties-search').
    This is the component that displays your Google Map.
*/
#tpj-map-search h2.main-title {
  margin-bottom: 3rem;
}
#tpj-map-search .map_properties_no {
  font-weight: bold;
}
#tpj-map-search .sort-options .line-divide {
  display: block;
  width: 1px;
  height: 20px;
  background: #ccc;
  margin: 0 10px 0 10px;
}
#tpj-map-search .sort-options a {
  font-style: normal;
  text-decoration: none;
  text-transform: uppercase;
}
#tpj-map-search .sort-options a.active {
  opacity: 0.4;
}
@media (max-width: 576px) {
  #tpj-map-search .property-header-section {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  #tpj-map-search .icons-div {
    padding-bottom: 30px;
  }
}
#tpj-map-search .view-btn {
  font-size: 16px;
  color: var(--e-global-color-primary);
  text-transform: uppercase;
}
#tpj-map-search .view-btn:hover {
  color: var(--e-global-color-secondary);
}
#tpj-map-search .view-btn svg {
  width: 16px;
  margin-bottom: 3px;
  margin-right: 5px;
  fill: var(--e-global-color-primary);
}
#tpj-map-search .icon__search {
  width: 1.2rem;
  fill: var(--e-global-color-primary);
}
#tpj-map-search .tpj_draw_on_map_btn, #tpj-map-search .tpj_clear_drawing_on_map_btn, #tpj-map-search .tpj_exit_draw_btn, #tpj-map-search .tpj_clear_bounds_shape_btn {
  background: var(--e-global-color-primary);
  border: 1px solid var(--e-global-color-primary);
  padding: 10px;
  color: #fff !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.091em;
  font-size: 1rem;
}
#tpj-map-search .tpj_draw_on_map_btn:hover, #tpj-map-search .tpj_clear_drawing_on_map_btn:hover, #tpj-map-search .tpj_exit_draw_btn:hover, #tpj-map-search .tpj_clear_bounds_shape_btn:hover {
  background: var(--e-global-color-secondary);
  border: 1px solid var(--e-global-color-secondary);
  padding: 10px;
  text-transform: uppercase;
  letter-spacing: 0.091em;
  font-size: 1rem;
}

/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/partials/pagination.blade.php

    Default pagination partial for your property
    search results.
*/
.pagination {
  margin: 2.5em 0 !important;
}
.pagination .page-item .page-link {
  color: var(--e-global-color-primary);
  font-size: 1rem;
  border-radius: 0;
  padding: 0.5rem 1.5rem;
}
.pagination .page-item .page-link:hover, .pagination .page-item .page-link:focus, .pagination .page-item .page-link:active {
  background-color: var(--e-global-color-secondary);
  color: #ffffff;
}
.pagination .page-item .pagination-select {
  position: relative;
  border: 1px solid var(--bs-pagination-border-color);
  border-radius: 0;
  padding-right: 1rem;
  margin: 0;
  height: 46px;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
}
.pagination .page-item .pagination-select option {
  background-color: #ffffff;
  color: var(--e-global-color-primary);
  margin: 0;
}
.pagination .page-item .pagination-select option:checked {
  background-color: var(--e-global-color-secondary) !important;
  color: #ffffff !important;
}
.pagination .page-item .pagination-select:hover, .pagination .page-item .pagination-select:focus, .pagination .page-item .pagination-select:active {
  background-color: var(--e-global-color-secondary);
  color: #ffffff;
}
.pagination .page-item.active .page-link {
  z-index: 3;
  color: #ffffff;
  background-color: var(--e-global-color-primary);
  border-color: var(--e-global-color-primary);
}

/*
    Single Page Templates TOC
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/single-development.blade.php

    This template is used to display all the details
    and properties for a development.
*/
/*
    ATTENTION
    =========
    /blade-views/components/leadpro-valuation.blade.php

    Providing you have a valid LeadPro API Key added to
    your websites credentials, you can use their online
    valuation form and embed it on your pages using a
    simple shortcode.

    [blade_dynamic_shortcode view_name="components/lead-pro-valuation"]
*/
/*
    ATTENTION
    =========
    /blade-views/single-property.blade.php

    This is your property details page. Property
    details are made-up with partials and logic.
*/
/* ------------------------------------------------------------ *\
	top section
\* ------------------------------------------------------------ */
.property-top-container {
  padding-bottom: 3rem;
}
@media (max-width: 1200px) {
  .property-top-container {
    padding-bottom: 2rem;
  }
}
.property-top-container {
  background-color: var(--e-global-color-accent);
}
.property-top-container .property__medias {
  position: relative;
  display: block;
  z-index: 200;
}
.property-top-container .property__medias button.photos-button, .property-top-container .property__medias button.tours-button, .property-top-container .property__medias button.shortlist-button {
  font-size: 0.8rem;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--e-global-color-primary);
}
.property-top-container .property__medias button.photos-button svg, .property-top-container .property__medias button.tours-button svg, .property-top-container .property__medias button.shortlist-button svg {
  fill: var(--e-global-color-primary);
  width: 25px;
  height: 25px;
}
.property-top-container .property__medias button.photos-button {
  margin-left: 30px;
}
.property-top-container .property__medias button.photos-button:hover, .property-top-container .property__medias button.tours-button:hover, .property-top-container .property__medias button.shortlist-button:hover {
  background: transparent;
  color: var(--e-global-color-secondary);
}
.property-top-container .property__medias button.photos-button:hover svg, .property-top-container .property__medias button.tours-button:hover svg, .property-top-container .property__medias button.shortlist-button:hover svg {
  fill: var(--e-global-color-secondary);
}
.property-top-container .carousel-control-next, .property-top-container .carousel-control-prev {
  position: absolute;
  top: 45%;
  bottom: 45%;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 10%;
  padding: 0;
  color: #fff;
  text-align: center;
  background: none;
  border: 0;
  opacity: 0.5;
  -webkit-transition: opacity 0.15s ease;
  transition: opacity 0.15s ease;
}
@media (min-width: 1200px) {
  .property-top-container .property_details_top {
    padding-top: 100px;
    padding-left: 50px;
  }
}
@media (max-width: 1200px) {
  .property-top-container .property_details_top {
    padding-top: 50px;
  }
  .property-top-container .property_details_top h1.property__address {
    font-size: 1.6rem;
  }
}
.property-top-container .property__address {
  font-family: var(--e-global-typography-secondary-font-family), Serif;
  font-weight: 300;
  margin-bottom: 1.5rem;
}
.property-top-container h2.property__price {
  font-family: var(--e-global-typography-primary-font-family), Sans-serif !important;
  font-weight: 300;
}
.property-top-container h2.property__price span {
  font-size: 1rem;
}
.property-top-container .property__rooms {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  margin-bottom: 1.3rem;
}
@media (max-width: 1200px) {
  .property-top-container .property__rooms {
    font-size: 0.8rem;
  }
}
@media (max-width: 991px) {
  .property-top-container .property__rooms {
    margin-bottom: 1.4rem;
  }
}
@media (max-width: 767px) {
  .property-top-container .property__rooms {
    font-size: 0.8rem;
  }
}
@media (max-width: 576px) {
  .property-top-container .property__rooms {
    margin-bottom: 1.5rem;
  }
}
.property-top-container .property__rooms ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.property-top-container .property__rooms li {
  position: relative;
}
.property-top-container .property__rooms li + li {
  margin-left: 8px;
  padding-left: 8px;
}
.property-top-container .property__rooms li + li:before {
  content: "";
  width: 0.1rem;
  height: 1.4rem;
  background-color: var(--e-global-color-primary);
  opacity: 0.2;
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.property-top-container #property-details__actions ul {
  list-style: none;
  padding: 0.5rem 0;
  margin-bottom: 2rem;
  text-transform: uppercase;
  border-top: 1px solid #c2bfbb;
  border-bottom: 1px solid #c2bfbb;
}
@media (max-width: 1200px) {
  .property-top-container #property-details__actions ul {
    margin-bottom: 1rem;
    font-size: 0.9rem;
  }
}
.property-top-container #property-details__actions ul li {
  display: inline-block;
}
.property-top-container #property-details__actions ul li:first-of-type {
  margin: 0 1rem 0 0;
}
.property-top-container #property-details__actions ul li a {
  text-decoration: none;
}
.property-top-container #property-details__actions ul li a:hover, .property-top-container #property-details__actions ul li a:active, .property-top-container #property-details__actions ul li a:focus {
  color: var(--e-global-color-primary);
}
.property-top-container #property-details__actions ul li a svg {
  vertical-align: sub;
}
.property-top-container #property-details__actions svg {
  width: 13px;
  height: 13px;
  margin-bottom: 3px;
  margin-right: 2px;
  fill: var(--e-global-color-primary);
}
.property-top-container #property-details__cta {
  text-transform: uppercase;
}
.property-top-container #property-details__cta p {
  text-transform: none;
  font-family: var(--e-global-typography-secondary-font-family), Serif !important;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.property-top-container #property-details__cta a:first-of-type {
  display: block;
  font-size: 1.6rem;
  line-height: 1;
}
.property-top-container #property-details__cta a:first-of-type:hover, .property-top-container #property-details__cta a:first-of-type:active, .property-top-container #property-details__cta a:first-of-type:focus {
  color: var(--e-global-color-primary);
}
.property-top-container p.share {
  padding-top: 30px;
}
.property-top-container .social-media-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.property-top-container .social-media {
  border-radius: 0.4rem;
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
}
.property-top-container .social-media svg {
  height: 2rem;
  fill: #ffffff;
}
.property-top-container .social-media.social-media--facebook {
  background: rgb(59, 89, 152);
}
.property-top-container .social-media.social-media--x {
  background: #000;
}
.property-top-container .social-media.social-media--x svg {
  height: 1.1rem;
  margin-left: 8px;
}
.property-top-container .social-media.social-media--linkedin {
  background: rgb(0, 127, 177);
}
.property-top-container .social-media.social-media--whatsapp {
  background: rgb(37, 211, 102);
}

/* ------------------------------------------------------------ *\
	 end of top section
\* ------------------------------------------------------------ */
.btn-primary {
  color: #ffffff !important;
  border-radius: 0;
  border: 0.1rem solid transparent;
  background-color: var(--e-global-color-primary);
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background-color: transparent;
  border-color: var(--e-global-color-primary);
  color: var(--e-global-color-primary) !important;
}

.property-summary, .property-full-description {
  margin-bottom: 3rem;
}

#property-details, #property-map, #property-epc-floorplan {
  padding-top: 5rem;
}
@media (max-width: 576px) {
  #property-details, #property-map, #property-epc-floorplan {
    padding-top: 3rem;
  }
}
#property-details h2, #property-map h2, #property-epc-floorplan h2 {
  margin-bottom: 3rem;
}

#property__features {
  list-style: none;
  padding: 0;
  margin: 3em 0;
}
#property__features li {
  margin: 1em 0;
  padding: 0;
  font-family: var(--e-global-typography-primary-font-family);
  list-style: none;
  font-weight: 500;
}
#property__features li svg {
  background-color: var(--e-global-color-primary);
  width: 22px;
  height: 22px;
  border-radius: 50px;
  padding: 4px;
  margin-right: 1em;
}
@media (max-width: 991px) {
  #property__features {
    margin: 0;
  }
}

.modal-backdrop {
  --bs-backdrop-opacity: 0.7;
}

.modal#modalPhotos .modal__close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-weight: 300;
  font-size: 4rem;
  color: #fff;
  z-index: 2000;
}

#modalPhotos .swiper-button-next, #modalPhotos .swiper-button-prev {
  color: #ffffff;
}