/* Hide sub-dropdown menus only under the Listings menu item */
.listing-menu~.sp-dropdown .sp-dropdown-sub {
    display: none !important;
}

.listing-menu~.sp-dropdown .sp-has-child:hover>.sp-dropdown-sub {
    display: none !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item.sp-has-child a::after {
    content: "" !important;
}

body.ltr .sp-megamenu-parent .sp-dropdown.sp-dropdown-sub {
    left: auto !important;
    right: 100% !important;
}

.body-innerwrapper #sp-footer {
    background-color: #001235 !important;
    text-align: center;
    padding-bottom: 1rem;
}

/*article custom css*/
a.city-button:hover {
    background-color: #F1F1F1 !important;
}

.category-blog-page .page-header h1 {
    font-size: 32px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 0;
}

.category-blog-page .article-list .article {
    border-top: 1px solid #d9dee8;
    padding-top: 32px;
    margin-top: 32px;
    margin-bottom: 32px;
}

.category-blog-page .article-list>.row:first-child .article,
.category-blog-page .article-list .row:first-child .article {
    margin-top: 0;
}

.category-blog-page .article-introtext h3 {
    font-size: 24px;
    line-height: 1.35;
    font-weight: 700;
    margin: 20px 0 12px;
}

.category-blog-page .article-introtext iframe {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
}

.category-blog-page .category-blog-collections {
    margin: 0 0 32px;
    text-align: left;
}

.category-blog-page .category-desc>div,
.category-blog-page .category-blog-collections>div {
    justify-content: flex-start !important;
    margin: 0 0 32px !important;
}

.category-blog-page .video-search-form {
    margin: 0 0 32px;
}

.category-blog-page .video-search-form .video-search-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.category-blog-page .video-search-form .form-control {
    max-width: 420px;
    min-height: 48px;
    border: 1px solid #ccd3df;
    border-radius: 4px;
    padding: 10px 14px;
}

.category-blog-page .video-search-form .btn {
    min-height: 48px;
    padding: 10px 20px;
}

.category-blog-page .video-search-form .btn.btn-light {
    border: 1px solid #ccd3df;
    background: #fff;
    color: #0f244a;
}

#sp-header .logo-site-name {
    display: none;
}

@media (max-width: 992px) {
    #sp-logo,
    #sp-logo .sp-column,
    #sp-header .logo,
    #sp-header .logo a {
        min-width: 0;
    }

    #sp-header .logo a {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        max-width: 100%;
    }

    #sp-header .logo-site-name {
        display: inline-block;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }

    #sp-menu .sp-megamenu-wrapper,
    #sp-menu .mobile-header-controls {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }

    #sp-menu .mobile-header-controls {
        width: 100%;
    }

    #sp-menu .mobile-header-lang-switch {
        display: inline-flex;
        align-items: center;
        overflow: hidden;
        background: #061736;
        border-radius: 6px;
    }

    #sp-menu .mobile-header-lang-switch a {
        color: #b2b2b2;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        padding: 7px 10px;
        transition: all 0.3s ease;
        white-space: nowrap;
    }

    #sp-menu .mobile-header-lang-switch a:hover {
        background-color: rgba(191, 175, 134, 0.2);
        color: #fff;
    }

    #sp-menu .mobile-header-lang-switch a.active {
        background-color: #bfaf86;
        color: #1E2F57;
    }

    #sp-menu .mobile-header-controls #offcanvas-toggler {
        float: none;
        margin-left: 0;
        height: auto;
        line-height: 1;
    }
}

@media (max-width: 767px) {
    .category-blog-page .page-header h1 {
        font-size: 28px;
    }

    .category-blog-page .video-search-form .video-search-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .category-blog-page .video-search-form .form-control {
        max-width: none;
        width: 100%;
    }

    #sp-header .logo a {
        gap: 10px;
    }

    #sp-header .logo-site-name {
        font-size: 14px;
    }

    #sp-menu .sp-megamenu-wrapper,
    #sp-menu .mobile-header-controls {
        gap: 8px;
    }

    #sp-menu .mobile-header-lang-switch a {
        font-size: 11px;
        padding: 6px 8px;
    }
}

/* LC2AR-428: "left side menu" module buttons — migrated from the Helix Custom Code
   (DB) selector #mod-custom155 to the module's class .left-side-menu, so COPIED modules
   (e.g. #mod-custom206) inherit the styling (every instance carries moduleclass_sfx
   "left-side-menu", rendered by Helix as class="sp-module left-side-menu").
   The module gets float:left from .sp-module:last-child, which made it shrink-wrap to its
   content -> buttons came out a different width on every page (different menu lengths).
   Fix: stop the float so the module fills its sidebar column, and cap the buttons so every
   page's buttons are the same width, stay wide enough for long labels, and never overflow a
   narrow column. */
.left-side-menu {
    float: none !important;
    width: 100%;
}

.left-side-menu p {
    background: #213963;
    color: #fff;
    display: block;
    width: 100%;
    max-width: 250px;
    margin: 10px 0;
    padding: 10px 25px;
}

.left-side-menu p:last-child {
    background: #BE0712;
}

.left-side-menu p a {
    color: #fff;
}

/* LC2AR-460: the hovered label was invisible. These buttons print white text on a dark
   background, but preset1.css carries a site-wide `a:hover,a:focus,a:active{color:#10316B}`
   (dark navy) that wins on hover -> dark-on-dark, contrast ~1.3:1.
   First fix flipped the button to a white background on hover, but the client asked to keep
   it a filled button: white text stays white on hover, background lightens from #213963 to
   #4d6082 instead of going white/bordered.
   !important is required because on some sites the last button carries an inline background,
   set in the module HTML so the red :last-child rule above can stay untouched. */
.left-side-menu p:hover {
    background: #4d6082 !important;
}

.left-side-menu p:hover a {
    color: #fff;
}

/* Sidebar flyout submenu: an item that has a submenu is wrapped in
   <div class="side-bar-item"> holding the usual <p><a> button plus a
   <ul class="side-bar-sub">. Items without a submenu stay plain <p><a></p>
   (do NOT wrap them, or the red :last-child rule would hit every button).
   The wrapper is capped at the button's 250px max-width so the flyout's
   left:100% lands flush against the button — no hover-killing gap even in a
   wider sidebar column. :focus-within keeps it reachable by keyboard. */
.left-side-menu .side-bar-item {
    position: relative;
    max-width: 250px;
}

/* Flyout panel: white dropdown with navy text, generous padding. Hidden via
   visibility/opacity/transform (not display) so it can fade/slide in; the
   visibility transition delay keeps it non-interactive while hidden.
   Selectors carry the #sp-left/#sp-right id because template.css styles
   "#sp-left .sp-module ul" and "#sp-left .sp-module ul>li>a" with padding:0 /
   padding:2px 0 — without the id those id-selectors outrank ours and the
   padding below never applies. */
#sp-left .left-side-menu .side-bar-item > ul.side-bar-sub,
#sp-right .left-side-menu .side-bar-item > ul.side-bar-sub {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 230px;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e3e7ee;
    border-radius: 4px;
    box-shadow: 3px 4px 14px rgba(0, 0, 0, .18);
    overflow: hidden; /* clips link hover backgrounds to the border-radius */
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s linear .15s;
}

#sp-left .left-side-menu .side-bar-item:hover > ul.side-bar-sub,
#sp-left .left-side-menu .side-bar-item:focus-within > ul.side-bar-sub,
#sp-right .left-side-menu .side-bar-item:hover > ul.side-bar-sub,
#sp-right .left-side-menu .side-bar-item:focus-within > ul.side-bar-sub {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0s;
}

/* ">" marker on buttons that have a submenu (hidden on mobile, where the
   submenu is always expanded and the marker would be meaningless) */
.left-side-menu .side-bar-item > p > a::after {
    content: "\203A";
    float: right;
    font-weight: bold;
    opacity: .6;
}

/* template.css sets #sp-left .sp-module / #sp-right .sp-module { overflow: hidden }
   (to clip module content to its border-radius) — that also clips the flyout at the
   module's right edge no matter how high the z-index is. Override it back to visible
   for this module only; the extra .left-side-menu class beats template.css on
   specificity even though that file loads after this one. */
#sp-left .sp-module.left-side-menu,
#sp-right .sp-module.left-side-menu {
    overflow: visible;
}

/* keep the parent button in its hover state while the pointer is in the flyout */
.left-side-menu .side-bar-item:hover > p,
.left-side-menu .side-bar-item:focus-within > p {
    background: #4d6082 !important;
}

.left-side-menu .side-bar-item:hover > p a,
.left-side-menu .side-bar-item:focus-within > p a {
    color: #fff;
}

#sp-left .left-side-menu ul.side-bar-sub li a,
#sp-right .left-side-menu ul.side-bar-sub li a {
    display: block;
    padding: 10px 28px;
    color: #213963;
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap;
    transition: background .12s ease-out;
}

#sp-left .left-side-menu ul.side-bar-sub li a:hover,
#sp-right .left-side-menu ul.side-bar-sub li a:hover {
    background: #f0f3f8;
    color: #213963;
}

/* Flyout was rendering UNDER the article column: the ul's z-index:1000 cannot
   escape an ancestor stacking context that sits below #sp-component, so lift
   the whole sidebar column instead. position:relative alone does not shift a
   Bootstrap column; z-index only takes effect above the stacking breakpoint,
   where the sidebar and content are side by side. */
@media (min-width: 992px) {
    #sp-left,
    #sp-right {
        position: relative;
        z-index: 10;
    }
}

/* touch devices have no hover: below the sidebar-stacking breakpoint the
   submenu is shown expanded under its parent instead of as a flyout */
@media (max-width: 991.98px) {
    #sp-left .left-side-menu .side-bar-item > ul.side-bar-sub,
    #sp-right .left-side-menu .side-bar-item > ul.side-bar-sub {
        position: static;
        min-width: 0;
        padding: 6px 0 10px 20px;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: #f5f7fa;
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .left-side-menu .side-bar-item > p > a::after {
        content: none;
    }

    #sp-left .left-side-menu ul.side-bar-sub li a,
    #sp-right .left-side-menu ul.side-bar-sub li a {
        white-space: normal;
    }
}

/* LC2AR-460 follow-up: the red "Search" button is the last item, styled by the
   .left-side-menu p:last-child rule above (background: #BE0712) - but only when that
   item carries no inline background override. Some pages repurpose the last slot for a
   non-search link and override its colour inline (e.g. "Alberta Cities Listings"), so
   scope this to :not([style]) - those inline-overridden buttons keep the standard
   #4d6082 hover from the rule above; only the true red Search button gets its own shade. */
.left-side-menu p:last-child:not([style]):hover {
    background: #cb3841 !important;
}

/* ============================================================================
   Migrated from Helix template Custom CSS (DB) → git, 2026-06-12 (full migration).
   Union of all 4 sites' template-style custom_css, deduplicated. Instance-id
   selectors kept verbatim (page-specific). Malformed unclosed @media repaired.
   The ~8 global rules that were previously re-defined by template.css/preset
   retain !important for explicit robustness — matching their old DB
   'Custom Code' behavior. The file is loaded after template/preset CSS so it
   remains the final stylesheet override. Stays entirely in custom.css;
   template untouched.
   ============================================================================ */
/*home buyer inquiry*/
.sp-page-builder .page-content #section-id-1659547153978{
padding-bottom: 0px;
}

/*Breadcrumbs*/
#sp-section-4{
padding-top:20px;
}

#sp-main-body{ padding:0 0 50px 0 !important; }

#sppb-addon-wrapper-1666286623633 .col-md-4 .btn{
  color: white !important;
}

hr:not([size]){
height:0px;
}

.sp-page-builder .page-content #section-id-1659128589845{
background-color: #10316b !important;
}

#sp-header-top{
background-color:#10316b;
}

.sp-module:last-child{
float:left;
}

.sp-megamenu-parent .sp-dropdown .sp-has-child li.sp-menu-item .sp-menu-separator{
color:#000;
}

li.sp-menu-item span:hover{
color:#fff;
}

.container{ max-width:1320px !important; }

.sp-megamenu-parent .sp-dropdown li.sp-menu-item{ padding: 5px 8px !important; }

.sp-megamenu-parent .sp-dropdown li.sp-has-child:hover{
background:#10316b !important;
}

.sppb-column{
  height:90% !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-has-child .sp-dropdown .sp-dropdown-items li a{
color: #000;
}

.sp-megamenu-parent .sp-dropdown li.sp-has-child .sp-dropdown .sp-dropdown-items li:hover a{
color: #fff;
}

.sp-megamenu-parent .sp-dropdown li.sp-has-child:hover span{
color:#fff;
}

#column-id-1659633891065{
height:100% !important;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-items li.sp-menu-item:hover{
background:#10316b;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-items li.sp-menu-item:hover a{
color:#fff;
}

.sp-megamenu-parent > li > span{ color:white !important; }

.justify-content-end{
justify-content: flex-start !important;
}

.sp-page-builder .page-content #section-id-1659128589845{
padding-top:10px !important;
padding-bottom:0px !important;
}

.sp-page-builder .page-content #section-id-1659128808419{
padding:20px 0 0 0 !important;
}

.sppb-article-info-wrap h3 a{
font-size:18px;
}

.article-details .article-ratings-social-share{ display:none !important; }

.article-info{ display:none !important; }

.article-header{
margin-bottom:0px !important;
}

table,td,th {
            border: 1px solid #000;
}

#sp-header .logo{ background-color:#10316b !important; }

#sppb-addon-wrapper-1659128589848{
margin:0 0 10px 0 !important;
}

#sp-bottom{ padding:25px 0 0 0 !important; }

.sp-module{
padding:0;
}

@media (min-width: 992px){
#sp-logo.col-lg-3{
width:17%;
}
}

@media screen and (max-width:430px){
  /*mobile version recent sales layout*/
  #sppb-addon-1665593910257 .property-lists .property-item .row{
    display: block ;
  }

  #sppb-addon-1665593910257 .property-lists .property-item .row .col-3{
    width: 100% ;
  }

  #sppb-addon-1665593910257 .property-lists .property-item .row .col-4{
    width: 100% ;
padding: 0 30px;
  }

 #sppb-addon-1665593910257 .property-lists .property-item .row .col-4 .property-entries .row{
    display:flex;
  }

  #sppb-addon-1665593910257 .property-lists .property-item .row .col-5{
    width: 100% ;
  }

/*mobile home realtor form*/
.modal-content{
top: 55px;
}

/*mobile offcanvas menu*/
.offcanvas-menu .offcanvas-inner ul.menu li .menu-separator{
width:250px;
}

.offcanvas-menu .offcanvas-inner ul.menu li ul.menu-child li .menu-separator{
font-size: 14px;
}

  /*mobile version left menu witdh*/
.left-side-menu{
width: 100%;
}

.view-article #sp-component{
flex: 0 0 100%;
}

/*Home mobile agents*/
#sppb-addon-1662774573123 .sppb-addon .sppb-addon-content .card-top .card-image{
flex: 0 0 50%;
}

#sppb-addon-1662774573123 .sppb-addon .sppb-addon-content .card-top .card-info{
flex: 0 0 50%;
}

#sppb-addon-1662774573123 .sppb-addon .sppb-addon-content .card-top{
padding: 0 20px;
}

#sppb-addon-1663097656778 .sppb-addon .sppb-addon-content .card-top .card-image{
flex: 0 0 50%;
}

#sppb-addon-1663097656778 .sppb-addon .sppb-addon-content .card-top .card-info{
flex: 0 0 50%;
}

/*Home mobile Award image*/
#section-id-1659633891089 .sppb-col-md-4{
flex: 0 0 33.33%;
}

#sppb-addon-1659633891092 img{
height: 33%;
width: 100%;
}


/*mobile version home recent sales detail page*/
#sp-main-body > .container > .container-inner 
 > .row > .col-lg-12 > .sp-column .row{
display: block;
}

#sp-main-body .row .col-lg-12 .row .col-8{
width: 100%;
padding-top: 20px;
}

#sp-main-body .row .col-lg-12 .row .col-8 .view-list-detail .list-description .detail-description p{
font-family: 'Inter';
font-size: 16px;
line-height: 28px;
}

#sp-main-body .row .col-lg-12 .row .col-8 .view-list-detail .list-google-map .tabs{
padding-bottom: 20px;
}

#sp-main-body .row .col-lg-12 .row .col-4{
width: 100%;
padding-top: 20px;
}

/*mobile version left menu width top*/
#sp-main-body{
padding: 0 0 20px 0 !important;
}

  /*mobile version footer img*/
  #sppb-addon-wrapper-1659744341186{
    margin:  0 !important;
  }

#sp-menu{
position: absolute !important;
right: 20px;
}
.contact-info-right div{
text-align:center;
}
#sppb-addon-1659547153973 #btn-1659547153973.sppb-btn{
padding:12px 100px;
}

#column-id-1659547153947.sppb-column{
padding-right:10px !important;
padding-left:0px !important;
}
.sppb-column{
height:100% !important;
}
#sppb-addon-1659547153951{
padding-bottom: 0px;
}
.bottom-img .sppb-col-md-4{
margin-bottom: 20px;
}
#btn-1659633891107.sppb-btn{
padding: 12px 126px;
}
#btn-1659633891110.sppb-btn{
padding: 12px 126px;
}


.properties-wrapper{
margin-top:20px;
}
.property-lists .property-item{
padding-bottom:80px;
}
.properties-wrapper .property-lists .property-item .ant-row{
display:block;
}
.properties-wrapper .property-lists .property-item .ant-row .ant-col{
max-width:100%
}
#sp-main-body{
padding: 50px 0;
}
.advance-search .gx-5{
display: block;
}
.advance-search .gx-5 .col-6{
width:100%;
}

#sp-footer {
color: #001335 !important;
}

#sp-footer1 .sp-column {
    text-align: center !important;
}}

/*header menu*/
#sp-header .container #sp-menu.col-lg-9{
width:100%;
}

/*home btn width*/
#section-id-1670010862176 .sppb-col-md-6 a{
width:240px;
}

/*free evaluation*/
#custom-form-152 hr{
display:none;
}

#custom-form-152 .row{
margin-bottom: 30px;
}

#custom-form-152 .row:last-child{
margin-bottom: 0px;
}

/*Contact us page hide inquiry form title*/
#column-wrap-id-1661185219774 .mod-custom-form-json h2{
  display: none;
}

/*industrial properties for sale */
#sppb-addon-1669939846161 .sppb-addon-content a{
  width: 200px;
}

#sppb-addon-1669940433184 .card-info a{
color: white;
}

/*Homepage Why buy or sell section*/
#section-id-1667496721176{
  max-width: 1290px;
  margin: auto !important;
}

h3{
font-family: 'Inter' !important;
}

/*top menu background*/
#section-id-1659128589845{
background-color: #10316b !important;
}

.sp-megamenu-parent .sp-dropdown .sp-has-child li.sp-menu-item .sp-menu-separator:hover{
color:#fff;
}


/*header menu width*/
#sp-menu.mt-4{
width: 100%;
}

#sp-menu.col-lg-9{
width: 100%;
}

.header-sticky .header-top-content{
display: flex !important;
}

/*left side menu*/
#sp-left.col-lg-4{
width:25%;
}

/* article main column: scope by Bootstrap col so sidebar pages = 75%, full-width = 100% */
.view-article #sp-component.col-lg-9 { flex: 0 0 75%; }
.view-article #sp-component.col-lg-12 { flex: 0 0 100%; }

/* ===========================================================================
   LC2AR-487 — left menu: below the content under 991px, sticky above it.
   Trello: https://trello.com/c/3nZFNP5Q
   =========================================================================== */

/* template.css sets `overflow: hidden auto` on .body-innerwrapper. That makes it
   the nearest scrollport for everything inside, which silently kills
   position:sticky — the sidebar just scrolls away (measured: pinned at top:110
   with the override, -677px without it, on the same page).
   `overflow-x: clip` keeps the horizontal-overflow guard the original rule was
   there for, without creating a scroll container, so sticky works again.
   Verified on abhotel26 and cgywhse26: no horizontal scrollbar appears.

   The `body ` prefix is retained for explicit scoping. template.css also sets
   `.body-innerwrapper { overflow-x: hidden }`; custom.css is now loaded after
   template/preset CSS, so this override wins the cascade without !important. */
body .body-innerwrapper {
    overflow-x: clip;
    overflow-y: visible;
}

/* Desktop: pin the left menu while the article scrolls. 160px clears the
   sticky header (#sp-header.header-sticky goes position:fixed at 140px tall)
   plus a 20px gap. Sticky is bounded by #sp-left, which flex-stretches to the
   row height, so the menu stops at the end of the article and never overlaps
   what follows. */
@media (min-width: 992px) {
    #sp-left .sp-column {
        position: sticky;
        top: 160px;
    }
}

/* Under the stacking breakpoint the columns are full width and #sp-left comes
   first in the DOM, so the menu pushed the article down. Reorder it to sit
   after the article, immediately above the #sp-bottom-top footer block.
   .row is flex, so `order` is enough — no markup change.
   Pages without a left column are unaffected: a lone flex item's order is
   inert, and #sp-component/#sp-right keep their existing relative order.

   991.98px (not 991px): the grid itself switches to stacked at
   max-width: 991.98px / min-width: 992px (Bootstrap's own lg breakpoint,
   line 883 above). A fractional layout viewport (browser zoom != 100%, or
   OS display scaling) can land in the gap between an integer 991px query
   and the grid's 991.98px cutoff — columns already stacked full-width but
   this rule not yet applied, so the menu renders above the content at
   exactly "991px". Matching the grid's own cutoff closes that gap.
   Trello: https://trello.com/c/3nZFNP5Q */
@media (max-width: 991.98px) {
    #sp-component { order: 1; }
    #sp-left      { order: 2; }
    #sp-right     { order: 3; }
}

/* LC2AR-518 (2026-09-05): mobile overrides lost in the DB->file migration.
   - .view-article #sp-component.col-lg-9 {flex:0 0 75%} (declared above, outside any @media,
     specificity 1,2,0) beat the phone reset inside the 430px block (1,1,0) -> 25% blank gutter.
   - .left-side-menu p {max-width:250px} replaced #mod-custom155 p{width:250px} but the old
     mobile {width:100%} override was not carried over -> 250px buttons in a 360px column.
   Declared last, at the same or higher specificity, so they win on phones. */
@media screen and (max-width:430px) {
    .view-article #sp-component.col-lg-9,
    .view-article #sp-component.col-lg-12 { flex: 0 0 100%; max-width: 100%; }
    .left-side-menu p { max-width: none; }
}