/*

Theme Name: Propertunity
Theme URI: https://www.propertunity.co
Theme Icon: fa-map-marker-alt
Author: Shane Taylor
Author URI: https://www.propertunity.co/members/shane-taylor
Description: Sleek, yet simple "Gutenberg-ready" real estate theme built for modern CRM platforms.
Version: 1.0.0
Requires at least: 6.9.0
Tested up to: 6.9.0
Requires PHP: 8.4
License: Licensed Theme
License URI: https://www.propertunity.co/legal/#theme-license
Text Domain: propertunity
Domain Path: /languages/
Tags: real-estate, custom-logo, custom-menu, featured-images, full-width-template, translation-ready, block-styles, wide-blocks
Update URI: https://www.propertunity.co/theme-updates/

*/

/*Breakpoint  Class Infix Dimensions
Extra small None    <576px
Small   sm  ≥576px
Medium  md  ≥768px
Large   lg  ≥992px
Extra large xl  ≥1200px
Extra extra large   xxl ≥1400px*/

/* THEME SIZE 397M */

/* DISABLE HIGHLIGHTING TEXT */

/**:not(input):not(textarea):not(select):not(option) {
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
}*/



.offcanvas#editPropertyPanel {
    height: auto !important;

    & .offcanvas-body { overflow-y: scroll; }
}

.card-footer svg.idx {

    height: 1em;
    width: auto;

    & path {
        fill: var(--header-text);
    }
}

:root {
    --sidepanel-width-collapsed: 80px;  /* your collapsed width */
    --sidepanel-width-expanded:  240px; /* your expanded width */
}

.mapboxgl-popup-content {

    padding: calc( var(--gap) / 2 ) !important;
    border-radius: var(--border-radius);
    color: var(--header-text);

}

.property-data {
    position: absolute;
    top: 20px;
    right: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1000;
}

.location-data-panel {
    padding: 20px;
    position: relative;
}

.location-data-panel h5 {
    font-size: 1.25rem;
    font-weight: 600;
}

.street-view-img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

.close-data-panel {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--header-bg);
    border: none;
    border-radius: var(--border-radius);
    width: var(--inut-size);
    height: var(--inut-size);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.close-data-panel:hover {
    background: white;
}

.property-data .accordion-button {
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
}

.property-data .table td {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.property-data .table td:first-child {
    width: 40%;
    color: #666;
}

.loading, .error {
    padding: 20px;
    text-align: center;
}

.nav-item {

    & .nav-link {

        outline: none !important;
        box-shadow: none !important;

        &:hover {
            color: var(--header-text);
            background: var(--button-hover);
            transform: scale(0.99) translateY(2px);
            & * { color: var(--header-text); }
        }

        &:active {
            color: var(--white);
            background: var(--button-active);
            transform: scale(0.99) translateY(4px);
            & * { color: var(--white); }
        }
    }
}

.hero .avatar-wrapper .dropdown {

    display: unset;

    & > button { 

        border-radius: var(--border-radius); 
        position: absolute;
        top: -14px;
        right: -7px;
        background: var(--header-bg);
        width: var(--badge-size);
        height: var(--badge-size);
        border-radius: var(--badge-radius);
        align-items: center;
        justify-content: center;
        color: var(--header-text);
        font-size: 14px;

        & * { color: var(--header-text); }

        }
    }
}

.avatar-camera-overlay {
    
}

.hero .avatar-camera-overlay { display: flex; }

.special-badge {

}

.text-primary,
.primary-text,
.cta-text {
    background: linear-gradient(55deg, #3454d1, #d65bee);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.mapboxgl-canary,
.mapbox-control-container,
.fullscreen-loader {
    display: none !important;
    visibility: hidden !important;
}


.roadmap-container {

    width: 100%;
    margin-right: 20px;

    & .roadmap-line {

        position: absolute;
        top: 50%;
        left: 0px;
        right: 0px;
        height: 3px;
        background: var(--box-border); /* Inactive line color */
        z-index: 1;

        &.active {
            left: 0;
            background: var(--brand-light);
            z-index: 2;
            transition: width 0.6s ease;
        }

        &.completed {
            left: 0;
            background: var(--success-light);
            z-index: 3;
        }
    }

    & .roadmap-steps-wrap {

        z-index: 4;

        & .step-item-wrap {

            z-index: 2;
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;

            &.completed {

                & .step-item {
                    
                    border-color: var(--success-light);
                    background: var(--header-bg);

                    & .step-icon {
                        color: var(--success-light);
                    }

                    & .step-item-badge {
                        background: var(--success-light);
                    }

                    & .step-label {
                        color: var(--success-light);
                    }
                }
            }

            &.active {

                & .step-item {
                    
                    border-color: var(--brand-light);
                    background: var(--header-bg);

                    & .step-icon {
                        color: var(--brand-light);
                    }

                    & .step-item-badge {
                        background: var(--brand-light);
                    }

                    & .step-label {
                        color: var(--brand-light);
                    }
                }
            }

            & .step-item {

                width: var(--input-size);
                height: var(--input-size);
                background: var(--header-bg);
                border: 3px solid var(--box-border);
                border-radius: var(--border-radius);
                display: flex;
                align-items: center;
                justify-content: center;
                transition: var(--transition);
                position: relative;

                & .step-icon {
                    color: var(--box-border);
                    font-size: 1.2rem;
                }

                & .step-item-badge {
                    position: absolute;
                    bottom: -8px;
                    right: -8px;
                    background: var(--box-border);
                    color:var(--header-bg);
                    font-size: 10px;
                    font-weight: bold;
                    width: var(--badge-size);
                    height: var(--badge-size);
                    border-radius: var(--badge-radius);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 2px solid var(--header-bg);
                    z-index: 3;
                    transition: background 0.3s ease;
                }
            }

            & .step-label {
                position: absolute;
                width: 120px;
                left: 50%;
                transform: translateX(-50%);
                color: #6c757d;
            }
        }
    }
}

#primary-nav .step-label { display: none !important; }


.dashboard-card {
    background: var(--header-bg);
    padding: 1rem !important;
    margin-bottom: var(--gap) !important;
    box-shadow: var(--box-shadow);
    transition: var(--transition-smooth);
}

.dashboard-card:hover {
    box-shadow: var(--box-shadow-hover);
    transform: translateY(2px);
}

.navbar-collapse {
    flex-grow: unset;
}

li:has([name="hasSpecials"]) { margin: 0 !important; }

#video-links:has(+ li) {
    margin-right: 15px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
body form .form-control[readonly] {

    background: var(--input-bg) !important;

}




.navbar-nav > .nav-item,
.fixed-tools > .nav-item {
    
    position: relative;

    & .nav-link.error {

        position: absolute;
        color: var(--error);
        background: var(--error-light);
        & * { color: var(--error); }

        &:hover {
            color: var(--white);
            background: var(--error);
            & * { color: var(--white); }
        }

        & + span.badge {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: -10px;
            right: -9px;
            background: var(--error);
            color: white;
            padding: 0px;
        }
    }
}

/* Ghost/Skeleton Cards */
.ghost-card {
    pointer-events: none;
    opacity: 0.6;
}

.skeleton {
    background: linear-gradient(90deg, var(--box-border) 25%, var(--body-bg) 50%, var(--box-border) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-image {
    width: 100%;
    height: 200px;
    /*border-radius: 8px 8px 0 0;*/
}

.skeleton-title {
    height: 24px;
    width: 80%;
    margin-bottom: 12px;
}

.skeleton-text {
    height: 16px;
    width: 100%;
    margin-bottom: 8px;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-badge {
    display: inline-block;
    height: 20px;
    width: 60px;
    margin-right: 8px;
}

.no-results-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
}

.no-results-message h3 {
    margin-bottom: 10px;
    color: #333;
}

.no-results-message p {
    color: #666;
}


.autocomplete, .pac-container {
    z-index: 9999999 !important;
}
.pac-container {
    /* Main dropdown container */
    background: var(--body-bg) !important;
    border: 1px solid var(--box-border) !important;
    border-top: none;
    border-radius: var(--border-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: var(--box-shadow) !important;
    /*z-index: 10000 !important;*/
    position: inherit;
    
    /* Full-screen backdrop with blur */
    &::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.3); /* Dark overlay */
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        z-index: -1; /* Behind the dropdown */
        pointer-events: none; /* Allow clicks through to close dropdown */
    }
    
    /* Remove "Powered by Google" */
    &::after {
        content: none !important; 
    }
    
    /* Style all text */
    & * { 
        font-size: 16px !important;
        color: var(--header-text); 
    }
    
    /* Each suggestion row */
    & .pac-item {
        padding: 0;
        height: var(--input-size);
        line-height: var(--input-size);
        border-top: 1px solid var(--box-border);
        background: var(--body-bg);
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        
        &:first-child {
            border-top: none;
        }
        
        &:hover {
            background: var(--button-hover);
        }
        
        &:hover,
        &:hover span.pac-icon.pac-icon-marker,
        &:hover span.pac-item-query, 
        &:hover span.pac-matched {
            color: var(--header-text);
            background: var(--button-hover);
        }
        
        /* Location icon */
        & span.pac-icon.pac-icon-marker {
            min-width: var(--input-size);
            height: 100%;
            font-family: var(--fa-font);
            background-image: none;
            padding-left: 15px;
            padding-bottom: 9px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: -8px;
            margin-top: 4px;
            
            &::after {
                content: '\f3c5';
                margin-right: 10px;
            }
        }
    }
    
    /* Keyboard navigation selected state */
    & .pac-item-selected,
    & .pac-item-selected span.pac-icon.pac-icon-marker,
    & .pac-item-selected span.pac-item-query,
    & .pac-item-selected span.pac-matched {
        color: var(--header-text) !important;
        background-color: var(--button-hover) !important;
    }
}

/*.pac-container {
    background: var(--body-bg) !important;
    border: 1px solid var(--box-border) !important;
    box-shadow: none !important;


    z-index: 99999 !important;

    position: absolute;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top: none;

    background: var(--brand);

    &:hover {
        background: var(--button-hover) !important;
    }

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        z-index: 999998;

        -webkit-box-shadow: 0px 0px 0px 9999px var(--brand-light);
         -moz-box-shadow: 0px 0px 0px 9999px var(--brand-light);
              box-shadow: 0px 0px 0px 9999px var(--brand-light);
    }

    &:after {
        display: none;
        content: none !important; 
    }

    & * { 

        font-size: 16px !important;
        color: var(--header-text); 
    }

    & .pac-item {

        padding: 10px;
        font-size: 14px;
        cursor: pointer;
        border-top: 1px solid var(--box-border) !important;

        height: var(--input-size);
        padding: 0px;
        cursor: pointer;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        line-height: var(--input-size);
        text-align: left;
        border-top: 1px solid var(--box-border);
        font-weight: 500;
        background: var(--body-bg);
        display: flex;
        align-items: center;

        &:hover {
            background: var(--button-hover);
        }

        &:hover,
        &:hover span.pac-icon.pac-icon-marker,
        &:hover span.pac-item-query, 
        &:hover span.pac-matched {
            color: var(--header-text);
            background: var(--button-hover);
        }

        &:first-child {
            border-top: none;
        }

        &:first-of-type {
            border-top: none;
        }

        & span.pac-icon.pac-icon-marker {
            min-width: var(--input-size);
            height: 100%;
            font-family: var(--fa-font);
            background-image: none;
            padding-left: 15px;
            padding-bottom: 9px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: -8px;
            margin-top: 4px;

            &::after {
                content: '\f3c5';
                margin-right: 10px;
            }
        }
    }

    & .pac-item-selected {
        background: var(--button);
    }


    & .pac-item-selected,
    & .pac-item-selected span.pac-icon.pac-icon-marker,
    & .pac-item-selected span.pac-item-query,
    & .pac-item-selected span.pac-matched {
        color: var(--header-text) !important;
        background-color: var(--button-hover) !important;
    }
}*/

.gutter-xsmall { margin-right: 0; margin-left: 0; }
.gutter-xsmall > [class^="col-"], .gutter-xs > [class^=" col-"] { padding-right: 0; padding-left: 0; }
.gutter-small { margin-right: -5px; margin-left: -5px; }
.gutter-small > [class^="col-"], .gutter-sm > [class^=" col-"] { padding-right: 5px; padding-left: 5px; }
.gutter-medium { margin-right: -7.5px !important; margin-left: -7.5px !important; }
.gutter-medium > [class^="col-"], .gutter-md > [class^=" col-"] { padding-right: 7.5px; padding-left: 7.5px; }
.gutter-large { margin-right: -15px !important; margin-left: -15px !important; }
.gutter-large > [class^="col-"], .gutter-lg > [class^=" col-"] { padding-right: 15px; padding-left: 15px; }


html:has(body:not(.landing-page)) {

    /* THIS IS THE PIXEL NUMBER NEEDED WITHOUT DYNAMIC JS OF #primary-nav HEIGHT + var(--gap) */
    /*padding-top: 102px;*/

}

#flex {

    min-height: 100vh;
    background: var(--body-bg);
    /*margin-bottom: 0px;*/
    z-index: 4;
    /*padding-top: 100px;*/
    position:relative;

    &:not(.flex) {
        /* LOOKS GOOD WHEN TOGGLING BETWEEN LIST/GRID */
        /*padding-top: var(--block-margin); */
    }

    &.container-fluid {
        padding-left: 128px;
        padding-right: 128px;
    }

    /*&.flex {
        padding: 15px 15px 60px 15px;
        margin: 0;
        height: 100vh;
        overflow-y: scroll;
        box-shadow: var(--box-shadow-left); 
        z-index: 1;
        flex: 1; 

        &::-webkit-scrollbar {
            display: none;
        }

        & #query-results-grid .card {
            margin-bottom: 15px;
        }
    }*/

    #layout-row {

        display: grid;
        flex-wrap: wrap;
        align-items: flex-start;

        display: grid;
        gap: 0px;

        &:has(#hero) {

            /*padding-top: 77px;*/

        }

        & #hero, 
        & .hero { 

            border-radius: var(--border-radius) !important;
            border-top-left-radius: var(--border-radius) !important;
            border-top-right-radius: var(--border-radius) !important;

            & > div {
                height: 100%;

                & canvas {
                    height: 100% !important;

                } 
            }
        }
    }
}

/*.hero {

    &.flex {

        & #secondary-nav {
            
            position: fixed;
            z-index: 999;
        }
    }
}*/

/*#map-flex-toggle {

    position:relative;

    &.flex {

        & #flex {
            box-shadow: -10 0px 50px rgba( 4, 75, 194, 0.1);
        }

        & #sidebar,
        & #primary .pagination {
            display: none !important;
        }
    }
}*/

/* Skeleton loader styles */
.skeleton {
    background: linear-gradient(90deg, var(--box-border) 25%, var(--body-bg) 50%, var(--box-border) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--border-radius);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton variants */
.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-title {
    height: 24px;
    width: 60%;
    margin-bottom: 16px;
}

.skeleton-image {
    height: 200px;
    width: 100%;
}

.skeleton-card {
    padding: 1px;
    border: 1px solid var(--box-border);
    border-radius: var(--);
}

body.dark-mode .skeleton {
    background: linear-gradient(90deg, #2a2a2a 25%, #1a1a1a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}

.skeleton-activity-cards {

    margin-top: var(--gap);

    & .skeleton-loader {
        padding: var(--gap);
        margin-top: var(--gap);
        background: var(--header-bg);
        border-radius: var(--border-radius);
        border: 1px solid var(--box-border);
        display: flex;
        gap: var(--gap);
    }
    
}

.skeleton-circle {
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius);
    background: linear-gradient(90deg, var(--box-border) 25%, var(--header-text) 50%, var(--box-border) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-line {
    height: 12px;
    background: linear-gradient(90deg, var(--box-border) 25%, var(--header-text) 50%, var(--box-border) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--border-radius);
}

.activity-content {
    flex: 1;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.hero:not(:has(#map))::after,
/*.hero:not(:has(.tab-content)):not(:has(#map))::after,*/
.card-header-img::after, 
div#video-layer-after { 
    content: '';
    background: var(--color-01) !important;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2;
    opacity: .50;
    

    border-radius: var(--border-radius);
    transform: scale(.999);
}

.card-header-img::after { border-radius: 0px; }

@media (prefers-reduced-motion: no-preference ) {
    @supports (animation-timeline: scroll()) {

        .scroll-watcher-wrapper {

            width: 100%;
            background: var(--box-border);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1040;
            padding-top: 0px;
            height: 5px;
            transition: var(--transition);

            & .scroll-watcher {

                height: 1px;
                margin-top: 1px;
                background: var(--scroll-watch-color);
                scale: 0 1;
                transform-origin: left;
                animation: scroll-watcher linear;
                animation-timeline: scroll();
            }
        }
    }
}

/* FONT AWESOME ORIGINAL SPEED IS 2s, CHANGE TO HALF A SECOND FOR JS ANIMATIONS */
.fa-spin {
    -webkit-animation: fa-spin 500ms linear infinite !important;
            animation: fa-spin 500ms linear infinite !important;
}

@keyframes scroll-watcher {
    to { scale: 1 1; }
}

@keyframes border-pulsate {
  0%   { border-color: var(--brand); }
  50%  { border-color: transparent; }
  100% { border-color: var(--brand); }
}

@keyframes heart-beat {
    0%, 16%, 32%, 100% { 
        transform: scale3d(1, 1, 1); 
        color: var(--heart); /* Your default heart color */
    }
    8%, 24% { 
        transform: scale3d(2, 2, 1); 
        color: pink !important; /* The thump color */
    }
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes donutfade { /* this applies to the whole svg item wrapper */
  0% { opacity: .2; }
  100% { opacity: 1; }
}
@keyframes donutfadelong {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes donut1 {
  0% { stroke-dasharray: 0, 100; }
}
@keyframes donut2 {
  0% { stroke-dasharray: 0, 100; }
} 
@keyframes donut3 {
  0% { stroke-dasharray: 0, 100; }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pie { from { --p:0; } }

@keyframes ring {
  0% {
    -webkit-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
            transform: rotate(-15deg);
  } 2% {
    -webkit-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
            transform: rotate(15deg);
  } 4% {
    -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
            transform: rotate(-18deg);
  } 6% {
    -webkit-transform: rotate(18deg);
        -ms-transform: rotate(18deg);
            transform: rotate(18deg);
  } 8% {
    -webkit-transform: rotate(-22deg);
        -ms-transform: rotate(-22deg);
            transform: rotate(-22deg);
  } 10% {
    -webkit-transform: rotate(22deg);
        -ms-transform: rotate(22deg);
            transform: rotate(22deg);
  } 12% {
    -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
            transform: rotate(-18deg);
  } 14% {
    -webkit-transform: rotate(18deg);
        -ms-transform: rotate(18deg);
            transform: rotate(18deg);
  } 16% {
    -webkit-transform: rotate(-12deg);
        -ms-transform: rotate(-12deg);
            transform: rotate(-12deg);
  } 18% {
    -webkit-transform: rotate(12deg);
        -ms-transform: rotate(12deg);
            transform: rotate(12deg);
  } 20% {
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes swing {
  
    33% {
        -webkit-transform: translateY(1px);
            -ms-transform: translateY(1px);
                transform: translateY(1px);
    } 66% {
        -webkit-transform: translateY(-.5px);
            -ms-transform: translateY(-.5px);
                transform: translateY(-.5px);
    } 100% {
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0);
    }
}

input[type="range"] {
    
    &::-webkit-slider-thumb, 
    &::-webkit-slider-runnable-track {
        background: var(--body-text);
    }

    &::-webkit-slider-thumb {
        height: calc(var(--input-size) / 2);
        width: calc(var(--input-size) / 2);
        margin-top: -11px;
        appearance: none !important;
        border-radius: var(--border-radius);
    }

    &::-webkit-slider-runnable-track {
        height: 1px;
        border-radius: 1px;
    }

}

html { padding: 0px; margin: 0px !important; }
html:not(:has(body.login)) { padding-top: 109px !important; }

html::-webkit-scrollbar,
body::-webkit-scrollbar,
   *::-webkit-scrollbar {
    width: 15px !important;
    height: 15px !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
   *::-webkit-scrollbar-track {
    background: var(--body-bg) !important;
    border-left: 1px solid var(--box-border) !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
   *::-webkit-scrollbar-thumb {
    background: var(--box-border) !important;
    border-radius: 8px !important;
}

html,
body {
    min-height: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

html {

    height: auto;
    min-height: 100%;
    position: relative; /* REQUIRED for ScrollSpy in Bootstrap ≥5.2 */
    /*  overscroll-behavior: contain;*/
    scroll-behavior: smooth;
    scrollbar-width: thin;            /* "auto" | "thin" | "none" */
     /* thumb | track */
    /*scrollbar-color: var(--box-border) var(--body-bg);   
    scrollbar-color: red blue;*/

    & body {

        width: 100%;
        max-width: 100% !important;
        height: auto;
        min-height: 100%;
        background: var(--body-bg);
        text-transform: none;
        text-rendering: optimizeLegibility;
        font-family: var(--font-family);
        overflow-x: hidden !important;

        position: relative; /* REQUIRED for ScrollSpy in Bootstrap ≥5.2 */
        /*z-index: 1;*/

        scrollbar-color: var(--box-border) var(--body-bg);

        & #sidePanel {

            width: var(--sidepanel-width-collapsed);

            padding: 15px;
            position: fixed;
            left: 0;
            top: 0;
            height: 100vh;
            background: var(--header-bg);
            border-right: 1px solid var(--box-border);
            width: fit-content;
            z-index: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            box-shadow: var(--box-shadow);
            border-radius: 0px !important;

            &:empty {
                display: none;
            }

            /*transition: width 200ms;*/

            ul.radchecks {

                flex-direction: column;
                width: 100%;
                
                & li { 

                    margin-right: 0;
                    width: 100%;
                    max-width: var(--input-size);
                    
                    /*&:last-child {
                        margin: 0;
                    }*/
                    
                    & a {

                        width: 100%;
                        max-width: var(--input-size);

                        display: flex;
                        justify-content: space-between;
                        
                        & .icon-text-badge {

                            width: 100%;
                            display: flex;
                            align-items: center;
                            gap: 15px;
                            white-space: nowrap;
                            justify-content: center;

                            body.sidepanel-expanded & {
                                justify-content: space-between;
                            }
                            
                            & .icon {
                                text-align: center;
                                font-size: 18px;
                                width: unset !important;
                                min-width: unset !important;
                                max-width: unset !important;
                                flex-shrink: 0;
                            }
                            
                            & .text {
                                display: none;
                            }
                            
                            /*& .badge {
                                display: none;
                            }*/
                        }



                        & .badge {
                            position: absolute;
                            bottom: -8px;
                            right: -8px;
                            border: 2px solid var(--box-border);

                            body.sidepanel-expanded & {
                                position: relative;
                                margin-right: 20px;
                            }
                        }
                    }
                }
            }
        }

        & #page {

            padding: 0;
            padding-left: var(--sidepanel-width-collapsed);
            margin: 0;
            width: 100%;
            height: 100%;
            /*transition: padding-left 200ms;*/
        }

        &.sidepanel-expanded {

            & #page {
                padding-left: var(--sidepanel-width-expanded);
            }

            #sidePanel {

                width: var(--sidepanel-width-expanded);

                & ul.radchecks {
                    
                    & li {

                        max-width: none;
                        
                        & a {

                            max-width: none;
                            
                            & .icon-text-badge {
                                & .icon {
                                    max-width: var(--input-size);
                                }
                                
                                & .text {
                                    display: inline-block;
                                }
                                & .badge {
                                    display: inline-block;
                                }
                            }
                        }
                    }
                }
            }
        }

        & * {
            outline: none !important;
        }

        & .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        & #wpadminbar { display: none !important; }

        & *::selection,
        & *::-moz-selection {
            
            color: var(--body-text) !important;
            background: var(--button-hover);
            
            & i {
                color: var(--body-text) !important;
                background: var(--button-hover);
            }
        }

        & *::selection { color: var(--white) !important; background: var(--brand); }
        & *::selection i { color: var(--white) !important; background: var(--brand); }
        & *::-moz-selection { color: var(--white) !important; background: var(--brand); }
        & *::-moz-selection i { color: var(--white) !important; background: var(--brand); }
        & img::selection { background: transparent; }
        & img::-moz-selection { background: transparent; }

        & *.active, 
        & *:active,
        & *:focus {
            /*border: inherit !important;*/
            outline: none !important;
            /*box-shadow: none !important;*/
        }

        & *, & *::before, & *::after {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        & ::placeholder {
            color: var(--header-text);
        }

        /*& :-webkit-autofill {
            box-shadow: var(--box-shadow-inset);
            -webkit-text-fill-color: var(--header-text);
        }*/

        /*// SCROLLBAR STYLES*/
        &::-webkit-scrollbar {
            width: 15px;
            height: 15px;
        }

        &::-webkit-scrollbar-track {
            background: var(--body-bg) !important;
            background: var(--body-bg) !important;
            border-left: 1px solid var(--box-border);
        }

        &::-webkit-scrollbar-thumb {
            background: var(--box-border) !important;
            background: var(--box-border) !important;
            border-radius: 8px;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: var(--button-hover) !important;
            background: var(--button-hover) !important;
        }

        &::-webkit-scrollbar-thumb:active {
            background: var(--button-active) !important;
            background: var(--button-active) !important;
        }

        /*// RANGE SLIDER STYLES*/
        /*&::-webkit-slider-runnable-track {
            background: var(--body-bg) !important;
            background: var(--body-bg); !important;
            border-left: 1px solid var(--box-border);
            border-radius: 1px;
            height: 1px;
        }

        &::-webkit-slider-thumb {
            height: calc(var(--input-size) / 2);
            width: calc(var(--input-size) / 2);
            margin-top: -6px;
            background: var(--box-border) !important;
            background: var(--box-border) !important;
            border-radius: var(--border-radius);
            border: none;
            -webkit-appearance: none;
            appearance: none;
        }

        &::-webkit-slider-thumb:hover {
            background: var(--button-hover) !important;
            background: var(--button-hover) !important;
        }

        &::-webkit-slider-thumb:active {
            background: var(--button-active) !important;
            background: var(--button-active) !important;
        }*/

        /*// FIREFOX SLIDER STYLES*/
        /*&::-moz-range-track {
            background: var(--body-bg) !important;
            background: var(--body-bg) !important;
            border-left: 1px solid var(--box-border);
            border-radius: 1px;
            height: 1px;
        }

        &::-moz-range-thumb {
            background: var(--box-border) !important;
            background: var(--box-border) !important;
            border: none;
            border-radius: var(--border-radius);
            height: calc(var(--input-size) / 2);
            width: calc(var(--input-size) / 2);
        }

        &::-moz-range-thumb:hover {
            background: var(--button-hover) !important;
            background: var(--button-hover) !important;
        }

        &::-moz-range-thumb:active {
            background: var(--button-active) !important;
            background: var(--button-active) !important;
        }*/

        &.error404 #flex,
        &.home-page:not(.is-pro-member) #flex {
            /* MAKES HERO FULL WIDTH SCREEN */
            padding: 0px;
        }

        &#error-page {
            padding: 200px;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        &.home-page,
        &.landing-page {

            & #hero,
            & .hero {

                border-radius: 0px !important;

                & #wp-custom-header,
                & .tab-content,
                & .tab-pane {
                    border-radius: 0px !important;
                }
            }

            & #hero {

                & .hero {

                    /*height: 100vh;
                    max-height: 100vh;*/
                    /*overflow: hidden;*/
                    width: 100%;
                    order: 0;
                    background: var(--box-border);

                    & .tab-content * {

                        color: var(--white);
                    
                    } 

                    & iframe {
                        transform: scale(1.4);
                    }

                    & .tab-pane.active.show,
                    & .tab-pane > div {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
            
            & #secondary-nav {

                /*border-radius: 0px !important;*/

                & ul {

                    /*display: none;*/

                    &.active { 
                        display: flex;
                    }

                }
            }
            
            & #primary {

                & section,
                & .tab-content > .tab-pane sectoin {

                    box-shadow: none !important;
                    min-height: 100vh;
                    padding: 100px 0px;
                    margin: 0px;
                    border: 0px !important;
                    /*border-bottom: 1px solid var(--box-border) !important;*/

                    &:nth-of-type(odd) {
                        --bg-color: transparent;
                        background: var(--bg-color) !important;
                    }

                    &:nth-of-type(even) {
                        --bg-color: var(--header-bg);
                        background: var(--bg-color) !important;
                    }

                    &:last-of-type {
                        background: linear-gradient(
                        to bottom,
                        var(--bg-color) 0%,
                        rgba(255, 255, 255, 0) 100%
                        ) !important;
                        border-bottom: 0px solid var(--box-border) !important;
                    }

                    & h3 .badge {
                        min-width: var(--input-size);
                        height: var(--input-size);
                    }
                }
            }

            & #sidebar-controls {
                /*display: none;*/
            }

            & ul.pagination { display:none; }
            & #flex:not(.flex) {
                padding-top: 0px; 
            }
            
            /*,
            &:not(.is-pro-member) */
            &:not(.logged-in) {

                /*& .scroll-watcher-wrapper {

                    background: transparent;

                    &.has-scrolled {
                        background: var(--box-border);
                    }
                }*/

                & #primary-nav {

                    background: transparent;
                    border: 0px;

                    & nav.navbar {
                        
                        & > .container-fluid {
                            
                            padding: 0;
                            display: flex;
                            flex-wrap: nowrap;
                            align-items: center;

                            & .navbar-brand {
                                
                                padding: 0;
                                display: flex;
                                color: var(--white);

                                & * {
                                    color: var(--white);
                                }

                                &.active {
                                    color: var(--brand);
                                }
                            }

                            & # nb {

                                font-size: 18px;
                                line-height: 36px;
                                display: flex;
                                align-items: center;

                            }

                            & a:hover {

                                color: var(--white) !important;

                            }

                            /*// Pro menu takes remaining space*/
                            & .pro-menu {
                                flex: 1 1 auto;
                                max-width: 100%;

                                margin-right: 15px;
                                
                                & ul.nav {
                                    width: 100%;
                                }
                            }

                            /*// Navbar collapse stays on the right*/
                            & .navbar-collapse {
                                flex: 0 0 auto;
                            }

                            & li {

                                /*&:has(.active)::after {
                                    background: rgba(255, 255, 255, .4);
                                }*/

                                & a.nav-link {

                                    color: var(--white);
                                    background: rgba(255, 255, 255, .1);

                                    & * {
                                        color: var(--white);
                                    }

                                    &:hover {
                                        background: rgba(255, 255, 255, .4);
                                    }

                                    &.active,
                                    &:active:not(:hover) {

                                        color: var(--header-text);
                                        background: var(--white);

                                        & * {
                                            color: var(--header-text);
                                        }

                                    }

                                    &[href="#register-new-user-offcanvas"],
                                    &[href="https://www.propertunity.co/wp-login.php"] {
                                        padding-right: var(--gap);
                                    }
                                }
                            }
                        }
                    }

                    &.has-scrolled {

                        background: var(--header-bg);

                        & .navbar {
                        
                        & > .container-fluid {

                                & .navbar-brand {
                            
                                    color: var(--header-text);

                                    & * {
                                        color: var(--header-text);
                                    }
                                }

                                & li {

                                    &:has(.active)::after {
                                        background: var(--brand);
                                    }

                                    & a.nav-link {
                                            
                                        color: var(--header-text);
                                        background: var(--box-border);

                                        & * {
                                            color: var(--header-text);
                                        }

                                        &:hover {

                                            color: var(--brand);

                                            & * {
                                                color: var(--brand);
                                            }

                                        }

                                        &.active {
                                            
                                            background: var(--brand);

                                            & * {
                                                color: var(--white);
                                            }
                                        }

                                        &:not(.active.show):hover {
                                            background: var(--color-36);
                                        }
                                        
                                    }
                                }
                            }
                        }
                    }
                }

                & #hero {


                    padding: 0px;
                    margin-left: calc(-50vw + 50%);
                    margin-right: calc(-50vw + 50%);
                    width: 100vw;
                    /* // Override Bootstrap's .row > * rule */
                    max-width: none !important;  
                    

                    /*aspect-ratio: unset !important;
                    height: 100vh !important;*/

                    /* // Also override any flex constraints */
                    flex: none;  
                    
                    & .hero {
                        width: 100%;
                        max-width: 100%;

                        aspect-ratio: unset !important;
                        height: 100vh !important;

                        & canvas { border-radius: var(--border-radius); }

                        & .tab-content {

                            & .tab-pane {

                                & h1 {

                                    padding-bottom: 70px;
                                }
                            }
                        }

                    }
                }

                & #primary {

                    padding: 0;
                    width: 100vw;
                    max-width: none !important;
                    margin-left: calc(-50vw + 50%);
                    margin-right: calc(-50vw + 50%);

                    & section {

                        /*min-height: 80vh;*/
                        border-radius: 0px;
                        /*max-width: 100vw;
                        width: 100vw;
                        margin: 0 calc(-50vw + 50%);*/

                    }

                }

                & .sidebar {

                    display: none;

                    &#sidebar-left {
                        display: none;
                    }

                }

                /*& #layout-row {
                    & #hero {
                        flex: 0 0 100%;
                        max-width: 100%;
                    }
                }*/
            }

            &.is-pro-member {

                & #hero {
                    display: none;
                }
            }
        }

        &:not(.home-page) {

            & .hero,
            & .hero #pano,
            & .hero iframe,
            & .hero canvas:first-child,
            & .hero .tab-content,
            & .hero .tab-pane,
            & .hero .carousel .carousel-inner {
                border-bottom-left-radius: var(--border-radius);
                border-bottom-right-radius: var(--border-radius);
            }

            & #secondary-nav:not(.fixed) a.nav-link {

                & .icon {
                    /*  HIDE TEXT IN NAV ITEMS FOR SPACING. NEED TO BE DOING THIS WITH JS...  */
                    width: auto;
                    margin: 0;
                    padding: 0;
                }

                & .text {
                    /*  HIDE TEXT IN NAV ITEMS FOR SPACING. NEED TO BE DOING THIS WITH JS...  */
                    display: none;
                }
            }
        }

        &.landing-page {
            
            /*background: var(--white);*/

            & #primary-nav {
                box-shadow: 0px !important;
            }

            & #hero {
                overflow: hidden;
            }

            & #hero,
            & .hero {
                height: 100vh !important;
                min-height: 100vh !important;
                max-height: 100vh !important;
                padding: 0 !important;
            }

            & .hero #secondary-nav:not(.fixed) {
                position: absolute;
                left: 0;
                bottom: 0;
                right: 0;
                /*height: 80px;
                min-height: 80px;*/
                /*background: rgba(255, 255, 255, .05);*/
            }
        }

        /* Base checkbox styles */
        & ul.radchecks {

            li {

                height: var(--input-size);
                background: transparent;

                &:last-child {
                    margin-right: 0px !important;
                }

                & input {

                    &:checked {

                        & + label,
                        & + label:hover {

                            color: var(--white);
                            background: var(--button-active);

                            & * { color: var(--white); }

                            & .check::before,
                            & .check::after {
                                background: var(--white);
                            }
                        }
                    }
                }

                & label {

                    height: var(--input-size);
                    color: var(--header-text);
                    background: var(--button); /* Let the li handle the background */

                    & .check::before,
                    & .check::after {
                        background: var(--header-text);
                    }

                    &:hover {
                        color: var(--header-text);
                        background: var(--button-hover);
                        & * { color: var(--header-text); }
                    }

                    &:active {
                        color: var(--white);
                        background: var(--button-active);
                        transform: scale(0.99) translateY(2px);
                        & * { color: var(--white); }

                        & .check::before,
                        & .check::after {
                            background: var(--white);
                        }
                    }
                }
            }
        }

        & li {
            background: transparent !important;
            background: transparent !important;
            list-style: none !important;
        }

        & input[type=range] {

            -webkit-appearance: none;
            appearance: none;
            background: transparent;
            cursor: pointer;
            width: 100%;
            border: none;
            
            &:focus {
                outline: none;
            }

        }

        & [class^="col-"] {
            margin-bottom: 15px;
        }

        & i {
            font-style: inherit;
            font-family: var(--fa-font);
        }

        & article, & aside, & details, & figcaption, & figure, & footer, & eader, & hgroup, & menu, & nav, & section, & main {
            display: block;
        }

        & ul li a,
            & label:not(.login-label),
            & button {
                
                color: var(--header-text);
                background: var(--box-border);
                
                & * {
                    color: var(--header-text);
                }

                &:focus {
                    color: var(--header-text);
                    background: var(--box-border);
                    
                    & * {
                        color: var(--header-text);
                    }
                }

                &:hover {
                    color: var(--header-text);
                    background: var(--button-hover);
                    
                    & * { color: var(--header-text); }
                }

                &.active:not([data-bs-slide]),
                &:active:not([data-bs-slide]) {

                    color: var(--white) !important;
                    background: var(--cta);

                    & *:not(.badge) { color: var(--white) !important; }
                    
                    &:hover,
                    &:focus {
                        color: var(--white);
                        background: var(--cta-hover);
                        & * { color: var(--white) !important; }
                    }
                    
                    /*& *,
                    &:hover *,
                    &:focus * {
                        color: var(--white) !important;
                    }*/
                }

                & .badge {

                    color: var(--header-text);
                    background: var(--header-bg);

                }
            }

            & .dropdown-menu {

                background: var(--header-bg);
                border: 1px solid var(--box-border);

                & li {

                    background: transparent;

                    & a {
                        

                        background: transparent;

                        & * {
                            color: var(--header-text);
                        }

                        &:hover {
                            color: var(--header-text) !important;
                            background: var(--button-hover);

                             & * {
                                color: var(--header-text) !important;
                            }
                        }

                        &.active,
                        &:active {

                            color: var(--white) !important;
                            background: var(--button-active);

                            & * {
                                color: var(--white) !important;
                            }
                        }
                    }
                }
            }

            & ul.radchecks li input,
            & .btn-group input {

                & + label {

                    color: var(--header-text);
                    background: var(--box-border);

                    & * {
                        color: var(--header-text);
                    }

                    &:active,
                    &:active:hover {

                        background: var(--button-active);

                        & * {
                           

                        }
                    }
                }

                &:checked + label {

                    color: var(--white);
                    background: var(--button-active);

                    & * {
                        color: var(--white);
                    }
                }
            }

            & input + label {

            }

            & ul.nav-links {
                & li {

                    a.nav-prev, 
                    a.nav-next { 
                        background: var(--header-bg) !important; 
                        border: 1px solid var(--box-border) !important; 
                    }
                }
            }

            & input[type="range"] {

                &::-webkit-slider-thumb,
                &::-webkit-slider-runnable-track {
                    background: var(--body-text);
                }
            }

            & .avatar-marker {
                border-color: var(--header-text) !important;
            }

            & .form-floating>input~label,
            & .form-floating>.form-select~label { 
                background: transparent !important;
            }

            & .input-group > .form-floating > .form-control {
                background: var(--body-bg);
            }
            
            & label[for="status-switch"] {
                background: var(--body-bg);
            }
            
            & label.status-switch {
                & a i {
                    color: var(--body-text);
                }
            }

            & .hamburger-inner, 
            & .hamburger-inner::before, 
            & .hamburger-inner::after {
                background: var(--header-text);
            }

            & ul.radchecks li label:hover .check::before,
            & ul.radchecks li label:hover .check::after {
                background: var(--header-text);
            }

            & ul.radchecks li:has(input:checked):hover label .check::before,
            & ul.radchecks li:has(input:checked):hover label .check::after {
                background: white !important;
            }

            & ul.radchecks li input:checked + label .check::before,
            & ul.radchecks li input:checked + label .check::after {
                background: white !important;
            }

            & input:checked + label,
            & input:checked + label:hover  {
                background: var(--button-active) !important;
            }

            & input:checked + label:hover .check::before,
            & input:checked + label:hover .check::after  {
                background: var(--white) !important;
            }

            & select {
                background: var(--body-bg);
                color: var(--body-text) !important;
            }
            & select option {
                background: var(--body-bg);
                color: var(--body-text);
            }
            & select option:hover {
                background: var(--button-hover);
                color: var(--body-text);
            }

            & input:-webkit-autofill,
            & input:-webkit-autofill:hover,
            & input:-webkit-autofill:focus,
            & input:-webkit-autofill:active {
                -webkit-box-shadow: 0 0 0 30px var(--body-bg) inset !important;
                -webkit-text-fill-color: var(--header-text) !important;
                box-shadow: 0 0 0 30px var(--body-bg) inset !important;
            }

        #stats { width: 0; height: 0; display: none; }

        .progress {

            height: 15px;
            padding: 0;
            margin: 0;
            /*margin-bottom: 15px;*/
            border: 1px solid var(--box-border );
            background: var(--box-border) !important;
            z-index: 999999;

            & .progress-bar {
                
                background-color: var(--stripes) !important;
                border-top-right-radius: var(--border-radius);
                border-bottom-right-radius: var(--border-radius);

                color: var(--white);

                /* THIS MESSES WITH THE PROGRESS BAR SLIDING BACK TO STAGE 1. TAKES LONGER. FORM PROGRESS NEEDS TO START AT STAGE 1 */
                /*transition: width 1s linear !important; */
                
                &.progress-bar-striped {
                    
                    
                }

                &.progress-bar-animated {
                    font-size: 16px;
                    font-weight: bolder;
                    animation: 1s linear infinite progress-bar-stripes;
                }
            }
        }

        /*& .modal fieldset:not(.prev-next-submit-btns) { height: 50vh; }
        & .offcanvas, .modal * { font-weight: bold !important; }*/
        & .modal-footer:empty { display: none; }

        & .offcanvas:not(#sidePanel),
        & #global-search-offcanvas {
            /*z-index: 1047;*/
        }

        & .modal, 
        & .offcanvas {
            
            box-shadow: var(--box-shadow);

            color: var(--header-text);
            /*background: var(--header-bg);*/

            * {
                color: var(--header-text);
            }

            & .progress {
                margin-bottom: var(--gap);
            }

            & form {
                background: transparent;
            }

            & .modal-content { 
                color: var(--header-text);
                background: var(--body-bg);
                border-radius: var(--border-radius);
                border-color: var(--box-border);

                &.alert {

                    padding: 0px;

                    & * { font-weight:bold; }

                    &.success { 
                        color: var(--success);
                        background-color: var(--success-light);
                        & * { color: var(--success); }
                    }

                    &.warning { 
                        color: var(--warning);
                        background-color: var(--warning-light);
                        & * { color: var(--warning); }
                    }

                    &.error { 
                        color: var(--error);
                        background-color: var(--error-light);
                        & * { color: var(--error); }
                    }
                }
            }
            & .modal-content .modal-header { 
                color: var(--header-text);
                background: var(--header-bg) !important;
                border-bottom: 1px solid var(--box-border) !important;
            }
            & .modal-content .modal-header .btn-close {
                /*--bs-btn-close-color: var(--header-text);*/
            }
            & .modal-content .modal-header * {
                /*color: var(--body-text) !important;*/
            }

            & .modal form button,
            & .offcanvas form button {
                background: var(--box-border);
            }
            & .offcanvas-header * {
                color: var(--body-text);
            }
        }

        & .offcanvas-backdrop,
        & .modal-backdrop {

            /*opacity: unset !important;*/
            background: var(--color-03) !important; 
            /*background: rgba(255, 255, 255, 0.2) !important; */
           /* -webkit-backdrop-filter: var(--fog);
                    backdrop-filter: var(--fog);*/

            &.fade.show {

                * {
                    color: var(--body-text);
                    font-size: 22px;
                    font-weight: bold;
                }

                & #stats {
                    width: calc(100% - 600px);
                    min-height: 100%;
                    display: block;
                    display: none;
                    padding: 60px;
                    overflow-y: scroll;
                }
            }
        }

        & .offcanvas {

            /*&#sidePanel {

                width: 70px !important;
                transition: width 0.3s ease;
            
                &.show {

                    width: 280px !important;
                    
                    
                    & ~ .offcanvas-backdrop {

                    }

                }

                &:not(.show) .icon-text-badge .text {
                    display: none;
                }

                &:not(.show) .nav-link {
                    justify-content: center;
                    padding: 12px 0;
                }

                &:not(.show) .icon-text-badge {
                    display: flex;
                    justify-content: center;
                }

                & {
                    visibility: visible !important;
                    transform: none !important;
                }

                & ul.radchecks {

                    & li {

                        & a {

                            background: transparent;

                            &:hover {
                               
                                background: rgba(0, 0, 0, .033);

                                & * {
                                   
                                }
                            }

                            &.active,
                            &:active,
                            &:active:hover {
                                background: rgba(0, 0, 0, .1);
                                
                            }
                        }
                    }
                }
            }*/

            & .offcanvas-header {

                padding: 30px 15px;
                padding-left: 11px;
                display: flex;
                justify-content: space-between;
                transition: var(--transition);
                width: 100%;

                & .offcanvas-title {
                    
                    color: var(--brand);
                    width: 100%;
                    display: flex;
                    align-items: center;

                    & * {
                        font-size: 24px;
                        font-weight: bold;
                        color: var(--header-text);
                    }
                    & i:first-of-type {
                        margin: 0px 15px 0px 15px;
                        font-size: 30px;
                    }
                }
            }

            & .offcanvas-body {
                
                padding: 30px 15px 30px 30px;
                overflow-y: visible;
                
                padding-top: 30px;
                /*overflow: auto;*/

                &::-webkit-scrollbar {
                    display: none;
                }

                & form {

                    margin: 0px;
                    padding: 0px !important;
                    border: none;

                    & .progress {
                        /*  position: absolute;*/
                        top: 88px;
                        left: 15px;
                        right: 15px;
                        /*margin-right: 15px;*/
                    }
                }
            }

            &.offcanvas-top {
                height: fit-content;
                bottom: auto !important;
                border-bottom: 1px solid var(--box-border) !important;

                & .offcanvas-header {

                    padding: 15px 30px;
                    padding-left: 65px;
                    height: 70px;

                    & .offcanvas-title {

                        & i {
                            display: none;
                        }
                    }
                }

                & .offcanvas-body {
                    padding: 15px 30px 15px 30px;
                    /*overflow-y: hidden;*/
                }
            }
            &.offcanvas-end {
                border-left: 1px solid var(--box-border) !important;
            }
            &.offcanvas-start {
                border-right: 1px solid var(--box-border) !important;
            }

            &.offcanvas-start,
            &.offcanvas-end {

                width: 350px;
                padding-right: 15px;

                & .offcanvas-header {
                    height: 70px;
                    min-height: 70px;
                    margin-top: 15px;

                    & * {
                        display: none;
                    }
                }

                & .offcanvas-body {

                    & .input-group {
                        margin-bottom: 15px;
                    }

                    /*padding-top: 15px;*/
                    padding: 10px;
                    margin: 0px;
                    /*overflow-y: auto;*/

                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    & ul.radchecks {
                
                        display: flex;
                        flex-direction: row;

                        & li {

                            width: 100%;
                            margin-right: 0px;

                            &:not(:last-child) {
                                margin-bottom: 15px;
                            }

                            & a,
                            & button {
                                width: 100%;

                                .icon {


                                }
                            }
                        }
                    }
                }

            }

            & ul.radchecks {



                & li {

                    box-shadow: none !important;

                    & a,
                    & label,
                    & button {

                        background: var(--box-border);
                        box-shadow: none !important;

                        &:hover {
                            background: var(--button-hover);
                        }
                    }
                }
            }
        }

        & form {

            & fieldset {

                padding-right: 15px;

                &.prev-next-submit-btns {
                    
                    background: var(--header-bg) !important;
                    padding: 30px 40px !important;
                    /*z-index: 1;*/

                    & .col, 
                    & [class^="col-"] {

                        display: flex;
                    }

                    & button {

                        color: var(--header-text);
                        background: var(--button);
                        font-size: 24px;
                        font-weight: bold;

                        &:hover {
                            background: var(--button-hover);
                        }

                        &:active {
                            background: var(--button-active);
                        }

                        & * {
                            color: var(--header-text);
                            font-size: 24px;
                            font-weight: bold;
                        }

                        &.reset,
                        &.reset-form {
                            margin-right: 30px;
                        }
                    } 
                }
            }
        }

        & section {

            margin: 0;
            padding: 30px;
            background: var(--header-bg);
            border: 1px solid var(--box-border);
            border-radius: var(--border-radius);
            overflow: hidden;

            &:not(:last-child) {
                margin-bottom: var(--block-margin);
            }

            & p, & h5, & h6, & small {
                margin-bottom: 15px;
            }

            & h3 {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }

        & a {
            color: var(--header-text);
            font-weight: bold;
            text-decoration: none;
            transition: var(--transition);

            &:hover {
                color: var(--brand);
            }

        }

        & ul {

            & li {

                list-style: none;

                & a {


                }
            }
        }

        & li {

                list-style: none;
                
                & a {


                }
            }

        & p {

            color: var(--header-text);

            &:empty {
                display: none;
            }
        }

        & blockquote {

            padding: 15px !important;
            width: 100%;
            text-align: left;
            border-left: 5px solid var(--brand);
            border-top-left-radius: 0px !important;
            border-bottom-left-radius: 0px !important;
            border-radius: var(--border-radius);
            background: var(--color-39);
            color: var(--brand);

            border-color: var(--button-active);
            background: var(--box-border);
            color: var(--header-text);

            &.success {

                color: var(--success) !important;
                border: 1px solid var(--success) !important;
                border-left: 5px solid var(--success) !important;
                background: var(--success-light) !important;

                & * {
                    color: var(--success) !important;
                }
            }

            &.warning {

                color: var(--warning) !important;
                border: 1px solid var(--warning) !important;
                border-left: 5px solid var(--warning) !important;
                background: var(--warning-light) !important;

                & * {
                    color: var(--warning) !important;
                }
            }

            &.error {

                color: var(--warning) !important;
                border: 1px solid var(--error) !important;
                border-left: 5px solid var(--error) !important;
                background: var(--error-light) !important;

                & * {
                    color: var(--error) !important;
                }
            }
        }

        & .bold, & .strong {
            font-weight: bold !important;
        }
        
        & .money, & .price {
            color: var(--success);
            font-weight: bold;
        }

        & output {

            text-shadow: none !important;
            color: var(--header-text);

            & * { color: var(--header-text); }
            & .price {
                color: var(--header-text);
            }
        }
        & .smiley {
            color: var(--smiley) !important;
        }
        & .error {
            color: var(--error);
        }
        & .frosted { 
            background: rgba( 255, 255, 255, .5 ) !important;
        }
        & .glass {
            background: rgba(255, 255, 255, 0.1);
        }
        @supports ( -webkit-backdrop-filter: none ) or ( backdrop-filter: none ) {
            & .frosted {
                -webkit-backdrop-filter: var(--fog);
                        backdrop-filter: var(--fog);
            }
            & .glass {
                -webkit-backdrop-filter: var(--fog);
                        backdrop-filter: var(--fog);
            }
        }

        & hr {
            height: 1px;
            padding: 0;
            margin: 30px 0;
            border: 0;
            /*border-top: 1px solid var(--box-border);*/
            background: var(--box-border);
            opacity: 1;
            display: block;
        }

        & .dropdown-toggle {

            &::after {
                content: none !important; /* HIDE CARET */
            }
        }

        & .dropdown-menu,
        & .submenu {
            
            /*width: max-content;*/
            padding: 0;
            margin: 0;
            /*min-width: 250px;*/
            background: var(--header-bg) !important;
            border-radius: var(--border-radius) !important;
            border-color: var(--box-border);
            box-shadow: var(--box-shadow);
            position: absolute;
            overflow: visible;
            z-index: 999;

            & li {
                width: 100% !important;
                padding: 0;
                margin: 0 !important;
                border: none !important;
                border-radius: 0px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: transparent;

                &:not(:last-child) {
                    
                    & a,
                    & button {
                        border-bottom: 1px solid var(--box-border);
                    }
                }
            
                &:first-child {

                    border-top-left-radius: var(--border-radius);
                    border-top-right-radius: var(--border-radius);
                  
                    & > a {
                        border-top-left-radius: var(--border-radius);
                        border-top-right-radius: var(--border-radius);
                    }
                }
            
                &:last-child {
                    
                    border-bottom-left-radius: var(--border-radius);
                    border-bottom-right-radius: var(--border-radius);

                    & > a {
                        border-bottom-left-radius: var(--border-radius);
                        border-bottom-right-radius: var(--border-radius);
                    }
                }
            
                &:not(:first-child):not(:last-child) {
                    border-radius: 0;

                    & > a {
                        border-radius: 0;
                    }
                }
            
                &:hover > .submenu {
                    display: block;
                }

                & a,
                & button {

                    cursor: pointer;
                    width: 100%;
                    height: var(--input-size);
                    padding: 15px;
                    color: var(--header-text);
                    background: transparent;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-radius: 0px;
                
                    &:focus,
                    &:active {
                        color: var(--white);
                        background: var(--brand);
                    }

                    &:hover {

                        color: var(--header-text);
                        background: var(--button-hover) !important;
                      
                        & * {
                            color: var(--brand);
                        }
                    }
                    
                    &.active,
                    &:active {

                        color: var(--white);
                        background: var(--button-active) !important;
                      
                        & * {
                            color: var(--white);
                        }
                      
                        &:hover {
                            color: var(--white);
                            background: var(--button-active) !important;
                        }
                    }
                }
            }
        }

        .dropdown {

            & button.dropdown-toggle {

                color: var(--header-text);
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;

                padding-left: 15px;

                /*border: 0px;*/
                justify-content: flex-start;
                font-weight: bold;
                
                &.show,
                &.show:hover,
                &:focus {
                    color: var(--text-active) !important;
                    background: var(--box-border) !important;
                }

                & + .dropdown-menu {

                    & a {

                        & .badge {

                            color: var(--header-text);
                        }

                        &:hover {

                            color: var(--header-text);
                            background: var(--button-hover);
                            & * { color: var(--header-text); }
                        }
                    }
                }

            }

            & .dropdown-toggle {

                border-radius: var(--border-radius);

                &::after {
                    content: none !important; /* HIDE CARET */
                }
                
                &.show {

                    color: var(--white);
                    background: var(--brand);

                    * {
                        color: var(--white);
                    }

                    .badge {
                        color: var(--brand);
                    }

                    &:hover {
                        color: var(--white);
                        background: var(--brand);
                    }
                }
          
                &a,
                &button {

                    &:focus,
                    &:active {
                        color: var(--white);
                        background: var(--brand);
                    }
                }

            }

            /*& .dropdown-menu,
            & .submenu {
                
                padding: 0;
                margin: 0;
                background: var(--header-bg) !important;
                border-radius: var(--border-radius) !important;
                border-color: var(--box-border);
                box-shadow: var(--box-shadow);
                position: absolute;
                overflow: visible;
                z-index: 999;

                & li {

                    padding: 0;
                    margin: 0 !important;
                    border: none !important;
                    border-radius: 0px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: transparent;

                    &:not(:last-child) {
                        
                        & a,
                        & button {
                            border-bottom: 1px solid var(--box-border);
                        }
                    }
                
                    &:first-child {

                        border-top-left-radius: var(--border-radius);
                        border-top-right-radius: var(--border-radius);
                      
                        & > a {
                            border-top-left-radius: var(--border-radius);
                            border-top-right-radius: var(--border-radius);
                        }
                    }
                
                    &:last-child {
                        
                        border-bottom-left-radius: var(--border-radius);
                        border-bottom-right-radius: var(--border-radius);

                        & > a {
                            border-bottom-left-radius: var(--border-radius);
                            border-bottom-right-radius: var(--border-radius);
                        }
                    }
                
                    &:not(:first-child):not(:last-child) {
                        border-radius: 0;

                        & > a {
                            border-radius: 0;
                        }
                    }
                
                    &:hover > .submenu {
                        display: block;
                    }

                    & a,
                    & button {

                        cursor: pointer;
                        width: 100%;
                        height: var(--input-size);
                        padding: 15px;
                        color: var(--header-text);
                        background: transparent;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        border-radius: 0px;
                    
                        &:focus,
                        &:active {
                            color: var(--white);
                            background: var(--brand);
                        }

                        &:hover {

                            color: var(--header-text);
                            background: var(--button-hover) !important;
                          
                            & * {
                                color: var(--brand);
                            }
                        }
                        
                        &.active,
                        &:active {

                            color: var(--white);
                            background: var(--button-active) !important;
                          
                            & * {
                                color: var(--white);
                            }
                          
                            &:hover {
                                color: var(--white);
                                background: var(--button-active) !important;
                            }
                        }
                    }
                }
            }*/

            /*& .dropdown-menu {
              
                &.v-scroll {
                    
                    max-height: calc(var(--input-size) * 5) !important;
                    overflow-y: auto;
                    overflow-x: hidden;
                }

                & .dropdown:hover > .dropdown-menu {
                    display: block;
                }

                & .submenu {
                    
                    display: none;
                    left: 100%;
                    top: -7px;

                    & li:hover > .submenu {
                        display: block;
                    }
                }
            }*/
        }

        & .dropdown-menu {
              
            /*max-width: 200px;*/
            /*&.v-scroll {
                
                max-height: calc(var(--input-size) * 5) !important;
                overflow-y: auto;
                overflow-x: hidden;
            }*/

            & .dropdown:hover > .dropdown-menu {
                display: block;
            }

            & .submenu {
                
                display: none;
                left: 100%;
                top: -7px;

                & li:hover > .submenu {
                    display: block;
                }
            }
        }

        & .accordion {

            width: 100%;

            & .accordion-item {

                &:first-of-type,
                &:first-of-type :is(h1,h2,h3,h4,h5,h6,button) {
                    border-top-right-radius: var(--border-radius) !important;
                    border-top-left-radius: var(--border-radius) !important;
                }
                &:last-of-type,
                &:last-of-type :is(h1,h2,h3,h4,h5,h6,button) {
                    border-bottom-right-radius: var(--border-radius) !important;
                    border-bottom-left-radius: var(--border-radius) !important;
                }

                & button {
                    
                    font-size: 20px;
                    font-weight: 400;
                    padding-right: 20px;
                    background: transparent !important;
                    
                    &:hover {
                        box-shadow: var(--box-shadow-none);
                    }
                    &:focus {
                        box-shadow: var(--box-shadow-none);
                    }
                    &:active {
                        background: transparent;
                    }
                    &::after {
                        color: red;
                    }
                }
            }
        }

        /*& .tooltip {
      
            & .tooltip-inner {
                color: var(--header-text);
                background: var(--button-hover) !important;
                border: 1px solid var(--header-text);
            }

        }*/

        & .tooltip {

            /* TRYING TO GET RID OF BACKGROUND OPACITY. NO IDEA WHERE ITS COMING FROM */
            z-index: 99999 !important;
            -webkit-backdrop-filter: none !important;
                    backdrop-filter: none !important;

                & * {
                    -webkit-backdrop-filter: none !important;
                    backdrop-filter: none !important;
                }
  
            & .tooltip-inner {
                color: var(--header-text);
                font-size: 20px;
                font-weight: bold;
                text-align: center;
                padding: 15px;
                border-radius: var(--border-radius);
                width: auto;
                box-shadow: none;
                opacity: 1 !important;
                background: var(--button-hover) !important;
                border: 1px solid var(--header-text);
            }

            &.bs-tooltip-top .tooltip-arrow::before,
            &.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
                border-top-color: transparent !important;
            }

            &.bs-tooltip-bottom .tooltip-arrow::before,
            &.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
                border-bottom-color: transparent !important;
            }

            &.bs-tooltip-start .tooltip-arrow::before,
            &.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
                border-left-color: transparent !important;
            }

            &.bs-tooltip-end .tooltip-arrow::before,
            &.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
                border-right-color: transparent !important;
            }

        }

        .btn-group {

            padding: 0;
            margin: 0;
            background: transparent;
            background: transparent;
            border: 0px solid var(--box-border);
            border-radius: var(--border-radius);



            &  > input[type=radio] {
                position: absolute;
                clip: rect(0,0,0,0);
                pointer-events: none;

                &:checked {

                    & + label {
                        color: var(--white);
                        -webkit-text-fill-color: var(--white);
                        background: var(--button-active);
                    }

                    & + label:hover {
                        cursor: default;
                    }
                }
            }

            & label,
            & button {

                width: auto;
                border-radius: 0;
               
                background: var(--box-border);

                color: var(--header-text);
                /*-webkit-text-fill: var(--header-text);*/
                font-size: 20px;

                border: 0px solid var(--box-border);
                border: none;
                box-shadow: var(--box-shadow-none);
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                flex: 1 1 auto;
                cursor: pointer;
                transition: var(--transition);

                &:not(:first-child),
                &:not(:first-of-type) {
                    border-left: none;
                }

                &:first-of-type {
                    border-top-left-radius: var(--border-radius);
                    border-bottom-left-radius: var(--border-radius);
                }
                &:last-of-type {
                    border-top-right-radius: var(--border-radius);
                    border-bottom-right-radius: var(--border-radius);
                }

                &:hover {
                    color: var(--header-text);
                    background: var(--button-hover);

                    * { color: var(--header-text); }
                }

                &.active,
                &:active,
                &:active:hover {

                    color: var(--white);
                    background: var(--button-active);

                    * { color: var(--white); }
                }

                &:active { transform: scale(0.99) translateY(4px); }

                &#trigger-drag { 
                    border-top-right-radius: var(--border-radius); 
                    border-bottom-right-radius: var(--border-radius);
                }

                &#save-drag { border-radius: var(--border-radius); }

            }

            & li { background: transparent; }

            &.dropdown { border: 0px; }

        }

        & .input-group {

            & .btn-group:not(#search-properties-status) {

                & label,
                & button {

                    &:first-of-type {
                        border-top-left-radius: 0px;
                        border-bottom-left-radius: 0px;
                    }
                }
            }
        }

        & .card {

            padding: 0;
            margin-top: 0;
            border: 1px solid var(--box-border);
            box-shadow: var(--box-shadow);
            overflow: hidden;
            background: var(--header-bg);
            border-radius: var(--border-radius) !important;
            transition: var(--transition);
            /*color: var(--header-text);*/

            &.active {
                border: 3px solid var(--card-active);
                padding: 5px;
                background: var(--card-active) !important;
            }

            &:hover {
                box-shadow: var(--box-shadow-hover);
                transform: translateY(1px);
            }

            &:active {
                box-shadow: var(--box-shadow-active);
                transform: translateY(2px);]
            }

            & * {
                color: var(--header-text);
            }

            & a {
                &:hover { color: var(--text-hover); }
                &:active { color: var(--text-active); }
            }

            & .sorting { 
                width: 0;
                height: 0;
                font-size: 0px;
                line-height: 0px;
                visibility: hidden;
                display: none;
            }

            & .card-avatar {

                width: auto;
                display: flex;
                list-style: none;
                transform-origin: bottom left;

                & * { padding:0px; margin:0px; }

                & li {

                    position: relative;
                    display: block;

                    & .badge {

                        aspect-ratio: 1/1 !important;
                        position: absolute;
                        bottom: -7px;
                        right: -7px;
                        z-index: 1;
                        border: 2px solid var(--header-bg) !important;

                        &:empty { display: block; }
                        &.online { background: var(--success) !important; }
                        &.recently-online { background: var(--warning) !important; }
                        &.offline { background: var(--error) !important; }
                        &.no-activity-recorded { background: #000 !important; }
                        
                    }
                    
                    & img.avatar {
                        width: 100px;
                        height: 100px;
                        background-color: var(--header-bg);
                        border: 3px solid var(--header-bg) !important;
                    }
                }
            }

            & .card-avatar, 
            & .card-avatar .nav-item, 
            & .card-avatar .nav-link {
                display: flex;
                height: fit-content;
                width: fit-content;
                padding: 0;
                margin: 0;
                line-height: 0;
            }

            & .card-avatar img.avatar {
                display: block;
                height: auto;
                max-height: 100%;
            }

            & .card-header {

                width: 100%;
                aspect-ratio: 16/9;
                overflow: hidden;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                border-radius: 0px !important;
                transition: var(--transition); 

                flex-shrink: 0;

                /*color: var(--header-text) !important;*/
                background: var(--header-bg) !important;
                position: relative;

                &:not(.not-header-image) {
                    padding: 0;
                    border: 0;
                    background: var(--box-border);
                }

                & .bubble {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: var(--border-radius);
                    
                    position: absolute;
                    z-index: 2;
                    max-height: var(--input-size);
                    background: rgba(255, 255, 255, 0.3) !important;
                    -webkit-backdrop-filter: var(--fog);
                            backdrop-filter: var(--fog);

                    border: 1px solid var(--box-border);
                    color: var(--header-text) !important;
                    
                    &.active-sort {

                        display: none;

                        top: 15px;
                        left: 15px;
                        font-size: 24px;
                        color: var(--header-bg);

                        & * { color: var(--header-bg); }

                    }

                    & *,
                    & i {
                        color: var(--header-bg);
                    }
                }

                & .card-header-img {
                    width: 100%;
                    height: 100%;
                    background: center center / cover no-repeat;
                    position: relative;
                    transform: scale(1.3);
                }

                & .mapView,
                & .thumbnailView {

                    position: absolute;
                    z-index: 1;
                    color: var(--header-bg);
                    border-radius: var(--border-radius);
                    padding: 0px;
                    margin: 0px;

                    align-items: flex-end !important;

                    display: flex;
                    flex-direction: row; /* Avatar and Text side-by-side */
                    align-items: center; /* Center avatar vertically against the 3 lines */
                    gap: 12px;
                    bottom: 15px;
                    left: 15px;
                    background: transparent !important;
                    text-align: left;

                    & * { color: inherit; }

                    /* The container for Name, Renter, and Sorting Info */
                    & > div:not(.card-avatar) {
                        display: flex;
                        flex-direction: column; /* Stack the 3 lines */
                        justify-content: center;
                        gap: 2px; /* Space between the lines */

                        & p {
                            margin: 0;
                            line-height: 1.2;
                            font-size: 14px;

                            &:first-of-type {
                                font-size: 24px;
                            }
                        }
                    }
                }
            }

            & .card-body {

                padding: 15px;
                display: flex;
                flex: 3;
                flex-direction: column;
                justify-content: space-between;
                word-break: break-word;
                position: relative;
                padding-bottom: 60px;
                border: 0 !important; 

                & * {
                    /*color: var(--header-text);*/
                }

                & .card-info {

                    text-align: center;

                    & p {
                        margin-bottom: 15px;
                    }

                    & p:first-child {
                        font-size: 1.25rem;
                        line-height: 28px;
                        font-weight: bold;
                        margin-bottom: 10px;
                    }
                }  

                & .card-footer {

                    font-size: 16px;
                    font-weight: bold;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    min-height: var(--input-size);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 12px;
                    font-weight: bold;
                    /*color: var(--header-text) !important;*/
                    border-top: none;
                    
                    border-top: 1px solid var(--box-border) !important;
                    border-radius: 0px !important;
                    background-color: transparent;

                    & * {
                        font-size: 12px;
                        font-weight: bold;
                        color: var(--header-text);
                    }
                }
            }
        }

        /*
        ▗▄▄▖ ▗▄▄▖ ▗▄▄▄▖▗▖  ▗▖ ▗▄▖ ▗▄▄▖▗▖  ▗▖    ▗▖  ▗▖ ▗▄▖ ▗▖  ▗▖
        ▐▌ ▐▌▐▌ ▐▌  █  ▐▛▚▞▜▌▐▌ ▐▌▐▌ ▐▌▝▚▞▘     ▐▛▚▖▐▌▐▌ ▐▌▐▌  ▐▌
        ▐▛▀▘ ▐▛▀▚▖  █  ▐▌  ▐▌▐▛▀▜▌▐▛▀▚▖ ▐▌      ▐▌ ▝▜▌▐▛▀▜▌▐▌  ▐▌
        ▐▌   ▐▌ ▐▌▗▄█▄▖▐▌  ▐▌▐▌ ▐▌▐▌ ▐▌ ▐▌      ▐▌  ▐▌▐▌ ▐▌ ▝▚▞▘ 

        */

        &:not(.landing-page) #primary-nav.has-scrolled.no-shadow {
            border-color: var(--header-bg);
        }
        
        & .navbar-brand-icon {

            /*background: var(--cta);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;*/

            color: var(--subfooter-bg);

            font-size: var(--input-size);
            transition: var(--transition) !important;
            cursor: pointer;
            position: fixed !important;
            top: 16px; /* 16 or 10 primary nav isn't same height as secondary nav???? */
            left: 21px;
            z-index: 1050; /* STAY BELOW BOOTSTRAP MODALS / OFFCANVAS */
            font-size: var(--input-size);

            transition: color 0.3s ease-in-out;

            &:hover {
                
                background: var(--cta-hover);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                color: transparent; /* Fallback */
                
                &::after { 
                    opacity: 1; 
                }
            }

            &.active {

                /*background: var(--cta-hover);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                color: transparent;*/
                
                rotate: -90deg;

                color: var(--layer-08);

            }

            
        }

        & #primary-nav {

            width: 100vw; /* THIS STOPS THE JENKINESS WHEN OFFCANVAS OPENS */
            height: auto;
            padding: 0px;
            padding-left: calc( var(--input-size) + 8px);
            padding-right: 15px !important;
            margin: 0px;
            border-bottom: 1px solid var(--box-border);
            color: var(--header-text);
            background: var(--header-bg);
            background-image: none;

            position: fixed;
            top: 0;
            left: 0;
            z-index: 1039;

            display: flex; 
            flex-direction: column; 

            outline: 0 !important;

            /*padding-top: 0;
            margin-bottom: 0px;
            height: auto;
            min-height: 100vh;*/

            /* REQUIRED FOR AUTO-HIDE #primary-nav */

            clear: both;
            transform: translateY(0);
            will-change: transform;
            
            &::after { 
                clear: both;
                content: "";
                display: block;
            }

            & .container,
            & .container-fluid {
                padding: 15px;
            }

            & > nav > .container-fluid {
                padding: 0;
            }

            & [class^="col-"] {
                display: flex;
                margin-bottom: 0px;

                &:first-of-type {
                    justify-content: flex-start;
                }
                &:last-of-type {
                    justify-content: flex-end; 
                }
            }

            & .navbar-brand {

                padding: 0;
                display: flex;
                color: var(--header-text);

                font-size: 36px;
                /*font-weight: bold;*/

                & * {
                    color: var(--header-text);
                }

                & #breadcrumbs {

                    font-size: 18px;
                    line-height: 36px;
                    display: flex;
                    align-items: center;

                    & .raq-sep {
                        padding: 0 5px;
                    }
                    
                }

                & a:hover {

                    color: var(--subfooter-bg) !important;

                }
            }

            &.no-shadow {
                border-bottom: 1px solid var(--header-bg);
                box-shadow: none !important;
            }

            & li {
                /*background: transparent;*/
            }

            & > li.dropdown {
                 /* BB OVERRIDE */
                /*width: var(--input-size) !important;*/
            }
           
            & .dropdown li {

               /* width: 100%;

                &:not(:last-of-type) { 
                    border-bottom: 1px solid var(--box-border) !important;
                }

                & a { 
                    min-width: 100%; 
                }*/
            }

            & ul li.dropdown a > ul li ul li ul {
                /*width: 300px;
                max-height: 400px;
                overflow-y: scroll;
                overflow-x: hidden;*/
            }
            /*& ul li.dropdown a.show .hamburger-inner::before { top: -3px; }
            & ul li.dropdown a.show .hamburger-inner::after { bottom: 1px; }*/

            & .badge {

                /*margin-left: 30px;*/
                /*  color: var(--white) !important;*/
                /*  border: 1px solid var(--glass);*/
                /*border-radius: 12px;
                display: flex;
                align-items: center;
                position: absolute;*/
                /*top: -9px;
                right: -9px;*/
            }
            & .dropdown-menu .badge {
                /* KEEPS BADGE INLINE WITH TEXT */
                position: unset;
            }

            & > li.dropdown {
                 /* BB OVERRIDE */
                /*width: var(--input-size) !important;*/
            }

        }

        /*

        ▗▖ ▗▖▗▄▄▄▖▗▄▄▖  ▗▄▖ 
        ▐▌ ▐▌▐▌   ▐▌ ▐▌▐▌ ▐▌
        ▐▛▀▜▌▐▛▀▀▘▐▛▀▚▖▐▌ ▐▌
        ▐▌ ▐▌▐▙▄▄▖▐▌ ▐▌▝▚▄▞▘

        */

        & #hero {

            margin-bottom: var(--gap);
            outline: none !important;
            border: 0px;

            & *:not(.avatar-wrapper) {
                outline: none !important;
                border: 0px;
            }

            .hero {

                padding: 0;
                margin: 0;
                width: 100%;
                height: auto;
                
                position: relative;
                overflow: hidden;
                border-radius: var(--border-radius);
                box-shadow: var(--box-shadow);

                background-size: cover;        /* makes it cover the container */
                background-repeat: no-repeat;  /* prevents tiling */
                background-position: center;   /* keeps it centered */


                border: 1px solid var(--box-border);
                background-color: var(--box-border);

                &.expanded { aspect-ratio: 16/9; }
                &.contracted { aspect-ratio: 21/9; }

                & * {
                    color: var(--header-text);
                }

                & #map { border-radius: var(--border-radius); }

                & aside {
                    padding: 15px;
                    position: absolute;
                    right: 15px;
                    bottom: 95px;
                    background: var(--glass);
                    border: 1px solid var(--box-border);
                    color: var(--glass-text);
                    border-radius: var(--border-radius);

                    -webkit-backdrop-filter: var(--fog);
                            backdrop-filter: var(--fog);

                    & * {
                        color: var(--glass-text);
                    }
                }

                &:has(#query-results-sort-by) { 
                    overflow: visible;
                    /*overflow-x: hidden;
                    overflow-y: visible; */

                }

                &:hover:not(:has(#secondary-nav:hover)) {

                    & .slider-controls {
                        opacity: 1;
                        z-index: 4;
                        transform: translateY(var(--slider-controls-height));
                    }

                    & #secondary-nav {
                        border-top: 1px solid var(--header-bg);
                    }
                }

                & .media-subnav {

                    border: 1px solid var(--box-border);
                    
                    right: 30px;
                    position: absolute;
                    transition: var(--transition);
                    box-shadow: var(--box-shadow);
                    max-height: var(--input-size);
                    
                    opacity: 0; 
                    z-index: 1;
                    transform: translateY(0px); 

                    & a,
                    & button {

                        /*background: var(--header-bg); */

                        /*&:first-child {
                            border-top-left-radius: var(--border-radius);
                            border-top-right-radius: var(--border-radius);
                        }

                        &:last-child {
                            border-bottom-left-radius: var(--border-radius);
                            border-bottom-right-radius: var(--border-radius);
                        }*/
                    }
                }

                &:hover .media-subnav {
                    opacity: 1; 
                    z-index: 5;
                    transform: translateY( var(--gap));
                }

                &.fullscreen { 

                    border-radius: 0px !important;

                    &:hover .media-subnav {
                        transform: translateY(var(--gap));
                    }

                    & #compass { top: var(--gap) !important; }

                    & #secondary-nav { 

                        border-radius: 0px !important; 
                        position: absolute !important;
                        height: auto !important;
                        top: auto;
                        bottom: 0;
                    }

                }

                & .hero-bg { position: absolute; }

                & #wp-custom-header {

                    position: absolute; /* Positioned absolutely to fill the .hero container */
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 1; /* Lower z-index to be below .tab-content */

                    & video {
                        width: 100%; /* Ensures video fills the header div */
                        height: 100%; /* Adjusts height to keep the aspect ratio */
                        object-fit: cover; /* Ensures video covers the entire area without distortion */
                    }

                    & iframe {
                      transform: scale(1.2);
                    }

                    & + .tab-content {
                    /*  padding-top: 100px;*/
                    }

                    & img {
                      width: 100%;
                      height: 100%;
                    }

                    & #wp-custom-header-video-button {
                        
                        top: 85px;
                        right: 40px;
                        width: var(--input-size);
                        height: var(--input-size);
                        color: var(--white);
                        background: rgba(255, 255, 255, .15);
                        box-shadow: var(--box-shadow);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: absolute;
                        z-index: 3;
                        transition: var(--transition);
                        opacity: .9;
                        transform: translateX(96px);

                        &:hover {
                            background: var(--brand-light);
                        }

                        & i.fa-play {
                            margin-left: 3px;
                        }

                        & i.fa-pause {
                            margin-left: -1px;
                        }
                    }
                }

                &:not(:has(.tab-content)) {

                    /*& * { z-index:3; }*/
                }

                & .tab-content,
                & .tab-pane {
                    width: 100%;
                    height: 100%;
                    /*position: relative;*/

                    border-radius: 0px !important;

                    & canvas:not(#pty-calculator-chart),
                    & iframe {
                        height: 100% !important;
                        border-radius: 0px !important;
                        aspect-ratio: 16/9;
                    }

                    &.video-view

                        &.playing {

                            & .video-overlay {

                                opacity: 0 !important;
                            }
                            
                        }

                        &.paused {

                            & .slider-controls {
                                opacity: 1;
                                z-index: 4;
                                transform: translateY(var(--slider-controls-height));
                            }

                            & .video-overlay {
                                opacity: .9 !important;
                            }
                        }

                        &.unstarted {

                            & .video-overlay {
                            
                            }
                        }
                    }
                }

                & .tab-content {

                    /* Positioned absolutely to be on top of the header */
                    position: absolute; 
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 4;

                    & * { color: var(--header-text); }

                    & .tab-pane {
                        /*  padding-top: 100px;*/
                        color: var(--white);

                        & iframe {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                & .hero-notes {
                    color: var(--white);
                    position: absolute;
                    z-index: 3;
                    font-weight: bold;
                    left: 15px;
                    bottom: 104px;
                    display: flex;
                    /*flex-direction: column;
                    justify-content: flex-end;*/

                    & * {
                        color: var(--white);
                        width: auto;
                    }

                    & li.avatar-wrapper {
                        
                        width: 100px;
                        min-width: 100px;
                        height: 100px;
                        margin-right: 15px;

                        position: relative;

                        & a:not(.dropdown-item) {
                           
                            padding: 0px;
                            width: 100px;
                            height: 100px;

                            & img {
                                border: 3px solid var(--box-border);
                                width: 100px;
                                height: 100px;

                            }
                        }

                        & span.badge {

                        }

                    }

                    & .user-nicename {
                        font-size: 32px;
                        bottom: 140px;
                    }

                    & .item-meta {
                        font-size: 18px;
                        bottom: 111px;
                    }

                }

                & .carousel,
                & .carousel .carousel-inner,
                & .carousel .carousel-inner .carousel-item,
                & .carousel .carousel-inner .carousel-item img {
                    width: 100%;
                    height: 100%;
                }

                & #map {

                    background: var(--box-border) !important;
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;

                    & .full-screen-loader { 
                        background: var(--box-border) !important;
                        display: none !important; 
                    }

                    & canvas {
                        transition: var(--transition);
                    }

                    & .card {
                        border: 2px solid var(--header-text) !important;
                    }

                     /* Compass styles */
                    & #compass {

                        position: absolute;
                        top: var(--gap);
                        left: var(--gap);
                        font-size: 60px !important;
                        transition: var(--transition);
                        cursor: pointer;


                        color: var(--header-text);
                        background: transparent;
                        z-index: 4;

                        &::after {
                            color: var(--body-bg);
                            opacity: 1;
                        }
                    }

                    & input[type="range"] {
                        
                        &#pitch {

                            top: calc( ( var(--gap) * 3) + var(--input-size) );
                            z-index: 4;

                            &::-webkit-slider-thumb {
                                background: var(--header-text);
                            }
                            
                            &::-webkit-slider-runnable-track {
                                background-color: rgba(255, 255, 255, .55);
                                border-radius: 8px;
                            }
                        }
                    }
                }

                & .slider-controls {

                    padding: 15px;
                    margin: 0;
                    margin-bottom: -4px;
                    width: 100%;
                    height: auto;
                    display: flex;
                    flex-direction: row !important;
                    justify-content: space-between;
                    align-items: center;
                    border-radius: 0;
                    background: var(--header-bg);
                    border-top: 1px solid var(--box-border);
                    transition: var(--transition);
                    position: absolute;
                    bottom: 0;
                    transform: translateY(0px);
                    opacity: 0;
                    z-index: 0;

                    background: color-mix(in srgb, var(--brand) 5%, rgba(255, 255, 255, 0.3));
                    -webkit-backdrop-filter: blur(25px) saturate(200%);
                            backdrop-filter: blur(25px) saturate(200%);
                    border: 1px solid rgba(255, 255, 255, 0.4);
                    box-shadow:var(--box-shadow);
                    overflow: hidden;

                    /*background: rgba( 255, 255, 255, .5 ) !important;
                    -webkit-backdrop-filter: var(--fog);
                            backdrop-filter: var(--fog);*/

                    /*&::before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
                        pointer-events: none;
                    }*/

                    &.visible {
                        opacity: 1;
                        z-index: 3;
                        transform: translateY(var(--slider-controls-height)); /* same offset, but shown */
                    }

                    & .range-slider {
                        margin: 0px !important;
                    }

                    & .video-time {
                        margin-left: 15px;
                    }

                    & .row {
                        
                        align-items: center;

                        & [class^="col-"]:first-of-type {
                            justify-content: flex-start;
                        }

                        & [class^="col-"]:last-of-type {
                            justify-content: flex-end;
                        }
                    }

                    & .carousel-indicators {

                        & .indicator {
                            
                            min-width: 15px;
                            background: var(--box-border) !important;
                            border: 0px !important;
                            opacity: 1 !important;
                            border-radius: var(--border-radius);

                            &:hover {
                                background: var(--button-hover) !important;
                            }

                            &:active,
                            &.active {
                                background: var(--button-active) !important;
                            }
                        }

                        margin-right: auto;
                        width: auto;

                        & li { 
                            max-height: var( --input-size); 
                            max-width: 103px;
                        }
                    }

                    & li {
                        
                        margin: 0;
                        padding: 0;
                        width: var(--input-size);
                        min-width: var(--input-size);
                        background: transparent;
                        padding: 0px;
                        margin: 0px;
                       
                        /*overflow: hidden;*/
                        display: inline-block;
                        text-indent: 0px;

                        &:has(.dropdown-item) {
                            width: auto;
                        }

                        /*&:focus,
                        &.active {
                            
                            background: var(--brand-light);
                            cursor: default;
                        }*/

                        &:not(:last-of-type) {
                            margin-right: 15px;
                        }

                        &.line {

                            height: var(--small-badge-size);
                            min-height: var(--small-badge-size);
                            max-height: var(--small-badge-size);
                            border-radius: var(--small-badge-radius) !important;
                            width: 30px;
                            min-width: 30px;
                            max-width: 30px;
                        }

                        &.img {

                            width: 150px;
                            height: 84px;
                            border: 1px solid #FFF;
                            border-radius: var(--border-radius);
                            display: flex;

                            & img {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        &:hover img,
                        &.active img {
                            /*  filter: grayscale(0);*/
                        }

                        & a {

                            color: var(--header-text);
                            background: var(--box-border);
                            font-size: 24px;

                            & * {
                                color: var(--header-text);
                            }
                            
                            &.dropdown-item {

                                &:hover {
                                    color: var(--header-text);
                                    background: var(--button-hover);
                                }

                                &.active,
                                &:active {
                                    background: var(--button-active);
                                }
                            
                            }

                            &:hover {

                                color: var(--header-text);
                                background: var(--button-hover);

                                & * {
                                    color: var(--header-text);
                                }

                            }

                            &.active,
                            &:active,
                            &:active:hover {

                                color: var(--header-text);
                                background: var(--button-active);

                                & * {
                                    color: var(--header-text);
                                }
                            }
                        }
                    }

                    & .range-slider {
                        height: var(--input-size);
                        display: flex;
                        align-items: center;
                        margin: 0px;
                    }

                    & [class^="col-"] {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    & ul:not(.dropdown-menu) {
                        padding: 0;
                        margin: 0;
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    
                }

                /*
                 ▗▄▄▖▗▄▄▄▖ ▗▄▄▖ ▗▄▖ ▗▖  ▗▖▗▄▄▄   ▗▄▖ ▗▄▄▖▗▖  ▗▖    ▗▖  ▗▖ ▗▄▖ ▗▖  ▗▖
                ▐▌   ▐▌   ▐▌   ▐▌ ▐▌▐▛▚▖▐▌▐▌  █ ▐▌ ▐▌▐▌ ▐▌▝▚▞▘     ▐▛▚▖▐▌▐▌ ▐▌▐▌  ▐▌
                 ▝▀▚▖▐▛▀▀▘▐▌   ▐▌ ▐▌▐▌ ▝▜▌▐▌  █ ▐▛▀▜▌▐▛▀▚▖ ▐▌      ▐▌ ▝▜▌▐▛▀▜▌▐▌  ▐▌
                ▗▄▄▞▘▐▙▄▄▖▝▚▄▄▖▝▚▄▞▘▐▌  ▐▌▐▙▄▄▀ ▐▌ ▐▌▐▌ ▐▌ ▐▌      ▐▌  ▐▌▐▌ ▐▌ ▝▚▞▘ 

                */

                & #secondary-nav {

                    /*  width: 100vw;*/
                    padding: 0; /* PADDING IS WHAT WAS CAUSING THE JERKING IN THE AUTOHIDE NAV JS */
                    margin: 0;
                    margin-bottom: -2px;
                    color: var(--brand);
                    background: var(--header-bg);
                    /*border-top: 0;*/
                    border-top: 1px solid var(--box-border);
                    border-bottom: 1px solid var(--box-border);
                    flex-direction: column; /* KEEPS TEXT ABOVE THE NAV, NOT SIDE BY SIDE */
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    z-index: 4;
                    transition: var(--transition);
                    /*  margin-top: -1px;*/

                    &:not(.fixed) {
                        position: absolute;
                        bottom: 0;
                    }

                    &.fixed {

                        border-top: 0px solid transparent;
                        /*padding-left: calc( var(--input-size) + 30px ) !important;*/
                        position: fixed;
                        box-shadow: var(--box-shadow-down);
                        right: 0;

                        /*&:not(.slide-up) { transition: unset !important; }*/

                        & .container,
                        & .container-fluid { 
                            padding: 15px; 
                        }

                        & .bp-member-type {
                            bottom: -27px;
                        }

                        & #hero-controls {
                            display: none;
                        }

                    }

                    &.slide-up {

                        padding-left: calc(var(--input-size) + 14px) !important;
                        border-top: none;

                    }

                    /*&.space-between div.collapse.navbar-collapse,
                    &.space-between div.collapse.navbar-collapse ul.nav {
                        width: auto;
                        flex-grow: 0;
                    }*/

                    & .container,
                    & .container-fluid {
                        
                        padding: 15px; 
                        background: transparent;
                        background-color: transparent;
                        /*padding-left: 0px !important;*/
                    }

                    & .navbar-brand { 
                        
                        padding: 0; 
                        margin: 0px;
                        margin-right: 15px;
                        display: flex;
                        transition: var(--transition);
                        font-weight: bold;

                        & * { font-weight: bold; }

                        &:empty {
                            display: none !important;
                            /*width: 0px !important;
                            margin: 0 !important;
                            padding: 0 !important;*/
                        }

                        /* BASE SIZE FOR BRAND CONTAINER */

                        &:has(.avatar-wrapper) {

                            display: flex;
                            width: auto;
                            height: auto;
                            align-items: center;
                            justify-content: center;
                            
                            &:hover {
                                transform: scale(1);
                            }
                        }

                        &:has(.post-count) a { 

                            padding: 0px;
                        }

                        & li {

                            margin-right: 0px;

                            & .nav-link {

                                font-size: 24px;
                                
                            }
                        }

                        /* ENSURE INNER LI AND IMG FILL FULL SPACE */
                        & .avatar-wrapper {

                            width: 100%;
                            height: 100%;
                            display: inline-block;

                            & * {
                               /* width: 100%;
                                height: 100%;*/
                            }

                            & .nav-link {
                                padding: 0;
                                display: block;

                                & .avatar {
                                    object-fit: cover;
                                    border-radius: var(--border-radius);
                                    display: block;

                                    & img { 
                                        border: none !important; 
                                    }
                                }
                            }
                        }

                        & .badge.post-count {

                            
                            display: none;
                            border-radius: var(--border-radius);
                            align-items: center;
                            justify-content: center;
                            font-weight: bold;
                            background: var(--header-bg);
                            color: var(--header-text);
                        }
                    }

                    & .collapse.navbar-collapse,
                    & .collapse.navbar-collapse .nav {
                        width: 100%;
                    }

                    & ul.nav {

                        width: 100%;
                        /*padding: 15px; */
                        border: none;
                        margin: 0px;

                    }

                    /* Secondary Navigation Buttons */

                    & .btn-group {

                        &:not(:last-of-type) {
                            margin-right: 15px;
                        }

                        /*&.pagination i.fa-spin {
                            margin-right: -60px;
                            z-index: 1;
                        }*/

                        & label:first-of-type,
                        & button:first-of-type {
                            border-top-left-radius: var(--border-radius);
                            border-bottom-left-radius: var(--border-radius);
                        }
                    }

                    & #hero-controls {
                        
                        margin-left: 15px;
                        width: auto;
                        display: flex;
                        flex-wrap: nowrap;
                        gap: .25rem; /* optional spacing between */
                        
                        & .nav-item,
                        & > span.nav-item {
                            flex: 0 0 var(--input-size);
                            width: var(--input-size);
                            height: var(--input-size);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding: 0;
                            box-sizing: border-box;

                            /* Make labels and links fill the square */
                            & label,
                            & a.nav-link {
                                width: var(--input-size);
                                height: 100%;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border-radius: var(--border-radius);

                                /* Optional: icon sizing consistency */
                                & i {
                                    font-size: 1.2rem;
                                    line-height: 1;
                                }
                            }
                        }
                    }

                    & .query-results-sort-dropdown-wrapper,
                    & .query-results-filter-dropdown-wrapper {
                        display: flex;

                        & a:first-of-type,
                        & a:first-of-type {
                            border-top-right-radius: 0 !important;
                            border-bottom-right-radius: 0 !important;
                        }
                        & a:last-of-type,
                        & a:last-of-type {
                            border-top-left-radius: 0 !important;
                            border-bottom-left-radius: 0 !important;
                        }
                    }
                }
            } 
        }

        /*
        ▗▄▄▖ ▗▄▄▖ ▗▄▄▄▖▗▖  ▗▖ ▗▄▖ ▗▄▄▖▗▖  ▗▖
        ▐▌ ▐▌▐▌ ▐▌  █  ▐▛▚▞▜▌▐▌ ▐▌▐▌ ▐▌▝▚▞▘ 
        ▐▛▀▘ ▐▛▀▚▖  █  ▐▌  ▐▌▐▛▀▜▌▐▛▀▚▖ ▐▌  
        ▐▌   ▐▌ ▐▌▗▄█▄▖▐▌  ▐▌▐▌ ▐▌▐▌ ▐▌ ▐▌

        */

        & #primary {

            &:has(#query-results-grid) {
                /*display: flex;
                justify-content: center;*/
            }

            margin-bottom: 0px !important;

            & #info { height: 0px !important; }

            & .card {

                & a {
                    background: transparent !important;
                }

            }

            & section {

                padding: var(--gap);
                margin: 0px;
                margin-bottom: var(--gap);
                border: 1px solid var(--box-border); /*rgba( 88, 136, 247, 0.1 )*/;
                border-radius: var(--border-radius); /* var(--border-radius) */
                box-shadow: var(--box-shadow);
                transition: var(--transition);
                background: var(--header-bg);
                scroll-snap-align: start;

                color: var(--body-text) !important;
                /*background: var(--header-bg) !important;*/
                /*border: 1px solid var(--box-border) !important;*/

                & * {
                    color: var(--header-text);
                }

                & th { background: transparent !important; }

                &.has-cards {
                    background: transparent;
                    border:none;
                }

                &.UNITS {
                    background: transparent !important;
                    border: 0px !important;

                    &:empty { height: 0px !important; margin: 0px; }
                }

                & i.warning {
                    color: var(--body-text) !important;
                }
                & i.fa-star.fa-duotone:not(.warning)::after {
                    color: var(--color-12);
                }

                & .donut-walkscore,
                & .donut-bikescore,
                & .donut-transitscore {
                    stroke: var(--color-13);
                }
                & .donut-hole {
                    fill: var(--color-11);
                }
                & .donut-text,
                & .donut-data {
                    fill: var(--body-text);
                }

                & .review-card {

                    padding: 30px;
                    color: var(--header-text);
                    background: var(--body-bg) !important; 
                    border: 1px solid var(--box-border) !important;
                    border-radius: var(--border-radius) !important;

                    * { color: var(--header-text); }

                    &:not(:last-child) {
                        margin-bottom: var(--gap);
                    }
                    
                    & .avatar {
                        margin-right: 30px;
                        border-radius: 50% !important;
                        border: 5px solid var(--box-border);
                    }

                    & .review-rating { margin:0; }
                }
                

                & li, 
                & a {
                    box-shadow: none;
                }

                p.source { margin-left: auto; }

                & .accordion {

                    background: transparent;

                    & .accordion-item {

                        background: transparent;

                        & a,
                        & button {
                            color: var(--header-text) !important;
                            background: var(--box-border) !important;

                            & *,
                            &::after {
                                color: var(--header-text);
                            }
                        }

                        & .accordion-body {
                            background: var(--button-active);
                        }
                    }
                }

            }

            #query-results-grid {

                display: grid;
                gap: var(--gap);
                width: 100%;
                height: auto !important;
                padding: 0px !important;
                margin: auto;
                margin-bottom: var(--gap);
                
            }
        }

        /*
         ▗▄▄▖▗▄▄▄▖▗▄▄▄  ▗▄▄▄▖▗▄▄▖  ▗▄▖ ▗▄▄▖ 
        ▐▌     █  ▐▌  █ ▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌
         ▝▀▚▖  █  ▐▌  █ ▐▛▀▀▘▐▛▀▚▖▐▛▀▜▌▐▛▀▚▖
        ▗▄▄▞▘▗▄█▄▖▐▙▄▄▀ ▐▙▄▄▖▐▙▄▞▘▐▌ ▐▌▐▌ ▐▌

        */

        & #sidebar {
        
            width: 100%;
            height: 100%;
            order: initial;
            position: relative;

            & .progress { height: 10px; }

            & aside {

                padding: 15px !important;
                padding-bottom: 0px;
                margin: 0;
                background: var(--header-bg);
                border: 1px solid var(--box-border);
                border-radius: var(--border-radius);

                position: sticky;
                transition: var(--transition);

                box-shadow: var(--box-shadow);

                & * {
                    color: var(--body-text);
                }

                &:hover {
                    box-shadow: var(--box-shadow); /*1px 3px 20px 9px rgb( 231 236 244 / 99%);*/
                }

                &:not(:last-child) { 
                    margin-bottom: var(--block-margin); 
                }

                &:last-child { /* MAKE LAST SIDEBAR WIDGET STICKY */
                    position: -webkit-sticky;
                    position: sticky;
                    /*top: 110px;*/

                    /* REQUIRED FOR AUTO-HIDE #primary-nav */
                    /*clear: both;
                    transform: translateY(0);
                    will-change: transform;
                    transition: transform 500ms;*/
                    z-index: 1;
                    margin-bottom: var(--gap);
                }

                /* MOVE WITH SLIDING HEADER NAV */
                &.slide-up { 
                    /* transform: translateY(80px); */
                }

                & input {
                    border: 1px solid var(--box-border);

                        &[type=search] {
                        /*border: 0px solid var(--box-border);*/
                    }
                }

                & hr {
                    margin: 15px 0px;
                }

                & .widget {

                    & * {
                        color: var(--brand);
                    }

                    & .widget-title {
                        
                        padding: 0;
                        margin: 0px 0px 15px 0px;
                        color: var(--header-text);
                        font-size: 18px;
                        font-weight: bold;
                        line-height: 24px;

                        & i:first-of-type {
                            width: 50px !important;
                            display: inline-flex;
                            justify-content: center;
                            align-items: center;
                        }
                    }

                    .widget_search {

                        & label {
                            width: 100%;
                            padding: 0;
                            margin: 0;
                        }

                        & input {
                            width: 100%;
                            height: 48px;
                            padding: 0;
                            margin: 0;
                        }
                    }
                }

                & ul.members-list li,
                & ul.friends-list li {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    max-width: var(--input-size);
                    border: 3px solid red;

                     & a {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                }

                & p {

                    &.wp-block-tag-cloud {
                        display: flex;
                        flex-wrap: wrap;

                        & a {
                            margin-bottom: 15px;

                            &:not(:last-child) {
                                margin-right: 15px;
                            }
                        }
                    }
                }

                & ul.wp-block-categories li.cat-item a,
                & p.wp-block-tag-cloud a.tag-cloud-link {
                    padding: 5px 15px;
                    color: var(--header-text);
                    background: var(--body-bg);
                    border-radius: 20px;
                    font-size: 14px !important;
                    font-weight: bold !important;
                    line-height: 24px !important;
                    transition: var(--transition);
                }

                & ul.wp-block-categories li.cat-item a:hover,
                & p.wp-block-tag-cloud a:hover {
                    color: var(--white) !important;
                    background: var(--brand);
                }

                & ul {

                    flex-direction: column;
                    
                    & li {

                        width: 100%;
                        margin-bottom: 10px;
                        margin-right: 0px !important; 

                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        &:last-child { 
                            margin-bottom: 15px; 
                        }

                        &.info { display: none; }

                        & a {

                            width: 100%;
                            justify-content: space-between;

                            & .icon-text-badge { 
                                width: 100%;
                                display: flex;
                                justify-content: flex-start;
                            }
                        }
                    }

                    &.wp-block-categories {

                        padding: 0;
                        margin: 0px;
                        display: flex;
                        flex-wrap: wrap;

                        & li {

                            padding: 0;
                            margin-bottom: 15px;
                            display: flex;

                            &.cat-item-1 {
                                display: none !important;
                            }
                        }

                    }

                    & li {

                        margin-right: 0px;

                        & a {

                            display: flex;
                            justify-content: space-between;

                        }
                    }
                }

                & ul.nav.nav-tabs li,
                & ul.nav.nav-pills li { 
                    width: auto; 

                    & .badge { 
                        width: var(--badge-size); 
                        height: var(--badge-size);
                        min-height: var(--badge-size);
                        max-height: var(--badge-size);
                        position: absolute;
                        top: -6px;
                        right: -6px;
                        color: var(--brand);
                        border: 1px solid var(--brand);
                        border-radius: var(--badge-radius);
                    }
                }

                & #sidebar-controls {
                    flex-direction: row;

                    .icon-text-badge {
                        justify-content: center;
                    }
                }
            }

        }

        /*

        ▗▄▄▖  ▗▄▖  ▗▄▄▖▗▄▄▄▖    ▗▖  ▗▖ ▗▄▖ ▗▖  ▗▖ ▗▄▄▖    ▗▖    ▗▄▖  ▗▄▖ ▗▄▄▖ 
        ▐▌ ▐▌▐▌ ▐▌▐▌     █      ▐▛▚▖▐▌▐▌ ▐▌▐▌  ▐▌▐▌       ▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌
        ▐▛▀▘ ▐▌ ▐▌ ▝▀▚▖  █      ▐▌ ▝▜▌▐▛▀▜▌▐▌  ▐▌ ▝▀▚▖    ▐▌   ▐▌ ▐▌▐▌ ▐▌▐▛▀▘ 
        ▐▌   ▝▚▄▞▘▗▄▄▞▘  █      ▐▌  ▐▌▐▌ ▐▌ ▝▚▞▘ ▗▄▄▞▘    ▐▙▄▄▖▝▚▄▞▘▝▚▄▞▘▐▌

        */

        nav.navigation.post-navigation {

            height: 0px;
            margin: 0 calc(-50vw + 50%);
            position: sticky;
            z-index: 2;
            transition: var(--transition); /* FOR SMOOTH global.js ANIMATION .slide */

            & ul.nav-links {

                width: 100%;
                height: 0px;
                display: flex;
                justify-content: space-between;

                & li {

                    & a {

                        box-sizing: content-box;
                        width: 200px;
                        height: 150px;
                        height: fit-content;
                        padding: 0px;
                        margin: 0px;
                        top: 0;
                        bottom: 0;
                        transition: var(--transition);
                        display: flex;
                        align-items: center;
                        position:absolute;  
                        z-index: 200;
                        cursor: pointer;
                        background: transparent;
                        pointer-events: auto;
                        text-decoration: none;
                        background: var(--button);
                        box-shadow: var(--box-shadow);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        border: 1px solid var(--box-border);  
                        overflow: hidden;
                        text-align: center;

                        &:hover {

                            background: var(--button-hover);

                            * {
                                color: var(--brand);
                                background: var(--button-hover);
                            }

                        }

                        &.nav-prev {
                            padding-right: 0px;
                            left: -150px;
                            border-top-right-radius: var(--border-radius);
                            border-bottom-right-radius: var(--border-radius);

                            &:hover {
                                padding-left: 15px;
                                left: 0px;
                            }
                        }

                        &.nav-next {
                            padding-left: 0px;
                            right: -150px;
                            border-top-left-radius: var(--border-radius);
                            border-bottom-left-radius: var(--border-radius);

                            &:hover {
                                padding-right: 15px;
                                right: 0px;
                            }
                        }

                        & * {
                            transition: var(--transition);
                        }

                        & span {

                            height: 100%;
                            padding: 15px;
                            box-sizing: border-box;
                            height: 100%;
                            min-width: 140px;
                            color: var(--brand);
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            flex-direction: column;

                            & img {

                                margin-bottom: 15px;
                                border-radius: var(--border-radius);
                            }

                            & .arrow {
                                min-width: var(--input-size);
                                height: 100%;
                                padding: 15px;
                                margin: 0px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                    }
                }
            }
        }

        & #status {
           
            width: 100%;
            height: var(--input-size);
            display: inline-flex;
            /*border: 1px solid var(--box-border);*/
            border-radius: var(--border-radius);
            /*overflow: hidden;*/

            & input[type="radio"] {
                
                display: none;

                &:checked + label {
                    background: var(--brand);  /* active color */
                    color: var(--white);

                    & * {
                        color: var(--white);
                    }
                }
            }

            & label {
                width: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                /*padding: 10px 20px;*/
                cursor: pointer;
                user-select: none;
                transition: var(--transition);
                border-radius: 0 !important;

                &:not(:last-of-type) {
                    border-right: 1px solid var(--box-border);
                }
            }
        }
    }
}





































.sidebar {

    & aside {

        background: var(--header-bg);
        box-shadow: var(--box-shadow);
    }

    & h3 {
        text-align: center;

    }

    & .row .col-auto {
        width: 100%;

        & input {

            width: 100%;
        }
    }

    ul.radchecks {

        & li {

            box-shadow: none;
            
            & a {
               
            }
        }
    }

    & .accordion {

        background: transparent;
        border: 0;

        & .accordion-item {
    
            background: var(--body-bg);
            border: 1px solid var(--box-border);
            border-radius: var(--border-radius);
            overflow: hidden;

            & .accordion-header {

                
                border-radius: var(--border-radius);

                & button {

                    /*margin: 15px;*/
                    background: var(--box-border) !important;
                    border-radius: var(--border-radius) !important;

                    &:hover {
                        background: var(--button-hover);
                    }

                    &:active,
                    &:focus {
                        background: var(--button-hover) !important;
                    }
                }
            }
        }
    }

    & button {

        background: var(--box-border) !important;

        &:hover {
            background: var(--button-hover);
        }

    }

}




ul.radchecks.btn-group {

    width: fit-content; !important;
    border-radius: var(--border-radius);
    background: var(--box-border) !important;

    .text {

        display: none;
        visibility: hidden;
    }

    & li,
    & a {
        margin: 0px !important;
        width: var(--input-size) !important;
        min-width: var(--input-size) !important;
        max-width: var(--input-size) !important;
        border-radius: 0px !important;
        box-shadow: none;

        & * {
            padding: 0;
            margin: 0;
        }

        & span {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    & li:first-of-type {

        border-top-left-radius: var(--border-radius) !important;
        border-bottom-left-radius: var(--border-radius) !important;

        &> a {

            border-top-left-radius: var(--border-radius) !important;
            border-bottom-left-radius: var(--border-radius) !important;

        }
    } 

    & li:last-of-type {

        border-top-right-radius: var(--border-radius) !important;
        border-bottom-right-radius: var(--border-radius) !important;

        &> a {

            border-top-right-radius: var(--border-radius) !important;
            border-bottom-right-radius: var(--border-radius) !important;

        }
    } 
}

@media (max-width: 768px) {
    #stats .pty-charts {
        grid-template-columns: 1fr;
    }
    #stats .pty-chart-container {
        min-width: auto;
    }
    #stats .pty-stats-summary {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

#stats {

    line-height: 1.6;
    max-width: 1200px;
    margin: 0px;
    padding: 60px;

    & * {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    & header {

        margin-bottom: var(--gap);

        & h1 {
            display: flex;
            align-items: center;
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        & p {
            color: var(--header-text);
            margin: 10px 0 0 0;
        }

        & .avatar-wrapper {
            display: inline-flex;
            margin-right: 15px;
            width: 70px;
            height: 70px;
            min-width: 77px;
            min-height: 75px;

            & * {
                width: 77px;
                height: 75px;
                min-width: 77px;
                min-height: 75px;
            }
        }
    }

    & .pty-stats-summary {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: var(--gap);
    }
    & .pty-stat-card {
        background: var(--header-bg);
        padding: 25px;
        border-radius: var(--border-radius);
        text-align: center;
        box-shadow: var(--box-shadow);
        transition: var(--transition);
        border: 1px solid var(--box-border);
    }
    & .pty-stat-card:hover {
        transform: translateY(-5px);
    }
    & .pty-stat-title {
        font-size: 1.1rem;
        color: var(--header-text);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
    }
    & .pty-stat-number {
        font-size: 2.5rem;
        font-weight: bold;
        color: var(--header-text);
        margin: 10px 0;
    }
    & .pty-stat-desc {
        font-size: 0.85em;
        color: var(--header-text);
    }
    & .pty-charts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 20px;
        margin-bottom: var(--gap);
    }
    & .pty-chart-container {
        background: var(--header-bg);
        padding: 25px;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        border: 1px solid var(--box-border);
    }
    & .pty-chart-title {
        font-size: 1.3rem;
        margin-bottom: 20px;
        color: var(--header-text);
        border-bottom: 2px solid var(--box-border);
        padding-bottom: 10px;
    }
    & table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
    }
    & th,
    & td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid var(--box-border);
    }
    & th {
        background: var(--header-bg);
        font-weight: 600;
        color: var(--header-text);
    }
    & tr:hover {
        background: var(--button-hover);
    }
    & td a {
        /*color: #0073aa;
        text-decoration: none;*/
    }
    & td a:hover {
        /*text-decoration: underline;*/
    }
    & .pty-progress-bar {
        height: 10px;
        background: var(--stripes);
        border-radius: var(--border-radius);
        margin-top: 5px;
        overflow: hidden;
    }
    & .pty-progress {
        height: 100%;
        background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
        border-radius: var(--border-radius);
        transition: var(--transition);
    }
    & .pty-stats-footer {
        text-align: center;
        margin-top: 40px;
        padding: 20px;
        font-size: 0.9rem;
        border-radius: var(--border-radius);
        color: var(--header-text);
        border: 1px solid var(--box-border);
    }
    & .pty-stats-footer p {
        margin: 5px 0;
    }
    & .pty-stats-error {
        padding: 20px;
        background: var(--error-light);
        color: var(--error);
        border-radius: var(--border-radius);
        margin: 20px 0;
        text-align: center;
    }
}

ul.pagination {

    & li {

        & a {
            max-width: var(--small-badge-size);
            max-height: var(--small-badge-size);
        }
    }
}

/* Specifically for pagination dropdowns */
.btn-group.pagination .dropdown-menu {
    width: 100%;
    min-width: 100%;
    left: 0 !important;
    right: auto !important;
}

.pagination-nav { 

    padding: 0px; 

    & .btn-group {

        margin: 60px;
        box-shadow: var(--box-shadow);

        & button {

            padding: 0px 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--header-text);
            font-size: 20px;
            font-weight: bold;
            background: var(--button);

            /*&:not(.active) {
                background: var(--header-bg);
            }*/

            & * {
                color: var(--header-text);
                font-size: 20px;
                font-weight: bold;
            }


            &:hover {
                color: var(--text-hover);
                background: var(--button-hover);
                & * { color: var(--button-hover); }
            }

            &.active,
            &.active:hover {
                color: var(--white);
                background: var(--cta);
                pointer-events: none;
                & * { color: var(--white); }
            }
        }
    }
}






#primary-nav,
#primary-nav.has-scrolled,
#secondary-nav,
#sidebar aside:last-child,
#sidebar aside:last-of-type {
    /* REQUIRED FOR AUTO-HIDE #primary-nav */
    clear: both;
    transform: translateY(0);
    will-change: transform;
}

#primary-nav, 
#secondary-nav,
.fixed-tools,
#sidebar aside:last-of-type,
nav.post-navigation { 
    transition: var(--transition); 
}

.mortgage-chart-wrapper { font-family: Arial, sans-serif; margin: 20px; }
.mortgage-chart-wrapper .form-group { margin-bottom: 10px; }
.mortgage-chart-wrapper label { display: inline-block; width: 140px; }
.mortgage-chart-wrapper input { width: 120px; }
.mortgage-chart-wrapper #mortgageChart { max-width: 500px; margin-top: 20px; }

.space-between {
    justify-content: space-between !important;
}

a[data-bs-toggle="collapse"] {
    background: transparent !important;
}

section:has(.card) .card { box-shadow: none; }
.sidebar .card .card-footer { display: none; }
.card .simplefavorite-button { display:none; }

/* Optional: ensure mobile responsiveness */
@media (max-width: 768px) {
    #hero,
    #primary {
        width: 100% !important;
        order: initial !important;
    }
}

#hero,
#primary,
#sidebar {
    transition: var(--transition);
}

#hero, 
#hero .hero,
#hero .hero #wp-custom-header { 
    border-radius: var(--border-radius);
}
.hero:hover #wp-custom-header-video-button,
#wp-custom-header:hover #wp-custom-header-video-button {
    opacity: 1;
    transform: translateX(0px);
}
.hero,
#map,
#secondary-nav:not(.fixed) { 
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

@media (max-width: 1199px) { /* 992px 767px */
  #primary-nav .navbar-collapse ul.navbar-nav { /* .show */
    justify-content: flex-end;
    flex-direction: row;
  }
}

.fa-duotone.fa-star::after { opacity: 1; }
.fa-duotone.fa-star:not(.warning)::after { color: var(--box-border); }
.fa-duotone.fa-star-half::before { opacity: 1; }
.fa-duotone.fa-star-half::after { opacity: 1; color: var(--box-border); }

form {
    background: transparent;
} 
section {

    & .input-group:not(:last-of-type) { margin-bottom:15px; }

    & .accordion { margin-bottom: 15px; }
} 

#profile-completion-details i.fa-duotone::after { opacity:1; }

.range-slider-tooltip {
    padding: 10px 15px;
    margin: 0;
    background: var(--box-border);
    border-radius: var(--border-radius);
    color: var(--header-text);
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    z-index: 99999999999999999999;
    display: none;
}

label {

    min-width: var(--input-size) !important;
    min-height: var(--input-size) !important;

    &:hover {
        background: var(--button-hover);
    }
}

#video-links li { width:100%; display:block; }

.video-view.playing .video-overlay {
    opacity: 0;
    pointer-events: none;
}
.video-view.paused .video-overlay,
.video-view.buffering .video-overlay {
    opacity: .5 !important;
    pointer-events: auto;
}
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, transparent, var(--layer-01));
    /*background: var(--layer-01);*/
    transition: var(--transition);
    /*transition: opacity 0.3s ease;*/
    cursor: pointer;
}
.overlay-icon {
    font-size: 5rem;
    color: var(--white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.video-view.playing .video-overlay {
    opacity: 0;
    pointer-events: none;
}
.video-view.paused .video-overlay,
.video-view.buffering .video-overlay {
    opacity: 1;
    pointer-events: auto;
}
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, transparent, var(--layer-01));
    /*background: var(--layer-01);*/
    transition: var(--transition);
    cursor: pointer;
    overflow: hidden; /* Important for blob effects */
}
.overlay-icon {
    font-size: 4rem;
    color: var(--white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 10; /* Keep icon above blobs */
    position: relative;
}

/* Floating Blobs for Buffering State */
.video-view.buffering .video-overlayz::before,
.video-view.buffering .video-overlayz::after {
    content: '';
    position: absolute;
    /*border-radius: var(--border-radius);*/
    filter: blur(1px);
    /*opacity: 0.3;*/
}

.video-view.buffering .video-overlayz::before {
    width: 80px;
    height: 80px;
    background: linear-gradient(to bottom, transparent, var(--layer-01));
    /*background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 70%, transparent 100%);*/
    top: 20%;
    left: 15%;
    animation: floatBlob1 8s ease-in-out infinite;
}

.video-view.buffering .video-overlayz::after {
    /*width: 120px;
    height: 120px;*/
    background: linear-gradient(to bottom, transparent, var(--layer-01));
    /*background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 70%, transparent 100%);*/
    bottom: 25%;
    right: 20%;
    /*animation: floatBlob2 12s ease-in-out infinite;*/
}

/* Additional blobs using data attributes or extra classes */
.video-view.buffering .video-overlay {
    position: relative;
}

/* Subtle background animation for buffering */
.video-view.buffering .video-overlay {
    background: linear-gradient(to bottom, transparent, var(--layer-01));
    /*background: linear-gradient(45deg, var(--brand), var(--brand-light, var(--brand)), var(--brand-dark, var(--brand)));*/
    /*background-size: 300% 300%;
    animation: backgroundShift 6s ease infinite;*/
}


#cursor {
  font-size: 24px;
  font-weight: bold;
  animation: blink 0.7s infinite;
}



.disabled,
:disabled,
button:disabled,
button.disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
    pointer-events: none !important;
}



[type="submit"].disabled .btn-text {
    color: var(--brand-light);
    font-size: 24px;
    font-weight: 600;
}

section canvas { 
  /*padding: 15px;*/
  background: var(--box-border); 
  border-radius: var(--border-radius);

}

/* INPUTS */
input.honeypot,
input.private {
  display: none;
}
 
/* INPUT GROUPS */

.input-group .btn-group {
  width: 100%;
}
.btn-group>.btn:last-child {
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}
.input-group > .form-control:not(:last-child) {
  border-top-right-radius:var(--border-radius);
  border-bottom-right-radius:var(--border-radius);
}

/***********************
* DROPDOWN MENU BUTTON *
***********************/

i {
  width: auto !important;
}

form fieldset { margin-top: var(--gap) !important; }

form { background: transparent !important; border: none !important; }

.chart-container {
    margin-top: 20px;
    width: 100%;
    height: auto;
}

.amortization-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}
.amortization-table th, .amortization-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: right;
}
.amortization-table th {
    background: #f4f4f4;
}

.toggle-container {
    text-align: center;
    margin: 20px 0;
}
.toggle-container label {
    margin: 0 10px;
}

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

#paymentBreakdownChart { display:none; }

button#search-properties-submit.submit {
  font-size: 24px;
}

table {
    border-collapse: collapse;
    table-layout: fixed;
    max-width: 100%;
  
    &.table {
        margin-bottom: 0;
        border: none;
        
        td {
            padding: 15px !important;
            vertical-align: middle;
      
            label {
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
        
                input {
                    margin-right: 5px;
                }
            }
        }
    }
  
    td,
    th {
        &:first-child {
            padding-left: 15px;
        }
    }
  
    &.table-striped {
        > tbody > tr {
            &:nth-of-type(even) {
                background: var(--body-bg);
                --bs-table-accent-bg: var(--body-bg);
                --bs-table-striped-bg: transparent !important;
                --bs-table-bg: transparent;
                --bs-table-striped-color: #212529;
                --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
                --bs-table-active-color: #212529;
                --bs-table-active-bg: rgba(0, 0, 0, 0.1);
                --bs-table-hover-color: #212529;
                --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
                width: 100%;
                margin-bottom: 1rem;
                vertical-align: top;
                border-color: var(--body-bg);
        
                > * {
                    color: var(--body-text);
                }
        
        td {
          background: var(--box-border);
          overflow: hidden;
          
          &:first-child {
            border-top-left-radius: var(--border-radius);
            border-bottom-left-radius: var(--border-radius);
          }
          
          &:last-child {
            border-top-right-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
          }
        }
        
        th {
          background: transparent !important;
        }
      }
      
      &:nth-of-type(even) {
        color: var(--brand);
      }
      
      td {
        &:first-child {
          padding-left: var(--gap) !important;
        }
        
        &:last-child {
          padding-right: var(--gap) !important;
        }
      }
    }
  }
}

section table {
  td,
  tr:nth-of-type(odd) th {
    background: transparent !important;
    box-shadow: none !important;
  }
}

.table-responsive-sm,
.table-responsive-md,
.table-responsive-lg {
  width: 100%;
}

body table.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: transparent !important;
}

.table > :not(caption) > * > * {
  padding: 15px;
  color: var(--body-text);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  color: var(--body-text);
}

/* ACCRORDION */

/* LIST GROUPS */

.list-group {
  border-radius:var(--border-radius);
}
.list-group-item {
  height: var(--input-size);
  color: var(--brand);
  font-size: 18px;
  border: 1px solid var(--box-border);
  display: flex;
  align-items: center;
  border-left: none;
  border-right: none;
}
.list-group-item:hover {
  background: var(--body-bg);
}
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
  color: var(--white) !important;
  background: var(--brand);
  border-color: var(--brand);
  cursor: default;
}
.list-group-item:first-child {
  border-top: none;
}
.list-group-item:last-child {
  border-bottom: none;
}
.pull-right {
  float: right;
}

/***********************
* BUTTON GROUP BUTTONS *
***********************/

/* this is for beds and baths in the search form */
    
/**************************************
* nav.navbar div.nav .navbar-brand ul li *
**************************************/

/* nav.navbar */

nav.navbar {
  width: 100%;
  padding: 15px 15px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* div.nav */

.navbar .nav {
  padding: 0px;
}

.navbar-brand a:not(.dropdown-item) {
  /*font-size: var(--input-size); */
  font-weight: 500;
  background: transparent !important;
}

/* .navbar-nav */

ul, 
ul.nav, 
ul.navbar-nav, 
ul.nav.radchecks {
  padding: 0;
  margin: 0;
  /*margin-bottom: -15px;*/
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-column li {
  margin: 0px 0px 5px 0px !important;
}
.flex-column li:last-child {
  margin-bottom: 15px;
}
ul.flex-column a,
ul.flex-column button {
  justify-content: space-between;
}

.input-group {

    display: inline-flex;

    & .input-group-text {

        color: var(--brand);
        min-width: var(--input-size);
        max-width: var(--input-size);
        border-top-left-radius: var(--border-radius) !important;
        border-bottom-left-radius: var(--border-radius) !important;
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;

        &.text {
            min-width: unset;
            max-width: unset;

        }
        & i {
            font-size: calc( var(--input-size) / 2.3);
        }

        & button {
            border-top-left-radius: var(--border-radius) !important;
            border-bottom-left-radius: var(--border-radius) !important;
            border-top-right-radius: 0px !important;
            border-bottom-right-radius: 0px !important;

            &:hover {
                color: #FFF;
                background: var(--inputs);

                & i {
                    color: #FFF;
                }
            }
        }
    }

    .form-floating {

        width: calc(100% - var(--input-size));

        & .form-control {
            /*  height: var(--input-size);*/
            border: 1px solid var(--box-border);
            color: var(--header-text);
            /*padding-right: 36px;*/

            &:focus {
                border: 1px solid var(--box-border);
                box-shadow: var(--box-shadow-none);
            }
        }
        
        & input {
            border-top-right-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
        }

        & > .form-select {
            padding-top: 22px;
            padding-bottom: 0;
            color: var(--header-text);
            font-weight: bold;

            & ~ label {
                /*opacity: .65;*/
                transform: scale(.85) translateY(-17px) translateX(1px);
            }
        }

        &.textarea,
        & textarea {

            & > label,
            & + label {
        
                color: var(--header-text);
                background: transparent !important;
                width: auto;
                margin: 0px;
                padding: 0px;
                height: auto;
                padding: 13px 10px;

                &::after {
                    content: none !important;
                }
            }
        }
    }
}

button:hover,
.btn:hover {
    color: var(--brand);
    background: var(--button-hover);
    border-color: var(--button-hover);
}




/**********************************
* FONT AWESOME TWEAKS / OVERRIDES *
**********************************/

.fa-primary {
  color: var(--brand);
  opacity: 1;
}
.fa-secondary {
  color: var(--brand);
  opacity: .4;
}

/*************************************
* BUDDYBOSS THEME TWEAKS / OVERRIDES *
*************************************/

/*.message-lists .thread-item {
  transform: translate3d(0,0,0);
  height: 85px;
  display: block;
}

.login:not(.login-action-lostpassword) .message:not(.reset-pass),
.login.login-action-lostpassword .message > .message,
.buddypress-wrap .bp-feedback.help .bp-icon,
.buddypress-wrap .bp-feedback.info .bp-icon,
.widget-error .bp-feedback.help .bp-icon,
.widget-error .bp-feedback.info .bp-icon {
  background: var(--brand) !important;
}*/

/*.bp-feedback { position:fixed; left:0; right: 0; z-index:9999999999; border-top-left-radius: 0px; border-top-right-radius:0px !important; }*/


@media (min-width: 992px) {
  /*body.blog .col-lg-8 {
    width: 66.6666666667% !important;
  }*/
}

/********************************************************
* FACEBOOK PIXEL AND GOOGLE TAG MANAGER STUFF IN HEADER *
********************************************************/

iframe.pixel {
  height: 0 !important;
  width:  0 !important;
  display: none !important;
  visibility: hidden !important;
}

/*.global-nav > ul.nav.navbar-nav > li.nav-item > a.nav-link:not(:has(.text)) {
  max-width: var(--input-size);
}

.pro-nav,
.global-nav {
    font-size: 24px;
}

.pro-nav li,
.pro-nav li a { 
    background: transparent; 
}

.pro-nav ul { width:100%; }

:root {

  --input-size: 40px !important;

}*/

/***************
* NAVBAR BRAND *
***************/

h1, h2, h3, h4, h5, h6 {
    color: var(--header-text);
}

/* NAVBAR-BRAND ICON */

@media (max-width: 390px) {
  #primary-nav .container-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

/************************************
* #primary-nav BUTTONS ON TOP RIGHT *
************************************/

/*label,*/
a.nav-link,
button {
  height: var(--input-size);
  width: 100%; min-width: var(--input-size);
  padding: 15px;
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: var(--header-text);
  background: var(--box-border);
  border: 0; outline: 0;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-none);
  display: flex; 
  justify-content: center;
  align-items: center;
  transition: var(--transition);
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  position: relative;

}


button:has(span) {
  padding: 0;
}
button:has(span) span {
  width: 100%;
  height: 100%;
/*  padding: 15px;*/ /* THIS WAS CAUSING SQUARE/DIAMOND ISSUE ON HAMBURGER BUTTON */
  display: flex;
  justify-content: center;
  align-items: center;
}




a span,
button span {
  display: flex;
  align-items: center;
  justify-content: center;
}


aside > .icon-text-badge * {
    font-size: 24px;
    font-weight: bold;
}

ul { 

    list-style-type: none;
    padding: 0;
    margin: 0;

    & li {

        list-style: none !important;

        &:not(:last-of-type) {
        /*&:not(:last-child) {*/
            margin-right: 15px;
        }

        & a {

            width: 100%;
            height: 100%;
            color: var(--header-text);

            & * {
                color: var(--header-text);
            }

            &:hover {
                color: var(--header-text);
                background: var(--button-hover);

                & * {
                    color: var(--header-text);
                }
            }

            &.active,
            &:active {
                color: var(--header-text);
                background: var(--button-active);

                & * {
                    color: var(--header-text);
                }   
            }

            /*&:focus {
                color: inherit;
                background: inherit;

                & * {
                    color: inherit;
                }   
            }*/
        }
    }
}

ol {
    list-style-type: none; /* Removes numbers for ordered lists */
}

ul:not(.bbp-forums) li {
  width: auto;
  min-width: var(--input-size);
  height: var(--input-size);
  background: #FFF;
  border-radius: var(--border-radius);
}

.badge {

    padding: 15px 10px;
    margin: 0;
    margin-left: 15px;
    min-width: var(--badge-size);
    height: var(--badge-size);
    line-height: calc( var(--badge-size) * .6 );
    background: var(--box-border);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);

    &.brand {
        background: var(--brand);
    }
    &.alert {
        background: var(--error);
    }
    &.money {
        background: var(--success);
    }
    &.post-count {
        margin-left: 0px;
        background: var(--box-border);
    }

    &.corner {
        height: 12px;
        max-height: 12px;
        min-width: 12px;
        width: 12px;
        position: absolute !important;
        top: 54px;
        bottom: 0 !important;
        left: 100% !important;
        transform: translate( -75%, -50% ) !important;
        background: var(--white);
        border: 0px solid hsla( 238.571, 37%, 50%, .5 );
        border-radius: 4px; 
        padding: 0;
        margin: 0px;
        overflow: hidden;
    }

    &.edit-link {

        transition: var(--transition);
        opacity: 0;

        & i { 
            color: var(--brand); 
        }
    }
}

.avatar-wrapper,
.avatar-wrapper a,
.avatar-wrapper a img {
    border-radius: var(--border-radius);
}

.avatar-wrapper {

    position: relative;
    width: var(--input-size);
    min-width: var(--input-size);
    max-width: var(--input-size);

    & .badge {
        padding: 0;
        margin: 0;
        width: var(--badge-size);
        height: var(--badge-size);
        border: 0;
        border-radius: var(--badge-radius);
        bottom: -5px;
        right: -6px;
        position: absolute;
        transition: var(--transition);

        &:empty {
            display: block;
        }

        &.online {
            background: var(--success) !important;
        }
        &.recently-online {
            background: var(--warning) !important;
        }
        &.offline {
            background: var(--error) !important;
        }
        &.no-activity-recorded {
            background: #000 !important;
        }
    }

    & .dropdown-menu {
        right: 0px;
        top: 58px;
        left: auto;
    }
}

.avatar {
    width: var(--input-size);
    min-width: var(--input-size);
    height: var(--input-size);
    min-height: var(--input-size);
    transition: var(--transition);
}

/**************
* POST AVATAR *
**************/

.tiny-hamburger,
li .member-status {
    
    

}

.member-status {

    opacity: 1 !important;
    visibility: visible !important;

    &.online {
        background: var(--success) !important;
    }
    &.offline {
        background: var(--error) !important;
    }
}

.color-blocks { display:none; }

#secondary-nav .nav {
    background: transparent;
}

a.active:hover {
    background: var(--brand);
    cursor: default;
}

/**************************************************
* HAMBURGER ICON BELOW HEADER NAV AVATAR DROPDOWN *
**************************************************/

.tiny-hamburger {
    
    /*background: var(--brand);*/

    & .hamburger-inner,
    & .hamburger-inner::before,
    & .hamburger-inner::after {
        width: 8px;
        height: 1px;
        background: var(--white);
    }

    & .hamburger-inner {

        &::before { top: -3px; }

        &::after { bottom: -2px; }

    }

}

a.show {

    & + .tiny-hamburger {

        & .hamburger-inner {
            transform: rotate(45deg);
            transition-delay: 0.12s;
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

            &::before {
                top: 0;
                opacity: 0;
                transition: top 0.075s ease, opacity 0.075s 0.12s ease;
            }
            &::after {
                bottom: 1px !important;
                transform: rotate(-90deg);
                transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
            }
        }
    }
}

/*************
* POST COUNT *
*************/

/*#post-count {
    padding: 0px;
    height: var(--input-size); 
    min-width: var(--input-size);
    font-size: 26px;
    font-weight: normal;
    border-radius: var(--border-radius);
    background: var(--brand-light);
    text-shadow: 1px 1px 5px white;
    color: var(--brand);
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0px; 
    margin: 0px; 
    position: relative;

    & a { background: #FFF; }

    & > a { 
        border: 1px solid var(--box-border);
    }

    & .spinner i {
        -webkit-animation: fa-spin 600ms infinite linear; 
                animation: fa-spin 600ms infinite linear;
    }

    & .post-count { 

        border-radius: 1px solid var(--brand);

    }
}*/



ul.nav.nav-pills .nav-item .nav-link {

    border-radius: var(--border-radius);

    & .active {
        color: var(--text-active);
        background: var(--button-active);
    }

    & .badge { 

        border-radius: var(--border-radius);

    }
}


/*********
* BADGES *
*********/

button .badge,
button:focus .badge {
  /*padding: 5px;*/
  margin-left: 15px;
  color: var(--header-text);
  background: var(--box-border);
}


.modal .nav.nav-pills, /* THIS IS THE PROPERTY UPDATE FORM IN THE MODAL */
.responsive .nav.nav-pills {
  position: relative;
  top: 0;
  right: 0;
  box-shadow: var(--box-shadow-none);

}
.modal .nav.nav-pills { margin-bottom: 15px; }
@media ( max-width: 991px ) { 
  .responsive .nav.nav-pills { 
    width: 100%;
    display: flex;
    justify-content: space-between; 
  }
  .responsive .nav.nav-pills li { 
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
  }
}
.responsive .nav.nav-pills li { border-radius:var(--border-radius); }
.responsive .nav.nav-pills li:not(:last-child) { margin-right: 15px; }
.responsive .nav.nav-pills button { background: var(--body-bg); }
.responsive .nav.nav-pills button:hover { background: var(--box-border); }
.responsive .nav.nav-pills button.active { background: var(--brand); }
@media ( max-width: 700px ) { /* 620px */
  .nav.nav-pills button span {
    display: none;
  }
}



.unsplash {
  border-radius: var(--border-radius);
  box-shadow: 0 0 13px rgba(26,30,35,.2);
  position: absolute;
  right: var(--gap);
  top: 84px;
}
ul li button:hover,
ul li button:hover i { 
  color: var(--brand);
}







/****************************
* PROPERTY - 3-D MATTERPORT *
****************************/

#threed-view iframe {
  width: 100%;
  height: 100%;
  transform: scale(1.0) !important;
/*  position: absolute;*/
  z-index: 4 !important;
}
.list-group-item-action:focus,
.list-group-item-action:hover {
  color: #495057;
  background: var(--body-bg);
}
#loading-gui #loading-background { background-image: url('https://www.propertunity.co/wp-content/uploads/2022/01/cropped-default_geocode-2x.png'); }
#loading-background #loading-header, #loading-powered-by { display: none !important }
#icon-play-unicode:before { content: "\f1b2" !important; }
.footer-ui { display: none !important; }
.icon-button button-interactive { display: none !important; }

/***************
* PROFILE PAGE *
***************/

/* .profile-meta */

.profile-meta {
  /*width: calc(100% - 60px);
  bottom: 30px;*/
  width: 100%;
  bottom: 0px;
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  position: absolute;
  
}
.profile-meta a.edit-link {
  border-radius: var(--border-radius);
  padding: 15px;
  color: var(--header-text);
  /* background: transparent !important; */
  text-decoration: none;
}
.profile-meta a.edit-link .fa-circle {
  color: inherit;
}

/*.profile-meta .avatar {
  width: 77px;
  height: 77px;
  margin-right: 15px;
  border: 3px solid var(--white);
  border-radius:var(--border-radius);
}*/

/* .social-networks-wrap */

.social-networks-wrap {
  display: flex;
  justify-content: center;
}
.social-networks-wrap i {
  color: var(--white);
}
.social-networks-wrap i:hover {
  color: var(--brand);
}
.social-networks-wrap svg {
  width: 40px;
}
.social-networks-wrap svg path {
  fill: rgba(255, 255, 255, .6);
  fill: var(--white);
}
.social-networks-wrap svg:hover path {
  fill: var(--brand);
}
.social-networks-wrap span.social:not(:last-child) {
  margin-right: 35px;
}

/****************************************************************
*  ___ ___ ___ ___  _  _ ___   _   _____   __   _  _   ___   __ *
* / __| __/ __/ _ \| \| |   \ /_\ | _ \ \ / /__| \| | /_\ \ / / *
* \__ \ _| (_| (_) | .` | |) / _ \|   /\ V /___| .` |/ _ \ V /  * 
* |___/___\___\___/|_|\_|___/_/ \_\_|_\ |_|    |_|\_/_/ \_\_/   *
*                                                               *
****************************************************************/

span.icon {
    /*margin-right: 10px;*/
    color: var(--body-text);
    /*min-height: var(--input-size);*/
    min-width: var(--input-size);
    display: flex;
    justify-content: center;
    align-items: center;
}

span.icon {
    
}

.sidebar #sidebar-controls span.icon {
    min-width: auto;
}

.input-group-text i,
span.icon i {
    font-size: 20px;
}

i { 
    /*color: var(--brand); */
}

span.fa-stack i:first-of-type { color: var(--box-border); }
span.fa-stack i:last-of-type { 
    font-size: 14px;
    color: var(--brand); 
}

span.text {
    color: var(--body-text);
    background: transparent !important;
}


.simplefavorite-button {
    max-width: var(--input-size);
}


/* EDIT LINK */

.edit-link { opacity: 1; }
.edit-link .fa-edit {
    margin-top: -3px !important;
    margin-left: 1px !important;
}
.edit-link:hover .fa-circle { color: var(--white); }
.edit-link:hover .fa-edit { color: var(--brand); }

.bp-member-type {
    background: var(--brand);
    border-radius: 100px;
    font-size: 12px;
    font-weight: bold;
    color: var(--white);
    display: inline-block;
    padding: 5px 15px;
    line-height: 1;
    transition: var(--transition);
}
.followers-wrap, .following-wrap { 
    color: inherit !important;
}
.followers-wrap {
    display: flex;
    align-items: center;
}
.followers-wrap strong {
    margin: 0;
    margin-right: 6px;
}

/* MK TOASTY SLIDE */



.github-contribution-calendar-loader {
    position: absolute;
    left: 0;
    right: 0;
}

/* PAGINATION */

li.page-item {
    margin: 0;
    border-radius: 0px;
}
.pagination a, .pagination span { border-radius: 0px; }

li.page-item:first-child a.page-link {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}
li.page-item:last-child a.page-link {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}
li.page-item.active .page-link {
    z-index: 3;
    color: var(--white);
    background: var(--brand);
    border-color: var(--brand);
}
li.page-link:focus {
    box-shadow: 0 0 0 var(--border-radius) var(--brand);
    opacity: .25;
}
li .page-link {
    border: 1px solid #dee2e6;
}
li.page-item:not(:first-child) .page-link {
    margin-left: -1px;
}
body .drag-drop #drag-drop-area {
  height: auto;
  width: 100%;
}

ul li { background:transparent; background:transparent; }

.scrollspy-spacing { padding-top: 100px; }

.user-count-area [class^="col-"] {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.user-count-area [class^="col-"] p {
  text-align: center;
  font-weight: bold;
}
.circle-count {
  width: 100px;
  height: 100px;
  margin: 15px;
  background: var(--brand);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.countz {
  color: var(--white);
  font-size: 36px;
}

ul.crm li,
ul.profile li {
  margin-bottom: 15px;
  display: block; 
}
a.position-change-cover-image i,
a.position-change-cover-image i:before {
  color: var(--header-text) !important; 
}
a.position-change-cover-image:hover i,
a.position-change-cover-image:hover i:before {
  color: var(--white) !important; 
}
a.link-change-cover-image i:after, 
a.link-change-profile-image i:after, 
a.position-change-cover-image i:after {
  position: relative !important;
}




/*******************
* CARDS - MAP VIEW *
*******************/

.avatar-marker {
  width: var(--input-size);
  height: var(--input-size);
  /*width: calc( var(--input-size) * 1.25 );
  height: calc( var(--input-size) * 1.25 );*/
  background-size : cover;
  border : 2px solid var(--brand) !important;
  border-radius : var(--border-radius);
}

.hide { /* HIDE SIDEBAR */
  display: none !important; 
} 

html,
body,
#map-flex-toggle {
  padding: 0;
  margin: 0;
  width: 100%;
}
#map-flex-toggle.flex {
  height: 100vh;
  display: flex;
/*  align-items: flex-end;*/
  overflow: hidden;
  border-bottom: 1px solid var(--box-border);
}
.hero.flex {
  margin-bottom: 0;
  flex: 3;
  height: 100vh; /* TAKES CARE OF MAP VIEW SENIORITY OVER JS .hero HEIGHT */
}






section.bedrooms {

    padding: 0px !important;
    /* margin: 0; */
    background: transparent;
    border: 0;
    box-shadow: none;
}

.container.bedrooms [class^="col-"] {
  margin-bottom: 0px;
}

.container.bedrooms .card-body {
  padding-bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

section.i-stack p:not(.source):first-of-type {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}
section.i-stack .fa-stack i:first-child {
  color: rgba(231, 236, 244, 1);
}
section.i-stack .fa-stack i:last-child {
  color: var(--header-text);
}

tr.vendor td:first-child  {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
tr.vendor td:not(:first-child) {
  text-align: center;
  font-weight: bold;
}
tr.vendor i,
tr.vendor i::before,
tr.vendor i::after {
  opacity: 1;
}

tr.vendor.attom i,
tr.vendor.attom i::before {
  color: var(--attom-brand);
}
tr.vendor.attom i::after {
  color: var(--attom-brand-accent);
}
tr.vendor.batchleads i,
tr.vendor.batchleads i::before {
  color: var(--batchleads-brand);
}
tr.vendor.batchleads i::after {
  color: var(--batchleads-brand-accent);
}
tr.vendor.eppraisal i,
tr.vendor.eppraisal i::before {
  color: var(--eppraisal-brand);
}
tr.vendor.eppraisal i::after {
  color: var(--eppraisal-brand-accent);
}
tr.vendor.homejunction i,
tr.vendor.homejunction i::before {
  color: var(--homejunction-brand);
}
tr.vendor.homejunction i::after {
  color: var(--homejunction-brand-accent);
}
tr.vendor.slipstream i,
tr.vendor.slipstream i::before {
  color: var(--slipstream-brand);
}
tr.vendor.slipstream i::after {
  color: var(--slipstream-brand-accent);
}
tr.vendor.zillow i,
tr.vendor.zillow i::before {
  color: var(--zillow-brand);
}
tr.vendor.zillow i::after {
  color: var(--zillow-brand-accent);
}
tr.vendor img {
  width: 150px;
}

.single-property section {
  padding: var(--gap);
  scroll-snap-align: start;
  position: relative;
}
.single-property .card::before {
  /* THIS HELPS SCROLLSPY WORK BY STOPPING THE SECTION BELOW THE HEADER!!! :) */
  content: "";
  display: block;
  height: 110px;
  margin: -110px 0 0;
}
.single-property section::before {
  /* THIS HELPS SCROLLSPY WORK BY STOPPING THE SECTION BELOW THE HEADER!!! :) */
  content: "";
  display: block;
  /*height: 110px;
  margin: -110px 0 0;*/
}
.single-property section:not(#financial-data) {
  /*height: 100vh;*/ /*THIS FIXES THE BS SCROLLSPY ISSUE. JS DOESN'T DISPLAY CHART IN TIME*/
}
.single-property aside p { /* PHP IS ADDING EXTRA <p> TAG */ 
  display: none;
}
.single-property p.title {
  padding: 8px 15px;
}
/* HIDE SIDEBAR NAVIGATION ON MOBILE */
@media (max-width: 976px) {
  .single-property aside,
  .single-property #sidebar-menu {
    display: none;
  }
}



.status {
  padding: 7px 15px;
  margin: 0;
  /*color: var(--white);
  font-weight: bold;*/
  border-radius: 15px;
}
.status.for-sale {
  background: var(--success);
}
.status.for-rent {
  background: var(--error);
}
.status.valuation {
  background: var(--brand);
}

.i-stack div[class^="col-"] div,
#walkscore div[class^="col-"] div {
  height: 100%;
  padding: 15px;
  border: 1px solid var(--box-border);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  /*background: yellow;*/
}

#walkscore div[class^="col-"] p:not(:last-child) {
  margin-bottom: 15px;
  font-weight: bold;
}

#walkscore div[class^="col-"] p:last-child {
  font-style: italic;
  text-align: center;
}
#walkscore div[class^="col-"] p:last-child::before,
#walkscore div[class^="col-"] p:last-child::after {
  content: '"';
}

#walkscore svg {
  width: 100%;
}
.donut-hole {
  fill: #FFF;
}
.donut-ring {
  fill: transparent;
  stroke: var(--body-bg);
  stroke-width: 3.5;
}
.donut-segment {
  transform-origin: center;
  stroke: #FF6200;
  stroke-width: 3.5;
  fill: transparent;
  stroke-dashoffset: 25;
}
.donut-walkscore {
  animation: donut1 3s;
}
.donut-bikescore {
  animation: donut2 3s;
}
.donut-transitscore {
  animation: donut3 3s;
}
.segment-1{ fill: #ccc; }
.segment-2{ fill: aqua; }
.segment-3{ fill: #d9e021; }
.segment-4{ fill: #ed1e79; }



.donut-text {
/*  font-family: var(--font-family);*/
  fill: var(--brand);
}

.donut-label {
  font-size: 0.28em;
  font-weight: 700;
  line-height: 1;
  fill: #000;
  transform: translateY(0.25em);
}
.donut-percent {
  font-weight: bold;
  font-size: 0.5em;
  line-height: 1;
  transform: translateY(0.5em);
  animation: donutfadelong 1s;
}
.donut-data {
  font-size: 3px;
  font-weight: bold;
  line-height: 1;
  transform: translateY(5em);
  text-align: center;
  /*text-anchor: middle;*/
  color: var(--header-text);
  fill: var(--header-text);
  animation: donutfadelong 1s;
}

.source,
.source-author { 
  margin: 27px 15px 0px 0px;
  font-size: small;
  float: right; 
  display: flex;

}





ul li a { min-width: var(--input-size) !important; }

/* CATEGORIES AND TAGS DIV ON POST */
.post-meta-wrapper { padding-bottom: var(--gap); border-bottom: 1px solid #e7e9ec; }

/*****************
* SIDEBAR WIDGETS*
*****************/



#content,
#primary,
#sidebar,
aside { word-break: break-all; }

/* HELPS WITH <aside> STICKY POSITIONING */

/*#sidebar, 
#sidebar-left,
#sidebar {
  height: auto; 
  margin-bottom: 0 !important;
}*/

.card:last-child,
aside:last-child,
section:last-child { 
    margin-bottom: 0px !important; 
}



li.price a.nav-link,
li.price a.nav-link * {

    color: var(--white);
    background: var(--success);
    font-weight: bold;
}

#chat-bubble,
#schedule-bubble {
  display: none;
}
#chat-bubble.show,
#schedule-bubble.show {
  padding: 15px;
  min-width: 495px;
  width: 200px;
  height: 400px;
  min-height: 400px;
  border-color: var(--box-border);
  box-shadow: var(--box-shadow);
  transform: translate3d(0px, -70px, 0px) !important;

  position: absolute !important;
  right: 15px !important;
  bottom: 20px !important;
  float: right;
  display: block;
}
#chat .badge {
  min-width: var(--gap);
  height: var(--gap);
  font-size: 16px;
  background: var(--error);
  border: 1px solid var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  position: absolute;
  top: -14px;
  right: -4px;
}

/* MAP OBJECTS */

div.map div:not(.avatar-marker) {

  width: 100% !important;
  height: 100% !important;
}

@media ( max-width: 991px) {
  
  select#mapType,
  #setCenter,
  #usersLocation, #usersWork,
  #zoomIn, #zoomOut, #zoomOutput, #zoomRange,
  .tooltip /* BOOTSTRAP TOOLTIP ON HOVER */ {
    display: none !important;
  }

}


.wp-block-search__inside-wrapper {
  display: flex;
}
div.wp-block-search__inside-wrapper {
  padding: 0;
  margin-bottom: 15px;
}
input.wp-block-search__input {
  width: calc(100% - 48px);
  padding: 5px;
  margin: 0;
  border: 1px solid var(--box-border);
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}
button.wp-block-search__button {
  width: 48px;
  margin: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  position: relative; 
}




#repeater-employer,
#repeater-liquid-asset,
#repeater-vehicle,
#repeater-property,
#repeater-other-assets {
    padding: 15px;
    margin: 15px 15px 15px 0px;
    border: 1px solid var(--box-border);
    /*display: none;*/
}
.delete-home-history-container,
.delete-employer-container,
.delete-liquid-asset-container,
.delete-vehicle-container,
.delete-property-container,
.delete-other-assets-container {
  width: 100%;
  margin-left: auto;
  text-align: right;
}
/*.fa-trash {
  cursor: pointer;
  transition: var(--transition);
  /*display: none;*/
}
.fa-trash:hover {
  color: var(--brand);
  transform: scale(1.3);
}*/



form .alert {
  margin-bottom: var(--gap);
}

.alert,
.alert-dismissible {
  margin: 0;
  border-radius: var(--border-radius);
  padding-right: 15px;
/*  text-align: justify;*/
}
.alert button,  
button.btn-close:hover {
  max-width: var(--input-size) !important;
  background: transparent !important;
}
.alert-info {
  background: var(--brand-light);
  border: 1px solid var(--brand);
}

/****************
* URLA1003 FORM *
****************/

button.add {
  width: auto !important;
  padding: 0px 15px !important;
}

#repeater-employer,
#repeater-liquid-asset,
#repeater-vehicle,
#repeater-property,
#repeater-other-assets {
  padding: 15px;
  margin: 15px 15px 15px 0px;
  border: 1px solid var(--box-border);
  /*display: none;*/
}
.delete-home-history-container,
.delete-employer-container,
.delete-liquid-asset-container,
.delete-vehicle-container,
.delete-property-container,
.delete-other-assets-container {
  width: 100%;
  margin-left: auto;
  text-align: right;
}
.fa-trash {
  cursor: pointer;
  transition: var(--transition);
  /*display: none;*/
}
.fa-trash:hover {
  color: var(--brand);
  transform: scale(1.3);
}

.friend-list li,
.friend-list a {
  position: relative;
  padding: 0 !important;
  border-radius: var(--border-radius);
}
.friend-list li:not(:first-child) {
  margin-left: -25px;
}
.friend-list li a {

}
.friend-list img.avatar {
  border-radius: var(--border-radius);
  border: 1px solid #FFF;
  width: 32px;
  height: 32px;
  background: #FFF;
}
.friend-list img.avatar:hover {
  border-color: var(--brand);
}
.friend-list .friend-avatar .friend-status {
  left: 27px;
  top: 20px;
  width: 12px;
  height: 12px;
}
.user-city {
  text-transform: capitalize;
}

[class^="col-"]:not(:last-child) {
/*  margin-bottom: 15px;*/
}

form [class^="col-"]:not(:last-child) {
/*    margin-bottom: var(--gap);*/
}

textarea.form-control,
textarea::placeholder { 
  font-size: 18px; 
}

textarea {
    border: 1px solid var(--box-border);
    border-radius: var(--border-radius); 
    padding: 15px;
}

textarea::placeholder { 
  padding: 5px 10px; 
}


input[type=file] {
  width: 100%;
  border: 1px solid var(--box-border);
  padding: .5rem 1rem !important;
  height: auto;
  background: 0 0;
  box-shadow: none;
  display: inline-block;
}

#more-options {
  /*border: 1px solid var(--box-border);
  border-radius: var(--border-radius);
  padding: 15px 15px 0px;*/
  padding: 0px;
  margin: 0px 50px 15px 15px;
  width: calc(100% - var(--gap));
}
#more-options .title {
  width: 100%;
  padding: 15px;
  margin-bottom: 15px;
  color: var(--header-text);
  font-size: 20px;
  font-weight: normal;
  background: var(--box-border);
  border-radius: var(--border-radius);
}


.simplefavorite-button-count {
  height: 15px; 
  width: 15px;
  position: absolute;
  
  right: 11px;
  bottom: 2px;

  line-height: 15px;
  color: var(--brand) !important;
  font-size: 12px;
  padding: 0;
  margin: 0;
  border-radius: var(--border-radius);
  background: #FFF;
  display: flex;
  justify-content: center !important;
  align-items: center;
  font-weight: bold;
  
}
.simplefavorite-button-count * {
  position: relative;
}
.simplefavorite-button.active i {
  color: var(--heart) !important;
}

.simplefavorite-button:active i,
.simplefavorite-button:active:hover i,
.simplefavorite-button:focus i,
.simplefavorite-button:focus:hover i {
  color: var(--white);
}
.simplefavorite-button:hover {
  background: var(--brand-light);
}
.simplefavorite-button:active,
.simplefavorite-button:active:hover,
.simplefavorite-button:focus,
.simplefavorite-button:focus:hover {
  background: var(--brand);
}
.simplefavorite-button:active,
.simplefavorite-button:active:hover,
.simplefavorite-button:focus,
.simplefavorite-button:focus:hover span {
  color: var(--brand);
}

.body-no-scroll {
  overflow: hidden;
}


.spinner-loader {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.spinner-loader i {
  font-size: 200px;
  transition: all 500ms ease-in-out;
}
.spinner-loader i.fa-circle-notch {
  color: var(--brand);
  -webkit-animation: spin 1s infinite linear;
          animation: spin 1s infinite linear;
}
.spinner-loader i.fa-face-thinking {
  color: var(--error);
}


/*****************************************************
* BUTTON - ANIMATIONS - data-loading / data-finished *
*****************************************************/
/* https://fontawesome.com/docs/web/style/animate */
  
button[data-loading] {
/*  font-family: var(--font-family);*/
  content: attr(data-loading);
}
button[data-finished] {
/*  font-family: var(--font-family);*/
  content: attr(data-finished);
  /*-webkit-animation: fa-spin 600ms infinite linear; 
          animation: fa-spin 600ms infinite linear;*/
}

/*****************************
* PERCENTAGE COMPLETE CIRCLE *
*****************************/

/* USED FOR AVATAR PROFILE PERCENTAGE COMPLETED AND WALKSCORES */

/*@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}*/

.pie {

  --p: 66;           /* percentage */
  --b: 3px;          /* thickness */
  --c: var(--brand); /* color */
  --s: 48px;         /* size*/
  
  width: var(--s);
  height: var(--s);
  padding: 0; 
  margin: 0;
  aspect-ratio: 1/1;
  position: relative;
  display: inline-grid;
  
  place-content: center;

}
.pie:before,
.pie:after {
  content:"";
  position: absolute;
  border-radius:50%;
  rotate: 109deg;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient( var(--c) calc( var(--p) * 1%), #0000 0);
    -webkit-mask:radial-gradient( farthest-side, #0000 calc( 99% - var(--b) ), #000 calc( 100% - var(--b) ));
            mask:radial-gradient( farthest-side, #0000 calc( 99% - var(--b) ), #000 calc( 100% - var(--b) ));
}
.pie:after {
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--s)/2 - 50%));
}
.animate { animation: pie 1s .5s both;}
.no-round: before { background-size: 0 0, auto; }
.no-round:after { content: none; }





/* NEW FORM STUFF */

#frontDesk {
  position: fixed; 
  right: 15px; 
  bottom: 15px;
  float: right; 
  z-index: 100; 
  display: flex; 
  flex-direction: row-reverse;

  padding: 15px;
  border-radius: var(--border-radius);
}
/*#frontDesk li:nth-child(1) {
  margin-right: 0px;
}*/
#frontDeskBell {

}
#frontDeskMenu {

}
#frontDeskMenu ul:not(#chat-bubble),
#frontDeskMenu ul:not(#schedule-bubble) {
  display: flex; 
  flex-direction: row;
}



.faa-ring.animated,
.faa-ring.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-ring {
  -webkit-animation: ring 2s ease infinite;
  animation: ring 2s ease infinite;
  transform-origin-x: 50%;
  transform-origin-y: 0px;
  transform-origin-z: initial;
}

/**************************
* ONESIGNAL NOTIFICATIONS *
**************************/

#onesignal-slidedown-allow-button,
html body #onesignal-slidedown-container #onesignal-slidedown-dialog .slidedown-footer #onesignal-slidedown-allow-button {
  background: var(--box-border) !important;
  border-color: var(--box-border) !important;
  border-radius: var(--border-radius) !important;
  color: #1e2132!important;
}
#onesignal-slidedown-allow-button:hover,
html body #onesignal-slidedown-container #onesignal-slidedown-dialog .slidedown-footer #onesignal-slidedown-allow-button:hover {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}
.bb-loading-bg {
  background: #f2f4f5;
  animation: fade-in-out infinite 2s ease;
}
body #onesignal-slidedown-container #onesignal-slidedown-dialog .slidedown-body-icon>img {
  max-width: 75px;
  max-height: 75px;
  background: white;
  border-radius: var(--border-radius);
  border: 3px solid var(--brand);
}

body #onesignal-slidedown-container #onesignal-slidedown-dialog .slidedown-body-icon>img {
    
}

.fa-duotone.fa-face-sunglasses::before {
  color: var(--subfooter-bg);
}

#footer-widgets .widget {
  height: auto;
}
#footer-widgets .widget_text {
  text-align: center;
}
#footer-widgets img {
  max-width: 100%;
  height: auto;
}
@media ( max-width: 768px ) {
    
  #frontdesk.fixed-tools.show {
    display: none !important;
    visibility: hidden !important;
  }
}

ul.nav.nav-tabs li a,
ul.nav.nav-tabs li button {

    border: 1px solid var(--box-border);
    border-radius: 0;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);

}

.success { color: var(--success); }
.warning { color: var(--warning); }
.error { color: var(--error); }

div.animated.fadeInUp, li.animated.fadeInUp {
    animation: none;
    will-change: opacity, transform;
    opacity: 0;
    transform-style: preserve-3d;
    transform-origin: center bottom;
    transform: rotateX(-30deg) translateY(50px);
}

svg[role="none"] {
    display: none;
    visibility: hidden;
}

.layout-mode { float:right; }

button.edit { max-width: var(--input-size); }

span.location,
location ,
location *,
location address,
location lat,
location lng,
span.latitude, span.longitude {
    height: 0; 
    position: absolute;
    visibility: hidden; 
    line-height: 0px;
}

#breadcrumbs a,
footer .subfooter a:not(.nav-link) { 
    background: transparent !important; 
    text-transform: lowercase;
}

section li a {
  padding: 10px 10px;
  margin: 0px 0px 15px 0px;
  background: var(--box-border);
  border-radius: var(--border-radius);
  display: inline-block;
}

section h3 button { width: auto !important; }

.i-stack .row,
.i-stack [class^="col-"] {
    margin-bottom: 0px !important;
}

section p:last-child { margin-bottom: 0px; }

.member-list { 
    margin-bottom: 15px;
    /*  position: absolute; */
    z-index: -1; 
    left: 15px; 
    transition: var(--transition);
}
.member-list ul {
    display: flex;
    flex-direction: row-reverse;
}
.member-list li {
    margin-right: -58px !important;
    transition: var(--transition);
    padding: 0px !important;
    background: transparent !important;
    border-radius: var(--border-radius) !important;

    flex: 0 0 auto;
}

form button[type=submit] strong {
  padding-right: 15px;
}
form.for-rent output::after {
  content: ' a month';
}
.a-month::before {
  content: ' a month';
}

/*button .fa-solid { display: none; }*/
button .fa-regular { display: inline-block; }

button[data-exists="yes"] .fa-regular {
    display: none;
}
button[data-exists="yes"] .fa-solid {
    display: inline-block;
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
    .dropdown-menu li{ position: relative;  }
    .nav-item .submenu { 
        display: none;
        position: absolute;
        left:100%; top:-7px;
    }
    .nav-item .submenu-left{ 
        right:100%; left:auto;
    }
    .dropdown-menu > li:hover{ background: #f1f1f1 }
    .dropdown-menu > li:hover > .submenu{ display: block; }
} 
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {
    .dropdown-menu .dropdown-menu{
        margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
    }
} 

.square,
label.square,
li.nav-item.square,
a.nav-link.square,
a.nav-link.hamburger,
button.hamburger, 
button.square {
  width: var(--input-size);
  min-width: var(--input-size);
  max-width: var(--input-size);
}

#wp-admin-bar-root-default,
.ab-top-menu,
.screen-reader-shortcut {
  display: none;
}

a.nav-link .badge,
.media-nav a.nav-link .badge,
button .badge {
  margin-left: 15px;
  color: var(--header-text);
  background: var(--white);

}

#avatar_marker img {
    border-radius: var(--border-radius);
    border: 3px solid var(--brand) !important;
}

.avatar,
img.avatar {
    border-radius: var(--border-radius);
    border: 3px solid var(--box-border);
}

#primary-nav .avatar,
#primary-nav img.avatar {

    border: 3px solid var(--box-border);
}

.btn-close {

    background: transparent !important;

    & svg path {
        color: var(--body-text) !important;
    }
}

#flex, #primary, #sidebar,
#primary,
#primary .tab-content,
#primary .tab-content .tab-pane
#primary section,
#primary .tab-content .tab-pane section {
    background: transparent;
}

.colorPicker {

    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: var(--border-radius) !important;
    background: var(--header-bg) !important;
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;
}
input[type="color"] { padding: 0 !important; width: 100%;}
input[type="color"]::-webkit-color-swatch,
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  border-radius:var(--border-radius) !important;
  border: none;
  box-shadow: none;
}

li.nav-item .btn-group {

    width: 100%;

    & label {
        border-radius: 0;

        &:first-of-type {
            border-top-left-radius: var(--border-radius);
            border-bottom-left-radius: var(--border-radius);
        }

        &:last-of-type {
            border-top-right-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
        }
    }
}

@media (max-width: 991px) {
    #footer-widgets .widget {
        margin-bottom: var(--gap);
    }
    .tagline, .brand-social-icons { 
        justify-content: center; 
        flex-wrap: wrap;
    }
}

.show-dan{
  -webkit-animation:showToastyGuy 1s;
     -moz-animation:showToastyGuy 1s;
       -o-animation:showToastyGuy 1s;
          animation:showToastyGuy 1s;
  z-index: 99999999999999 !important;
}
@-webkit-keyframes showToastyGuy {
  0% {right: -200px;}
  40% {right: 0;}
  60% {right: 0;}
  100% {right: -200px;}
}
@-moz-keyframes showToastyGuy {
  0% {right: -200px;}
  40% {right: 0;}
  60% {right: 0;}
  100% {right: -200px;}
}
@-o-keyframes showToastyGuy {
  0% {right: -200px;}
  40% {right: 0;}
  60% {right: 0;}
  100% {right: -200px;}
}
@keyframes showToastyGuy {
  0% {right: -200px;}
  40% {right: 0;}
  60% {right: 0;}
  100% {right: -200px;}
}
.toasty-button {
    font-weight: bold;
    font-size: 26px;
    cursor: pointer;
}
.toasty-button:hover {
    color: var(--brand);
}

/* FINALLY FIGURED OUT HOW TO GET FONT AWESOME ICONS WORKING IN data-* */

/*button.in-progress[data-loading] {
  font-family: var(--font-family);
}
button.in-progress[data-finished] {
  font-family: var(--font-family);
}
.slider:before {
    position: absolute;
    content: "";
    height: calc( var(--input-size) - 8px);
    width: calc( var(--input-size) - 8px);
    left: 4px;
    bottom: 4px;
    background: var(--white);
    -webkit-transition: var(--transition);
    transition: var(--transition);
}*/

/*.list-group button:not(:last-child) {
    margin-bottom: 5px;
}
.list-group button:hover {
    background: var(--brand-light);
}*/

/*a, button { transition: var(--transition); }*/
/*a:hover {
    color: var(--button-hover);
}

a.nav-link:hover,
button:hover, {
    background: var(--button-hover);
}

a.active,
a:active,
a.nav-link:active,
button:active,
button:focus,
button:active,
button.active {
    background: var(--button-active);
}

a.nav-link:hover i,
button:hover i,
button:focus i {
    color: var(--header-text);
}

a.nav-link:hover *,
button:hover *,
button:focus * {
    color: var(--header-text);
}

a.nav-link:active, a.nav-link.active,
button:active, button.active {
    color: var(--header-text);
    background: var(--button-active);
    cursor: default;
}
a.nav-link:active i, a.nav-link.active i,
button:active i, button.active i {
    color: var(--header-text);
}

a:active,
button:active {
    background: var(--button-active);
    transform: scale(0.99) translateY(4px);
}

a.active,
a.active:hover,
button.active,
button.active:hover {
    color: var(--white);
    background: var(--button-active);
}
a.active *,
a.active:hover *,
button.active *,
button.active:hover * {
    color: var(--white);
}

a .badge,
button .badge {
    color: var(--header-text);
    background: var(--white);
}

a.active .badge,
a.show .badge,
button.active .badge,
button.show .badge {
    color: var(--brand);
    background: var(--white);
}


a.nav-link:hover + .badge.edit-link {
  opacity: 1;
}

section h1,
section h1 i, 
section * {
  color: var(--body-text);

}

a:active, a.active,
a.active:focus,
a.active:focus:hover,
a:active:hover, a.active:hover,
button:active, button.active,
button:active:hover, button.active:hover { 
  color: var(--header-text); 
  background: var(--button-active); 
}
a:active *, a.active *,
a:active:hover *, a.active:hover *,
button:active *, button.active *,
button:active:hover *, button.active:hover * { 
  color: var(--header-text);
}*/



/*li:has(.wp-picker-container),
.wp-picker-container,
.wp-picker-container button {
    width: 100%;
    z-index: 9999999;
}
.wp-picker-container label,
.wp-picker-input-wrap {
    display: none !important;
    visibility: hidden;
}
.wp-color-result-text {
        display: flex ;
    align-items: center;
    justify-content: center;
    padding: 0px;
    margin: 0px;
    font-size: 18px;
}
.wp-picker-holder, 
.wp-picker-holder .iris-picker {
    width: 100% !important;
    border-radius: var(--border-radius) !important;
    border: 1px solid var(--box-border) !important;
}*/

/*body .radchecks li label {
  padding: 5px 15px !important;
  max-height: var(--input-size);
}*/

/*label { border-radius: var(--border-radius); }*/

/*body a.nav-link * {
    font-size: 16px;
} */

/*.media-nav { background: transparent; }



.tz-bar {
    display: block;
    height: 100%;
    background: #007bff;
    width: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 2s linear;
}
button.submit {
    position: relative;
    overflow: hidden;
}
.in-progress {
    color: #fff;
}
.finished {
    color: #28a745;
}*/



/*#theme-switcher + ul {
  padding: 0;
  margin: 0;
  border-radius: var(--border-radius);
  background: transparent;
}
#theme-switcher + ul li button.active {
  background: var(--brand);
  color: #FFF;
}
#theme-switcher + ul li button:not(.active):hover {
  background: var(--brand-light);
  color: var(--header-text);
}
#theme-switcher + ul li button:not(.active):hover i {
  color: var(--header-text);
}

#theme-switcher + ul li:first-of-type button {
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}
#theme-switcher + ul li:last-of-type button {
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

#theme-switcher + ul.dropdown-menu li {
  padding: 0;
  margin: 0;
  display: block;
}*/


/*
main.container,
main.container-fluid {

    & .row {

        

        & > aside.sidebar-left {

           
        }

        & > aside.sidebar-right {

           
        }

        & > aside.sidebar-left,
        & > aside.sidebar-right {

            padding: 15px;
            position: sticky;
            top: 80px;
        
            height: calc(100vh - 80px);
            overflow-y: auto;
            border: 0px;
            background: transparent;

            &::-webkit-scrollbar {
                width: 6px;
            }

            & ul.radchecks {

                width: 100%;

                & li {

                    width: 100%;
                    margin: 0px;

                    &:not(:last-of-type) {

                        margin-bottom: 2px;
                    }

                    & a {

                        width: 100%;
                        background: transparent;

                        &:hover {
                            color: var(--white);
                            background: rgba(255, 255, 255, .033);

                            & * {
                                color: var(--white);
                            }
                        }

                        &.active,
                        &:active,
                        &:active:hover {
                            background: rgba(255, 255, 255, .1);
                           
                        }
                    }
                }
            }
        }

        & #primary {

            padding-top: 100px;
        }

        & > section {

            padding: 0px;
            padding-top: 100px;
            background: transparent;

            #hero,
            .hero,
            #secondary-nav,
          
            section {
                border-radius: 0;
                border:0;
                border-bottom: 1px solid var(--box-border);

            }
        }
    }
}*/

/*

label.status-switch {
  width: auto;
  height: var(--input-size);
  min-height: var(--input-size);
  max-height: var(--input-size);
  cursor: pointer;
  font-size: 24px;
  font-weight: 400;
  background: transparent;
  
  &:hover {
    background: transparent;
  }
  
  a i {
    color: var(--brand);
  }
}

.status-switch {
  border-radius: var(--border-radius) !important;
  
  > span {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: var(--border-radius) !important;
    
    span {
      display: flex !important;
      align-items: center;
      justify-content: center;
      height: var(--input-size);
      padding: 0px !important;
      width: 100%;
      transition: var(--transition);
      border-radius: var(--border-radius) !important;
    }
    
    a {
      z-index: 9;
      border-radius: var(--border-radius) !important;
    }
  }
  
  input {
    ~ span {
      span:first-of-type {
        color: var(--brand) !important;
        background: var(--brand-light) !important;
        border: 1px solid var(--brand) !important;
      }
      
      a {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        width: calc(var(--input-size) - 8px) !important;
        height: calc(var(--input-size) - 8px) !important;
        margin-top: 4px;
        margin-left: 4px;
        background: var(--brand) !important;
        border: 0 !important;
        outline: 0 !important;
      }
    }
    
    &:checked ~ span {
      background: transparent !important;
      
      span:last-of-type {
        background: var(--brand-light) !important;
        border: 1px solid var(--brand) !important;
        color: var(--brand) !important;
      }
      
      a {
        left: calc(100% - var(--input-size)) !important;
        background: var(--brand) !important;
        margin-left: unset !important;
      }
    }
  }
}

label[for="status-switch"] {
  background: var(--brand-light);
}
*/


/*a:active,
.nav-item .nav-link:active,
button:active,
input[type="checkbox"]:active + label { 
    background: var(--box-border);
}*/