:root {
    --bg-primary: #0a0a0b;
    --bg-secondary: #111113;
    --bg-tertiary: #18181b;
    --bg-elevated: #1f1f23;
    --bg-input: #0d0d0e;
    --bg-see-through: #1f1f239c;
    
    --border-subtle: #27272a;
    --border-medium: #3f3f46;
    --border-accent: #4f46e5;
    
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-tertiary: #71717a;
    --text-muted: #52525b;
    
    --accent-primary: #6366f1;
    --accent-hover: #818cf8;
    --accent-glow: rgba(99, 102, 241, 0.15);
    
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.1);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --error: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.1);
    
    --weekend-bg: rgba(251, 146, 60, 0.05);
    --holiday-accent: #a78bfa;
    --illness-accent: #f472b6;
    --vacation-accent: #22d3ee;
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
    
    --transition-fast: 120ms ease;
    --transition-normal: 200ms ease;

    --icon-filter: invert(1);
    --icon-background: transparent;
    --icon-border: none;
    --icon-opacity: 1;
    --icon-filter-reverse: invert(0);
    --icon-filter-w-opacity: invert(1) opacity(0.5);

    --box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05);


    --status-listing-public: rgb(16 15 37 / 76%);
    --status-listing-listing: rgb(55 31 60 / 79%);
}

/* Light Mode */
[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --bg-elevated: #e2e8f0;
    --bg-input: #ffffff;
    --bg-see-through: #ffffff00;
    
    --border-subtle: #e2e8f0;
    --border-medium: #cbd5e1;
    --border-accent: #4f46e5;
    
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-muted: #94a3b8;
    
    --accent-primary: #4f46e5;
    --accent-hover: #6366f1;
    --accent-glow: rgba(79, 70, 229, 0.12);
    
    --success: #16a34a;
    --success-bg: rgba(22, 163, 74, 0.1);
    --warning: #d97706;
    --warning-bg: rgba(217, 119, 6, 0.1);
    --error: #dc2626;
    --error-bg: rgba(220, 38, 38, 0.1);
    
    --weekend-bg: rgba(251, 146, 60, 0.08);
    --holiday-accent: #7c3aed;
    --illness-accent: #db2777;
    --vacation-accent: #0891b2;
    
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

    --icon-filter: none;
    --icon-background: transparent;
    --icon-border: none;
    --icon-opacity: 0.5;
    --icon-filter-reverse: invert(1);
    --icon-filter-w-opacity: opacity(0.5);

    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    --status-listing-public: rgb(255 255 255 / 76%);
    --status-listing-listing: rgb(255 255 255 / 88%);
}


/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* CODESTITCH STYLES, RESET, HEADER/NAVIGATION AND FOOTER */
/*-- -------------------------- -->
<---        Core Styles         -->
<--- -------------------------- -*/
/* CodeStitch Root and Helpers */
@media only screen and (min-width: 0rem) {
  button{
    /* background-color: #1654e5; */
    /* background: linear-gradient(135deg, var(--accent-primary), #8b5cf6) !important; */
    border: none;
    padding: 7px 10px;
    color: white;
    font-family: inherit;
  }
  :root {
    --primary: #00bdff;
    --primaryLight: #67d6ff;
    --secondary: #001f3f;
    --secondaryLight: #001f3f;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
  }
  .cs-topper {
    display: block;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    font-weight: 700;
    color: var(--primary);
    text-align: inherit;
  }
  .cs-title {
    position: relative;
    margin: 0 0 1rem 0;
    max-width: 43.75rem;
    font-size: var(--headerFontSize);
    line-height: 1.2em;
    font-weight: 900;
    color: var(--headerColor);
    text-align: inherit;
  }
  .cs-text {
    margin: 0;
    max-width: 40.625rem;
    width: 100%;
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    color: var(--bodyTextColor);
    text-align: inherit;
  }
  .cs-button-solid {
    border-radius: 8px;
    z-index: 1;
    position: relative;
    display: inline-block;
    background-color: var(--primary);
    width: auto;
    padding: 0 1.875rem;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 3.125em;
    font-weight: bold;
    color: #000;
    transition: color 0.3s;
    transition-delay: 0.1s;
    text-align: center;
  }
  .cs-button-solid:hover {
    color: #fff;
  }
  .cs-button-solid:hover:before {
    width: 100%;
  }
  .cs-button-solid:before {
    border-radius: 8px;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    opacity: 1;
    display: block;
    background-color: #000;
    height: 100%;
    width: 0;
    transition: width 0.3s;
  }
  .cs-hide-on-mobile {
    display: none;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  .cs-hide-on-mobile {
    display: block;
  }
  .cs-hide-on-desktop {
    display: none;
  }
}
/* Fonts and general styles */
@media only screen and (min-width: 0rem) {
  body{
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 100%;
    color: var(--bodyTextColor);
  }
  html {
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 100%;
    color: var(--bodyTextColor);
  }
  *,
  *:before,
  *:after {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
  }
  body {
    transition: background-color 0.3s;
    font-family: 'Montserrat', sans-serif;
  }
  .container {
    position: relative;
    margin: auto;
    width: 92%;
  }

  h3{
    font-size: 1.75rem;
    margin: 0;
    
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height: 1.2;
    /* color: var(--headerColor); */
    color: var(--text-primary);
    font-weight: bold;
    unicode-bidi: isolate;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  h1,
  h2,
  h4,
  h5,
  h6 {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    /* color: var(--headerColor); */
    color: var(--text-primary);
  }
  p,
  li,
  a {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5em;
  }
  p,
  li {
    color: #353535;
  }
  a:hover,
  button:hover {
    cursor: pointer;
  }
  .skip {
    z-index: -1111111;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
}
  
/* Reset Margins */
@media only screen and (min-width: 1024px) {
  body,
  html {
    margin: 0;
    padding: 0;
  }
}
/* Scale full website with the viewport width */
@media only screen and (min-width: 3000px) {
  body,
  html {
    font-size: 0.55vw;
  }
}
/*-- -------------------------- -->
<---      Dark Mode Toggle      -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  body.dark-mode #dark-mode-toggle .cs-sun {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  body.dark-mode #dark-mode-toggle .cs-moon {
    opacity: 0;
    transform: translate(-50%, -150%);
    fill: #fff;
  }
  #dark-mode-toggle {
    z-index: 1000;
    position: absolute;
    top: 0.625rem;
    right: 4.375rem;
    display: block;
    border: none;
    background: transparent;
    height: 3rem;
    width: 3rem;
    overflow: hidden;
    padding: 0;
  }
  #dark-mode-toggle img,
  #dark-mode-toggle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 1.25rem;
    width: 1.25rem;
    pointer-events: none;
  }
  #dark-mode-toggle .cs-moon {
    z-index: 2;
    transition: transform 0.3s, opacity 0.3s;
  }
  #dark-mode-toggle .cs-sun {
    z-index: 1;
    opacity: 0;
    transform: translate(-50%, 100%);
    transition: transform 0.3s, opacity 0.3s;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #dark-mode-toggle {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin: 0;
  }
  #dark-mode-toggle:hover {
    cursor: pointer;
  }
}
/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }
  #cs-navigation {
    z-index: 10000;
    position: fixed;
    background-color: #fff;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem calc(16 / 16 * 1rem);
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: "Montserrat", sans-serif;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  #cs-navigation .cs-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }
  #cs-navigation .cs-logo {
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 0 0;
    height: 100%;
    max-width: 9.125rem;
    width: 40%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0;
  }
  #cs-navigation .cs-logo img {
    height: 100%;
    width: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
    /* places the image to the left edge of the parent */
    object-position: left;
  }
  #cs-navigation .cs-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 0.25rem;
    margin: 0 0 0 auto;
    background-color: transparent;
    height: clamp(2.75rem, 6vw, 3rem);
    /* 44px - 48px */
    width: clamp(2.75rem, 6vw, 3rem);
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #cs-navigation .cs-active .cs-line3 {
    bottom: 100%;
    opacity: 0;
  }
  #cs-navigation .cs-box {
    position: relative;
    /* 14px - 16px */
    height: clamp(0.875rem, 1.5vw, 1rem);
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
  }
  #cs-navigation .cs-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    background-color: #1a1a1a;
    height: 2px;
    width: 100%;
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    z-index: -1;
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transform: scaleX(0);
    background-color: #fff;
    height: 100dvh;
    overflow: hidden;
    transition: transform 0.4s, opacity 0.3s;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    transform-origin: top right;
  }
  #cs-navigation .cs-ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 0;
    height: 65dvh;
    min-width: 40%;
    width: auto;
    overflow: scroll;
    /* 28px - 40px */
    padding: 3rem clamp(1.75rem, 3vw, 2.5rem) calc(32 / 16 * 1rem) calc(70 / 16 * 1rem);
    gap: 1.25rem;
  }
  #cs-navigation .cs-li {
    opacity: 0;
    /* transition from these values */
    transform: translateX(calc(-40 / 16 * 1rem));
    margin-right: 0;
    width: 100%;
    list-style: none;
    transition: transform 0.6s, opacity 0.9s;
    text-align: right;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li-link {
    position: relative;
    display: inline-block;
    margin: 0;
    text-decoration: none;
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    color: var(--headerColor);
  }
  #cs-navigation .cs-li-link:before {
    position: absolute;
    bottom: calc(-2 / 16 * 1rem);
    left: 0;
    /* active state underline */
    content: "";
    opacity: 1;
    display: none;
    background: currentColor;
    height: 1px;
    width: 100%;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    display: block;
  }
  #cs-navigation .cs-button-solid {
    border-radius: 8px;
    display: none;
  }
  #cs-navigation:before {
    z-index: -11;
    position: absolute;
    top: 100%;
    right: 0;
    /* black blurred overlay */
    content: "";
    opacity: 0;
    display: block;
    background: rgba(0, 0, 0, 0.6);
    height: 100dvh;
    width: 0%;
    transition: width 0.5s, opacity 0.3s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    visibility: visible;
    transform: scaleX(1);
    transition-delay: 0.2s;
  }
  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateX(0);
  }
  #cs-navigation.cs-active:before {
    opacity: 1;
    width: 100%;
  }
}
/* Dark Mode */
@media only screen and (max-width: 63.9375rem) {
  body.dark-mode #cs-navigation {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-logo {
    /* makes it white */
    filter: invert(1) brightness(1000%);
  }
  body.dark-mode #cs-navigation .cs-line {
    background-color: #fff;
  }
  body.dark-mode #cs-navigation .cs-ul-wrapper {
    background-color: var(--medium);
  }
  body.dark-mode #cs-navigation .cs-li-link {
    color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  #cs-navigation .cs-dropdown {
    position: relative;
    color: var(--bodyTextColorWhite);
  }
  #cs-navigation .cs-dropdown .cs-li-link {
    position: relative;
    transition: opacity 0.3s;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    margin: 0.75rem 0 0 0;
    height: auto;
    padding: 1.5rem;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
    opacity: 1;
  }
  #cs-navigation .cs-dropdown-button {
    border: none;
    background-color: transparent;
    font-family: inherit;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    cursor: pointer;
    appearance: none;
  }
  #cs-navigation .cs-drop-icon {
    position: absolute;
    top: 50%;
    right: calc(-20 / 16 * 1rem);
    transform: translateY(-50%);
    height: auto;
    width: 0.9375rem;
  }
  #cs-navigation .cs-drop-ul {
    visibility: hidden;
    opacity: 0;
    transform: scale(0);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 0;
    background-color: var(--primary);
    height: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 1.5rem 0 calc(24 / 16 * 1rem);
    transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, transform 0.3s, visibility 0.3s;
    gap: 0.75rem;
    transform-origin: top right;
  }
  #cs-navigation .cs-drop-li {
    list-style: none;
    text-align: inherit;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    color: #fff;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation .cs-dropdown {
    position: relative;
  }
  #cs-navigation .cs-dropdown.cs-active,
  #cs-navigation .cs-dropdown:hover {
    cursor: pointer;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul,
  #cs-navigation .cs-dropdown:hover .cs-drop-ul {
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-li,
  #cs-navigation .cs-dropdown:hover .cs-drop-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-dropdown-button {
    border: none;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    appearance: none;
  }
  #cs-navigation .cs-drop-icon {
    display: inline-block;
    height: auto;
    width: 0.9375rem;
  }
  #cs-navigation .cs-drop-ul {
    z-index: -100;
    /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
    position: absolute;
    top: 100%;
    visibility: hidden;
    opacity: 0;
    transform: scaleY(0);
    border-bottom: 5px solid var(--primary);
    margin: 0;
    background-color: #fff;
    min-width: 12.5rem;
    overflow: hidden;
    padding: 0;
    transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
    transform-origin: top;
  }
  #cs-navigation .cs-drop-li {
    opacity: 0;
    transform: translateY(calc(-10 / 16 * 1rem));
    display: block;
    height: auto;
    width: 100%;
    list-style: none;
    text-decoration: none;
    font-size: 1rem;
    color: var(--bodyTextColor);
    transition: opacity 0.6s, transform 0.6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    display: block;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem;
    white-space: nowrap;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    transition: color 0.3s, background-color 0.3s;
  }
  #cs-navigation .cs-li-link.cs-drop-link:hover {
    background-color: #f7f7f7;
  }
  #cs-navigation .cs-li-link.cs-drop-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
  }
  #cs-navigation .cs-li-link.cs-drop-link:before {
    display: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #cs-navigation .cs-drop-ul {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-li-link.cs-drop-link:hover {
    background-color: var(--medium);
  }
  body.dark-mode #cs-navigation .cs-drop-icon {
    /* turns it white */
    filter: invert(1) brightness(1000%);
  }
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation {
    z-index: 10000;
    position: fixed;
    background-color: #fff;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0 1rem;
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: "Montserrat", sans-serif;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  #cs-navigation .cs-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: auto;
    max-width: 80rem;
    width: 100%;
    gap: 1.5rem;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    height: 4.0625rem;
    max-width: 21.875rem;
    width: 18.4%;
    padding: 0;
  }
  #cs-navigation .cs-logo img {
    height: 100%;
    width: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    width: 100%;
    padding: 0;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #cs-navigation .cs-li {
    padding: 2rem 0;
    list-style: none;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    position: relative;
    display: block;
    margin: 0;
    text-decoration: none;
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1vw, 1rem);
    line-height: 1.5em;
    color: var(--bodyTextColor);
  }
  #cs-navigation .cs-li-link:hover:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link:before {
    position: absolute;
    bottom: 0rem;
    left: 0;
    /* active state underline */
    content: "";
    opacity: 1;
    display: block;
    background: var(--primary);
    height: 2px;
    width: 0%;
    transition: width 0.3s;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    width: 100%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 64rem) {
  body.dark-mode #cs-navigation {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-logo {
    /* makes it turn white */
    filter: invert(1) brightness(1000%);
  }
  body.dark-mode #cs-navigation .cs-li-link {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-navigation .cs-li-link:before {
    background-color: var(--primaryLight);
  }
}
/*-- -------------------------- -->
<---   Interior Page Header     -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  #int-hero {
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 30dvh;
    padding-top: 3.125rem;
  }
  #int-hero picture {
    z-index: -2;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  #int-hero picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #int-hero h1 {
    position: relative;
    margin: 0 auto;
    margin-top: 4.375rem;
    margin-bottom: 1.875rem;
    max-width: 31.25rem;
    width: 96%;
    font-size: 2.13333333rem;
    color: #fff;
    text-align: center;
  }
  #int-hero p {
    display: block;
    margin: auto;
    margin-bottom: 1.875rem;
    max-width: 25rem;
    width: 96%;
    color: #fff;
    text-align: center;
  }
  #int-hero:before {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    opacity: 0.7;
    display: block;
    background: #000;
    height: 100%;
    width: 100%;
  }
}
/* Tablet */
@media only screen and (min-width: 48rem) {
  #int-hero {
    font-size: 100%;
  }
  #int-hero h1 {
    font-size: 4rem;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64rem) {
  #int-hero {
    background-attachment: fixed;
    min-height: 18.75rem;
    height: auto;
    padding-top: 11.25rem;
    font-size: inherit;
    padding-block-end: 6.25rem;
  }
}
/*-- -------------------------- -->
<---    Final Call To Action    -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  #cta {
    position: relative;
    padding: 3.125rem 0;
  }
  #cta .container {
    text-align: center;
  }
  #cta picture {
    z-index: -2;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  #cta picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #cta .title {
    position: relative;
    margin-bottom: 2.25rem;
    font-size: min(9vw, 3rem);
    line-height: 1.20833333em;
    font-weight: 900;
    color: #fff;
    text-align: center;
  }
  #cta p {
    opacity: 1;
    margin: auto;
    margin-bottom: 2.25rem;
    max-width: 37.375rem;
    width: 96%;
    color: #fff;
    text-align: center;
  }
  #cta:before {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    opacity: 0.7;
    display: block;
    background: #000;
    height: 100%;
    width: 100%;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64rem) {
  #cta {
    padding: 10.5rem 0;
  }
}
/* Large Desktop */
@media only screen and (min-width: 1300px) {
  #cta {
    position: relative;
    margin-top: 6.25rem;
  }
  #cta .container {
    margin: auto;
    width: 90.0625%;
  }
  #cta picture {
    left: 50%;
    transform: translateX(-50%);
    width: 90.0625%;
  }
  #cta picture:before {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    opacity: 0.7;
    display: block;
    background: #000;
    height: 100%;
    width: 100%;
  }
  #cta:before {
    display: none;
  }
  #cta:after {
    z-index: -3;
    position: absolute;
    bottom: 0;
    left: 50%;
    content: "";
    opacity: 1;
    transform: translateX(-50%);
    display: block;
    background: url("/assets/svgs/cta-squares.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 69.25rem;
    width: 125rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #cta:after {
    display: none;
  }
}
/*-- -------------------------- -->
<---           Footer           -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  #footer {
    background: #1c1c1c;
    padding: 5.25rem 0 calc(20 / 16 * 1rem);
    font-size: min(4vw, 1.2em);
  }
  #footer .left-section {
    margin: auto;
    margin-bottom: 3.125rem;
    text-align: center;
  }
  #footer .left-section .logo {
    display: inline-block;
    margin: auto;
    margin-bottom: 1.875em;
    height: 4.5rem;
    width: auto;
    text-align: center;
  }
  #footer .left-section .logo img {
    display: block;
    height: 100%;
    width: auto;
  }
  #footer .left-section p {
    opacity: 0.9;
    margin: auto;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.92857143rem;
    color: #fff;
    text-align: center;
  }
  #footer .right-section {
    margin: auto;
    max-width: 25.4375rem;
    width: 96%;
  }
  #footer .right-section .lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
    max-width: 19.1875rem;
    width: 96%;
  }
  #footer .right-section .lists ul {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
  }
  #footer .right-section .lists ul li {
    opacity: 0.9;
    margin-bottom: 0.75rem;
    list-style: none;
    font-size: 1.125rem;
    color: #fff;
  }
  #footer .right-section .lists ul li a {
    text-decoration: none;
    line-height: 1.16666667em;
    color: #fff;
    transition: color 0.3s;
  }
  #footer .right-section .lists ul li a:hover {
    color: var(--primary);
  }
  #footer .right-section .lists ul h2 {
    position: relative;
    margin-bottom: 2.3125rem;
    text-transform: uppercase;
    font-size: 1.125rem;
    line-height: 1.16666667em;
    font-weight: bold;
    color: #fff;
  }
  #footer .right-section .lists ul h2:before {
    position: absolute;
    bottom: calc(-16 / 16 * 1rem);
    left: 0;
    content: "";
    opacity: 1;
    display: block;
    background: var(--primary);
    height: 0.125rem;
    width: 6.0625rem;
  }
  #footer .right-section .lists ul:nth-of-type(3) {
    margin-top: 3.125rem;
  }
  #footer .right-section .lists ul:nth-of-type(3) li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1rem;
  }
  #footer .right-section .lists ul:nth-of-type(3) li:last-of-type {
    margin-bottom: 0;
  }
  #footer .right-section .buttons {
    display: flex;
    justify-content: center;
  }
  #footer .right-section .cs-button-solid {
    border-radius: 8px;
    margin: 0;
    height: 3.3125rem;
    width: 15.625rem;
    padding-top: 0.1875rem;
  }
  #footer .credit {
    margin: auto;
    margin-top: 6.25rem;
    width: 96%;
    font-size: 1rem;
    line-height: 2.25rem;
    color: #fff;
    text-align: center;
  }
  #footer .credit a {
    text-decoration: none;
    font-size: 1rem;
    color: var(--primary);
  }
  #footer .credit a:hover {
    text-decoration: underline;
  }
  #footer .credit .copyright {
    display: block;
    font-size: 1rem;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64rem) {
  #footer {
    font-size: min(1.2vw, 1em);
  }
  #footer .container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: auto;
    max-width: 82.5rem;
    width: 96%;
    padding: 0;
  }
  #footer .left-section {
    margin: 0;
    width: 25.5625rem;
    text-align: left;
  }
  #footer .left-section .logo {
    margin-left: 0;
    height: 5.5rem;
    text-align: left;
  }
  #footer .left-section p {
    margin-left: 0;
    text-align: left;
  }
  #footer .right-section {
    margin: 0;
    max-width: none;
    width: 38.0625rem;
  }
  #footer .right-section .lists {
    margin: 0;
    max-width: 48.0625rem;
    width: 96%;
  }
  #footer .right-section .lists ul li a {
    position: relative;
  }
  #footer .right-section .lists ul li a:before {
    position: absolute;
    bottom: calc(-3 / 16 * 1rem);
    left: 0;
    content: "";
    opacity: 1;
    display: block;
    background: var(--primary);
    height: 0.125rem;
    width: 0%;
    transition: width 0.3s;
  }
  #footer .right-section .lists ul li a:hover:before {
    width: 100%;
  }
  #footer .right-section .lists ul:nth-of-type(3) {
    margin-top: 0;
  }
  #footer .right-section .lists ul:nth-of-type(3) li:first-of-type {
    margin-bottom: 0;
  }
  #footer .right-section .buttons {
    justify-content: flex-start;
  }
  #footer .credit .copyright {
    display: inline-block;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #footer {
    background: var(--dark);
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1304 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 10;
  }
  #services-1304 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1304 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #services-1304 .cs-title {
    max-width: 20ch;
  }
  #services-1304 .cs-card-group {
    width: 100%;
    max-width: 80rem;
    margin: 0;
    padding: 0 1rem;
    /* prevents padding and border from affecting height and width */
    background-color: #fff;
    box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
    z-index: 15;
  }
  #services-1304 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    box-sizing: border-box;
    grid-column: span 12;
    transition: background-color 0.3s, border-color 0.3s;
  }
  #services-1304 .cs-item:last-of-type {
    border-bottom: none;
  }
  #services-1304 .cs-link {
    text-decoration: none;
    /* 24px - 60px top & Bottom */
    /* 24px - 16px top & Bottom */
    padding: clamp(1.5rem, 5.3vw, 3.75rem) clamp(1rem, 2.7vw, 2.5rem);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }
  #services-1304 .cs-icon {
    /* 32px - 40px */
    height: clamp(2rem, 4vw, 2.5rem);
    width: auto;
    margin: 0 0 1rem 0;
  }
  #services-1304 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    font-weight: 700;
    text-align: inherit;
    line-height: 1.2em;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
    color: var(--text-primary);
    transition: color 0.3s;
  }
  #services-1304 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-align: inherit;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s, opacity 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1304 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
  }
  #services-1304 .cs-title {
    margin: 0;
  }
  #services-1304 .cs-flex-group {
    width: 50%;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #services-1304 .cs-item {
    grid-column: span 6;
  }
  #services-1304 .cs-item:nth-of-type(4),
  #services-1304 .cs-item:nth-of-type(8) {
    border-right: none;
  }
  #services-1304 .cs-item:nth-of-type(7),
  #services-1304 .cs-item:nth-of-type(8) {
    border-bottom: none;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1304 .cs-card-group {
    padding: 0;
  }
  #services-1304 .cs-item {
    grid-column: span 3;
    border-right: 1px solid #e8e8e8;
  }
  #services-1304 .cs-item:hover {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
  }
  #services-1304 .cs-item:hover .cs-h3,
  #services-1304 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
    color: var(--text-primary);
  }
  #services-1304 .cs-item:hover .cs-item-text {
    opacity: 0.8;
  }
  #services-1304 .cs-item:hover .cs-icon {
    filter: invert(1);
  }
  #services-1304 .cs-item:nth-of-type(5),
  #services-1304 .cs-item:nth-of-type(6),
  #services-1304 .cs-item:nth-of-type(7),
  #services-1304 .cs-item:nth-of-type(8) {
    border-bottom: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-1304 .cs-title,
  body.dark-mode #services-1304 .cs-text {
    /* color: var(--bodyTextColorWhite); */
    color: var(--text-primary);
  }
  body.dark-mode #services-1304 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #services-1304 .cs-card-group {
    background-color: rgba(0, 0, 0, 0.3);
  }
  body.dark-mode #services-1304 .cs-item {
    border-color: rgba(255, 255, 255, 0.1);
  }
  body.dark-mode #services-1304 .cs-item:hover {
    background-color: rgba(0, 0, 0, 0.6);
    border-color: rgba(0, 0, 0, 0.6);
  }
  body.dark-mode #services-1304 .cs-h3,
  body.dark-mode #services-1304 .cs-item-text {
    color: var(--bodyTextColorWhite);
    color: var(--text-primary);
  }
  body.dark-mode #services-1304 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #services-1304 .cs-icon {
    filter: invert(1);
  }
}



/* Add this as it's own dark.css file and linked on all pages */
/*-- -------------------------- -->
<---      Core Dark Styles      -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  :root {
    --dark: #121212;
    --medium: #282828;
    --accent: #404040;
    --bodyTextColorWhite: #fafbfc;
  }
  body.dark-mode {
    background-color: var(--dark);
  }
  body.dark-mode p,
  body.dark-mode li,
  body.dark-mode h1,
  body.dark-mode h2,
  body.dark-mode h3,
  body.dark-mode h4,
  body.dark-mode h5,
  body.dark-mode h6,
  body.dark-mode .cs-title,
  body.dark-mode .cs-text,
  body.dark-mode .cs-li {
    /* color: var(--bodyTextColorWhite); */
    color: var(--text-primary);
  }
  body.dark-mode .light {
    display: none;
  }
  body.dark-mode .dark {
    display: block !important;
  }
  .dark {
    /* class used to hide elements that only need to be seen when dark mode is enabled */
    display: none;
  }
}
/*-- -------------------------- -->
<---      Dark Mode Toggle      -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  body.dark-mode #dark-mode-toggle .cs-sun {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  body.dark-mode #dark-mode-toggle .cs-moon {
    transform: translate(-50%, -150%);
    opacity: 0;
  }
  #dark-mode-toggle {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 3.75rem;
    width: 3rem;
    height: 3rem;
    background: transparent;
    border: none;
    overflow: hidden;
    padding: 0;
  }
  #dark-mode-toggle img,
  #dark-mode-toggle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.5625rem;
    height: 1.5625rem;
    pointer-events: none;
  }
  #dark-mode-toggle .cs-moon {
    z-index: 2;
    transition: transform 0.3s, opacity 0.3s, fill 0.3s;
    fill: #000;
  }
  #dark-mode-toggle .cs-sun {
    z-index: 1;
    transform: translate(-50%, 100%);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
  }
}
/* Desktop */
@media only screen and (min-width: 64rem) {
  #dark-mode-toggle {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin-left: 1.875rem;
    margin-bottom: 0rem;
  }

}

#topBar {
  font-family: 'Montserrat';
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 75px;
  width: fit-content;
  padding: 5px;
  gap: 10px 5px;
  margin: auto;
  padding-left: 15px;
  padding: 5px;
  width: 100%;
  border-bottom: 1px solid black;
  background-color: rgba(255, 255, 255, 0.815);
}
.home_user{
  position:absolute;
  right: 1%;
  top: 6rem;
  z-index: 99;
}
@media only screen and (max-width: 1000px) {
  #subject-modal{
    overflow-x: hidden !important;
    margin: 0px;
    width: 100% !important;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */ 
  }
  #subject-modal::-webkit-scrollbar{
    background: transparent;
    /* Chrome/Safari/Webkit */
    width: 0px;
  }
  #searchModal {
    background: #fff;
    width: 95%;
    /* max-width: 1200px; */
    height: 95% !important;
    position: relative;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    z-index: 100001;
  }

  .home_user{
    display: flex;
    position: relative;
    right: 1%;
    top: 2%;
  }
  #filter-bar-inline {
    justify-content: center !important;
  }
  #emptyPlaceholder{
    display: none;
  }
  #assessor{
    display: none;
  }
  #collapsedNav{
    display: none;
  }
  #topBar {
    font-family: 'Montserrat';
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 1em;
    gap: 10px 15px;
    margin: auto;
    padding-left: 15px;
    width: 100%;
    border-bottom: 1px solid black;
    background-color: rgba(255, 255, 255, 0.815);
  }
  .nav_icon {
    max-width: 30px !important; 
  }
}
.nav_icon {
  max-width: 40px; 
}


.nav_icon:hover {
  transform: scale(1.15); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.databasesearchbutton:hover{
              background: linear-gradient(135deg, var(--accent-primary), #8b5cf6) !important;
  h4{
    color: white;
  }
  font-size: 11pt;
  border-radius: 3px;
  font-weight: bold;
  img{
    filter: invert(1);
  }
  border-radius: 8px;
}
.databasesearchbutton{
  font-family: "Montserrat", sans-serif;
  display: flex;
  text-align: center;
  border-radius: 3px;
  font-weight: 500px;
  justify-content: center;
  background-color: #0000ff00;
  color: black;
  border: 2px solid transparent;
  font-size: 11pt;
  font-weight: bold;
  height: 35px;
  margin-left: 5px;
  align-items: center;
  padding: 0px 10px;
  /* width: 170px; */
  width: max-content;

  border-radius: 8px; /* This will create the rounded corners */
  
  /* Stack two backgrounds */
  background: 
    /* The first background is a solid color, clipped to the content area */
    linear-gradient(white, white) padding-box,
    /* The second background is the gradient, filling the entire border box */
    linear-gradient(45deg, #5a9bec, #9c83ec) border-box;

  /* Clip the backgrounds as defined above */
  background-clip: padding-box, border-box;
  
  /* Optionally set background-origin for consistency */
  background-origin: border-box;
}
#single_property{
  height: 35px;
  width: 22em;
  padding: 8px;
  font-size: 17px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
#single_property:hover{
  border: 1px solid #83a4f0bb;
}


/*============================ -->*/
/*                  Timetable                  -->*/
/*============================================ -->*/

                  /*-- -------------------------- -->
            <---         Timetable          -->
            <--- -------------------------- -*/
                  /* Mobile - 360px */
    @media only screen and (max-width: 48rem) {
      #mortgageTable{
        display: none;
      }
      #miscImprTable{
        display: none;
      }
      #outbuildingTable{
        display: none;
      }
      #landTable{
        display: none;
      }
      #taxinfoTable{
        display: none;
      }
      #salesHistoryTable{
        display: none;
      }
      #ownersTable{
        display: none;
      }
      .singleOptions {
        position: absolute;
        /* top: 102px; */
        left: 7px;
        width: fit-content;
        z-index: 1000;
      }

      #detailsdiv {
        display: none !important;
      }

      /* #legaldiv {
        display: none !important;
      } */

      /* #taxInfoNav {
        display: none !important;
      } */
      .timetable-1774 .cs-table{
        width: 100%;
      }
      .timetable-1774 #owner_name{
        width: 100% !important;
      }
    }

    @media only screen and (min-width: 0rem) {

      .timetable-1774 #owner_name{
        width: 350px;
      }
      .timetable-1774 {
        /* padding: var(--sectionPadding); */
        /* background-color: #222222; */
        position: relative;
        /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
        .cs-container{
          .cs-table-list{
            .cs-table{
              tbody{
                tr{
                  td{
                    select,input{
                      padding: 3px;
                      height: 1.75rem;
                      font-family: "Montserrat", sans-serif;
                    }
                    button{
                      /* background-color: #1654e5; */
                      /* background: linear-gradient(135deg, var(--accent-primary), #8b5cf6) !important; */
                      background: linear-gradient(135deg, var(--accent-primary), #8b5cf6) !important;
                      border: none;
                      padding: 7px 10px;
                      color: white;
                      font-family: "Montserrat", sans-serif;
                      font-size: 14pt;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .timetable-1774 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
      }

      .timetable-1774 .cs-content {
        /* set text align to center if content needs to be centrally aligned */
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* aligns content to the left, set to center to centrally align */
        align-items: flex-start;
      }

      .timetable-1774 .cs-title {
        /* color: var(--headerColor); */
        color: var(--text-primary);
      }

      .timetable-1774 .cs-button-solid {
        font-size: 1rem;
        font-weight: 700;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-align: center;
        text-decoration: none;
        min-width: 9.375rem;
        max-height: 2.875rem;
        margin: 0;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        background-color: #e8e8e8;
        overflow: hidden;
        cursor: pointer;
        color: #fff;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1;
      }

      .timetable-1774 .cs-button-solid span {
        height: 100%;
        padding: 0 1.5rem;
        background-color: var(--primary);
        display: block;
      }

      .timetable-1774 .cs-button-solid img {
        box-sizing: content-box;
        padding: 0.75rem;
        transition: filter 0.3s, transform 0.3s 0.15s;
      }

      .timetable-1774 .cs-button-solid:before {
        content: "";
        width: 0%;
        height: 100%;
        background-color: var(--primary);
        opacity: 1;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.5s;
      }

      .timetable-1774 .cs-button-solid:hover img {
        filter: brightness(0) invert(1);
        transform: translateX(0.25rem) translateY(-0.25rem);
      }

      .timetable-1774 .cs-button-solid:hover:before {
        width: 100%;
      }

      .timetable-1774 .cs-table-list {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* 16px - 20px */
        gap: clamp(1rem, 3vw, 1.25rem);
      }

      .timetable-1774 .cs-table {
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: column;
      }

      .timetable-1774 .cs-table thead {
        padding: 1.25rem;
        /* background-color: rgb(204 227 250 / 55%); */
        /* background-color: rgba(0, 0, 0, 0.6); */
        /* background: linear-gradient(45deg, #5a9bec66, #9c83ec54) border-box; */
        background: var(--accent-glow);
        border: 1px solid var(--border-subtle);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        transition: background-color 0.3s;
      }

      .timetable-1774 .cs-table thead th {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 4vw, 1.5625rem);
        font-weight: 700;
        line-height: 1.2em;
        /* color: var(--bodyTextColorWhite); */
        transition: color 0.3s;
      }

      .timetable-1774 .cs-table tbody {
        padding: 1.25rem;
        /* background-color: rgb(220 220 220 / 30%); */
        background: var(--bg-elevated);
        /* background-color: rgba(0, 0, 0, 0.3); */
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      .timetable-1774 .cs-table tbody tr {
        display: flex;
        justify-content: space-between;
      }

      .timetable-1774 .cs-table tbody th,
      .timetable-1774 .cs-table tbody td {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5em;
        /* color: var(--bodyTextColorWhite); */
      }

      .timetable-1774 .cs-table:hover thead {
        /* background: linear-gradient(45deg, #5a9bec66, #9c83ec54) border-box; */
        background: var(--accent-glow);
        border: 1px solid var(--border-subtle);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }

      .timetable-1774 .cs-table:hover thead th {
        color: black;
        /* color: #fff; */

      }
    }

    @media only screen and (max-width: 991.98px) {
      .singleOptions {
        position: absolute;
        /* top: 102px !important; */
        left: 7px;
        width: fit-content;
        z-index: 1000;
      }
    }


    /* Tablet - 768px */
    @media only screen and (min-width: 48rem) {
      .singleOptions {
        position: absolute;
        /* top: 134px; */
        left: 7px;
        width: fit-content;
        z-index: 1000;
      }

      .timetable-1774 {
        display: flex;
        margin-top: 2rem;
      }

      .timetable-1774 .cs-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      .timetable-1774 .cs-table-list {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Small Desktop - 1024px */
    @media only screen and (min-width: 64rem) {
      .singleOptions {
        position: absolute;
        top: 134px;
        left: 7px;
        width: fit-content;
        z-index: 1000;
      }

      .timetable-1774 .cs-table-list {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /* my styles */


    #container {
      display: flex;
      height: 100dvh;
      /*margin-top: var(--nav-height, 0); /* in case you're dynamically adjusting */
    }
  
    #listing-view {
      /* width: 50%; */
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 10px;
      box-sizing: border-box;
      background-color: #f9f9f9;
      display: grid;
      /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 15px;
    }

  
    #map {
      width: 50%;
      height: 100%;
    }
  
    .listing-card {
      background: white;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 0;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      overflow: visible;
      /* Remove height: 100% or add a max-height */
      /*max-height: 500px; /* Or whatever looks good on mobile */
      transition: box-shadow 0.2s ease, transform 0.1s ease;
      cursor: pointer;
      /* max-height: 19em; */
      height: fit-content;
    }
    @media (max-width: 1200px) {
    .listing-card {
      margin-bottom: 1rem;
    }
  }
    
    .listing-card:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      transform: translateY(-2px);
    }


    .listing-card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-bottom: 1px solid #eee;
      position: relative;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
    }

    .listing-info {
      padding: 12px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

  
    .listing-title {
      font-weight: bold;
      font-size: 16px;
    }
  
    .listing-sub {
      font-size: 14px;
      color: #666;
    }



    #container.layout {
  display: flex;
  height: 100dvh;
}

#listing-view {
  overflow-y: auto;
  padding: 10px;
  background: #f9f9f9;
  display: grid;
  /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 15px;
  /* width: 35%; */
  width: 100%;
}
#leftcontainer {
  /* width: 35%; */
  width: 100%;
  display: flex;
  flex-direction: column;
}

#map-container {
  position: relative;
  /* width: 65%; */
  width: 100%;
}

#map {
  width: 100%;
  height: 100%;
}


#toggle-view {
  display: none;
}

@media (max-width: 1200px) {
  #toggle-view {
    display: block;
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #003f7d;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    z-index: 999;
  }
}

/* Mobile: Only one view at a time */


/* #toggle-view {
  display: none;
} */



/* @media (min-width: 769px) {
  #toggle-view {
    display: none !important;
  }
} */

.image-wrapper {
  position: relative;
}

.status-x {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #ffffff;
  /* outline: 1px solid red; */
  color: red;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
  z-index: 10;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.status-x:hover {
  outline: 2px solid red;
  color: red;
  transform: translateY(2px);
}
.status-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: #003f7d;
  color: white;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 10;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.status-badge { background-color: #6c757d; }
.status-badge.sale { background-color: #e63946; }
.status-badge.lease { background-color: #0077b6; }
.status-badge.closed { background-color: #6c757d; }
.status-badge.listing { background-color: #cb5ce3; }
.status-badge.under_contract {
  background-color: #6c757d; /* Same as closed */
}
/* Comp Finder subject — uses the holiday accent (purple) from the design
   tokens so it stays legible in both light and dark themes. */
.status-badge.subject,
.status-badge.Subject {
  background-color: var(--holiday-accent);
  color: #fff;
}

/* Subject card outline + sticky-to-top affordance. The .cf-subject class is
   applied by initSpatialView whenever a card's listing_status is "subject".
   The 2px accent border and subtle glow make the subject pop in the
   #listing-view sidebar AND inside the comp-finder list table. */
.listing-card.cf-subject {
  border: 2px solid var(--holiday-accent);
  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-sm);
  position: relative;
}
.listing-card.cf-subject::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--holiday-accent);
  opacity: 0.6;
}



#sort-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: white;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  z-index: 1000;
}

#sort-bar #results-count {
  color: #333;
}

#sort-bar .dropdown {
  position: relative;
}

.dropdown-toggle {
  background: white;
  border: 1px solid #ccc;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.dropdown-menu {
  position: absolute;
  top: 110%;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  list-style: none;
  padding: 8px 0;
  margin: 0;
  width: 220px;
  display: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 1001;
}

.dropdown-menu li {
  padding: 8px 15px;
  cursor: pointer;
  font-size: 14px;
}

.dropdown-menu li:hover {
  background-color: #f0f0f0;
}
.top-bar-container-search {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 24px;
  background: white;
  border-bottom: 1px solid #ddd;
  width: 100%;
  z-index: 15;
  position: relative;
  height: 70px;
  /*margin-top: 110px; /* <- adjust this to match your header height */
}
#filter-bar-inline {
  transition: width .5s, height .5s, background-color .5s;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 24px;
  background: white;
  border-bottom: 1px solid #ddd;
  width: 100%;
  /* Raised above Leaflet's control container (~1000) so the
     #singleOptions dropdown can render over the map. The parent's
     stacking context — not the dropdown's z-index — is what was
     getting beaten before. */
  z-index: 1100;
  position: relative;
  height: 70px;
  /*margin-top: 110px; /* <- adjust this to match your header height */
}

#filter-bar-inline select {
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 3px;
  /* width: 180px; */
  width: fit-content;
}

.filter-group {
  position: relative;
}

.multi-select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;
  width: 180px;
}

.multi-options {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ccc;
  width: 180px;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.filter-group:hover .multi-options {
  display: block;
  z-index: 15;
}

.multi-options label {
  display: block;
  padding: 5px 10px;
  font-size: 14px;
}

.btn {
  background-color: #002c54;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 8px 16px;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.9;
}


.hover-details {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  color: #333;
  padding: 12px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  z-index: 5;
}

.listing-card {
  position: relative;
  transition: all 0.3s ease;
}

.listing-card:hover {
  background: white;
}

.listing-card:hover .hover-details {
  opacity: 1;
  visibility: visible;
}

/* Sidebar hover quick actions (Skip Trace / Comp Ai per card) */
.hover-details .hover-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.hover-action-btn {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  padding: clamp(3px, 0.45vw, 5px) clamp(5px, 0.7vw, 8px);
  font-size: clamp(10px, 0.4vw + 7px, 12px);
  font-weight: 600;
  font-family: inherit;
  color: var(--accent-primary, #4f46e5);
  background: var(--accent-glow, #eef0fd);
  border: 1px solid var(--accent-primary, #4f46e5);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.hover-action-btn:hover {
  background: var(--accent-primary, #4f46e5);
  color: #fff;
}

/* Lazy Mapillary photo slots inside sidebar card image wrappers */
.image-wrapper .cpd-mply-slot {
  display: block;
  width: 100%;
  height: 100%;
}
.image-wrapper .cpd-mply-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: cpd-mply-fade 0.35s ease;
}
@keyframes cpd-mply-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}



#modalOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
/* the modal box */
#searchModal {
  background: #fff;
  width: 95%;
  /* max-width: 1200px; */
  height: 85%;
  position: relative;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
}
/* close “×” button */
#searchModal .modal-close {
  position: absolute;
  top: 8px; right: 20px;
  font-size: 24px;
  font-weight: bold;
  color: #666;
  cursor: pointer;
}
/* content area: scroll if needed */
#searchModal .modal-content {
  padding: 16px;
  overflow: auto;
  flex: 1;
}


/* Styles for the Settings Cog Dropdown */

.settings-cog-container {
  position: relative;
  display: inline-block;
}

.settings-cog {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.settings-cog:hover {
  background-color: var(--bg-elevated);
  color: var(--accent-primary);
}

.settings-cog svg {
  color: inherit;
}

.settings-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 8px;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  min-width: 180px;
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  /* Animation */
  transform-origin: top right;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.settings-dropdown.hidden {
  display: none;
}

.dropdown-section {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.dropdown-section:last-child {
  border-bottom: none;
}

.dropdown-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-weight: 500;
}

.dropdown-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background-color: var(--bg-input);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dropdown-select:hover {
  border-color: var(--border-medium);
}

.dropdown-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Inherit the dropdown styling for the Download button so it visually fits
   the panel even though its base class (.databasesearchbutton) is hardcoded
   for the top toolbar. */
.settings-dropdown .databasesearchbutton {
  margin: 10px 12px;
  background: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 13px;
  height: auto;
  padding: 8px 12px;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.settings-dropdown .databasesearchbutton:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

/* Triangle indicator pointing up at the settings cog */
.settings-dropdown:before {
  content: "";
  position: absolute;
  top: -6px;
  left: 10px;
  width: 12px;
  height: 12px;
  background-color: var(--bg-secondary);
  transform: rotate(45deg);
  border-left: 1px solid var(--border-subtle);
  border-top: 1px solid var(--border-subtle);
}


/* --- hamburger navigation --- */


.action-buttons { display: flex; }
/* hide small‑screen hamburger by default */
.action-hamburger { position: relative; display: inline-block; }
.hamburger-icon-small {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 24px;
  height: 18px;
  cursor: pointer;
  /* margin-left: 8px; */
}
.hamburger-icon-small span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: #333;
}

/* small dropdown */
.dropdown-menu-small {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  margin-top: 6px;
  z-index: 50;
  min-width: 140px;
  padding: 4px 0;
}
.dropdown-menu-small.show { display: block; }
.dropdown-menu-small button {
  width: 100%;
  text-align: left;
  padding: 6px 12px;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}
.dropdown-menu-small button:hover { background: #f5f5f5; }

/* responsive toggle at <1000px */
@media (max-width: 1000px) {
  #filterDropdown{
    width: 12rem;
  }
  /* .action-buttons { display: none; } */
  #imp_filters{
    z-index:999;  
    border-bottom: 0px !important;
  }
  .hamburger-icon-small { display: flex; }
  .action-hamburger{
    
    border: 1px solid #bdbdbd;
    padding: 0.50rem;
    border-radius: 8px;
  }
  .hamburger-icon-small {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 24px;
    height: 18px;
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  .hamburger-icon-small span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: #333;
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: center;
  }
  
  /* When .open is added, animate into an X */
  .hamburger-icon-small.open span:nth-child(1) {
    transform: rotate(45deg) translate(3px, 3px);
  }
  .hamburger-icon-small.open span:nth-child(2) {
    opacity: 0;
  }
  .hamburger-icon-small.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}




/* ── Heart / favorite toggle ─────────────────────────────────────────────
   Rebuilt from the Uiverse original for reliability. The hidden checkbox
   is fully INERT (pointer-events: none) so a click can never native-toggle
   it behind the JS handler's back — that double-toggle is what made the
   old widget feel reversed/flaky. JS owns the state (optimistic toggle +
   server confirm + rollback) and simply writes input.checked; the CSS
   below renders it: pink fill with a soft pop when active. Works anywhere
   the markup appears — details top bar (#like_property), sidebar listing
   cards, popups. */
.heart_path_list {
  stroke: #ffffffe8;
  fill: #00000024;
}
#heart_span_list {
  position: absolute;
  top: 20px;
  right: 8px;
  /* Above .hover-details (z-index 5) so the favorite heart stays visible
     and clickable while the hover panel is open. */
  z-index: 6;
}

.heart_container input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
  pointer-events: none; /* JS owns toggling — never the native checkbox */
}

.heart_container {
  display: block;
  position: relative;
  top: -13px;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 150ms ease;
}

.checkmark {
  top: 0;
  left: 0;
  height: 1.25em;
  width: 1.25em;
  display: inline-block;
}
.checkmark svg {
  overflow: visible;
}
.checkmark path {
  transition: fill 200ms ease, stroke 200ms ease;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

.heart_container input:checked ~ .checkmark path {
  fill: #ef71c5;
  stroke: #d23f9b;
  animation: cpd-heart-pop 350ms ease;
}

.other_container:hover {
  transform: scale(1.1);
}
.heart_container:hover {
  transform: scale(1.08);
}
.heart_container:hover .checkmark path {
  stroke: #ef71c5;
}
.heart_container:active {
  transform: scale(0.94);
}

/* Subtle pop — never collapses to scale(0) like the old like_effect, so
   programmatic state writes don't make the heart blink out of existence. */
@keyframes cpd-heart-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

.gm-style-iw .gm-ui-hover-effect {
  display: none !important;
}



/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  /* padding-top: 60px; */

}

#subject-modal::-webkit-scrollbar-track {
  background: #f0f0f0; 
  box-shadow: inset 0 0 5px rgb(212, 212, 212);
} 
 
/* Handle */
#subject-modal::-webkit-scrollbar-thumb {
  background: #b6b6b6;
  box-shadow: inset 0 0 3px 0px rgb(0, 0, 0);
}

/* Handle on hover */
#subject-modal::-webkit-scrollbar-thumb:hover {
  background: #818181;
  cursor: pointer;
}

#subject-modal::-webkit-scrollbar {
  background: transparent;
  /* Chrome/Safari/Webkit */
}

#subject-modal {
  border-radius: 0px !important;
  overflow-y:auto;
  display: block !important;
  overflow: auto;

}
.modal-content{
  position: relative
}

/* Modal Content/Box */
.property-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  /* auto */
  border: 1px solid #888;
  /* width: 90% !important; */
  /* Could be more or less, depending on screen size */
  height: 100% !important;
  /* Could be more or less, depending on screen size */
  flex-direction: row !important;
  border: none !important;
}
/*
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0)
  }

  to {
    -webkit-transform: scale(1)
  }
}

@keyframes animatezoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }

  
}
*/
#subjectCardColumn{
  display: flex;
  flex-direction: column;
  width: 100%;

}



#avm_mobile{
  .cs-container{
    display: none;
  }
  .cs-table-list{
    padding-top: 1rem;
    .cs-table{
      thead{
            background-color: rgb(74 161 248 / 55%) !important;
            color: black;
          }
          tbody{
            tr{
              td{
                color: black;
              }
            }
          }
    }
  }
}
  .logo_mobile{
    display: none;
  }
@media (max-width: 1200px) {
  body{
    width: 100%;
    overflow: hidden;
  }
}
@media (min-width: 992px) {
  #avm_mobile{
    display: none;
  }
}
@media (max-width: 991.98px) {
  body{
    width: 100%;
    overflow: hidden;
  }
  #topBar{
    /* height: 80px; */
    height: fit-content;
    width: fit-content !important;
    border-bottom: none;
    padding-bottom: 0;
    .home_user{
      display: none;
    }
  }
  .logo_mobile{
    display: block;
  }
  .not_mobile{
    display: none;
  }
  #emptyPlaceholder{
    display: none;
  }
  #collapsedNav nav{
    padding-left: 0px !important;
  }
  #filter1{
    display: none;
  }
  #filter2button{
    /* display:none; */
  }
  #location-input{
    margin: 1% !important;
  }
  #cpdlogo{
    display: none;
  }
  /* property card */
  #subjectCardHeader{
    display: none !important;
  }
  #subjectImgListing{
    width: 100% !important;
    border: none;
  }
  #image_split{
    flex-direction: column !important;
    height: auto !important;
    align-items: center;
  }
  #subjectInfoListing{
    width: 100% !important;
    margin: 0 !important;
  }
  #photo_container_listing{
    justify-content: center !important;
  }
  #subjectlistingInfoNav{
    position: unset;
  }
  #subjectDescription{
    padding: 0px !important;
    flex-direction: column;
  }
  #subject-modal{
    margin: 0px;
    width: 100% !important;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */ 
  }
  #subject-modal::-webkit-scrollbar{
    background: transparent;
    /* Chrome/Safari/Webkit */
    width: 0px;
  }
  #closeModal{
    background-color: #ffffff6b;
    width: 50px;
    height: 50px;
    text-align: center;
    position: absolute;
    right: 7px;
  }
  /* #copyToClipboardButton{
    display: none;
  } */
  #subjectlistingInfoNav{
    display: none !important;
  }
  #subject-modal{
    overflow-x: hidden !important;
  }
  #rentalAvmResults{
    display: none;
  }
  #taxInfoNav2{
    display: none;
  }
  #avm_mobile{
    display: flex;
  }
  #subDesc{
    width: fit-content !important;
  }
  #basic_listing_footer{
    display: none;
  }
  #accountWrapper{
    width: 100%;
  }
  .accountNameWrap{
    flex-direction: column;
  }
  #login_container{
    width: 100%;
  }
  /* dashboard */
  #dashboardWrapper{
    flex-direction: column;
    align-items: center;
  }
  .dashboardwrap{
    width: 70%;
  }
  .dashboardwrapbad{
    width: 70%;
  }
  .dashboardwrapbad img{
    display: none;
  }
  .dashboardwrap img{
    display: none;
  }
  #crosspointlogo{
    display: none;
  }
  #dashboard_background:before{
    display: none;
  }
  .hidemobile{
    display: none;
  }
  #legaldiv{
    width: 100% !important;
  }
  #legaldiv span{
    justify-content:center !important;
  }

/* products */
#productWrapper{
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.productwrap{
  width: 100%;
  margin: 6%;
}
#productDescriptions{
  text-align: center;
}
#login_before{
  text-align: center;
}
#monthyearselect{
  padding-top: 20px;
}
}



#subjectCardHeader{
  font-family: 'Montserrat';
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 75px;
  width: fit-content;
  padding: 5px;
  gap: 10px 5px;
  margin: auto;
  padding-left: 15px;
  padding: 5px;
  width: 100%;
  border-bottom: solid black;
  width: 100%;
  /* height: 69px; */
  height: 130px;
  align-content: center;
  /* 
   */
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 9999;
}

#cpdlogodiv{
  align-items: center;
  display: flex;
  justify-content: center;
}

#lblBrokerEntry{
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#price_sqf_yrb{
  align-items: center;
}

#subjectDescription{
  display: flex;
  padding: 10px;
  justify-content: space-around;
}




#ownerTable{
  margin: auto;
  border-collapse: separate;
  border-spacing: 10px;
  padding: 2px;
  color: black;
}


.ownerTableInfoRow{
  border-bottom: 1px solid black;
  align-items: center;
  align-content: center;
  text-align: center;
} 


/* The Subject Image Container */
/* #subjectImgListing {
  height: 100%;
  width: 55%;
  border-right: solid black;
} */
#subjectImgListing {
  height: 100%;
  width: 50%;
  background: var(--container-bg);
  /* padding: 15px; */
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-bottom: 15px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* #subjectInfoListing {
  width: 45%;
  overflow-y: hidden;
  position: unset !important;
  margin: 0 !important;
  padding: 16px !important;
} */
  
#subjectInfoListing {
  height: 100%;
  width: 49%;
  background: var(--container-bg);
  /* padding: 15px; */
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-bottom: 15px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}





/* 
 */
 /* 
  */

#listingInfoGrid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 50% 50%;
  height: 100%;
}

.list_details{
  color: black;
  font-weight: bold;
}

.center_container{
  height: 100%;
}

.list_detail_card{
  /* background-color: #e0ebf59e; */
  border-radius: 5px;
  margin: 2%;
  outline: 1px solid #474e5424;
}
.list_detail_card:hover{
  outline: 1px solid #93c4f4;
  box-shadow: 0 0 6px rgb(44 90 137);
}
#caprate_chart{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#rentalrate_chart{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#value_forcast{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#app_rates{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.chart_desc{
  font-weight: 600;
  position: absolute;
  color: black;
}





/* 
 */
/* */ 

#mortgageTable{
  margin: auto;
  border-collapse: collapse;
  border-spacing: 20px;
  border-bottom: 1px dashed black;
  padding: 2px;
  color: black;
}


.mortgageTableInfoRow{
  border-bottom: 1px solid black;
  align-items: center;
  align-content: center;
  text-align: center;
} 


h5.subjectHeaders {
  color: #464646;
  font-weight: 500;
  padding: 5px;
}
h5.subjectDetailsContent {
  font-weight: bold;
  padding: 5px;
}

.subjectDetailsGridcolumn{
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: fit-content;
  gap: 10px 10px;
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
}

/* Track */
#subjectUnder::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
} 
 
/* Handle */
#subjectUnder::-webkit-scrollbar-thumb {
  background: #a7cef6; 
  border-radius: 10px;
}

/* Handle on hover */
#subjectUnder::-webkit-scrollbar-thumb:hover {
  background: #6da8e4;
  cursor: pointer;
}

#subjectUnder::-webkit-scrollbar {
  background: transparent;
  /* Chrome/Safari/Webkit */
}

#subjectUnder {
  overflow: auto;
}
/*  */
/*  */
/*  */
/*  */
/* Track */
#subject-modal::-webkit-scrollbar-track {
  background: #f0f0f0; 
  box-shadow: inset 0 0 5px rgb(212, 212, 212);
} 
 
/* Handle */
#subject-modal::-webkit-scrollbar-thumb {
  background: #b6b6b6;
  box-shadow: inset 0 0 3px 0px rgb(0, 0, 0);
}

/* Handle on hover */
#subject-modal::-webkit-scrollbar-thumb:hover {
  background: #818181;
  cursor: pointer;
}

#subject-modal::-webkit-scrollbar {
  background: transparent;
  /* Chrome/Safari/Webkit */
}

#subject-modal {
  overflow: auto;
}




.colormegreen{
  /* color: #1f9f1f */
  font-weight: bold;
}



#lblAddressEntry {
  display: flex;
  margin: auto;
}


.flexrow{
  display: flex;
  justify-content: space-between;
}


#subjectImportantDetails{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
  width: fit-content;
  height: 100%;
  margin: auto;
}
#subjectImportantDetails2{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: fit-content;
  height: 100%;
  margin: auto;
}

.hide {
  display: none !important;
  /*background-color: rgba(175, 163, 163, 0.438)*/
}


#file_online{
  border-radius: 8px;
  background-color: #1654e5;
  border: none;
  padding: 7px 10px;
  color: white;
  font-family: 'Montserrat';
}


#subjectInfoNav {
  display: flex;
  padding: 5px;
  width: 75%;
  margin: auto;
  /* background-color: #ebebeb; */
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  position: sticky;
  top: 177px;
  background-color: white;
}
.subjectInfoNavItem {
  padding: 10px;
  cursor: pointer;
  margin: auto;
  color: #15233c;
  padding: 5px;
}
#subjectlistingInfoNav {
  display: flex;
  padding: 5px;
  width: 100%;
  /* background-color: #ebebeb; */
  border-bottom: 1px solid black;
  /* border-radius: 15px; */
  position: sticky;
  top: 130px;
  background-color: white;
  z-index: 2;
}

.subjectlistingInfoNavItem {
  padding: 10px;
  cursor: pointer;
  margin: auto;
  color: #15233c;
  padding: 5px;
  font-size: 16pt;

}
.subjectInfoNavItem:hover {
  color: #0095ff;
  box-shadow: inset 0px -15px 0px #1980e762;
}
/* Scoped to the subject-info nav tabs: a bare `.active` leaked navy text
   onto every `.form-section.active` on the filing pages. */
.subjectInfoNavItem.active,
.subjectlistingInfoNavItem.active {
  color: #15233c;
  /* box-shadow: inset 0px -15px 0px #1980e762; */
}

#lblAddressEntry {
  margin: auto;
  display: flex;
  flex-direction: column;
  /*
  align-items: baseline; */
  /* border-bottom: 1px solid black; */
}

#lblAddressh3{
  color: black;
  color: var(--text-primary);
  margin: auto;
  font-weight: bold;
  width: 100%;
  padding: 10px;
}

#view_all_images_btn{
  background-color: #1654e5;
  border: none;
  padding: 7px 10px;
  color: white;
  font-family: 'Montserrat';
  pointer-events: none;
}



#taxInfoNav{
  width: 95%;
  margin: 20px auto
}
#taxInfoNav2{
  width: 90%;
  margin: 20px auto
}

#taxinfoTable{
  border-collapse: collapse;
  width: 100%;
}
.taxinfoTable{
  border-collapse: collapse;
  width: 100%;
}
.taxinfoTableHeader{
  border-bottom: 2px solid black;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  color: black;
}

.taxinfoTableContent{
  padding: 10px;
  border-bottom: 1px solid lightgray;
  text-align: center;
}




.detailsTableContent{    
  color: var(--text-primary);
  font-weight: bold;
  padding: 10px;
  text-align: center;
}

.detailsicon{
  padding-right: 5px;
  padding-bottom: 2px;
  max-width: 25px;
  /* filter: invert(1) sepia(80) saturate(10) brightness(.55) hue-rotate(138deg); */
}




#mortgageTable{
  margin: auto;
  border-collapse: collapse;
  border-spacing: 20px;
  border-bottom: 1px dashed black;
  padding: 2px;
  color: black;
}


.mortgageTableInfoRow{
  border-bottom: 1px solid black;
  align-items: center;
  align-content: center;
  text-align: center;
} 


h5.subjectHeaders {
  color: #464646;
  font-weight: 500;
  padding: 5px;
}
h5.subjectDetailsContent {
  font-weight: bold;
  padding: 5px;
}

.subjectDetailsGridcolumn{
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: fit-content;
  gap: 10px 10px;
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
}

/* Track */
#subjectUnder::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
} 
 
/* Handle */
#subjectUnder::-webkit-scrollbar-thumb {
  background: #a7cef6; 
  border-radius: 10px;
}

/* Handle on hover */
#subjectUnder::-webkit-scrollbar-thumb:hover {
  background: #6da8e4;
  cursor: pointer;
}

#subjectUnder::-webkit-scrollbar {
  background: transparent;
  /* Chrome/Safari/Webkit */
}

#subjectUnder {
  overflow: auto;
}



.productwrap {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  /* width: 30%; */
  width: 45%;
  border-radius: 3px;
  box-shadow: 10px 10px 20px 0px rgb(0 0 0);
  overflow: hidden;
  -webkit-transition: .1s;
  transition: .1s;
  height: inherit;
}

.productwrap:hover {
  border: 1px solid #1654e5;
  outline: 3px solid #1654e5c0;
  box-shadow: 10px 10px 20px 0px #1654e54f;
  border-radius: 3px;
  background-color: white;
  -webkit-transition: .1s;
  transition: .1s;
}



.productTitle {
  border-bottom: 1px solid #00000038;
  padding-top: 10px;
  display: flex;
  justify-content: space-around;
  color: #15233C
}

.pricing {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 20px 20%;
  color: black;
}

.pricingnumber {
  font-size: 30pt;
  font-weight: bold;
}

.productInfo {
  display: flex;
  flex-direction: column;
  padding: 25px;
  color: black;
  height: 100%;
  justify-content: space-between;
}

#monthyearselect {
  margin: auto;
  display: flex;
  width: fit-content;
  align-content: baseline;
  padding-bottom: 20px;
}
#monthyearselectval {
  margin: auto;
  display: flex;
  width: fit-content;
  align-content: baseline;
  padding-bottom: 20px;
}

.specialswitch {
  margin: 0px 20px;
}

#standardbutton {
  background-color: #0000ff00;
  color: #1654e5;
  border: 2px solid #1654e5;
  font-size: 11pt;
  border-radius: 3px;
  font-weight: bold
}

#basicbutton {
  font-size: 11pt;
  border-radius: 3px;
  border: 2px solid #1654e500;
  font-weight: bold
}

#probutton {
  background-color: #0000ff00;
  color: #1654e5;
  border: 2px solid #1654e5;
  font-size: 11pt;
  border-radius: 3px;
  font-weight: bold
}

#standardbutton:hover {
  background-color: #1654e5;
  color: white;
  font-size: 11pt;
  border-radius: 3px;
  font-weight: none;
}

#basicbutton:hover {
  background-color: #0000ff00;
  color: #1654e5;
  border: 2px solid #1654e5;
  font-size: 11pt;
  border-radius: 3px;
  font-weight: bold
}

#probutton:hover {
  background-color: #1654e5;
  color: white;
  font-size: 11pt;
  border-radius: 3px;
  font-weight: bold
}

#yeartext,
#monthtext {
  padding-top: 5px
}

.checkmark {
  text-shadow: 1px 1px 3px black;
  color: #004cff;
  font-size: 27px;
  padding-right: 10px;
}

.productinfotext {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.productinfotext p {
  margin: unset !important;
}


/* The switch - the box around the slider */
.specialswitch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.specialswitch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.specialslider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.specialslider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.specialslider {
  background-color: #2196F3;
}

input:focus+.specialslider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.specialslider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.specialslider.round {
  border-radius: 34px;
}

.specialslider.round:before {
  border-radius: 50%;
}

.specialslider.round:after {
  display: none;
}


/* The Close Button (x) */
.close {
  position: absolute;
  right: 7%;
  z-index: 9;
  top: 0;
  color: var(--text-primary);
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: var(--error);
  cursor: pointer;
}


.singleOptions {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 7px;
  width: fit-content;
  /* width: 350px; */
  background-color: var(--bg-primary);
  border: 1px solid var(--border-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Sits inside #filter-bar-inline's stacking context (z-index 1100),
     so this value just orders it above siblings within that bar. */
  z-index: 1100;
  /* display: none; */
}

.singleOptions li {
  padding: 8px;
  cursor: pointer;
}

.singleOptions li:hover {
  background-color: var(--bg-secondary);
}
@media only screen and (min-width: 48rem) {
.singleOptions {
  position: absolute;
  top: 41px;
  left: 7px;
  width: fit-content;
  z-index: 1000;
}
}





#modalOverlay_login {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
/* the modal box */
#loginModal {
  background: #fff;
  width: 95%;
  /* max-width: 1200px; */
  height: 85%;
  position: relative;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
}
/* close “×” button */
#loginModal .modal-close {
  position: absolute;
  top: 8px; right: 20px;
  font-size: 24px;
  font-weight: bold;
  color: #666;
  cursor: pointer;
}
/* content area: scroll if needed */
#loginModal .modal-content {
  padding: 16px;
  overflow: auto;
  flex: 1;
}


/*--------------Account Page-----------------------*/
#accountHeaderWrapper {
  padding: 10px 0px 0px 0px;
  height: 5dvh;
  display: flex;
  flex-direction: column;
}

#accountWrapper {
  font-family: inherit;
  padding: 10px 0px 10px 0px;
  width: 500px;
  height: 70dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: auto;
}

#accountWrapper input {
  font-family: inherit;
  padding: 5px;
  background-color: white;
  border-radius: 4px;
}

.accountwrap {
  overflow-y: scroll;
  -webkit-transition: .1s;
  transition: .1s;
  width: 100%
}

.accountInfo {
  font-family: inherit;
  padding: 25px;
  color: black;
  justify-content: space-between;
}


.accountName {
  display: flex;
  flex-direction: column;
}

.accountNameWrap {
  display: flex;
  padding: 5px 0px;
  justify-content: space-between;
}

.accountEmailWrap {
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
}

#accountPhone{
  color: gray;
}
.accountPhoneWrap {
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
}

.accountPasswordWrap {
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
}

.accountButtons {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: baseline;
}

.accountNameTitle {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top: 5px;
  color: black;
}


.accountButton{
    display: flex;
    margin: auto;
    background-color: #ffffff;
    color: black;
    border-radius: 0;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom: none;
    border-color: black;
    border: 1px solid transparent;
    font-weight: 400;
    text-decoration: none;
    padding: .375rem .75rem;
    font-size: 1rem;
}
.accountButton:hover{
  box-shadow: inset 0 0 14px 0px rgb(114 170 237);
}

.disable-scrollbars::-webkit-scrollbar {
  background: transparent;
  /* Chrome/Safari/Webkit */
  width: 0px;
}

.disable-scrollbars {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}


.ownerOptions {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  /* width: 350px; */
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: none;
}

.ownerOptions li {
  padding: 8px;
  cursor: pointer;
}

.ownerOptions li:hover {
  background-color: #f5f5f5;
}


.filter-modal-content{
  /* position: relative;
  top: 140px;
  left: 18px; */
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 10px;
  outline: 0;
}


label {
  display: inline-block;
  padding: 5px 10px;
  cursor: pointer;
}


label span {
  position: relative;
  line-height: 22px;
  padding-left: 5px;
}

label span:before,
label span:after {
  content: '';
}

label span:before {
  border: 1px solid var(--accent-primary);
  width: 20px;
  height: 20px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: top;
}

label span:after {
  background: #222021;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 1px;
  left: 8px;
  transition: 300ms;
  opacity: 0;
}
  /* From Uiverse.io by kennyotsu */
  .card {
    --bg-color: #212121;
    background-color: var(--bg-color);
    padding: 1rem 2rem;
    border-radius: 1.25rem;
  }
  .loader {
    color: rgb(124, 124, 124);
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 16px;
    box-sizing: content-box;
    height: 22px;
    display: flex;
    border-radius: 8px;
  }

  .words {
    overflow: hidden;
    position: relative;
  }
  .words::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
  }

  .word {
    display: block;
    height: 100%;
    color: white;
    animation: spin_4991 4s infinite;
  }

  @keyframes spin_4991 {
    10% { transform: translateY(-102%); }
    25% { transform: translateY(-100%); }
    35% { transform: translateY(-202%); }
    50% { transform: translateY(-200%); }
    60% { transform: translateY(-302%); }
    75% { transform: translateY(-300%); }
    85% { transform: translateY(-402%); }
    100% { transform: translateY(-400%); }
  }


.popup {
    display: flex;
    position: fixed;
    /* Above #cs-navigation (10000) and #searchModal (100001) — this is
       the blocking EULA/notice modal; the fixed mobile nav was overlaying
       its top edge at 9999. */
    z-index: 100002;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
  }
  .popup-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
      margin: auto;
      margin-top: 8rem;
      padding: 20px;
      border: 1px solid #888;
      border-radius: 12px;
      width: 55%;
      max-width: 720px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      animation: fadeIn 0.3s;
      position: relative;
    }

    #acceptBtn{
      margin: 1rem;
      border-radius: 8px;
    }
    #declineBtn{
      margin: 1rem;
      border-radius: 8px;
    }

    /* EULA/Notice popup on phones: the desktop 55% column squeezes the
       text into a sliver (style.css had the old fix but is no longer
       loaded — root.css owns this popup now). Near-full-width card,
       left-aligned copy (!important beats the inline text-align:center),
       capped height with internal scrolling so the ACCEPT/DECLINE
       buttons are always reachable, stacked full-width buttons. */
    @media screen and (max-width: 750px) {
      .popup {
        padding: 12px;
      }
      .popup-content {
        width: 100%;
        max-width: none;
        margin: auto;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px 14px;
      }
      .popup-content h2 {
        margin: 0 0 10px;
      }
      .popup-content p {
        text-align: left !important;
        font-size: 0.95rem;
        line-height: 1.5;
        overflow-wrap: break-word;
      }
      .popup-content .button-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
        padding-bottom: 4px;
      }
      .popup-content .button-container button,
      #acceptBtn, #declineBtn {
        margin: 0;
        width: 100%;
        min-height: 44px;
      }
    }




    #mortagedatatable_mobile{
      .cs-table-list{
        .cs-table{
          thead{
            background-color: rgb(74 161 248 / 55%) !important;
            color: black;
          }
          tbody{
            tr{
              td{
                color: black;
              }
            }
          }
        }
      }
    }


/* Define the keyframes for the animation */
@keyframes text-animation {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}













#openComperBtn{
  display: none;
  font-family: "Montserrat", sans-serif;
    text-align: center;
    border-radius: 3px;
    font-weight: 500px;
    justify-content: center;
    background-color: #0000ff00;
    color: black;
    border: 2px solid transparent;
    font-size: 11pt;
    font-weight: bold;
    height: 35px;
    margin-left: 5px;
    align-items: center;
    padding: 0px 10px;
    border-radius: 8px;
    background: /* The first background is a solid color, clipped to the content area */ linear-gradient(white, white) padding-box, /* The second background is the gradient, filling the entire border box */ linear-gradient(45deg, #5a9bec, #9c83ec) border-box;
    background-clip: padding-box, border-box;
    background-origin: border-box;
}

#openComperBtn:hover{
              background: linear-gradient(135deg, var(--accent-primary), #8b5cf6) !important;
    color: white;
    font-size: 11pt;
    border-radius: 8px;
    font-weight: bold;

    img{
      filter: invert(1);
    }
}



.marker_popup:hover{
  border: 1px solid transparent !important;
  background: /* The first background is a solid color, clipped to the content area */ 
  linear-gradient(white, white) padding-box, /* The second background is the gradient, filling the entire border box */ 
  linear-gradient(45deg, #5a9bec, #9c83ec) border-box !important;
  background-clip: padding-box, border-box !important;
  background-origin: border-box !important;
}

.view_details_hover{
  background: linear-gradient(45deg, #5a9bec, #9c83ec) border-box ;
  text-align: center ;
  justify-content:center ;
  font-family: 'Montserrat';
  width: 100%;
  margin-top: 0.15rem;
  border-radius: 8px;
  border: 1px solid transparent;
  strong{
    color: white ;
    text-align: center ;
  }
}
.view_details_hover:hover{
  border: 1px solid transparent ;
  background: /* The first background is a solid color, clipped to the content area */ 
  linear-gradient(white, white) padding-box, /* The second background is the gradient, filling the entire border box */ 
  linear-gradient(45deg, #5a9bec, #9c83ec) border-box ;
  background-clip: padding-box, border-box ;
  background-origin: border-box ;
  text-align: center ;
  justify-content:center ;

  strong{
    background-image: linear-gradient(to right, #5ca5ff, #805cf7, #5ca5ff) ;
    background-clip: text ;
    -webkit-background-clip: text ;
    color: transparent ;
    background-size: 200% 100% ;
    display: inline-block ;
    animation: text-animation 3s linear infinite;
  }
}

.marker_popup_x{
  position:absolute;
  top:6px;
  right:6px;
  background:rgba(0,0,0,0.5);
  border:none;
  color:white;
  font-size:14px;
  padding:2px 6px;
  border-radius:3px;
  cursor:pointer;
}
.marker_popup_x:hover{
  color:red;
  background: rgb(255 255 255 / 50%);
}


.outlined_button_edit::before{
  /* content: url('../img/icon/settings.svg');
  display: inline-block;
  margin-right: 5px; */
}
.outlined_button_edit{
  border-radius: 8px;
  background: /* The first background is a solid color, clipped to the content area */ linear-gradient(white, white) padding-box, /* The second background is the gradient, filling the entire border box */ linear-gradient(45deg, #5a9bec, #9c83ec) border-box;
  background-clip: padding-box, border-box;
  background-origin: border-box;
  color: black;
  font-family: 'Montserrat';
  font-weight: 800;
}
.outlined_button_edit:hover{
  border-radius: 8px;
              background: linear-gradient(135deg, var(--accent-primary), #8b5cf6) !important;
  color: white;
  font-weight: bold;
  font-family: 'Montserrat';
  font-weight: 800;
}

.outlined_button{
  border-radius: 8px;
  background: /* The first background is a solid color, clipped to the content area */ linear-gradient(white, white) padding-box, /* The second background is the gradient, filling the entire border box */ linear-gradient(45deg, #5a9bec, #9c83ec) border-box;
  background-clip: padding-box, border-box;
  background-origin: border-box;
  color: rgba(255, 0, 0, 0.58);
  font-family: 'Montserrat';
  font-weight: 800;
}
.outlined_button:hover{
  border-radius: 8px;
              background: linear-gradient(135deg, var(--accent-primary), #8b5cf6) !important;
  color: white;
  font-weight: bold;
  font-family: 'Montserrat';
  font-weight: 800;
}





/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-2421 {
    padding: var(--sectionPadding);
    padding-top: 0;
    display: none;
  }
  #pricing-2421 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #pricing-2421 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #pricing-2421 .cs-title {
    max-width: 28ch;
  }
  #pricing-2421 .cs-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
  }
  #pricing-2421 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #pricing-2421 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #pricing-2421 .cs-button-solid:hover:before {
    width: 100%;
  }
  #pricing-2421 .cs-button-group {
    grid-column: span 12;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 1.9vw, 1.25rem);
  }
  #pricing-2421 .cs-button {
    /* top & bottom - 32px - 48px */
    /* left & right - 16px - 40px */
    padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2.5rem);
    background-color: #fff;
    border: none;
    border-radius: 0.75rem;
    /* 16px - 24px */
    gap: clamp(1rem, 2vw, 1.5rem);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    background: white;
  }
  #pricing-2421 .cs-button:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.05;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.3s;
  }
  #pricing-2421 .cs-button:after {
    content: "";
    width: 100%;
    height: 100%;
    background: transparent;
    border: 1px solid var(--primary);
    opacity: 0.1;
    border-radius: 0.75rem;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.3s;
  }
  #pricing-2421 .cs-button.cs-active {
    /* when the button is active, add these styles to the button, its pseudo, and children */
  }
  #pricing-2421 .cs-button.cs-active .cs-check-wrapper {
    border: none;
    background-color: var(--primary);
  }
  #pricing-2421 .cs-button.cs-active .cs-check {
    opacity: 1;
  }
  #pricing-2421 .cs-button.cs-active .cs-discount {
    color: #fff;
  }
  #pricing-2421 .cs-button.cs-active .cs-discount:before {
    opacity: 1;
  }
  #pricing-2421 .cs-button.cs-active .cs-price {
    color: var(--headerColor);
  }
  #pricing-2421 .cs-button.cs-active:before {
    opacity: 0.1;
  }
  #pricing-2421 .cs-button.cs-active:after {
    opacity: 1;
  }
  #pricing-2421 .cs-check-wrapper {
    /* 24px - 32px */
    width: clamp(1.5rem, 1.9vw, 2rem);
    height: clamp(1.5rem, 1.9vw, 2rem);
    /* prevents squishing */
    flex: none;
    background-color: #fff;
    border: #cfd0d1;
    border-radius: 50%;
    transition: background-color 0.3s, border 0.3s;
  }
  #pricing-2421 .cs-check {
    width: 100%;
    height: auto;
    opacity: 0;
    display: block;
    transition: opacity 0.3s;
  }
  #pricing-2421 .cs-flex {
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  #pricing-2421 .cs-discount {
    font-size: 0.875rem;
    line-height: 1.5em;
    padding: 0.125rem 0.75rem 0;
    background-color: #fff;
    border-radius: 2rem;
    color: var(--secondary);
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #pricing-2421 .cs-discount:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--secondary);
    opacity: 0.2;
    border-radius: 2rem;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.3s;
  }
  #pricing-2421 .cs-plan {
    /* 16px - 25px */
    font-size: clamp(1rem, 3.3vw, 1.5625rem);
    line-height: 1.5em;
    text-align: left;
    font-weight: 700;
    color: var(--headerColor);
  }
  #pricing-2421 .cs-price {
    /* 39px - 49px */
    font-size: clamp(2.4375rem, 7vw, 3.0625rem);
    line-height: 1.2em;
    font-weight: 700;
    color: var(--bodyTextColor);
    display: inline-flex;
    align-items: baseline;
    transition: color 0.3s;
  }
  #pricing-2421 .cs-price-small {
    font-size: 1rem;
  }
  #pricing-2421 .cs-card {
    grid-column: span 12;
    list-style: none;
    width: 100%;
    margin: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    /* 16px - 48px */
    padding: clamp(1rem, 5vw, 3rem);
    background-color: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 1;
    transition: transform 0.6s;
    transform-origin: top left;
  }
  #pricing-2421 .cs-card:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.05;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #pricing-2421 .cs-card.cs-hidden {
    width: 100%;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    transform: scale(0);
  }
  #pricing-2421 .cs-package {
    font-size: 1.5625rem;
    line-height: 1.5em;
    font-weight: 700;
    margin: 0 0 1rem;
  }
  #pricing-2421 .cs-ul {
    width: 100%;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  #pricing-2421 .cs-li {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #pricing-2421 .cs-li.cs-disabled .cs-icon {
    background-color: #cfd0d1;
  }
  #pricing-2421 .cs-icon {
    width: 1.5rem;
    height: auto;
    /* prevents squishing */
    flex: none;
    padding: 0.25rem;
    background-color: var(--primary);
    border-radius: 50%;
    display: block;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #pricing-2421 .cs-card,
  #pricing-2421 .cs-button-group {
    grid-column: span 6;
  }
  #pricing-2421 .cs-card {
    order: -1;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #pricing-2421 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #pricing-2421 .cs-title,
  body.dark-mode #pricing-2421 .cs-text,
  body.dark-mode #pricing-2421 .cs-plan,
  body.dark-mode #pricing-2421 .cs-price,
  body.dark-mode #pricing-2421 .cs-package,
  body.dark-mode #pricing-2421 .cs-li {
    /* color: var(--bodyTextColorWhite); */
    color: var(--text-primary);
  }
  body.dark-mode #pricing-2421 .cs-price,
  body.dark-mode #pricing-2421 .cs-li {
    opacity: 0.8;
  }
  body.dark-mode #pricing-2421 .cs-button.cs-active .cs-price {
    color: var(--bodyTextColorWhite);
    opacity: 1;
  }
  body.dark-mode #pricing-2421 .cs-button,
  body.dark-mode #pricing-2421 .cs-card {
    background-color: var(--medium);
  }
  body.dark-mode #pricing-2421 .cs-li.cs-disabled .cs-icon {
    background-color: #828283;
  }
}
                                





/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */


/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/
#database_filters_price{
  display: none;
}
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  .pricing-2421 {
    padding: var(--sectionPadding);
    padding-top: 0;
    display: none;
  }
  .pricing-2421 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  .pricing-2421 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  .pricing-2421 .cs-title {
    max-width: 28ch;
  }
  .pricing-2421 .cs-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
  }
  .pricing-2421 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  .pricing-2421 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  .pricing-2421 .cs-button-solid:hover:before {
    width: 100%;
  }
  .pricing-2421 .cs-button-group {
    grid-column: span 12;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 1.9vw, 1.25rem);
  }
  .pricing-2421 .cs-button {
    /* top & bottom - 32px - 48px */
    /* left & right - 16px - 40px */
    padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2.5rem);
    background-color: #fff;
    border: none;
    border-radius: 0.75rem;
    /* 16px - 24px */
    gap: clamp(1rem, 2vw, 1.5rem);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    background: white;
  }
  .pricing-2421 .cs-button:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.05;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.3s;
  }
  .pricing-2421 .cs-button:after {
    content: "";
    width: 100%;
    height: 100%;
    background: transparent;
    border: 1px solid var(--primary);
    opacity: 0.1;
    border-radius: 0.75rem;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.3s;
  }
  .pricing-2421 .cs-button.cs-active {
    /* when the button is active, add these styles to the button, its pseudo, and children */
  }
  .pricing-2421 .cs-button.cs-active .cs-check-wrapper {
    border: none;
    background-color: var(--primary);
  }
  .pricing-2421 .cs-button.cs-active .cs-check {
    opacity: 1;
  }
  .pricing-2421 .cs-button.cs-active .cs-discount {
    color: #fff;
  }
  .pricing-2421 .cs-button.cs-active .cs-discount:before {
    opacity: 1;
  }
  .pricing-2421 .cs-button.cs-active .cs-price {
    color: var(--headerColor);
  }
  .pricing-2421 .cs-button.cs-active:before {
    opacity: 0.1;
  }
  .pricing-2421 .cs-button.cs-active:after {
    opacity: 1;
  }
  .pricing-2421 .cs-check-wrapper {
    /* 24px - 32px */
    width: clamp(1.5rem, 1.9vw, 2rem);
    height: clamp(1.5rem, 1.9vw, 2rem);
    /* prevents squishing */
    flex: none;
    background-color: #fff;
    border: #cfd0d1;
    border-radius: 50%;
    transition: background-color 0.3s, border 0.3s;
  }
  .pricing-2421 .cs-check {
    width: 100%;
    height: auto;
    opacity: 0;
    display: block;
    transition: opacity 0.3s;
  }
  .pricing-2421 .cs-flex {
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .pricing-2421 .cs-discount {
    font-size: 0.875rem;
    line-height: 1.5em;
    padding: 0.125rem 0.75rem 0;
    background-color: #fff;
    border-radius: 2rem;
    color: var(--secondary);
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  .pricing-2421 .cs-discount:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--secondary);
    opacity: 0.2;
    border-radius: 2rem;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.3s;
  }
  .pricing-2421 .cs-plan {
    /* 16px - 25px */
    font-size: clamp(1rem, 3.3vw, 1.5625rem);
    line-height: 1.5em;
    text-align: left;
    font-weight: 700;
    color: var(--headerColor);
  }
  .pricing-2421 .cs-price {
    /* 39px - 49px */
    font-size: clamp(2.4375rem, 7vw, 3.0625rem);
    line-height: 1.2em;
    font-weight: 700;
    color: var(--bodyTextColor);
    display: inline-flex;
    align-items: baseline;
    transition: color 0.3s;
  }
  .pricing-2421 .cs-price-small {
    font-size: 1rem;
  }
  .pricing-2421 .cs-card {
    grid-column: span 12;
    list-style: none;
    width: 100%;
    margin: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    /* 16px - 48px */
    padding: clamp(1rem, 5vw, 3rem);
    background-color: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 1;
    transition: transform 0.6s;
    transform-origin: top left;
  }
  .pricing-2421 .cs-card:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.05;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .pricing-2421 .cs-card.cs-hidden {
    width: 100%;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    transform: scale(0);
  }
  .pricing-2421 .cs-package {
    font-size: 1.5625rem;
    line-height: 1.5em;
    font-weight: 700;
    margin: 0 0 1rem;
  }
  .pricing-2421 .cs-ul {
    width: 100%;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .pricing-2421 .cs-li {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .pricing-2421 .cs-li.cs-disabled .cs-icon {
    background-color: #cfd0d1;
  }
  .pricing-2421 .cs-icon {
    width: 1.5rem;
    height: auto;
    /* prevents squishing */
    flex: none;
    padding: 0.25rem;
    background-color: var(--primary);
    border-radius: 50%;
    display: block;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  .pricing-2421 .cs-card,
  .pricing-2421 .cs-button-group {
    grid-column: span 6;
  }
  .pricing-2421 .cs-card {
    order: -1;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode .pricing-2421 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode .pricing-2421 .cs-title,
  body.dark-mode .pricing-2421 .cs-text,
  body.dark-mode .pricing-2421 .cs-plan,
  body.dark-mode .pricing-2421 .cs-price,
  body.dark-mode .pricing-2421 .cs-package,
  body.dark-mode .pricing-2421 .cs-li {
    /* color: var(--bodyTextColorWhite); */
    color: var(--text-primary);
  }
  body.dark-mode .pricing-2421 .cs-price,
  body.dark-mode .pricing-2421 .cs-li {
    opacity: 0.8;
  }
  body.dark-mode .pricing-2421 .cs-button.cs-active .cs-price {
    color: var(--bodyTextColorWhite);
    opacity: 1;
  }
  body.dark-mode .pricing-2421 .cs-button,
  body.dark-mode .pricing-2421 .cs-card {
    background-color: var(--medium);
  }
  body.dark-mode .pricing-2421 .cs-li.cs-disabled .cs-icon {
    background-color: #828283;
  }
}
                                


#property-top-bar{
  display: flex;
  justify-content: space-between;
}





.property-stats-container-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.property-stats-container {
            display: grid;
            gap: 20px;
            font-family: var(--font-family);
            color: var(--text-color);
            padding: 20px;
            /* Default: Horizontal row (as seen in Image 1) */
            grid-template-columns: repeat(6, auto);
            align-items: center;
            width: 100%;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .stat-item i {
            font-size: 1.2rem;
            color: var(--icon-color);
            display: flex;
            align-items: center;
        }

        .stat-value {
            font-weight: 500;
            font-size: 1rem;
        }

        /* Responsive Breakpoints */

        /* 2 columns x 3 rows (as seen in Image 2) */
        @media (max-width: 1565px) {
            .property-stats-container {
                grid-template-columns: repeat(3, 1fr);
                gap: 15px 40px;
            }
        }
        @media (max-width: 900px) {
            .property-stats-container {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px 40px;
            }
        }

        /* 1 column stack */
        @media (max-width: 400px) {
            .property-stats-container {
                grid-template-columns: 1fr;
            }
        }

/* ───────────────────────────────────────────────────────────────────
   Leaflet / gmaps-shim overrides
   Styles the Leaflet-backed map controls so they read like the old
   Google Maps UI the rest of the page was designed against.
   ─────────────────────────────────────────────────────────────────── */
#map { width: 100%; height: 100%; background: var(--bg-secondary, #e9eef3); }
.leaflet-container { font-family: 'Roboto', Arial, sans-serif; font-size: 12px; }

/* Map-type selector — original .gmaps-shim-maptype is back in its
   top-left position with the token-driven look. */
.leaflet-bar.gmaps-shim-maptype.leaflet-control,
.gmaps-shim-maptype {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin: 10px !important;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.leaflet-bar.gmaps-shim-maptype a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}
.gmaps-shim-maptype a:last-child { border-bottom: none; }
.leaflet-bar.gmaps-shim-maptype a:hover {
  background: var(--bg-elevated);
  color: var(--accent-primary);
}
.gmaps-shim-maptype a:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px;
}
.gmaps-shim-maptype a.active,
.gmaps-shim-maptype a[aria-pressed="true"] {
  background: var(--accent-glow);
  color: var(--accent-primary);
  font-weight: 600;
}

/* Hide the standalone measure-toggle and fullscreen controls — they
   are now incorporated into the unified .map-control-panel. Hidden
   (not removed) so their existing click handlers + state management
   continue to function when the panel's mirror buttons trigger them. */
.gmaps-shim-measure-toggle.leaflet-control,
.leaflet-control-fullscreen.leaflet-control,
.leaflet-control-zoom-fullscreen { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────
   UNIFIED MAP CONTROL PANEL
   Single L.Control combining:
     • Tools row — Fullscreen + Measure icon buttons
     • Footprint visibility toggle (re-uses .footprint-toggle-slider
       + .footprint-toggle-text styles below)
     • ODbL attribution footer (visible only when footprints are on)
   ───────────────────────────────────────────────────────────────────── */
.map-control-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  margin: 10px !important;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  color: var(--text-primary);
  user-select: none;
  width: max-content;
  min-width: 220px;
  white-space: nowrap;
}
.map-control-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.map-control-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
/* Tools row — fullscreen + measure icon buttons grouped on the right. */
.map-control-tools {
  display: inline-flex;
  padding: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  gap: 2px;
}
.map-control-icon-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  padding: 0;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: calc(var(--radius-sm) - 1px);
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}
.map-control-icon-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-control-icon-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.map-control-icon-btn.active {
  background: var(--accent-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.map-control-icon-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}
/* The expand/collapse chevron rotates 180° as the panel opens. */
.map-control-expand-btn svg {
  transition: transform var(--transition-fast);
}
.map-control-panel:not(.collapsed) .map-control-expand-btn svg {
  transform: rotate(180deg);
}

/* ── COLLAPSED state — show only the tools row (the 3-icon chip),
   hide the section label, footprint section, and ODbL attribution. ── */
.map-control-panel.collapsed {
  padding: 6px;
  min-width: 0;
  gap: 0;
}
/* Generic: hide everything except the first (tools) section when
   collapsed — covers Footprints, the county Layers section, and any
   future sections without needing per-section rules. */
.map-control-panel.collapsed .map-control-section-label,
.map-control-panel.collapsed .map-control-section:not(:first-child),
.map-control-panel.collapsed .map-control-attrib {
  display: none;
}
.map-control-panel.collapsed .map-control-section {
  justify-content: flex-start;
  gap: 0;
}
/* Edge-to-edge divider between sections. */
.map-control-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 0 -12px;
}
/* ODbL attribution footer. */
.map-control-attrib {
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-tertiary);
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
}
.map-control-attrib a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
}
.map-control-attrib a:hover {
  color: var(--accent-primary);
  text-decoration: underline;
}
/* When footprints are toggled off there's no ODbL data on the map,
   so the attribution + its preceding divider both disappear. */
.map-control-panel:not(.has-footprints) .map-control-attrib { display: none; }

/* ── Layer Styles section (parcel / footprint line color + thickness) ── */
.map-control-section-styles {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.map-style-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.map-style-row-label {
  flex: 0 0 68px;
  font-size: 11px;
  color: var(--text-secondary);
}
.map-style-row input[type="color"] {
  width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  cursor: pointer;
}
.map-style-row input[type="range"] {
  flex: 1;
  min-width: 90px;
  accent-color: var(--accent-primary);
  cursor: pointer;
}
.map-style-reset {
  align-self: flex-end;
  appearance: none;
  -webkit-appearance: none;
  padding: 3px 10px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.map-style-reset:hover {
  color: var(--text-primary);
  border-color: var(--border-medium);
}

/* ── Print-map mode: isolate the map container on paper ── */
@media print {
  body.cpd-printing-map * {
    visibility: hidden !important;
  }
  body.cpd-printing-map #map-container,
  body.cpd-printing-map #map-container * {
    visibility: visible !important;
  }
  body.cpd-printing-map #map-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2147483647 !important;
  }
  /* Interactive chrome has no business on paper. */
  body.cpd-printing-map .map-control-panel,
  body.cpd-printing-map .leaflet-control-zoom,
  body.cpd-printing-map .leaflet-control-attribution,
  body.cpd-printing-map .gmaps-shim-maptype,
  body.cpd-printing-map .gmaps-shim-measure-toggle,
  body.cpd-printing-map #parcel-tooltip {
    display: none !important;
  }
}

/* ── County "Layers" section (Sections / Lots / Blocks / Subdivisions) ─
   Injected by dynamically_create_controls2 on /properties/<county>
   routes. Each row reuses the footprint-toggle slider + text styling
   so the whole panel reads as one consistent control. */
.map-control-section-layers {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.map-control-layer-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.map-control-layer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.map-control-layer-options {
  font-size: 11px;
  color: var(--text-tertiary);
  text-decoration: none;
  align-self: flex-start;
}
.map-control-layer-options:hover {
  color: var(--accent-primary);
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────
   Footprint toggle SLIDER + TEXT — these inner styles are reused by
   the unified .map-control-panel (the standalone .footprint-toggle
   wrapper is no longer rendered). The slider's iOS-style switch +
   accent-fill-when-on stays exactly as it was.
   ───────────────────────────────────────────────────────────────────── */
.footprint-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 0;
}
.footprint-toggle-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.footprint-toggle-slider {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}
.footprint-toggle-slider::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  background: var(--text-tertiary);
  border-radius: 50%;
  transition: transform var(--transition-fast), background-color var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.footprint-toggle-label input:checked + .footprint-toggle-slider {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}
.footprint-toggle-label input:checked + .footprint-toggle-slider::before {
  transform: translateX(14px);
  background: #fff;
}
.footprint-toggle-label input:focus-visible + .footprint-toggle-slider {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}
.footprint-toggle-text {
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  color: var(--text-primary);
}
.footprint-toggle-text-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 400;
}

/* Custom controls (Search Here, Layers, Edit Comper, Stop Filtering, ...). */
.gmaps-shim-custom-control { background: transparent; }
.gmaps-shim-custom-control > * { pointer-events: auto; }

/* Top-center / bottom-center positioning for controls placed via
   map.controls[google.maps.ControlPosition.TOP_CENTER].push(...).
   Leaflet has no native centered corner, so the shim appends these
   directly to the map container with absolute positioning. */
.gmaps-shim-top-center {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;            /* above tilePane (200), MVT pane (450), markers (600), below popups (700) */
  pointer-events: auto;
}
.gmaps-shim-bottom-center {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: auto;
}

/* Editable-shape handles (Rectangle corners, Circle radius grip). */
.gmaps-shim-handle, .gmaps-shim-corner {
  background: #fff; border: 2px solid #5aa5ff; border-radius: 50%;
  width: 14px; height: 14px; line-height: 12px; text-align: center;
  font-size: 10px; color: #5aa5ff; cursor: grab;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.gmaps-shim-corner { border-radius: 2px; cursor: nwse-resize; }

/* InfoWindow / popup — flatten Leaflet's default chrome to match the old GM look. */
.leaflet-popup.gmaps-shim-iw .leaflet-popup-content-wrapper {
  border-radius: 8px; box-shadow: 0 2px 7px 1px rgba(0,0,0,0.3); padding: 4px;
}
.leaflet-popup.gmaps-shim-iw .leaflet-popup-content { margin: 8px 12px; line-height: 1.35; }
.leaflet-popup.gmaps-shim-iw .leaflet-popup-tip { box-shadow: 0 2px 7px 1px rgba(0,0,0,0.2); }

/* Theme-aware popup chrome lives in theme-toggle.css so it overrides
   leaflet.css (which is loaded between root.css and theme-toggle.css). */

/* Search Here / Layers buttons (old code targets these class names). */
.search_here_controlUI {
  background: #fff; border: 2px solid #fff; border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3); cursor: pointer; text-align: center;
}
.search_here_controlText {
  color: rgb(25,25,25); font-family: Roboto, Arial, sans-serif;
  font-size: 14px; font-weight: 700; line-height: 32px; padding: 0 8px;
}

/* Attribution: keep it readable in dark theme. */
[data-theme="dark"] .leaflet-container,
.dark .leaflet-container { background: #1a1a1a; }
[data-theme="dark"] .leaflet-control-attribution,
.dark .leaflet-control-attribution {
  background: rgba(0,0,0,0.6) !important; color: #ccc !important;
}
[data-theme="dark"] .leaflet-control-attribution a,
.dark .leaflet-control-attribution a { color: #8ab4f8 !important; }

/* Self-contained measure tool — replaces leaflet-measure entirely. */
.gmaps-shim-measure-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #fff;
  cursor: pointer;
  text-decoration: none;
}
.gmaps-shim-measure-toggle svg { display: block; }
.gmaps-shim-measure-toggle:hover { background: #f5f5f5; }
.gmaps-shim-measure-toggle.active {
  background: var(--accent-primary, #5aa5ff) !important;
}
.gmaps-shim-measure-toggle.active svg { stroke: #fff; }

/* Crosshair cursor over the whole map while measuring. */
.gmaps-shim-measuring,
.gmaps-shim-measuring .leaflet-grab,
.gmaps-shim-measuring .leaflet-interactive {
  cursor: crosshair !important;
}

/* Distance read-out balloon that follows the cursor / pins to the last
   vertex when measuring stops. */
.leaflet-tooltip.gmaps-shim-measure-tooltip {
  background: var(--bg-elevated, #1f1f23);
  color: var(--text-primary, #fafafa);
  border: 1px solid var(--border-medium, #3f3f46);
  border-radius: var(--radius-sm, 4px);
  padding: 6px 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.4));
  white-space: nowrap;
}
.leaflet-tooltip.gmaps-shim-measure-tooltip::before {
  border-top-color: var(--border-medium, #3f3f46);
}

/* Dark-mode ruler glyph — invert the SVG stroke colour for visibility. */
[data-theme="dark"] .gmaps-shim-measure-toggle,
.dark .gmaps-shim-measure-toggle {
  background: var(--bg-elevated, #1f1f23);
}
[data-theme="dark"] .gmaps-shim-measure-toggle:hover,
.dark .gmaps-shim-measure-toggle:hover {
  background: var(--bg-secondary, #111113);
}
[data-theme="dark"] .gmaps-shim-measure-toggle svg,
.dark .gmaps-shim-measure-toggle svg {
  stroke: var(--text-primary, #fafafa);
}
[data-theme="dark"] .gmaps-shim-measure-toggle.active svg,
.dark .gmaps-shim-measure-toggle.active svg {
  stroke: #fff;
}

/* Final-measurement popup (perimeter + area + Delete-all button). */
.leaflet-popup.gmaps-shim-measure-popup-wrap .leaflet-popup-content-wrapper {
  background: var(--bg-elevated, #1f1f23);
  color: var(--text-primary, #fafafa);
  border: 1px solid var(--border-medium, #3f3f46);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.5));
  padding: 4px;
}
.leaflet-popup.gmaps-shim-measure-popup-wrap .leaflet-popup-content {
  margin: 10px 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: var(--text-primary, #fafafa);
}
.leaflet-popup.gmaps-shim-measure-popup-wrap .leaflet-popup-tip {
  background: var(--bg-elevated, #1f1f23);
  border: 1px solid var(--border-medium, #3f3f46);
}
.leaflet-popup.gmaps-shim-measure-popup-wrap .leaflet-popup-close-button {
  color: var(--text-secondary, #a1a1aa) !important;
  font-size: 18px;
  padding: 4px 6px 0 0;
}
.gmaps-shim-measure-popup__title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle, #27272a);
}
.gmaps-shim-measure-popup__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
}
.gmaps-shim-measure-popup__label {
  color: var(--text-secondary, #a1a1aa);
  font-weight: 500;
  min-width: 80px;
}
.gmaps-shim-measure-popup__value {
  color: var(--text-primary, #fafafa);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.gmaps-shim-measure-popup__clear {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 7px 12px;
  background: var(--bg-tertiary, #18181b);
  color: var(--text-primary, #fafafa);
  border: 1px solid var(--border-medium, #3f3f46);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: var(--transition-fast, 120ms ease);
}
.gmaps-shim-measure-popup__clear:hover {
  background: var(--error, #ef4444);
  border-color: var(--error, #ef4444);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────
   Filter widget overlay — when #filterWidget becomes display:block,
   float it ABOVE the map (and every Leaflet pane) at the top of the
   viewport. position:fixed so parent positioning is irrelevant; very
   high z-index so it sits over MapLibre's canvas, Leaflet popups,
   markers, and shim controls.
   ───────────────────────────────────────────────────────────────────── */
#filterWidget.imp-filters-widget-container {
  position: fixed !important;
  top: 0 !important;
  left: 50%;
  transform: translateX(-50%);
  width: min(960px, calc(100% - 24px));
  max-height: 100vh;
  overflow-y: auto;
  /* Leaflet panes top out at ~700 (popupPane); leaflet-control-container
     uses 800-ish; MapLibre canvas inside cpd-mvt pane is 450. 999999 to
     beat any plugin that piles z-index on its own UI. */
  z-index: 999999;
  /* background: var(--bg-primary, #ffffff); */
  /* border: 1px solid var(--border-subtle, rgba(0,0,0,0.12)); */
  border-radius: 0 0 12px 12px;
  /* box-shadow: 0 16px 36px rgba(0,0,0,0.25); */
  padding: 14px 18px;
}
[data-theme="dark"] #filterWidget.imp-filters-widget-container,
.dark #filterWidget.imp-filters-widget-container {
  background: #1f2025;
  color: #f5f5f5;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 16px 36px rgba(0,0,0,0.6);
}
/* ─────────────────────────────────────────────────────────────────────
   Comp Finder (REAPI /v3/PropertyComps) — inputs and helper text inside
   #tab-compfinder. The base .imp-filters-* rules (in property_dashboard/
   style.css) handle button + label + form-group spacing; these rules add
   the bits specific to the comp finder and override the legacy hardcoded
   colours so the widget honours the dark/light design tokens.
   ───────────────────────────────────────────────────────────────────── */
#tab-compfinder input[type="number"] {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--bg-input);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#tab-compfinder input[type="number"]:focus {
  border-color: var(--accent-primary);
  outline: 0;
  box-shadow: 0 0 0 3px var(--accent-glow);
}
/* Hint shown under the Subject field. */
#cf_subject_hint {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}
/* Status line under the Find Comps button. */
#cf_status_line {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  min-height: 16px;
}
/* Constraint-toggle row (exact match / arms-length / same county / …). */
.cf-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 13px;
  color: var(--text-primary);
}
.cf-toggles label {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cf-toggles input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent-primary);
  vertical-align: middle;
}
/* "Searching…" disabled state for the Find Comps buttons. */
#cf_find_comps_map_btn[disabled],
#cf_find_comps_list_btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}
/* Stack the two Find Comps buttons evenly. */
.cf-find-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.cf-find-row .imp-filters-plan-btn {
  flex: 1;
  margin-top: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   Comp Finder LIST VIEW (#view-compfinder)
   ───────────────────────────────────────────────────────────────────── */
#view-compfinder {
  background: var(--bg-primary);
  color: var(--text-primary);
}
.cf-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}
.cf-list-toolbar-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cf-list-toolbar-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.cf-list-toolbar-title .cf-list-meta {
  font-size: 12px;
  color: var(--text-secondary);
}
.cf-list-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cf-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.cf-view-toggle-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.cf-view-toggle-btn.hidden { display: none; }
.cf-view-toggle-btn svg {
  width: 16px;
  height: 16px;
}

.cf-table-wrap {
  padding: 0;
  overflow: auto;
  max-height: calc(100vh - 120px);
}
.cf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cf-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
  z-index: 2;
}
.cf-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: top;
}
.cf-table tbody tr {
  transition: background-color var(--transition-fast);
  cursor: pointer;
}
.cf-table tbody tr:hover {
  background: var(--bg-elevated);
}
.cf-table tbody tr.cf-row-subject {
  background: var(--accent-glow);
  border-left: 3px solid var(--holiday-accent);
  position: sticky;
  top: 33px; /* sits just below the sticky thead */
  z-index: 1;
}
.cf-table tbody tr.cf-row-subject:hover {
  background: var(--accent-glow);
}
.cf-row-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background: var(--holiday-accent);
  color: #fff;
}
.cf-row-addr {
  font-weight: 600;
  color: var(--text-primary);
}
.cf-row-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.cf-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────
   REAPI modern-view locked overlay — responsive sizing.
   Base styles are injected by property_explorer.js at runtime (which
   loads after this sheet), so these overrides use a 2-class selector
   to win specificity. Keeps the login/upgrade card proportional to
   the container on every screen size instead of overflowing on
   phones / narrow split-panes.
   ───────────────────────────────────────────────────────────────────── */
.reapi-mpv-locked-overlay .reapi-mpv-locked-card {
  max-width: min(480px, calc(100% - 16px));
  padding: clamp(16px, 4vw, 32px);
  top: clamp(16px, 8vh, 80px);
}
.reapi-mpv-locked-overlay .reapi-mpv-locked-title {
  font-size: clamp(17px, 2.5vw, 22px);
}
.reapi-mpv-locked-overlay .reapi-mpv-locked-sub {
  font-size: clamp(12px, 1.8vw, 14px);
}
@media (max-width: 600px) {
  .reapi-mpv-locked-overlay {
    padding: 24px 8px 16px;
  }
  .reapi-mpv-locked-overlay .reapi-mpv-locked-btn {
    width: 100%;
    padding: 12px 16px;
  }
}
/* Same treatment for the full-page paywall variant. */
.reapi-mpv-paywall {
  max-width: min(640px, calc(100% - 24px));
  margin-left: auto;
  margin-right: auto;
  padding: clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────
   Skip Trace (#view-skiptrace) — REAPI v2/SkipTrace UI
   ───────────────────────────────────────────────────────────────────── */
#view-skiptrace {
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-y: auto;
}
.st-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}
.st-top-bar > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.st-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.st-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
}

.st-display-area {
  position: relative;
  padding: 16px 20px 24px;
  min-height: 400px;
}

.st-paywall {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: var(--bg-see-through);
  color: var(--text-primary);
}
.st-paywall h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}
.st-paywall p {
  margin: 0 0 14px;
  font-size: 14px;
  max-width: 420px;
  color: var(--text-secondary);
}

.st-subject-hint {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

/* Mode pill switcher at the top of the Skip Trace form. Toggles between
   the Person form (/v2/SkipTrace) and the Company form (/v2/CorporateSkip). */
.st-mode-toggle {
  display: inline-flex;
  padding: 4px;
  margin-bottom: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  gap: 4px;
}
.st-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}
.st-mode-pill svg { width: 14px; height: 14px; }
.st-mode-pill:hover { color: var(--text-primary); }
.st-mode-pill--active {
  background: var(--bg-secondary);
  color: var(--accent-primary);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
#st_person_pane.hidden,
#st_company_pane.hidden { display: none; }

.st-fieldset {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px 14px;
  margin: 0 0 14px;
  background: var(--bg-secondary);
}
.st-legend {
  display: inline-block;
  padding: 0 6px;
  margin-left: -6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
}
.st-legend .st-muted {
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.st-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.st-field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.st-field.st-grow-2 { flex: 2; }
.st-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-tertiary);
}
.st-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.st-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
select.st-input { cursor: pointer; }

.st-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-primary);
}
.st-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.st-toggles input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent-primary);
}

.st-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
/* Top-of-form Run mirror: right-aligned, doesn't stretch full width */
.st-actions-top {
  margin-top: 0;
  margin-bottom: 10px;
  justify-content: flex-end;
}
.st-actions-top .st-btn-primary { flex: 0 0 auto; padding: 8px 22px; }

/* Property action-bar quick CTAs (Skip Trace / Comp Ai on the open property) */
.prop-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  margin-right: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  color: var(--accent-primary);
  background: var(--accent-glow);
  border: 1px solid var(--accent-primary);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.prop-cta-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.prop-cta-btn:hover {
  background: var(--accent-primary);
  color: #fff;
}
@media (max-width: 700px) {
  /* Icon-only pills on phones — the action bar is tight */
  .prop-cta-btn { padding: 7px 10px; font-size: 0; gap: 0; }
  .prop-cta-btn svg { width: 16px; height: 16px; }
}
.st-btn-primary,
.st-btn-secondary {
  flex: 1;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.st-btn-primary {
  background: var(--accent-primary);
  color: #fff;
  border: 1px solid var(--accent-primary);
}
.st-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.st-btn-primary[disabled] { opacity: 0.6; cursor: progress; }
.st-btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}
.st-btn-secondary:hover { background: var(--bg-elevated); border-color: var(--border-medium); }

.st-status {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  min-height: 16px;
}

/* ─────────────────────────────────────────────────────────────────────
   REAPI credit balance pill — sits in the top bar next to the user
   account chip. JS toggles .hidden, .reapi-credit-pill--warn, and
   .reapi-credit-pill--low based on the /reapi_usage/balance response.
   ───────────────────────────────────────────────────────────────────── */
.reapi-credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent-primary);
  background: var(--accent-glow);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}
.reapi-credit-pill:hover {
  background: var(--accent-primary);
  color: #fff;
}
.reapi-credit-pill.hidden { display: none; }

/* Color states — applied by JS as % remaining drops. */
.reapi-credit-pill--warn {
  color: var(--warning);
  background: var(--warning-bg);
  border-color: var(--warning);
}
.reapi-credit-pill--warn:hover {
  background: var(--warning);
  color: #fff;
}
.reapi-credit-pill--low {
  color: var(--error);
  background: rgba(239, 68, 68, 0.12);
  border-color: var(--error);
  animation: reapi-credit-pulse 2s ease-in-out infinite;
}
.reapi-credit-pill--low:hover {
  background: var(--error);
  color: #fff;
}
@keyframes reapi-credit-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
.reapi-credit-bolt {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}

/* "Out of REAPI credits" toast — shown when the backend returns 402.
   Auto-dismisses after 6s; click to dismiss earlier. */
.reapi-quota-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100000;
  min-width: 280px;
  max-width: 360px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--error);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.reapi-quota-toast--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.reapi-quota-toast__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--error);
  margin-bottom: 4px;
}
.reapi-quota-toast__body {
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 6px;
}
.reapi-quota-toast__meta {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
}

/* ─────────────────────────────────────────────────────────────────────
   Skip Trace REPORT (rendered into #st_results_body)
   A polished, presentation-grade report. Uses only design tokens so it
   honors dark + light themes. The print window (_stPrintReport) embeds
   a self-contained copy of these tokens so it renders identically.
   ───────────────────────────────────────────────────────────────────── */
.st-report { display: flex; flex-direction: column; gap: 14px; }

/* HERO — top header with subject name, AKAs, generated date */
.st-report-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--accent-glow), transparent 70%), var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.st-report-hero-name {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.2px;
}
.st-report-hero-sub {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.st-report-hero-sub > span { white-space: nowrap; }
.st-report-hero-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.st-report-hero-meta strong {
  color: var(--text-primary);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}

/* SUMMARY STATS — count strip */
.st-report-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.st-report-stat {
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.st-report-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-primary);
  line-height: 1;
}
.st-report-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
}

/* PERSON — wrapper around the per-person sections (Identity, Address,
   Phones, Emails). One per row in the persons[] array. */
.st-report-person {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  overflow: hidden;
}
.st-report-person-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-subtle);
}
.st-report-person-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.st-report-person-meta {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.st-report-person-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}
.st-report-person-body .st-report-section {
  border-radius: var(--radius-sm);
}
.st-report-person-body .st-report-section-head {
  padding: 8px 12px;
}

/* SECTION — labeled container for each report block */
.st-report-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.st-report-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-subtle);
}
.st-report-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent-primary);
}
.st-report-section-count {
  font-size: 11px;
  color: var(--text-secondary);
}
.st-report-section-body { padding: 12px 14px; }
.st-report-section--error {
  border-color: var(--error);
}
.st-report-section--error .st-report-section-title {
  color: var(--error);
}

/* IDENTITY GRID — key/value details */
.st-report-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
}
.st-report-kv > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-report-kv-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-tertiary);
}
.st-report-kv-value {
  font-size: 14px;
  color: var(--text-primary);
  word-break: break-word;
}

/* TABLES — used for phones, emails, relatives */
.st-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.st-report-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-tertiary);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.st-report-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: top;
}
.st-report-table tbody tr:last-child td { border-bottom: none; }
.st-report-table .st-report-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

/* PILLS — for status flags (DNC, Valid, Mobile, etc.) */
.st-report-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  white-space: nowrap;
}
.st-report-pill--good {
  background: var(--success-bg);
  color: var(--success);
}
.st-report-pill--warn {
  background: var(--warning-bg);
  color: var(--warning);
}
.st-report-pill--bad {
  background: rgba(239, 68, 68, 0.12);
  color: var(--error);
}
.st-report-pill--accent {
  background: var(--accent-glow);
  color: var(--accent-primary);
}

/* TIMELINE — used for address history */
.st-report-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}
.st-report-timeline li {
  position: relative;
  padding: 0 0 14px 22px;
  border-left: 2px solid var(--border-subtle);
  margin-left: 6px;
}
.st-report-timeline li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--bg-secondary);
}
.st-report-timeline li:first-child::before {
  background: var(--success);
}
.st-report-timeline li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.st-report-timeline-addr {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.st-report-timeline-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* RELATIVES — chip grid */
.st-report-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.st-report-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.st-report-chip-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.st-report-chip-meta {
  font-size: 11px;
  color: var(--text-secondary);
}

/* FOOTER — small print attribution at the bottom of the report */
.st-report-footer {
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.st-report-footer strong { color: var(--text-secondary); }

/* EMPTY state shown when a section has no rows */
.st-report-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  font-style: italic;
}

/* RAW JSON — collapsible <details> at the bottom for power users */
.st-report-raw {
  margin: 0;
}
.st-report-raw summary {
  cursor: pointer;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  user-select: none;
}
.st-report-raw[open] summary { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.st-report-raw pre {
  margin: 0;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text-secondary);
  max-height: 320px;
  overflow: auto;
  white-space: pre;
}

/* PRINT button variant in the results toolbar */
.st-print-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 6px 12px;
  font-size: 13px;
}
.st-print-btn svg { width: 14px; height: 14px; }

/* Form / results swap. The form view is the default; when a request
   completes we hide it and show the results view (and vice-versa via the
   "Back to Skip Trace" button). */
#st_form_view.hidden,
#st_results_view.hidden { display: none; }

.st-results-view {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  overflow: hidden;
}
.st-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-tertiary);
}
.st-back-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 6px 12px;
  font-size: 13px;
}
.st-back-btn svg { width: 14px; height: 14px; }
.st-results-meta {
  font-size: 12px;
  color: var(--text-secondary);
}
.st-results-body { padding: 14px; }

/* Loading overlay — sits ABOVE the form (which is visually dimmed and
   inert while a request is in flight) and below the paywall layer. */
.st-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background: var(--bg-see-through);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: var(--radius-md);
  pointer-events: all; /* swallow clicks while in flight */
}
.st-loading-overlay.hidden { display: none; }
.st-loading-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.2px;
}
.st-loading-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Form is dimmed while loading is active (the overlay is a sibling, so we
   target the form when the overlay isn't .hidden via :has — supported in
   all current evergreen browsers). The :has selector falls back gracefully
   in older browsers; the disabled inputs (set by the JS) still prevent
   interaction even without the visual dim. */
.st-display-area:has(> .st-loading-overlay:not(.hidden)) #st_form_view {
  opacity: 0.45;
  filter: grayscale(0.2);
  pointer-events: none;
  user-select: none;
  transition: opacity var(--transition-normal), filter var(--transition-normal);
}

/* "Cool" CSS spinner — four orbiting dots that pulse with the accent
   color. Pure CSS, no images. The four <span> children sit on diagonals
   of a 64×64 box and animate via a single keyframe. */
.st-spinner {
  position: relative;
  width: 64px;
  height: 64px;
}
.st-spinner span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 12px var(--accent-glow);
  animation: st-spinner-pulse 1.2s ease-in-out infinite;
}
.st-spinner span:nth-child(1) { transform: translate(0, -24px); animation-delay: 0s;    }
.st-spinner span:nth-child(2) { transform: translate(24px, 0);  animation-delay: 0.15s; background: var(--accent-hover); }
.st-spinner span:nth-child(3) { transform: translate(0, 24px);  animation-delay: 0.3s;  background: var(--holiday-accent); }
.st-spinner span:nth-child(4) { transform: translate(-24px, 0); animation-delay: 0.45s; background: var(--vacation-accent); }

@keyframes st-spinner-pulse {
  0%, 100% { opacity: 0.25; transform-origin: center; }
  50%      { opacity: 1; }
}
/* Outer rotation so the four dots orbit the center. The keyframe and the
   per-dot offsets compose: each dot pulses while the whole ring rotates. */
.st-spinner {
  animation: st-spinner-rotate 2.4s linear infinite;
}
@keyframes st-spinner-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Cards/blocks shown by the renderer. */
.st-card {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.st-card:last-child { margin-bottom: 0; }
.st-card-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent-primary);
}
.st-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 14px;
  font-size: 13px;
}
.st-kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-kv-label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.3px; }
.st-kv-value {
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-word;
}
.st-list { margin: 0; padding: 0; list-style: none; }
.st-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--text-primary);
}
.st-list li:last-child { border-bottom: none; }
.st-list .st-list-sub {
  color: var(--text-tertiary);
  font-size: 11px;
}
.st-raw {
  margin: 0;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text-secondary);
  max-height: 320px;
  overflow: auto;
  white-space: pre;
}

/* ─────────────────────────────────────────────────────────────────────
   Comp Mode active banner — shown on both the map sidebar (#listing-view
   wrapper) and the list view's toolbar to signal that a subject is
   pinned + give the user a one-click exit. Hidden by default; the JS
   adds/removes the .hidden class based on _cfLastResponse.
   ───────────────────────────────────────────────────────────────────── */
.cf-active-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--accent-glow);
  border: 1px solid var(--holiday-accent);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  margin: 6px 12px;
}
.cf-active-banner.hidden { display: none; }
.cf-active-banner-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cf-active-banner-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--holiday-accent);
}
.cf-active-banner-subject {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Drop Subject" / "Exit Comp Mode" button — destructive variant of
   .cf-view-toggle-btn that uses the error token so users see it as
   a stop/exit action. */
.cf-stop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--error);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--error);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.cf-stop-btn:hover {
  background: var(--error);
  color: #fff;
}
.cf-stop-btn.hidden { display: none; }
.cf-stop-btn svg { width: 14px; height: 14px; }

/* Hover-revealed remove "×" on each comp row. Hidden until the row is
   hovered. Subject rows omit the .cf-remove-btn entirely so users can't
   delete the subject — see _cfRenderCompsAsList. */
.cf-table tbody td.cf-remove-cell {
  width: 28px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
.cf-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--error);
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast);
}
.cf-table tbody tr:hover .cf-remove-btn,
.cf-remove-btn:focus-visible {
  opacity: 1;
}
.cf-remove-btn:hover {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
}

/* Pull the close X to the top-right corner of the overlay. */
#filterWidget #closeFilterWidget {
  position: absolute;
  top: 13px;
  right: 25px;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════════════
   Comp Finder form — responsive rework (subject + scope + actions on
   top, fine-tune filters in a collapsible <details>). All colors come
   from the design tokens at the top of this file.
   ════════════════════════════════════════════════════════════════════ */
#tab-compfinder {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
#tab-compfinder .imp-filters-form-group { margin: 0; }
#tab-compfinder input[type="number"],
#tab-compfinder input[type="text"] {
  min-height: 42px; /* comfortable touch target */
  width: 100%;
  box-sizing: border-box;
}

.cf-label-sub {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}

/* Search scope: three compact fields that wrap gracefully */
.cf-scope-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 14px;
}

/* Primary actions */
.cf-find-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cf-find-row .imp-filters-plan-btn {
  flex: 1 1 200px;
  min-height: 46px;
  margin: 0;
}
.cf-clear-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cf-clear-row .imp-filters-btn-secondary {
  width: auto;
  min-height: 40px;
  padding: 8px 20px;
  margin: 0;
  flex: 0 0 auto;
}
.cf-clear-row #cf_status_line {
  flex: 1 1 200px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

/* Collapsible fine-tune section */
.cf-advanced {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-tertiary);
  overflow: hidden;
}
.cf-advanced > summary {
  cursor: pointer;
  padding: 13px 16px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cf-advanced > summary::-webkit-details-marker { display: none; }
.cf-advanced > summary::after {
  content: '\2335'; /* ⌵ chevron */
  margin-left: auto;
  font-size: 16px;
  color: var(--text-secondary);
  transition: transform var(--transition-fast, 0.15s);
}
.cf-advanced[open] > summary::after { transform: rotate(180deg); }
.cf-advanced > summary:hover { background: var(--bg-elevated); }

/* Two-up filter grid on wide screens, single column on phones */
.cf-advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px 20px;
  padding: 4px 16px 16px;
}
.cf-advanced-grid .cf-span-all { grid-column: 1 / -1; }

/* Constraint toggles as touch-friendly pills */
#tab-compfinder .cf-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 8px;
}
#tab-compfinder .cf-toggles label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s);
}
#tab-compfinder .cf-toggles label:hover {
  border-color: var(--border-medium);
  color: var(--text-primary);
}
#tab-compfinder .cf-toggles label:has(input:checked) {
  border-color: var(--accent-primary);
  color: var(--text-primary);
  background: var(--accent-glow);
}
#tab-compfinder .cf-toggles input {
  accent-color: var(--accent-primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Phone-width tweaks */
@media (max-width: 640px) {
  .cf-scope-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cf-find-row .imp-filters-plan-btn { flex-basis: 100%; }
  .cf-advanced-grid { grid-template-columns: 1fr; padding: 4px 12px 12px; }
  #tab-compfinder .cf-toggles { grid-template-columns: 1fr 1fr; }
}