
@import url("site_input.css");
@import url("ai_search.css");
@import url("input.css");
@import url("nav.css");

@import url("signature.css");
@import url('https://fonts.googleapis.com/css2?family=Ephesis&family=Hurricane&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

.comment-footer-submit-button{
    /* relative left-inner-35rem round-border-icon text-light border-light m-1 cursor-pointer */
    background-color: transparent;
    position: relative;
    /* right: -100%; */
    /* bottom: 1.7rem; */
    /* z-index: 2000; */
    border-color: var(--site-turquoise) !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* 
  .comment-footer-submit-button:hover {
    box-shadow: var(--bs-d-7);
  } */
  
  .comment-footer-submit-button svg{
    fill: navy;
  }
  
  .comment-footer {
    background-color: var(--site-primary-bgcolor) !important;
  }
  
  .site-compact-input-underlined > textarea:focus + .comment-footer{
    background-color: var(--site-primary-bgcolor) !important;
  }
  
  .site-popup-info .site-compact-input-underlined > textarea:focus + .comment-footer{
    background-color: white !important;
  
  }
  
  
  
  .site-compact-input-underlined:not(.site-compact-input-danger) > input:focus + .site-compact-input-label,
  .site-compact-input-filled:not(.site-compact-input-danger) > input:focus + .site-compact-input-label:not(.has-value) {
    color: var(--site-secondary-link);
    position: absolute;
    /* top: 0.25rem !important; */
    /* background-color: #fafafa !important; */
  }
  
  .site-compact-input-underlined:not(.site-compact-input-danger) > input.comment-email-input:focus + .site-compact-input-label,
  .site-compact-input-filled:not(.site-compact-input-danger) > input.comment-email-input:focus + .site-compact-input-label:not(.has-value) {
      color: var(--site-secondary-link) !important;
    position: absolute !important;
    top: -0.5rem !important;
    background-color: var(--site-compact-input-underlined-bg);
  }
  
  .site-compact-input-underlined input + .site-compact-input-label.has-value, .site-compact-input-underlined select + .site-compact-input-label.has-value {
    color: var(--site-secondary-link);
    position: absolute;
    background-color: white !important;
    top: -5% !important;
    left: 1.5rem !important;
    font-size: 1rem;
    margin-bottom: 0px !important;
    padding: 0rem 2rem 0rem 1rem;
  }
  
  .market-insight-filters label .site-compact-input-label.has-value{
    top: -0.75rem !important;
  }
  
  .site-compact-input-group .site-compact-input-label.has-value, .site-compact-input-unit.input-boxed{
    color: var(--site-secondary-link);
    /* position: absolute; */
    top: -1rem !important;
    /* background-color: var(--site-compact-input-underlined-bg); */
    background-color: white;
    font-size: 0.9rem;
    padding: 0rem 0.5rem;
    width: fit-content !important;
  }

  label .site-compact-input-unit.input-boxed {
    justify-self: end !important;
    position: relative;
    top: 0.25rem !important;
    right: 5%;
  }
  
  .site-compact-input-underlined select{
    /* background-color: var(--site-compact-input-underlined-bg); */
    background-color: white;
  }

  .site-compact-input-group input, .site-compact-input-group select {
    padding-left: 1rem;
  }
  
  .site-compact-input-underlined:not(.site-compact-input-danger) > input:focus,
  .site-compact-input-filled:not(.site-compact-input-danger) > input:focus, .site-compact-input-filled:not(.site-compact-input-danger) > textarea:focus {
    border-bottom-width: 2px;
      border-color: var(--site-secondary-link) !important;
    /* border-image: linear-gradient(to right, #11998e, #38ef7d); */
    border: 1px solid var(--site-secondary-link) !important;
    outline: none !important;
    /* box-shadow: var(--bs-d-2) !important; */
    /* background-color: #fcfcfc !important; */
    
  }
  
  .site-compact-input-underlined:not(.site-compact-input-danger) > input[type=text][class*="required"]:focus{
    border-color: orange !important;
    box-shadow: 0 0 0 0.2rem rgb(255 230 157) !important;
  }
  
  .site-compact-input-underlined:not(.site-compact-input-danger) > input:focus ~ svg,
  .site-compact-input-filled:not(.site-compact-input-danger) > input:focus ~ svg {
      fill: var(--site-bg-nav-dark);
  }
  
  /** DISABLED **/
  
  .site-compact-input-underlined > input:disabled {
      background: var(--site-light-grey);
      cursor: not-allowed;
  }
  
  .site-compact-input-underlined > input:disabled + .site-compact-input-label,
  .site-compact-input-underlined > input:disabled ~ .site-compact-input-helper{
      color: var(--site-light-grey);
  }
  
  .site-compact-input-underlined > input:disabled ~ svg {
      fill: var(--site-light-grey);
  }
  
  
  /** DANGER **/
  
  .site-compact-input-underlined.site-compact-input-danger > .site-compact-input-label, .site-compact-input-underlined.site-compact-input-danger > .site-compact-input-helper,
  .site-compact-input-filled.site-compact-input-danger > .site-compact-input-label, .site-compact-input-filled.site-compact-input-danger > .site-compact-input-helper{
      color: var(--site-compact-color-danger);
  }
  
  .site-compact-input-danger > svg {
      fill: var(--site-compact-color-danger);
  }
  
  .site-compact-input-danger > input {
      border-color: var(--site-compact-color-danger);
  }
  
  .site-compact-input-underlined > input {
      background: white;
    transition: color 300ms ease-in-out;
    max-width: 73vw !important;
  }
  .site-compact-input-filled > input {
      background: var(--site-compact-color-bg-low-contrast);
  }
  
  .site-compact-input-underlined{
    width: 100% !important;
    
  }
  
  .compact-select {
    margin-top:10px;
    height: 4rem;
    min-width: 15rem;
    border-radius: 6px;
    width: 100%;
    background-color: var(--site-secondary-bg-color);
    border-color: var(--site-medium-grey);
  }
  
  .compact-select:hover {
    border: 1px solid var(--site-light-grey);
    box-shadow: none;
  }
  
  .compact-select:focus {
    border: 1px solid var(--site-secondary-link);
    box-shadow: none;
  }
  
  .btn-free {
    background-color: #ffc107;
    border-color: #ffc107;
    color: var(--site-off-white);
  }
  
  .site-border-radius {
    border-radius: var(--site-border-radius) !important;
  }
  
  .site-button-round{
    border-radius: 20rem !important;
  }
  
  .site-border-top-radius{
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  
  .site-border-bottom-radius{
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }
  
  .site-border-light {
    border: 1px solid var(--site-border-lighter-grey);
    border-radius: var(--site-border-radius);
  }
  
  .site-border-fancy{
    border: 1px solid var(--site-turquoise);
    border-radius: var(--site-border-radius);
  }
  
  .no-border{
    border: 0px !important;
    border-radius: 0px !important;
  }
  
  .no-box-shadow{
    box-shadow: none;
  }
  
  .beta{
    color: var(--site-turquoise);
    position: relative;
    top: -1rem;
  
  }
  
  .release-version-message{
    white-space: pre-wrap;
    position: absolute;
    min-width: 25rem;
    max-width: 50rem;
    box-shadow: var(--bs-d-2);
    background-color: azure;
    border-radius: 1rem;
  }
  
  input .error{
    color: red;
    border: 1px solid red;
  }
  
  .upgrade-to-paid{
    color: var(--site-light-orange) !important;
  }
  li.upgrade-to-paid, span.upgrade-to-paid{
    border-bottom: 0px solid var(--site-light-orange);
  }
  .site-tooltiptext.upgrade-to-paid {
    left: 40%;
  }
  
  .site-dashed-link{
    border-bottom: 1px dashed;
    cursor: pointer;
  }
  
  .highlight{
    display: inline;
    background-color: yellow;
    padding: 0.2em 0;
  }
  
  .blog-post-frame {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--site-light-grey);
    box-shadow: var(--bs-d-1);
    margin: 2rem !important;
  }
  
  .authentication-container{
    display: flex;
    flex-direction: column;
    /* padding-right: 3rem; */
  }
  
  .site-ul-light{
    background-color: transparent;
    list-style-type: inherit;
    margin-left: 1rem;
  
  }
  
  .site-ul-light-item{
    color: #fff;
    font-size: var(--site-subtitle-font-size);
    
  }
  
  @media screen and (min-width: 1098px){
    .site-round-single-card{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      box-shadow: var(--bs-d-2);
      min-width: 50rem;
    }
  
  }
  
  @media screen and (max-width: 898px){
    .subscription-packages-comparison-table {
      display: grid;
      grid-template-columns: 2fr 1fr 2fr 3fr 1fr;
      gap: 1rem;
    }
  
    .subscription-packages-comparison-row {
      display: grid;
      grid-template-columns: 1fr;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      grid-template-rows: 1fr 3fr 3fr 3fr;
    }
  
  }
  
  @media screen and (min-width: 898px){
    .subscription-packages-comparison-table{
      display: flex;
      flex-direction: column;
      
    }
  
    .subscription-packages-comparison-row{
      display: grid;
      grid-template-columns: 1fr repeat(3, 2fr);
      padding-left: 1rem !important;
      gap: 2rem;
    }
  
  }
  
  .bg-confetti-animated {
    background-repeat: space;
    background-size: 600px auto;
    background-position: top -10px center;
    background-image: url("data:image/svg+xml,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A");
  
  }
  
  .bg-confetti-static {
    background-repeat: repeat-x;
    background-position: top -10px center;
    background-image: url("data:image/svg+xml,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
  }
  
  .promotion-container{
    /* d-flex flex-row align-items-center justify-content-start px-3 */
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-left: 1rem;
    padding-right: 1rem
  
  }
  
  .promotion-tag{
    position: absolute;
      left: -2.5rem;
      top: -9rem;
      width: 7rem;
      border-radius: 50%;
      border: 5px double #bbbbbb;
      height: 7rem;
      background-color: var(--site-bg-nav-dark);
      color: white;
      box-shadow: var(--bs-d-2);
  }
  
  .promotion-tag-text{
    position: relative;
    font-size: 1rem;
    font-family: var(--site-font-family-exo);
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    max-width: 7rem;
    max-height: 7rem;
    /* top: 1rem; */
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 3px;
  }
  
  .bg-tier-0{
    background-color: #0073b1;
  }
  
  .bg-tier-1{
    background-color: #3c8f34;
  }
  
  .bg-tier-2{
    background-color: #fd7e14;
  }
  
  .bg-tier-3{
    background-color: #199589;
  }
  
  .bg-site-primary{
    background-color: var(--site-primary-bgcolor) !important;
  }
  
  .site-compact-text{
    display: flex;
    color: var(--site-primary-text-dark);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    background-color: #fafafa;
    border: 1px solid var(--site-medium-grey);
    border-radius: 0.5rem;
    
  }
  
  .site-compact-text-label{
    position: absolute;
    top: 6rem;
    left: 2.5rem;
    line-height: 147.6%;
    color: var(--site-primary-text-dark);
    transition: top .2s;
    font-size: 13px;
    background-color: var(--site-secondary-bgcolor);
    padding: 0rem 0.5rem;
  }
  
  .site-round-border-modal{
    /* site-border-radius relative-offset-t50-l-50 d-flex flex-column align-items-stretch justify-content-center modal-container box-shadow-dark-1 active */
    top: 50%;
    left: 50%;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* justify-content: center; */
    box-shadow: var(--bs-d-1);
  }
  
  .link{
    color: var(--site-link-light) !important;
    cursor: pointer;
  }
  
  .link:hover{
    cursor: pointer;
    color: var(--site-primary-link-hover) !important;
  
  }
  
  .link-detail{ /* link with additional details */
     color: var(--site-link-light) !important;
    cursor: pointer;
    border-bottom: 1px dotted var(--site-link-light);
  }
  
  .link-detail:hover{
    cursor: pointer;
    color: var(--site-primary-link-hover) !important;
  }
  
  .max-width-100{
    max-width: 100% !important;
  }
  
  .inherit{
    background-color: inherit;
    color: inherit;
    outline: none;
    border: none;
  }
  
  .success-text{
    color: var(--site-dark-green);
  }
  
  .success-border{
    border-color: var(--site-dark-green);
  }
  
  .comment-content{
    padding: 2rem 1rem 2rem 1rem;
  }
  
  .comment-content:hover{
    background-color: inherit;
    /* border-radius: 1rem; */
    padding: 2rem 1rem 2rem 1rem;
  }
  
  .comment-user-logo {
    color: #fff !important;
    border-radius: 50%;
    padding: 1px;
    padding-top: 1px;
    padding-right: 1px;
    border-color: rgb(255 193 7) !important;
    background-image: var(--site-gradient-insta-darker);
    background-image: var(--site-gradient-purple-teal);
  }
  
  .comment-user-logo:hover {
    color: rgb(255 255 255) !important;
    border-color: rgb(255 193 7) !important;
    background-image: linear-gradient(to top right, #00ffe7, var(--site-bg-nav-dark));
  }
  .comment-interaction-wrapper{
    display: inline-flex;
    align-items: center;
    justify-content: start;
  }
  .replies-counter{
    /* padding: 0.5rem 1rem; */
    cursor: pointer;
  }

  .interaction-count {
    width: unset !important;
    margin-right: 0.5rem;
  }
  
  .replies-counter:hover{
    /* padding: 0.5rem 1rem; */
    /* background-color: var(--site-off-white); */
    border-radius: var(--site-border-radius);
    color: var(--site-primary-link-hover);
  }
  
  .top-border{
    border-top: 1px solid inherit;
  }
  
  .bottom-border{
    border-bottom: 1px solid inherit;
  }
  
  .left-border{
    border-left: 1px solid inherit;
  }
  
  .right-border{
    border-right: 1px solid inherit;
  }
  
  .review-rating {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    width: fit-content !important;
  }
  
  .rating-lg{
    font-size: 1.5rem;
    transition: var(--site-fast-transition);
    padding-right:0.75rem;
    
  
  }
  
  .rating-lg:hover{
    font-size: 1.5rem;
    color: #ffc107!important;
    
  }
  
  .inline-comment-content {
    padding: 1rem;
    border-radius: 10rem;
    background-color: var(--site-off-white);
    width: 100%;
    color: var(--site-dark-turquoise);
    outline: none;
    padding-left: 2rem;
    margin-bottom: 0;
    margin-left: 1rem;
    max-width: 265px;
    padding-right: 5rem;
    border: 1px solid var(--site-dark-turquoise);
  }
  
  .simple-comment-content{  
      width: 100%;
      color: var(--site-dark-turquoise);
      outline: none;
      max-width: 20vw !important;
      padding: 0rem;
      margin: 0rem;
      
  }

  .comment-bubble{
    font-size: 1.2rem;
    padding: 1rem;
    font-family: var(--site-ff);
    font-weight: 300;
    margin-bottom: 1rem;
    background-color: #3dc620;
    border-radius: var(--site-border-radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    padding: 1.2rem 2rem !important;
  }

  .comment-bubble-content, .comment-bubble .comment-bubble-content{
    color: white;
    font-size: 1.2rem;
    font-family: var(--site-ff);
    font-weight: 300;
    
  }

  .comment-bubble i {
    font-size: 1.1rem !important;
  }

  .comment-bubble .crud-icon-4:hover {
    background: #fff;
    border: 1px solid #fff !important;
    color: #3dc620;
  }

  .comment-bubble .crud-icon-4 {
    color: #fff;
  }

  .comment-send-button-wrapper{
    /* relative left-inner-35rem round-border-icon text-light border-light m-1 cursor-pointer*/
    position: relative;
    left: -3.5rem;
    color: var(--site-dim-turquoise);
    border-color: var(--site-dim-turquoise);
    margin: 0.25rem;
    cursor: pointer;
  
  }
  
  .comment-send-button-wrapper:hover{
    box-shadow: var(--bs-d-2);
    color: var(--site-white);
    border-color: var(--site-white);
  }
  
  .inline-comment-send-button{
    position: relative;
    left: 0rem;
    top: 0rem;
  }
  @media (max-width: 576px){
    .footer-top-tier-left-ul, .flex-footer-right{
      /* flex-basis: 100% !important; */
      display: flex;
      flex-grow: 1 !important;
      flex-shrink: 1 !important;
      justify-content: flex-start !important;
    }
  
    /* .flex-footer-right li{
      padding-left: 1rem;
    } */
  }
  .footer-top-tier-left-ul{
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-flow: row nowrap;
    padding: 0px !important;
    max-width: var(--footer-left-width) !important;
    transition: all 300ms ease-in-out;
    height: fit-content;
    margin:0rem;
  }
  
  .footer-top-tier-left-ul li, .footer-top-tier-left-ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  @media (max-width: 576px){
    .footer-top-tier-left-ul{
      max-width: unset;
    }
  }
  
  .footer-top-tier-left-ul li {
    padding: 0.75rem;
    padding-right: 1.5rem;
  }
  
  .border-radius-round{
    border-radius: 10rem;
  }
  
  .border-circle{
    border-radius: 50%;
  }
  
  .site-border-light-grey{
    border-radius: var(--site-border-radius);
    border: 1px solid hsl(0deg 0% 95%);
  
  }
  
  .site-grey-bg{
    border: 1px solid transparent; /* Invisible border */
    background-color: hsl(0deg 0% 95%);
    padding: 1rem;
    border-radius: var(--site-border-radius);
    transition: all 500ms ease;
  }
  
  .site-grey-bg:hover {
    border: 1px solid #329e93;
    background-color: #ffffff;
    color: #329e93;
  }
  
  .external-reviews{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .top-right {
    position: absolute !important;
    top: 0.6rem;
    right: 2.5rem;
    margin-bottom: 1rem;
  }
  
  .top-right:hover {
    position: absolute;
    top: 0.6rem;
    right: 2.5rem !important;
    left: auto;
    border: 1px solid var(--site-border-lighter-grey);
  }
  
  .table-header{
    border-right: 0.5px solid var(--site-border-light-grey);
    overflow: visible;
  }
  
  .chevron-category {
    /* border: 0px solid #e6e6e6; */
    /* border-radius: 50%; */
    margin: 0rem 0.5rem 0rem 0rem;
    padding: 1rem;
    transition: all 100ms ease-in-out;
    position: relative;
    border: 1px solid transparent;
    padding: 1rem;
    border-radius: 50%;
    width: 2rem !important;
    height: 2rem !important;
    background-color: transparent;
  }
  
  .chevron-category:hover {
    border: 1px solid #e6e6e6;
    padding: 1rem;
    border-radius: 50%;
    width: 2rem !important;
    height: 2rem !important;
    background-color: #ebebeb;
  }
  
  .chevron-category svg {
    position: absolute;
    top: 25%;
    right: 20%;
  }
  
  .three-dots-popup-box{
      position: absolute;
      z-index: 10001;
      left: 26vw;
      top: 20vh;
      width: 365px;
      max-width: 365px;
      overflow: hidden;
      pointer-events: auto;
      color: rgb(255, 255, 255) !important;
      background-color: rgb(45, 62, 80) !important;
      /* box-shadow: var(--bs-d-7); */
      box-shadow: 0 0 0 1px rgb(81 111 144 / 30%), 0 1px 24px 0 rgb(0 0 0 / 8%);
      border-radius: 3px;
  
  }
  
  .three-dots-wrapper {
    position: absolute;
    display: flex;
    flex-direction: row;
    margin-right: 0.75rem;
    justify-content: center;
    align-items: center;
    padding: calc(0.5rem + 1px);
    top: 0%;
    left: 80%;
    border: 1px solid #cecece !important;
    border-radius: 50% !important;
    height: 2rem !important;
    width: 2rem !important;
  }
  
  .three-dots-wrapper-no-border {
    position: absolute;
    display: flex;
    flex-direction: row;
    margin-right: 0.75rem;
    justify-content: center;
    align-items: center;
    padding: calc(0.5rem + 1px);
    top: 0;
    right: 0%;
    border: 0px solid #cecece !important;
    border-radius: 50% !important;
    height: 2rem !important;
    width: 2rem !important;
  }
  
  
  .three-dots-wrapper:hover {
    border: 1px solid #e6e6e6;
    border-radius: 50%;
    height: 2rem !important;
    width: 2rem !important;
    padding: 0.5rem;
    background-color: whitesmoke;
    background-color: #ebebeb;
  }
  
  .three-dots-wrapper-no-border:hover {
    border: 1px solid #e6e6e6;
    border-radius: 50%;
    height: 2rem !important;
    width: 2rem !important;
    padding: 0.5rem;
    /* background-color: #ebebeb; */
    /* box-shadow: var(--bs-d-7); */
    border: 1px solid var(--site-light-grey) !important;
  }
  
  @media screen and (max-width: 576px){
    .three-dots-wrapper-no-border{
      position: absolute;
      display: flex;
      flex-direction: row;
      margin-right: 0.75rem;
      justify-content: center;
      align-items: center;
      padding: calc(0.5rem + 1px);
      top: 0%;
      left: 90%;
      border: 0px solid #cecece !important;
      border-radius: 50% !important;
      height: 2rem !important;
      width: 2rem !important;
    
    }
  
  }
  
  .round-icon-transparent{
    /* position: absolute; */
    display: flex;
    flex-direction: row;
    margin-right: 0.75rem;
    justify-content: center;
    align-items: center;
    padding: calc(0.5rem + 1px);
    top: 0%;
    left: 80%;
    border: 1px solid var(--site-bg-nav-dark) !important;
    border-radius: 50% !important;
    height: 2rem !important;
    width: 2rem !important;
    background-color: transparent;
  }
  
  .round-icon-transparent:hover {
    border: 1px solid #e6e6e6;
    border-radius: 50%;
    height: 2rem !important;
    width: 2rem !important;
    padding: 0.5rem;
    background-color: whitesmoke;
    background-color: transparent;
  }
  
  .outline-none{
    outline: none;
  }
  
  .unit-right{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
  }
  
  .input-unit-wrapper{
    position: relative;
  }
  .unit-left{
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
  }
  
  .floating-form{
    width: 80%;
    z-index: 10;
    box-shadow: var(--bs-d-2);
    background-color: var(--site-bg-primary-light);
    margin-bottom: 1rem;
    position: relative;
  }
  
  .floating-form-footer {
    height: auto;
    width: 100%;
    color: rgba(0, 0, 0, 0.5);
    border-top: 1px solid #e1e1e1;
    padding-top: 10px;
    padding-bottom: 10px; }
  
  .link-footer{
    position: relative;
    transition: color .3s cubic-bezier(0.11, 0.7, 0, 1);
  }
  
  .link-footer:after {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--site-dark-turquoise);
    content: "";
    transform: scale(0);
    transition: transform .3s cubic-bezier(0.11, 0.7, 0, 1);
  }
  
  .link-footer:hover:after {
    transform: scale(1);
  }
  
  .floating-absoluteb-box {
    position: absolute;
    left: 5%;
    top: 7rem;
    z-index: calc(var(--top-1-layer) + 10);
    display: flex;
    background-color: white;
    border-radius: var(--site-border-radius);
    box-shadow: var(--bs-d-2);
    width: 50vw !important;
    min-height: 75vh;
  }

  .floating-absoluteb-box-w96 {
    position: absolute;
    left: 2vw;
    top: 7rem;
    z-index: calc(var(--top-1-layer) + 10);
    display: flex;
    background-color: white;
    border-radius: var(--site-border-radius);
    box-shadow: var(--bs-d-2);
    width: 96vw !important;
    min-height: 75vh;
  }
  
  .center-floating-absolute-box {
      position: absolute;
      left: 15% !important;
      right: 15% !important;
      width: 70% !important;
      top: 5rem;
      z-index: var(--top-layer);
      display: flex;
      background-color: white;
      border-radius: var(--site-border-radius);
      box-shadow: var(--bs-d-2);
      height: 50%;
      overflow-y: auto;
      max-height: 50vh !important;
  }

  .floating-fixed-box {
    position: fixed;
    /* left: 5%; */
    top: 7rem;
    z-index: calc(var(--top-1-layer) + 10);
    display: flex;
    background-color: white;
    border-radius: var(--site-border-radius);
    box-shadow: var(--bs-d-2);
    width: 50vw !important;
    min-height: 75vh;
    max-height: 95vh !important;
    overflow:auto;
  }
  
  
  .reset-table{
    display: block;
    flex-direction: inherit;
    justify-content: inherit;
    align-items: inherit;
    flex-wrap: inherit;
    color: inherit;
    border-collapse: inherit;
    overflow: inherit;
    padding-top: inherit;
    padding-bottom: inherit;
    border-radius: inherit;
  }
  
  .reset-table thead tr th{
    flex: inherit !important;
    background-color: inherit !important;
    position: relative !important;
    top: 0 !important;
  }
  
  .reset-table thead tr{
    flex: 1 1 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--site-primary-bgcolor);
    padding-left: 2px;
  
  }
  
  .reset-table td{
    min-height: 4rem !important;
    border-top: 0;
  }
  
  .overflow-hidden{
    overflow: hidden !important;
  }
  
  .overflow-scroll{
    overflow: scroll !important;
  }
  
  .overflow-auto{
    overflow:auto !important;
  }
  .cashflow-header{
    font-family: "Oxygen", sans-serif, Helvetica !important;
    font-size: 1rem !important;
    min-width: 10rem !important;
  
  }
  
  .cashflow-header-collapsible{
    /* text-info text-wrap text-start */
    font-family: var(--site-ff) !important;
    font-weight: 500;
    color: var(--site-dark-turquoise) !important;
    white-space: wrap !important;
    text-align: start !important;
    text-transform: uppercase;
  
  
  }
  
  .scroll-up {
    position: fixed;
    bottom: 3rem;
    right: 1rem;
    z-index: var(--top-1-layer);
    
  }
  
  .go-back {
    position: fixed;
    left: 1rem;
    z-index: var(--top-1-layer);
  }
  
  .go-back .bi{
    display: flex;
    font-size: 3rem;
    background-color: var(--site-bg-primary-light);
  }
  
  .navigate-to-blog-list{
    height: 3rem;
  }
  
  .navigation-text {
    min-height: unset !important;
    font-size: 1.2rem;
  }
  
  .scroll-up i {
    display: flex;
    position: relative;
    width: 3rem;
    height: 3rem;
    font-size: 3rem;
    color: var(--site-light-turquoise);
    background-color: var(--site-bg-primary-light);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2000;
  }
  
  .scroll-up i:hover {
    color: var(--site-turquoise);
    font-size: 3rem;
    background-color: var(--site-bg-primary-light);
    border-radius: 50%;
    box-shadow: var(--bs-d-2);
    cursor: pointer;
  }
  
  .site-select-ul-wrapper{
    position: relative;
    margin: 0 auto;
    border-left: 2px solid #3ca0e7;
    display: inline-block;
    padding: 0 30px;
    text-decoration: none;
    text-align: center;
    font-family: var(--site-font-family-exo);   /* arvo; */
  
  }
  
  .site-select-ul-wrapper ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    padding-left: 0;
    left: 0;
    display: none;
    background: white;
    z-index: 12;
  }
  
  .site-select-ul-wrapper:hover > ul, .site-select-ul-wrapper ul:hover {
    display: block;
    visibility: visible;
    opacity: 1;
    padding-top: 1.75rem;
    text-align: left;
    box-shadow: var(--bs-d-2);
    border-radius: var(--site-border-radius);
    z-index: 12;
    margin-top: 1.05rem;
    width: 100%;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }
  
  .site-select-ul-wrapper {
    position: relative;
    margin: 0 auto;
    /* border-left: 2px solid #3ca0e7; */
    display: inline-block;
    padding: 1rem 30px;
    text-decoration: none;
    text-align: left;
    font-family: var(--site-font-family-exo);
    background-color: var(--site-secondary-bgcolor);
    width: 100%;
    border: 1px solid var(--site-medium-grey);
    border-radius: 6px;
  }
  
  .site-select-ul-wrapper:hover {
    background-color: white;
    border: 0px;
    box-shadow: var(--bs-d-2);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  
  .site-select-ul-wrapper li {
    clear: both;
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
    border-style: none;
  }
  
  .site-select-ul-wrapper ul li option{
    clear: both;
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
    border-style: none;
    padding-left: 10px;
    padding-top:10px;
    padding-bottom: 10px;
  }
  
  .site-select-ul-wrapper ul li option:hover {
    text-decoration: none;
    padding-left: 20px;
    margin-left: 10px;
    border-left: 2px solid var(--site-orange);
    transition: all 0.3s ease;
    background-color: var(--site-primary-bgcolor);
  }
  @media screen and (max-width: 800px ) {
    #simple-waterfall-scenario {
      display: flex;
      flex-direction: row;
      width: 95vw;
    }
    
    #simple-waterfall-scenario td, #simple-waterfall-scenario th {
      min-height: 7rem;
      width: 7rem !important;
    }
    
    #simple-waterfall-scenario label, #simple-waterfall-scenario input {
      width: 5rem !important;
      min-width: auto;
    }
    
    #simple-waterfall-scenario label, #simple-waterfall-scenario input {
      width: 5rem !important;
      min-width: auto;
    }
  
    #simple-waterfall-scenario thead tr, #simple-waterfall-scenario tbody tr {
      display: flex;
      flex-direction: column;
    }
  
    #simple-waterfall-scenario tbody {
      display: flex;
      flex-direction: row;
    }
  }
  
  .auto-complete-search-box {
    width: 100%;
    background-color: var(--site-compact-color-bg-high-contrast);
    border: 1px solid var(--site-medium-grey);
    border-radius: 6px;
    padding: 1rem;
    /* box-shadow: var(--bs-d-2); */
    /* border-top-right-radius: 1rem;
    border-top-left-radius: 1rem; */
    
    outline: none;
    font-size: 1.3rem;
    padding-left: 1.25rem;
    text-transform: capitalize;
    font-family: 'Lato';
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }
  
  .auto-complete-search-box:focus {
    border: 0px;
    box-shadow: var(--bs-d-2);
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: white;
  }
  
  .list-box {
    background-color: white;
    box-shadow: var(--bs-d-2);
    border-radius: var(--site-border-radius);
    min-height: 10rem;
    padding: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    position: relative;
    z-index: 11;
  }
  
  .list-box li{
      clear: both;
      width: 100%;
      text-align: left;
      margin-bottom: 20px;
      border-style: none;
      padding-left: 10px;
  
  }
  
  .list-box li:hover{
      text-decoration: none;
      padding-left: 20px;
      margin-left: 10px;
      border-left: 2px solid var(--site-orange);
      transition: all 0.3s ease;
  
  }
  
  .site-select-label {
    color: var(--site-bg-nav-dark);
    text-transform: capitalize;
    font-size: 1rem;
    font-family: 'Lato';
  }
  
  .business-card {
    min-width: 400px;
    border: 1px solid var(--site-border-lighter-grey);
    height: 200px;
    border-radius: 6px;
    margin: 1rem;
    box-shadow: var(--bs-d-1);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
  }
  
  .business-card-header {
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  
  .business-card-logo-img {
    width: 5rem;
    height: 5rem;
    border: 0;
    padding: 2px;
    border: 1px solid var(--site-darker-green);
    border-radius: 50%;
  }
  
  .business-card-logo {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 1px solid var(--site-primary-bgcolor);
    margin: 1rem;
    background-color: var(--site-primary-bgcolor);
  }
  
  .business-card-title {
    /* background-color: var(--site-bg-primary-light); */
    flex: 1;
    min-height: 3rem;
    padding: 1rem;
    font-size: 2rem;
    font-family: 'Exo';
  }
  
  .media-flex{
    display: flex;
    align-items: center;
    justify-content: flex-start;
  
  }
  
  .address-unit-name, .address-building-num, .address-street-name, .address-city, .address-state{
    margin-left: 1rem;
    font-size: 0.9rem;
    font-family: var(--site-font-family-exo);
  }
  
  .address-text{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0px 6px;
    color: var(--site-bg-nav-dark);
  }
  #address.media-flex {
    margin-left: 15px;
    margin-bottom: 0.8rem;
  }
  
  .business-card-footer{
    background-color: var(--site-light-grey);
    padding-top: 1rem;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  
  .site-input-min-height{
    min-height: 3.5rem;
  }
  
  .search-field {  
      font-size: 1rem;
      font-family: "Oxygen", sans-serif, Helvetica;
      text-align: left;
      border: 1px solid var(--site-light-grey);
      border-radius: 18rem;
      outline: none;
      background-color: white;
      width: 100%;
      height: 4rem;
      color: var(--site-primary-text-dark);
      padding: 12px 20px 12px 20px !important;
  
  }
  
.site-responsive-table tbody tr {
    position: relative;
    border-bottom: 2px solid var(--site-bg-primary-light);
}
  
  .site-responsive-table tbody tr:hover {
    border-bottom: 2px solid var(--site-light-turquoise);
    background-color: #e8e8e88c;
    
  }
  
  .site-responsive-table tbody tr:hover .add-row{
    display: block;
    font-size: 1.5rem;
    left: -1rem;
    top: 2rem;
    background-color: var(--site-bg-primary-light);
    color: var(--site-light-turquoise);
  
  }
  
  .site-responsive-table tbody tr:hover .delete-row{
    display: block;
    font-size: 1.5rem;
    left: -2rem;
    top: 2rem;
    background-color: var(--site-bg-primary-light);
    color: var(--site-light-turquoise);
  
  }
  
  
  .site-responsive-table thead tr th{
    border: 1px solid var(--site-light-grey);
    font-weight: 300;
    padding-left: 10px;
    font-family: var(--site-ff);
  
  }
  
  .site-responsive-table td {
    padding: 10px;
    border: 1px solid var(--site-light-grey);
  }
  
  
  @media (max-width: 576px){
  .site-responsive-table thead tr th, .site-responsive-table tbody tr td {
    max-width: var(--site-responsive-table-cell-width-sm) !important;
    min-width: var(--site-responsive-table-cell-width-sm) !important;
    
  }
  
  }
  
  @media (min-width: 576px) and (max-width: 898px){
  .site-responsive-table thead tr th, .site-responsive-table tbody tr td {
    max-width: var(--site-responsive-table-cell-width-md) !important;
    min-width: var(--site-responsive-table-cell-width-md) !important;
    
  }
  
  }
  
  @media (min-width: 898px){
  .site-responsive-table thead tr th, .site-responsive-table tbody tr td {
    max-width: var(--site-responsive-table-cell-width-lg) !important;
    min-width: var(--site-responsive-table-cell-width-sm) !important;
    
  }
  
  }
  
  .site-responsive-table-wrapper{
    max-width: 80vw;
    max-height: 600px;
    overflow: scroll;
  }
  
  .site-responsive-table{
    margin-left: 2rem;
    width: 100%;
    max-width: 75vw;
  
  }
  
  
  ul.site-list li{
    padding: 0.75rem;
    font-size: 1.1rem;
    margin-bottom: 5px;
    border: 2px solid transparent;
    list-style: none;
  }
  
  ul.site-list li:hover{
  background-color: var(--site-off-white);
  border-left: 2px solid darkturquoise;
  }
  
  .site-responsive-table-wrapper{
    max-width: 80vw;
    overflow: scroll;
  }
  
  .max-height-sm {
    max-height: var(--site-box-height-sm) !important;
  }
  
  .overflow-y-scroll{
    overflow-y: scroll !important;
  }
  
  .site-text-key {
    font-size: 1rem;
    color: darkgrey;
    font-weight: 400;
    padding: 0rem 1rem;
    text-transform: capitalize;
  }

  .text-bold {
    font-weight: 600;
  }


  .site-text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .site-text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .site-text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .site-text-md {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  
  .site-text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .site-text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .site-text-xxl {
    font-size: 1.5rem;
    line-height: 1.85rem;
  }
  
  
  


  
  /* #site-top-nav-bar select {
    max-width: 15rem !important;
  } */
  
  @media screen and (min-width: 576px) and (max-width: 898px) {
    .site-check{
      font-size: 1.75rem;
    }
    
  }
  
  @media screen and (min-width: 898px) and (max-width: 1098px) {
    .site-check{
      font-size: 1.1rem;
    }
  
    .roadmap-icon-hover{
      width: 2.5rem !important;
      height: 2.5rem !important;
    }
    
  }
  
  @media screen and (min-width: 1098px){
    .site-check{
      font-size: 1.5rem;
    }
  
    .past:before {
      top: 2rem !important;
    }
    
  }
  
  .multiple-choice-checkbox{   /* Requires a relative parent*/
    position: absolute;
    min-width: 10rem !important;
    background-color: white;
    padding: 1rem;
    border-radius: var(--site-border-radius);
    box-shadow: var(--bs-d-1);
    display: flex;
    flex-direction: column;
    z-index: 10;
    padding: 1rem 0rem;
    bottom: 5rem;
    height: fit-content;
    overflow-y: auto !important;
    border: 1px solid var(--site-border-lighter-grey);
    max-height: 40rem !important;
  }
  
  .multiple-choice-checkbox .checkbox-wrapper, .notify-me-checkbox-label{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 2px solid transparent;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1.25rem;
    padding-top: 1.25rem;
    background-color: white;
    /* border-bottom: 1px solid var(--site-bg-primary-light); */
  }

  .notify-me-checkbox-label{
    display: flex;
    align-items: center;
    justify-content: start !important;

  }

  .multiple-choice-checkbox .checkbox-wrapper:last-child {
    border-bottom: 1px solid transparent;
  }
  .multiple-choice-checkbox .checkbox-wrapper:hover{
    background-color: var(--site-light-grey);
    border-left: 2px solid var(--site-light-turquoise);
  }
  
  .multiple-choice-checkbox .checkbox-wrapper input{
    margin-left: 1rem;
  }
  
  .site-indicator-change{
    background-color: var(--site-orange) !important;
    color: white !important;
    transition: background-color 2s;
  
  }
  
  .overflow-x-scroll {
    overflow-x: scroll;
  }
  
  .reset-left {
    left: 0;
  }
  
  .absolute{
    position: absolute !important;
  }
  
  .relative{
    position: relative !important;
  }
  
  .site-border-radius {
    border-radius: var(--site-border-radius)
  }
  
  .error{
    background-color: var(--site-lightest-orange);
    color: var(--site-primary-text-dark);
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: block;
    border-radius: var(--site-border-radius);
  }
  
  .overlay-text {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: white;
    text-align: center;
    background-color: var(--site-orange);
    padding: 1rem;
    border-radius: 1rem !important;
  }

  #cashflow-table-overlay.overlay {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  
  .header-summary {
    padding: 1rem;
    background-color: turquoise;
    border-radius: var(--site-border-radius);
    margin-bottom: 0.3rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
  
  .max-height-md {
    max-height: var(--site-box-height-md) !important;
  }
  
  .max-height-lg {
    max-height: var(--site-box-height-lg) !important;
  }
  
  .max-height-xl {
    max-height: var(--site-box-height-xl) !important;
  }
  
  .overflow-y-scroll{
    overflow-y: scroll !important;
  }
  
  .unit-mix-cell{
    /* min-height: 1rem;
    min-width: 1rem; */
    border: 1px solid var(--site-light-grey);
    text-align: center;
    font-size: 1.2rem;
    color: var(--site-orange);
    border-radius: 1rem;
  }

  .unit-mix-cell[data-unit="true"]:hover {
    background-color: #ffe9d2 !important;
  }

  .unit-mix-cell[data-suite-number]:not([data-suite-number=""]) {
    background-color: white;
  }
  
  .unit-mix-design-grid{
    overflow: auto;
    margin: 0rem 1rem;
    padding: 1rem;
  }
  
  @media screen and (max-width: 1000px) {
    #unit-mix-wrapper{
      flex: 1 !important;
    }
  
    #unit-mix-design-grid-wrapper{
      display: flex !important;
      flex-wrap: wrap-reverse;
      align-items: center;
      justify-content: stretch;
    }
  
    .unit-mix-design-grid {
      overflow: none !important;
    }
  
  }
  
  .no-border {
    border: none !important;
  }
  
  .invite-to-subscribe-box {
    background-color: var(--site-bg-nav-dark);
    color: wheat;
    padding: 3rem;
    border-radius: 1rem;
    margin: 2rem;
  }
  
  .flex-item-60{
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 60%;
  }
  
  .flex-item-50{
    flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 50%;
    
  }
  
  .flex-item-40{
    flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 40%;
    
  }
  
  .flex-item-mx-40{
    flex-grow: 0;
      flex-shrink: 1;
      flex-basis: 40%;
    
  }
  
  @media screen and (max-width: 576px) {
    .flex-item-60{
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 60%;
      min-width: 300px;
    }
    
  }
  
  .item-comment-box {
      position: fixed;
      bottom: 15rem;
      right: 25vw;
      z-index: var(--top-2-layer) !important;
      /* font-size: 5rem; */
      /* padding: 1rem 1rem; */
      background-color: #fff;
      border-radius: 1rem;
      box-shadow: var(--bs-d-7);
      display: flex;
      flex-direction: row;
      /* color: var(--site-turquoise); */
      /* border: 1px solid var(--site-bg-nav-dark); */
  }
  
  /* .item-comment-box:hover{
    right: 5rem !important;
    width: var(--site-comment-box-width);
  } */
  
  .item-comment-box::before {
      content: "";
      position: absolute;
      top: 50%;
      left: -6px;
      margin-left: -4px;
      border-width: 5px;
      border-style: solid;
      border-color: #167fb7 transparent transparent transparent;
      rotate: 90deg;
  }
  
  /* .item-comment-box i {
    font-size: 1.5rem !important;
    padding-bottom: 1rem;
  } */
  
  .item-comment-box i:hover {
    color: var(--site-primary-link-hover);
    cursor: pointer;
  }
  
  .commont-box-open{
    width: var(--site-comment-box-width) !important;
    right: 5rem !important;
  }
  
  .comment-box-width{
    width: 100% !important;
  }
  
  .comment-box-content-width{
    width: calc(var(--site-comment-box-width) - 10vw) !important;
  }
  
  .commont-box-close{
    width: 3.5rem !important;
  }
  
  select.site-form-control {
    /* border: 1px solid var(--site-medium-grey); */
    /* border-bottom: 0.125rem solid var(--site-medium-grey); */
    border-radius: 6px;
    width: 10rem;
    width: 100%;
    height: 3rem;
  
    font-size: 1.0625rem;
    padding-left: 0.875rem;
    line-height: 147.6%;
    padding-top: 0.825rem;
    padding-bottom: 0.5rem;
  }
  
  .select-menu {
    max-width: 330px;
    margin: 50px auto;
  }
  .select-menu .select-btn {
    display: flex;
    height: 55px;
    background: #fff;
    padding: 20px;
    font-size: 18px;
    font-weight: 400;
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }
  .select-menu .options {
    position: absolute;
    width: 330px;
    overflow-y: auto;
    max-height: 295px;
    padding: 10px;
    margin-top: 10px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    animation-name: fadeInDown;
    -webkit-animation-name: fadeInDown;
    animation-duration: 0.35s;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.35s;
    -webkit-animation-fill-mode: both;
  }
  .select-menu .options .option {
    display: flex;
    height: 55px;
    cursor: pointer;
    padding: 0 16px;
    border-radius: 8px;
    align-items: center;
    background: #fff;
  }
  .select-menu .options .option:hover {
    background: #f2f2f2;
  }
  .select-menu .options .option i {
    font-size: 25px;
    margin-right: 12px;
  }
  .select-menu .options .option .option-text {
    font-size: 18px;
    color: #333;
  }
  
  .select-btn i {
    font-size: 25px;
    transition: 0.3s;
  }
  
  .select-menu.active .select-btn i {
    transform: rotate(-180deg);
  }
  .select-menu.active .options {
    display: block;
    opacity: 0;
    z-index: 10;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    animation-duration: 0.4s;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
  }
  
  @keyframes fadeInUp {
    from {
      transform: translate3d(0, 30px, 0);
    }
    to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @keyframes fadeInDown {
    from {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
    to {
      transform: translate3d(0, 20px, 0);
      opacity: 0;
    }
  }
  
  
  .select-dropdown {
    position: relative;
    /* top: 50px;
    left: 45%; */
    /* margin-top: 15px; */
    width: 10rem;
    height: 3rem;
    
  }
  
  .select-dropdown::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 88%;
    z-index: 100;
    width: 8px;
    height: 8px;
    border: 2px solid #333;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(-45deg);
    transition: 0.35s;
    pointer-events: none;
  }
  
  .select-dropdown.active::before {
    top: 50%;
    transform: rotate(-225deg);
  }
  
  .select-dropdown input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 3rem;
    cursor: pointer;
    background: #fff;
    font-size: 0.9rem;
    border: none;
    outline: none;
    padding: 0.5rem;
    padding-right: 1.25rem;
    border-radius: 0.5rem;
    border-bottom: 1px solid var(--site-green);
  }
  
  .select-dropdown .options {
    position: absolute;
    top: 3.2rem;
    background: #fff;
    box-shadow: var(--bs-d-7);
    border-radius: 0.25rem;
    overflow: hidden;
    display: none;
    z-index: 120;
    width: 100%;
  }
  
  .select-dropdown.active .options {
    display: block;
  }
  
  .select-dropdown .options div {
    padding: 0.5rem;
    cursor: pointer;
  }
  
  .select-dropdown .options div:hover {
    background: #62baea;
    color: #fff;
  }
  
  /* #unit-mix-rent-schedule{
    width: 275px;
  } */
  
  
  /* #unit-mix-design-grid-wrapper{
    max-width: 430px;
  } */
  
  
  /* blog styling */
  @media screen and (min-width: 667px) and (max-width: 750px){
    #unit-mix-rent-schedule{
      width: 220px;
    }
  
    
    /* #unit-mix-design-grid-wrapper{
      max-width: 298px;
    } */
  
  }
  
  
  @media screen and (max-width: 750px) and (max-width: 898px){
    #unit-mix-rent-schedule{
      max-width: 520px;
    }
  
    
    /* #unit-mix-design-grid-wrapper{
      max-width: 330px;
    } */
  
  }
  
  
  @media screen and (min-width: 898px) and (max-width: 1200px){
    #unit-mix-rent-schedule{
      max-width: 650px;
    }
  
    
    /* #unit-mix-design-grid-wrapper{
      max-width: 410px;
    } */
  
  }
  
  @media screen and (min-width: 1200){
    #unit-mix-rent-schedule{
      max-width: 875px;
    }
  
    
    #unit-mix-design-grid-wrapper{
      max-width: 430px;
    }
  
  }
  
  .row-title {
    border-left: 2px solid transparent;
    border-bottom: 1px dashed var(--site-green) !important;
    padding: 0.75rem 0rem;
  }
  
  .row-title span {
    font-size: 1.25rem !important;
    text-transform: capitalize;
  }
  
  .row-subtitle {
    border-left: 2px solid transparent;
    border-bottom: 1px solid #d8d8d8 !important;
    padding: 0.5rem 0rem;
  }
  
  .row-subtitle span {
    font-size: 1.15rem !important;
    text-transform: capitalize;
  }
  
  .row-item {
    border-left: 2px solid transparent;
  }
  
  .row-item span {
    font-size: 1rem !important;
    text-transform: capitalize;
  }
  
  .minimize-maximize-container {
    position: absolute;
    z-index: 1199;  /* top navigation is at 1200 */
    top: 0;
    left: 0;
    border: 0px solid transparent;
    border-radius: 5px;
    width: 7rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    padding: 0rem 1rem;
    cursor: pointer !important;
  }
  
  .orange-button, .red-button {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--site-orange);
    border-radius: 50%;
    cursor: pointer;
    background-image: linear-gradient(45deg, #ff606a 0%, #e9565e, #fed6d6 100%);
  }
  
  .orange-button:hover, .red-button:hover{
    box-shadow: var(--bs-d-7);
  }
  
  .yellow-button {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    background-color: #f9d847;
    /* border: 1px solid #dbb409; */
    border-radius: 50%;
    background-image: linear-gradient(45deg, #dbb40a 0%, #eaca3e, #fee140 100%);
  }
  
  .yellow-button:hover{
    box-shadow: var(--bs-d-7);
  }
  
  .minimize-line {
    width: 0.5rem;
    height: 1px;
    display: flex;
    background-color: #000000a6;
    position: relative;
    top: 50%;
    left: 35%;
  }
  
  .maximize-triangles {
    display: flex;
    flex-direction: row;
    align-items: self-start;
    position: relative;
    top: 0.1em;
    left: 0.25em;
    transform: rotate(180deg);
  }
  
  .maximize-triangle-left {
    position: absolute;
    transform: rotate(90deg);
    top: -1.1rem;
    font-size: 7px;
    left: 0.75rem;
    margin: 3px -1px;
    color: #000000a6;
  }
  
  .maximize-triangle-right {
    position: absolute;
    transform: rotate(269deg);
    top: -1.25rem;
    font-size: 7px;
    left: 0.7rem;
    color: #000000a6;
  }
  
  .minimize-button:hover{
    box-shadow: var(--bs-d-7) !important;
    cursor: pointer;
  }
  
  .green-button {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--site-green);
    border-radius: 50%;
    margin-right: 0.25rem;
    cursor: pointer !important;
    background-image: linear-gradient(45deg, #1aa74a 0%, #2ade66, #38f9d7 100%);
  }
  
  .green-button:hover{
    box-shadow: var(--bs-d-7);
  }
  
  .maximize-button:hover{
    box-shadow: var(--bs-d-7) !important;
    cursor: pointer;
  }
  
  .maximize-icon{
    font-size: 0.75rem !important;
      position: relative;
      left: 7%;
      bottom: 10%;
  }
  
  .maximize-icon{
    font-size: 0.75rem !important;
    position: relative;
    left: 7%;
    bottom: 10%;
    color: #6a6a6a00;
    transition: all 300ms ease-in-out;
  }
  
  .maximize-icon:hover{
    color: black !important;
    
  }
  
  .close-icon{
    position: absolute;
    bottom: -0.48rem;
    left: 0.1rem;
    font-size: 1.4rem !important;
    color: #6a6a6a00;
    transition: all 3 00ms ease-in-out;
  }
  
  .close-icon:hover{
    color: black !important;
    
  }
  
  .minimize-icon{
    font-size: 1.5rem !important;
    position: absolute;
    bottom: -0.31rem;
    left: -0.1rem;
    color: #6a6a6a00;
    transition: all 3 00ms ease-in-out;
  }
  
  .minimize-icon:hover{
    font-size: 1.5rem !important;
    position: absolute;
    bottom: -0.31rem;
    left: -0.1rem;
    color: #000000 !important;
  }
  
  .minimize-maximize-container:hover .minimize-icon, .minimize-maximize-container:hover .maximize-icon, .minimize-maximize-container:hover .close-icon{
    color: black !important;
    cursor: pointer !important;
  
  }
  .fullscreen{
    color:hsla(0, 0%, 30%, 0.5);
    font-size: 0.85rem;
    position: relative;
    left: 35%;
    font-weight: 600;
    visibility: hidden;
  }
  
  .fullscreen:hover{
    color:hsla(0, 0%, 20%, 0.9);
    visibility:visible;
  
  }
  
  .navbar-nav-min {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
    align-items: center;
    width: 85%;
    box-shadow: var(--bs-d-1);
  }
  
  .nav-bar-min {
    width: 5rem;
    transition: width 600ms ease;
    padding: 0;
    margin: 0;
    flex: 0 0 5rem;
  
  }
  
  .nav-bar-min:hover{
    width: 15rem !important;
  }
  
  .nav-bar-min .add-project-link {
    display: none;
  }
  
  .top-band-min {
    width: 100%;
    background-color: white;
    background-image: linear-gradient(var(--site-primary-duo), var(--site-primary-duo), #fafafa, #fafafa);
    display: flex;
    align-items: self-start;
    justify-content: center;
  }
  
  .card-logo-min {
    font-size: 0.75rem;
    padding: 0px;
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
  }
  
  .nav-item-min {
    padding: 0px;
    width: 100%;
    overflow: hidden;
  }
  
  
  
  .three-dots-wrapper-relative {
    position: relative;
    display: flex;
    flex-direction: row;
    margin-right: 0.75rem;
    justify-content: center;
    align-items: center;
    padding: calc(0.5rem + 1px);
    top: 0%;
    left: 0%;
    /* border: 1px solid #cecece !important; */
    border-radius: 50% !important;
    height: 2rem !important;
    width: 2rem !important;
  }
  
  .chart-row-item.row-header .three-dots-wrapper-relative{
    margin-bottom: 0rem;
    /* align-self: flex-end; */
  
  }
  
  
  .three-dots-wrapper-relative:hover {
      background-color: #e7e7e7;
      border: 1px solid #bababa !important;
  
  }
  
  .flex-center{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .no-bs{
    box-shadow: none !important;
  }
  
  .no-bg{
    background: none !important;
  }
  
  .nav-bar-setup {
    background-color: #fbfbfb;
    margin: 1rem;
    border-radius: var(--site-border-radius);
    box-shadow: var(--bs-d-7);
    margin-top: 1rem !important;
  }
  
  
  @media screen and (max-width: 898px) {
    .nav-bar-setup {
      background-color: #fbfbfb;
      margin: 0rem;
      border-radius: var(--site-border-radius);
      box-shadow: var(--bs-d-7);
      height: 100%;
    }
  
  }
  
  .error-light{
    border: 2px solid #dc3545 !important;
    color:hsla(0, 0%, 20%, 0.85);
  }
  
  .show-nav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: all 600ms ease-in-out;
  }
  
  .collapsed-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: all 600ms ease-in-out;
  }
  
  .slider-input {
    width: 3rem;
    outline: none !important;
    border: 0px !important;
    color: cornsilk;
    border-bottom: 1px solid cyan !important;
    background-color: transparent !important;
    transition: all 300ms ease-in-out !important;
    font-size: 1rem;
    line-height: 12px;
    
  }
  
  
  .login-signup-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    padding: 2rem;
    width: 100%;
    background-color: #fff;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
  }
  
  .site-radio-option-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-left: 2px solid transparent;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .site-radio {
    width: 1.5rem !important;
  }
  
  label.site-radio-label {
      max-width: 100%;
      font-weight: unset;
      font-family: 'Lato';
      text-align: left;
      display: block;
      padding: 0rem 0rem 0rem 1rem !important;
      width: 100%;
      margin: 0rem !important;
  }

  .site-radio-label{
    text-transform: capitalize !important;
  }
  
  .site-radio-list {
    position: relative;
    top: 0.5rem;
    z-index: 10;
    min-width: 10rem !important;
    background-color: white;
    padding: 1rem;
    border-radius: var(--site-border-radius);
    box-shadow: var(--bs-d-1);
    display: flex;
    flex-direction: column;
    padding: 1rem 0rem;
    width: 100%;
  }
  
  .double-icon-wrapper-left{
      background-color: #71dec9;
      padding: 0.25rem 1rem;
      border-radius: 10rem;
      border: 1px solid #426a63;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }
  
  .double-icon-wrapper-right{
    background-color: #71dec9;
    padding: 0.25rem 1rem;
    border-radius: 10rem;
    border: 1px solid #426a63;
    border-top-left-radius: 0;
      border-bottom-left-radius: 0;
  }
  
  .double-icon-wrapper-right:hover{
    background-color: #549589;
    cursor: pointer;
  }
  
  .double-icon-wrapper-left:hover{
    background-color: #549589;
    cursor: pointer;  
  }
  
  
  .double-icon-wrapper-right:hover i{
    color: white;
  }
  
  .double-icon-wrapper-left:hover i{
    color: white;
  }
  
  .icon-wrapper:hover{
    background-color: #426a63;
    padding: 0.25rem 1rem;
    border-radius: 10rem;
    border: 1px solid #549589;
  }
  
  .vertical{
    display: flex !important;
    flex-direction: column !important;
  }
  
  .horizontal{
    display: flex;
    flex-direction: row !important;
  }
  
  .double-icon-wrapper-right:hover {
    box-shadow: var(--bs-d-7);
  }
  
  .double-icon-wrapper-left:hover {
    box-shadow: var(--bs-d-7);
  }
  .select-arrow-buttons {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
  }
  
  .selec-arrow {
    width: 8px;
    height: 8px;
    border: solid black;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    cursor: pointer;
    margin-bottom: 0px;
  }
  
  .up {
    transform: rotate(-135deg);
  }
  
  .down {
    transform: rotate(45deg);
  }
  
  .select-arrow-buttons-solid {
    position: absolute;
    top: 40%;
    right: 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  #radio-options-arrows.select-arrow-buttons-solid {
    position: absolute;
    top: 25%;
    right: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events:none; 
    width: unset;
  }
  
  .select-arrow-solid {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    cursor: pointer;
    margin-bottom: 2px;
    
  }
  
  .up-solid {
    border-bottom: 6px solid #444444;
  }
  
  .down-solid {
    border-top: 6px solid #444444;
  }
  
  .d-flex-column{
    display: flex;
    flex-direction: column;
  }
  
  .d-flex-row{
    display: flex;
    flex-direction: row;
  }
  
  .flex-rcs{  /* r stands for row (flex-direction), c stands for center (align-items), and s stands for (space-between)*/
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
  }
  
  .flex-rcc{  /* r stands for row (flex-direction), c stands for center (align-items), and s stands for (space-between)*/
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap;
  }
  
  .flex-rss{
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
  }
  
  .flex-rcfs{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }
  
  .flex-css{  /* c stands for column (flex-direction), s stands for flex-start (align-items), and s stands for (space-between)*/
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
  }
  
  .flex-fixed-half{
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 0;
  }
  
  .flex-variable-half{
    flex-basis: 50%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  
  .separator-line-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex-basis: 2%;
    cursor: grab;
  }
  
  .separator-line-wrapper:hover {
    cursor: grab;
    background: none;
    position: relative;
    /* padding: 15px; */
    
  }
  
  .separator-line-wrapper:active {
    cursor: grabbing;
    background: none;
    position: relative;
    /* padding: 15px; */
    
  }
  
  .separator-line{
    background: grey;
    width: 2px;
    position: absolute;
    height: 100%;
  }
  
  
  
  .separator-line-left-drag{
    background: grey;
    width: 2px;
    position: absolute;
    height: 2rem;
    left: -4px;
  }
  
  .separator-line-right-drag{
    background: grey;
    width: 2px;
    position: absolute;
    height: 2rem;
    left: 4px;
  }
  
  .carousel{
    display: flex;
    overflow: hidden;
    width: 100%;
    height: auto;
    position: relative;
  
  }
  
  .carousel  > * {
    flex: 1;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .carousel-control-prev, .carousel-control-next {
    position: absolute;
    top: 50%;
    height: 3rem;
    width: 3rem;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    font-size: 20px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 50%;
  }
  
  .carousel-control-prev {
    left: 20px;
  }
  
  .carousel-control-next {
    right: 20px;
  }
  
  .carousel-control-prev:hover, .carousel-control-next:hover {
    box-shadow: var(--bs-d-7);
  }
  
  .carousel-control-prev i, .carousel-control-next i{
    font-size: 1.25rem !important;
  }
  
  .carousel-slide{
    height: 100% !important;
  }
  
  .site-card-header2{
    display: flex;
    width: 100%;
    /* height: 100px; */
    text-transform: uppercase;
    /* background-color: #ededed; */
    color: #4b4b4b;
    border-bottom: 1px solid #d0d0d0;
    border-top-left-radius: var(--site-border-radius);
    border-top-right-radius: var(--site-border-radius);
  }
  
  .lower-right-feedback-container{
    position: fixed;
    bottom:2rem; 
    right: 2rem; 
    min-width: 20rem; 
    z-index:10001;
    border-radius: var(--site-border-radius);
    width: 22rem !important;
    box-shadow: var(--bs-d-7);
    padding: 1.25rem;
    margin: 1.25rem;
  }
  
  .feedback-error{
    background-color: var(--site-orange);
    color: whitesmoke;
  }
  
  .feedback-success{
    background-color: var(--site-pale-blue);
    color: whitesmoke;
  }
  
  
  .site-card-body2{
    display: flex;
    flex-direction: row;
    align-items: start;
    flex-wrap: wrap;
    /* width: 100%; */
    height: 70%;
    font-size: 1rem;
    /* background-color: #fafafa; */
    color: rgba(0, 0, 0, 0.5); 
  }
  
  .site-card-header2{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  
  input[type="radio"].site-radio {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0rem !important;
    /* width: 16px !important; */
    height: 16px !important;
    border: 1px solid #36b3a7 !important;
    border-radius: 50%;
    outline: none;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    position: relative;
  }
  
  input[type="radio"].site-radio:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background-color: #72dec9;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }
  
  input[type="radio"].site-radio:checked:before {
    opacity: 1;
  }
  
  
  label {
    margin-left: 5px;
    cursor: pointer;
  }
  
  .grid-dynamic{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 25rem));
    gap: 1rem;
  
  }
  
  .grid-h {
    display: grid;
    grid-auto-flow: column; /* Arrange items in rows by default, change to column if needed */
    grid-auto-columns: min-content; /* Automatically size columns based on their content */
    align-items: center; /* Align items vertically in the center of the grid container */
    justify-content: start; /* Align items horizontally to the start of the grid container */
    gap: 1rem; /* Adds spacing between grid items, adjust as needed */
  }
  
  .grid-auto-columns-max{
    grid-auto-columns: max-content
  }
  
  .grid-1x1{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
  }
  
  .grid-1x2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  
  .grid-1x3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  
  .grid-1x4{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
  
  .grid-1x7{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1rem;
  }
  
  .grid-3-4 {
    display: grid;
    grid-template-columns: 3fr 4fr;
    grid-template-rows: auto;
    gap: 0.5rem;
    box-sizing: border-box;
  }
  
  
  .grid-4x4 {
    display: grid;
    grid-template-columns: 0rem 1fr;
    grid-template-rows: auto;
    gap: 1px;
    /* width: 100%;
    height: 100%; */
    box-sizing: border-box;
  }
  
  .grid-4x4-item {
    /* border: 1px solid #000; */
    padding: 10px;
  }

  .grid-1-2 {
    display: grid;
    grid-template-columns: 1fr 2fr !important;
    gap: 0.5rem;
    box-sizing: border-box;
  }
  
  .grid-4x4-item-top-left {
    grid-column: span 1;
  }
  
  .grid-4x4-item.top-row:nth-child(1):hover {
    background-color: #d1ecf1;
  }
  
  .grid-4x4-item.top-row:hover ~ .grid-4x4-item.top-row {
    background-color: #d1ecf1;
  }
  
  
  
  
  .grid-4x4-item-top-right {
    grid-column: span 1;
  }
  
  .grid-4x4-item-bottom-left {
    grid-column: span 1;
    
  }
  
  .grid-4x4-item-bottom-right {
    grid-column: span 1;
    
  }
  
  .grid-4x4-item-last-row{ 
    grid-column: span 2;
    justify-self: end;
  }
  
  .two-row-grid{ /* first row is a form, the second row is the button */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1px;
    width: 100%;
    height: 100%;
  
  }
  
  .two-row-grid-item{
    grid-column: span 1;
  }
  
  .two-row-grid-item.end{
    grid-column: span 1;
    justify-self: end;
  }
  
  .grid-items-center-v{
    align-items: center;
  }
  
  .grid-items-center-h{
    justify-items: center;
  }
  
  .grid-items-center-v .site-compact-input-group{
    margin-bottom: 0rem !important;
  }
  
  .grid-input-button{
    /* for cases when we have an input field and a button to submit the input */ 
    display: grid;
    grid-template-columns: minmax(25rem, 4fr) 1fr;
    align-items: center; /* Vertically align items */
  
  }
  .grid-vertical-input-button{
    /* for cases when we have an input field and a button to submit the input */ 
    display: grid;
    grid-template-columns: 1fr;
    align-items: center; /* Vertically align items */
  
  }
  
  .grid-input-button .btn, .grid-input-button .site-btn{
    justify-self: center;
  }
  
  @media screen and (max-width: 800px){
    .grid-input-button{
      display: grid;
      grid-template-columns: 1fr; /* both the input and the button will have their own row */
    
    }
  }
  
  
  
  .grid-header-field-field{
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(15rem, 4fr) minmax(15rem, 4fr);
  
  }
  
  @media screen and (max-width: 800px){
    .grid-header-field-field{
      display: grid;
      grid-template-columns: minmax(10rem, 1fr);
    
    }
  }
  @media screen and (max-width: 898px){
    .site-popup-info{
      position: fixed;
      top: calc(1rem + var(--top-navbar-height-lg) );
      right: 0rem !important;
      height: 100%;
      border: 1.5px solid var(--site-border-lighter-grey);
      border-radius: var(--site-border-radius);
      padding: 2rem 0rem;
      background-color: white;
      box-shadow: var(--bs-d-4);
      width: 30rem !important;
      z-index: var(--top-2-layer);
      transition: right 600ms ease-in-out;
      cursor: auto;
      color: var(--site-primary-text-dark);
      overflow: scroll;
    }
  
  }
  
  @media screen and (min-width: 898px) and (max-width: 1200px){
    .site-popup-info{
      position: fixed;
      top: calc(1rem + var(--top-navbar-height-lg) );
      right: 0rem !important;
      height: 100%;
      border: 1.5px solid var(--site-border-lighter-grey);
      border-radius: var(--site-border-radius);
      padding: 2rem 0rem;
      background-color: white;
      box-shadow: var(--bs-d-4);
      width: 30rem !important;
      z-index: var(--top-2-layer);
      transition: right 600ms ease-in-out;
      cursor: auto;
      color: var(--site-primary-text-dark);
      overflow: scroll;
    }
  
    .unit-mix-cell .site-popup-info {
      position: fixed;
      top: 5rem;
      right: 0rem !important;
      height: 100%;
      border: 1.5px solid var(--site-border-lighter-grey);
      border-radius: var(--site-border-radius);
      margin: 3rem 0rem;
      background-color: white;
      box-shadow: var(--bs-d-4);
      width: 30vw !important;
      z-index: var(--top-1-layer);
      transition: right 600ms ease-in-out;
      cursor: auto;
      color: var(--site-primary-text-dark);
      overflow: scroll;
      padding: 2rem 0rem;
  }
  }
  
  @media screen and (min-width: 1200px) and (max-width: 1540px){
    .site-popup-info{
      position: fixed;
      top: calc(1rem + var(--top-navbar-height-lg) );
      right: 0rem !important;
      height: 100%;
      border: 1.5px solid var(--site-border-lighter-grey);
      border-radius: var(--site-border-radius);
      padding: 2rem 0rem;
      background-color: white;
      box-shadow: var(--bs-d-4);
      width: calc(100% - (100% - 450px)) !important;
      z-index: var(--top-2-layer);
      transition: right 600ms ease-in-out;
      cursor: auto;
      color: var(--site-primary-text-dark);
      overflow: scroll;
    }
  }
  
  @media screen and (min-width: 1540px) {
    .site-popup-info {
      position: fixed;
      top: calc(1rem + var(--top-navbar-height-lg) );
      right: 0rem !important;
      height: 100%;
      border: 1.5px solid var(--site-border-lighter-grey);
      border-radius: var(--site-border-radius);
      padding: 2rem 0rem;
      background-color: white;
      box-shadow: var(--bs-d-4);
      width: 30vw !important;
      z-index: var(--top-1-layer);
      transition: right 600ms ease-in-out;
      cursor: auto;
      color: var(--site-primary-text-dark);
      overflow: scroll;
    }
  }
  .site-popup-info .title{
    font-size: 1.5rem;
    font-family: 'Exo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--site-medium-grey);
    border-bottom: 1px solid var(--site-border-light-grey);
    width: 100%;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
  
  }
  /* 
  .site-popup-info div{
    min-height: 3rem;
  } */
  
  .site-mini-window{
    border: 1px solid var(--site-border-lighter-grey);
    border-radius: var(--site-border-radius);
    margin: 1rem;
    width: 100%;
  
  }
  
  table.border-bottom-headers th, table.border-bottom-headers td {
    border-top: 0px;
    border-bottom: 1px solid lightgrey;
  }
  
  .active-child {
    left: 0;
  }
  
  .children{
    width: 100%;
    height: 100%;
    text-align: left;
    position: relative;
    white-space: nowrap;
  }
  
  .children th{
    position: relative;
  }
  
  
  
  .slider-container{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  
  
  input[type="range"][class="vertical-range"]{
    position: relative;
    width: 250%;
    max-width: 150px !important;
    -webkit-appearance: none;
    height: 4px;
    background-color: #d0d0d0;
    border-radius: 0.4rem;
    outline: none;
    transform: rotate(-90deg);
    margin-bottom: 3.2rem;
    margin-top: 3rem;
  }
  
  input[type="range"][class="vertical-range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    background-color: var(--site-green);
    height: 17px;
    width: 17px;
    border-radius: 50%;
    border: 1px solid var(--site-green); 
  }
  
  .live-analysis-subitem-content{
    /* ml-3 pl-4 relative d-flex align-items-center justify-content-start */
    position: relative !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  
  [data-indent="4"] .live-analysis-subitem-content{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: flex-start;
  
  }
  
  [data-indent="1"] .live-analysis-subitem-content {
    font-size: clamp(1rem, 2vw, 1.1rem) !important;
    font-family: system-ui;
    font-weight: 200;
  }
  
  .live-analysis-indent-1{
    margin:0rem 1rem;
    padding-left: 0rem;
  }
  
  .live-analysis-indent-2{
    margin:0rem 1rem;
    padding-left: 1rem;
  }
  
  .live-analysis-indent-3{
    margin:0rem 1rem;
    padding-left: 2rem;
  }
  
  .live-analysis-indent-4{
    margin:0rem 4rem;
    padding-left: 2rem;
  }
  
  .live-analysis-font-1{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: clamp(1.1rem, 1.25vw, 1.25rem) !important;
    font-weight: 200;
  
  }
  
  
  .live-analysis-font-2{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: clamp(1rem, 1.25vw, 1.1rem) !important;
    font-weight: 200;
  
  }
  
  .live-analysis-font-3{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: clamp(0.95rem, 1.25vw, 1.05rem) !important;
    font-weight: 200;
  
  }
  
  .bottom-right-corner-message{
    /* p-4 mb-4 bgcolor-orange color-white box-shadow-dark-3 site-border-radius danger w-100 */
    position: fixed;
    width: 25rem;
    bottom: 2rem;
    right: 5rem;
    box-shadow: var(--bs-d-2);
    border-radius: 1rem;
    padding: 1.5rem;
    z-index: 1001;
  }
  
  .bottom-right-corner-message.warning{
    background-color: var(--site-orange);
    color: white;
  }
  
  .bottom-right-corner-message.info{
    background-color: #bee5eb;
    color: white;
  }
  
  .feedback-success.info {
      background-color: skyblue;
      color: black;
  }
  
  .bottom-right-corner-message.success{
    background-color: var(--site-dark-turquoise); 
    color: white;
  }
  
  .sticky-parent{
    width: 100%;
    overflow: auto;
  
  }
  
  .horizontal-sliderName {
    margin-bottom: 0.5rem;
    text-transform: capitalize;
  }
  
  .waterfall-sliders-wrapper .horizontal-sliderName {
    margin: 1.25rem 0rem 0.75rem 0rem;
  }
  
  #mortgage-payments-details-wrapper{
    max-height: 700px !important;
    overflow: scroll;
  }
  
  .flex-rcst{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .flex-rce{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  
  table.table{
    font-family: 'Inter', sans-serif !important;
  }
  
  .cashflow-table {
    border-bottom: 1px solid var(--site-border-light-grey);
    border-bottom-left-radius: 0rem !important;
    border-bottom-right-radius: 0rem !important;
    border-top: 4px double var(--site-border-light-grey);
    border: 1px solid var(--site-border-light-grey);
    /* margin: 2rem; */
    border-radius: 1rem;
  }
  
  .cashflow-table-wrapper {
    margin: 2rem;
    position: relative;
    overflow-x: auto;
  }
  
  .cashflow-table thead{
    border-bottom: 1px solid var(--site-border-lighter-grey);
    border-bottom-left-radius: 0rem !important;
    border-bottom-right-radius: 0rem !important;
  }
  
  .flat-right-border{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  
  .right-0{
    right: 0 !important;
    transition: right 0.5s ease-in-out;
  
  }
  
  .right-minus-100-percent{
    right: -100% !important;
    transition: right 0.5s ease-in-out;
  
  }
  
  .required-input{
    border-color: orange;
  }
  
  .typical-invoice-table td.xlarge-cell, .typical-invoice-table th.xlarge-cell{
    /* w-25 h-5rem flex-rcs flex-0-0-10 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 30% !important;
  
  }

  .typical-invoice-table th.large-cell, .typical-invoice-table th.medium-cell, .typical-invoice-table th.small-cell{
    font-family: var(--site-ff);
    font-weight: 500;
    color: var(--site-medium-grey);
    font-size: 1rem !important;
    text-transform: capitalize;
    padding-bottom: 0.25rem !important;
    background-color: transparent !important;
  }
  
  .typical-invoice-table td.large-cell, .typical-invoice-table th.large-cell{
    /* w-25 h-5rem flex-rcs flex-0-0-10 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 25% !important;
  
  }
  
  table.typical-invoice-table td.medium-cell, .typical-invoice-table th.medium-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 20% !important;
  }
  
  table.typical-invoice-table td.small-cell, .typical-invoice-table th.small-cell{
    /* w-25 h-5rem flex-rcs flex-0-0-10 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 15% !important;
  
  }
  
  table.typical-invoice-table td.xsmall-cell, .typical-invoice-table th.xsmall-cell{
    /* w-25 h-5rem flex-rcs flex-0-0-10 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 10% !important;
  
  }
  
  #comment-form input {
    margin-bottom: 1rem;
  }
  
  #comment-box-icons-wrapper [id^="icon-"] {
    margin-bottom: 1rem;
  }
  
  form[id*="comment-form"] textarea, form[id*="comment-form"] input {
    border-radius: var(--site-border-radius);
  }
  
  form[id*="comment-form"]{
    margin-bottom: 3rem !important;
  }
  
  .comment-container{
    /* w-100 d-flex flex-column justify-content-start w-100 bg-light-off-white site-border-radius p-2 */
    width: 100% !important;
    display: flex;
    flex-direction: column !important;
    justify-content: flex-start !important;
    background-color: var(--site-light-off-white);
    border-radius: var(--site-border-radius);
    padding: 0.6rem;
  }
  
  .comment-container:hover{
    background-color: var(--site-off-white);
  }
  
  .comment-box-width-lg{
    width: var(--site-comment-box-width-lg) !important; 
  
  }
  
  .comment-core-content{
    /* w-100 d-flex flex-column justify-content-start w-100 bg-light-off-white site-border-radius p-2 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100% !important;
    /* background-color: var(--site-light-off-white) !important; */
    border-radius: var(--site-border-radius);
    padding: 0rem 1rem;
  }
  /* 
  .comment-core:hover .comment-core-content {
    background-color: white !important;
  } */
  
  .comment-branch:hover{
    background-color: white !important;
  }
  
  .calculation-text{
    color: var(--site-link-light) !important;
    cursor: pointer;
  }
  
  .calculation-text:hover{
    color: var(--site-link-light) !important;
    cursor: pointer;
    text-align: right !important;
    border: 1px solid var(--site-primary-link-hover) !important;
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 0;
    color: var(--site-primary-link-hover) !important;
  
  }
  
  .calculation-text:before {
    content: "";
  }
  
  .calculation-text:hover:before {
    content: "=  ";
    font-size: 14px;
    color: var(--site-primary-link-hover) !important;
  }
  
  .lower-right-feedback{
    /* d-flex flex-column align-items-start justify-content-between absolute position-fixed-bottom-only */
    position: fixed !important;
    bottom: 0px;;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0rem 2rem;
    background-color: var(--site-milori-blue);
    color: var(--site-border-lighter-grey);
    z-index: 1001;
  
  }
  
  [id^="detail-row-seat"] td {
      flex: 1;
  }
  
  .pop-out-input{
    position: absolute;
    width: 25rem !important;
    z-index: 10;
    box-shadow: var(--bs-d-3);
    border-bottom: 2px solid #20d0c0;
    height: 4rem !important;
  }
  
  .proforma-reviewer-wrapper{
    /*d-flex flex-row justify-content-end align-items-center*/
    display: flex;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  
  @media (max-width: 576px){
    .proforma-reviewer-wrapper{
      /*d-flex flex-row justify-content-end align-items-center*/
      display: flex;
      align-items: center !important;
      justify-content: flex-start !important;
    }
  }
  
  .site-input-line-label {
    margin-top: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
  }
  
  .icon-dark-grey{
    color: #737373;
  }
  
  .cashflow-table thead tr, .cashflow-table thead th {
    background-color: white;
    border: 0px solid white;
  }
  
  .cashflow-table thead tr{
    border-radius: var(--site-border-radius);
  }
  
  
  .cashflow-table tbody td{
    border-top: 0px !important;
    padding: 0.75rem !important;
    height: 4rem !important;
  }
  
  .cashflow-table input {
      margin-bottom: 0 !important;
  }
  
  .cashflow-table tbody tr:hover {
      background-color: var(--site-light-off-white);
      color: var(--site-link-light);
      border-top-left-radius: var(--site-border-radius);
      border-bottom-left-radius: var(--site-border-radius);
      border-left: 2px solid var(--site-green);
  }
  
  #comment-box-content {
      display: flex;
      flex-wrap: wrap;
      /* min-width: 110%; */
  }
  
  
  .big-icon {
      border-radius: 1rem;
      width: 9rem;
      height: 9rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
  }
  
  .big-icon:hover {
      border: 1px solid var(--site-bg-primary-light);
      border-radius: 1rem;
      width: 9rem;
      height: 9rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--bs-d-1);
      margin-bottom: 1rem;
  }
  
  .site-popup-info .comment-footer{
    background-color: transparent !important;
  }
  
  ul.mini-card-detail li {
    white-space: nowrap;
    overflow: hidden;
  }
  
  .collapsed-container{
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease;
  }
  
  .expanded-container{
    height: 100%;
  }
  .blog-timeline-station{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 2rem;
  }
  
  .blog-timeline-station::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: rgb(221, 221, 221);
    right: 50%;
    top: 2.1rem;
  }
  
  .blog-timeline-station-icon {
    background-color: var(--site-dark-turquoise);
    padding: 1.5rem;
    margin: 1rem;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: var(--bs-d-7);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .blog-timeline-station-text{
    font-size: 1.25rem;
    font-family: 'Raleway', Georgia, Cambria, "Times New Roman", Times, serif;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .blog-timeline-station-number{
    position: absolute;
    color: white;
    font-size: 1.5rem;
    font-family: 'Raleway', Georgia, Cambria, "Times New Roman", Times, serif;
  }
  
  .blog-term-title{
    font-size: 1.25rem;
    font-weight: 600;
    font-family: 'Raleway', Georgia, Cambria, "Times New Roman", Times, serif;
  }
  
  .blog-timeline-station-title{
    font-size: 1.25rem;
    font-weight: 600;
    font-family: 'Raleway', Georgia, Cambria, "Times New Roman", Times, serif;
  }
  
  .blog-term-description{
    font-size: 1.1rem;
    /* font-weight: 400; */
    font-family: 'Raleway', Georgia, Cambria, "Times New Roman", Times, serif;
    margin-bottom: 2rem;
    line-height: 32px;
    text-rendering:optimizeLegibility;
    font-weight: 400;
    font-style: normal;
    color: rgb(41,41,41);;
  
  }
  
  
  .blog-list-item-title{
    font-size: calc(var(--blog-font-size) + 5px);
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
  }
  
  .site-table-center.vertical thead tr th, .site-table-center.vertical tbody tr td {
    width: 7rem !important;
    text-align: center;
  }
  
  .control-group{
    margin-bottom: 1rem;
  }
  
  .flex-0{
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .rate-title{
    /* text-capitalize pl-5 ml-3 */
    text-transform: capitalize !important;
    padding-left: 3rem !important;
    margin-left: 1rem !important;
    
  }
  /* d-flex flex-column bg-light box-shadow-dark-3 position-fixed-bottom-only */
  @media (max-width: 576px) {
    .rate-title{
      /* text-capitalize pl-5 ml-3 */
      text-transform: capitalize !important;
      padding: 0rem !important;
      margin: 1rem 0rem 0rem 0rem !important;
      color: var(--site-dark-green);
      
    }
    .rate-feedback{
      display: flex;
      flex-direction: column;
      background-color: var(--site-bg-light);
      box-shadow: var(--bs-d-3);
      position: fixed;
      bottom: 0px;
      right: 0px;
      width: 100%;
      left: 0;
      height: 25rem;
    }
  }
  
  @media (max-width: 576px) {/* XSM */
    .rate-feedback{ 
      display: flex;
      flex-direction: column;
      background-color: var(--site-bg-light);
      box-shadow: var(--bs-d-5);
      position: fixed;
      bottom: 0px;
      right: 0px;
      width: 100vw;
      left: 0;
      height: fit-content;
      z-index: 12;
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
    }
  }
  
  @media (min-width: 576px) and (max-width: 767px) {/* SM */
    .rate-feedback{ 
      display: flex;
      flex-direction: column;
      background-color: var(--site-bg-light);
      box-shadow: var(--bs-d-5);
      position: fixed;
      bottom: 0px;
      right: 0px;
      width: 100vw;
      left: 0;
      height: fit-content;
      z-index: 12;
      border-top-left-radius: var(--site-border-radius);
      border-top-right-radius: var(--site-border-radius);
    }
  }
  
  @media screen and (max-width: 768px){
    .landing-page-nav .container{
      max-width: 767px !important;
      margin-right: unset !important;
      margin-left: unset !important;
  
    }
  }
  
  @media (min-width: 767px) and (max-width: 991px) {/* MD */
    .rate-feedback{ 
      display: flex;
      flex-direction: column;
      background-color: var(--site-bg-light);
      box-shadow: var(--bs-d-3);
      position: fixed;
      bottom: 0px;
      right: 0px;
      width: 25rem;
      height: fit-content;
      z-index: 12;
      border-top-left-radius: var(--site-border-radius);
      border-top-right-radius: var(--site-border-radius);
    }
  
    .rate-feedback > [data-role="collapser"]{
      border-top-left-radius: var(--site-border-radius);
      border-top-right-radius: var(--site-border-radius);
  
    }
  }
  
  @media (min-width: 991px) and (max-width: 1200px) {/* LG */
    .rate-feedback{ 
      display: flex;
      flex-direction: column;
      background-color: var(--site-bg-light);
      box-shadow: var(--bs-d-3);
      position: fixed;
      bottom: 0px;
      right: 0px;
      width: 25rem;
      z-index: 12;
      border-top-left-radius: var(--site-border-radius);
      border-top-right-radius: var(--site-border-radius);
    }
  
    .rate-feedback > [data-role="collapser"]{
      border-top-left-radius: var(--site-border-radius);
      border-top-right-radius: var(--site-border-radius);
  
    }
  }
  
  @media (min-width: 1200px){/* XL */
    .rate-feedback{ 
      display: flex;
      flex-direction: column;
      background-color: var(--site-bg-light);
      box-shadow: var(--bs-d-3);
      position: fixed;
      bottom: 0px;
      right: 5rem;
      width: 25rem;
      z-index: 12;
      border-top-left-radius: var(--site-border-radius);
      border-top-right-radius: var(--site-border-radius);
    }
  
    .rate-feedback > [data-role="collapser"]{
      border-top-left-radius: var(--site-border-radius);
      border-top-right-radius: var(--site-border-radius);
  
    }
  }
  
  .rate-feedback-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    border-top-left-radius: var(--site-border-radius);
    border-top-right-radius: var(--site-border-radius);
  }
  
  .chart-row:hover{
    background-color: var(--site-primary-bgcolor);
    color: #44a79d;
    border-left: 2px solid darkturquoise;
  }
  
  .chart-row[data-category="total-bottom"]{
    bottom: 0rem !important;
    top: unset !important;
  }
  
  .reply-bar{
    width: 2px;
    background-color: var(--site-border-lighter-grey);
    display: flex;
    height: 100%;
    z-index: 0;
  }
  
  textarea.warning, input.warning{
    border: 1px solid var(--site-light-orange);
  }
  
  textarea.warning::placeholder{
    color: var(--site-light-orange)
  }
  
  .rating-sm svg {
    width: 24px;
    height: 14px;
  }
  
  .border-top-dashed{
    border-top: 1px dashed lightgrey;
  }
  
  .border-bottom-dashed{
    border-bottom: 1px dashed lightgrey;
  }
  
  .comment-navigation{
    /* d-flex align-items-center justify-content-start px-3 border-bottom cursor-pointer
     */
    display: flex;
    align-items: center;
    justify-self: flex-start;
    padding: 0rem 3rem;
    border-bottom: 1px solid var(--site-border-lighter-grey);
    cursor: pointer;
  
  }
  
  .sorting-button {
    padding: 0.5rem 1.25rem !important;
    border: 1px solid #126f66;
    border-radius: 10rem;
    margin: 0rem 0.5rem !important;
    cursor: pointer;
    background-color: #37b7ab;
    color: white;
    max-width: 9rem;
    min-width: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .sorting-button:focus {
    background-color: #126f66 !important;
    color: white;
  }
  
  .sorting-button-wrapper{
    position: relative;
    flex: 1;
    /* margin: 0rem 1rem; */
  }

  .sorting-button.drop-down{
    min-width: 12rem !important;
    max-width: 15rem !important;
    min-height: 3rem !important;
  }
  
  .sorting-button-wrapper .multiple-choice-checkbox {
    bottom: unset !important;
  }
  
  .sorting-button-wrapper .up-solid {
    border-bottom: 6px solid white !important;
  }
  .sorting-button-wrapper .down-solid{
    border-top: 6px solid white !important;
  }
  
  .sorting-button:hover {
    background-color: #126f66;
    border-color: #37b7ab;
  }
  
  input.sorting-button::placeholder {
    color: white;
  }
  
  input.sorting-button {
    padding: 1.5rem;
  }
  
  
  .border-bottom-double{
    border-bottom: 3px double var(--site-border-lighter-grey);
  }
  
  .checkbox-container label {
    margin: 0;
    padding: 1rem;
  }
  
  .checkbox-wrapper input[type="checkbox"] {
    /* display: none;
    visibility: hidden; */
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .checkbox-wrapper .cbx {
    margin: auto;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0rem !important;
  }
  .checkbox-wrapper .cbx span {
    display: inline-block;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
    font-family: var(--site-ff);
    font-size: var(--site-fs-flex);
    text-transform: capitalize;
    font-weight: 300;
  }
  .checkbox-wrapper .cbx span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    transform: scale(1);
    vertical-align: middle;
    border: 1px solid #9098A9;
    transition: all 0.2s ease;
  }
  
  .checkbox-wrapper .cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
  }
  .checkbox-wrapper .cbx span:first-child:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #37B7AB;
    display: block;
    transform: scale(0);
    opacity: 1;
    border-radius: 50%;
  }
  .checkbox-wrapper .cbx span:last-child {
    padding-left: 1rem;
  }
  .checkbox-wrapper .cbx:hover span:first-child {
    border-color: #37B7AB;
  }
  
  .checkbox-wrapper .site-checkbox:checked + .cbx span:first-child {
    background: #37B7AB;
    border-color: #37B7AB;
    animation: wave 0.4s ease;
  }
  .checkbox-wrapper .site-checkbox:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
  }
  .checkbox-wrapper .site-checkbox:checked + .cbx span:first-child:before {
    transform: scale(3.5);
    opacity: 0;
    transition: all 0.6s ease;
  }
  
  .site-mini-card.selected .checkbox-wrapper .cbx span:first-child {
    border: 1px solid white;
  }
  
  @keyframes wave {
    50% {
      transform: scale(0.9);
    }
  }
  
/* ─── RADIO VARIANT OVERRIDES ────────────────────────────────────────── */

/* 1 ▸ turn the square “checkbox box” into a perfect circle of fixed size */
.checkbox-wrapper--radio .cbx span:first-child{
  width:18px;                 /* explicit square footprint            */
  height:18px;
  aspect-ratio:1/1;           /* guards against later width tweaks    */
  border-radius:50%;          /* circle                                */
}

/* 2 ▸ hide the tick mark that we draw for checkboxes … */
.checkbox-wrapper--radio .cbx span:first-child svg polyline{
  display:none;
}
/* …and replace it with a little filled circle that scales in/out */
.checkbox-wrapper--radio .cbx span:first-child svg circle{
  fill:#fff;                  /* colour of the dot inside */
  stroke:transparent;
  transform-origin:center;
  transform:scale(0);         /* start hidden              */
  transition:transform .2s ease;
}
.checkbox-wrapper--radio .site-checkbox:checked + .cbx span:first-child svg circle{
  transform:scale(1);         /* pop‑in when checked       */
}

/* 3 ▸ same text padding as checkbox version */
.checkbox-wrapper--radio .cbx span:last-child{
  padding-left:8px;
}

/* 4 ▸ if your list‑item container has rounded corners,                       */
/*      force the first & last radio icons to stay perfectly round            */
.checkbox-wrapper--radio:first-child .cbx span:first-child,
.checkbox-wrapper--radio:last-child  .cbx span:first-child{
  border-radius:50%;
}



  .additional-discount {
    position: absolute;
    left: -2.5rem !important;
    top: -2rem !important;
    background-color: var(--site-dark-green);
    padding: 1rem;
    color: antiquewhite;
  }
  
  .dot-timeline {
    overflow-x: hidden;
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow-y: hidden;
    border: 1px solid var(--site-border-lighter-grey) !important;
    border-radius: var(--site-border-radius);
    /* margin-bottom: 1rem !important; */
  }
  
  @media screen and (min-width: 576px){
    .dot-timeline .step .start, .dot-timeline .step .past, .dot-timeline .step .current, .dot-timeline .step .future, .dot-timeline .step .finish {
      height: var(--proforma-navigation-height) !important;
      display: flex;
      flex-direction: column;
    }
  }
  
  .dot-timeline .icon-station-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    visibility: hidden;
  }
  
  .dot-timeline .icon-text {
    position: absolute;
    top: 30px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    visibility: hidden;
  }
  
  .dot-timeline .roadmap-icon-hover {
    /* flex: 1; */
    justify-content: center;
    align-items: center;
    transition: 300ms ease-in-out;
    width: 1rem !important;
    height: 1rem !important;
    z-index: 5;
    background-color: var(--site-secondary-bgcolor) !important;
    border: 1px solid var(--dot-timeline-past-color) !important;
    padding: 0px;
  }
  
  .dot-timeline .past:before, .dot-timeline .current:before, .dot-timeline .future:before, .dot-timeline .finish:before {
      top: 50% !important;
  }
  
  .dot-timeline .icon-station-wrapper, .dot-timeline .icon-text {
    height: 100% !important;
  }
  
  .roadmap-icon-hover.icon-current {
    background-color: var(--dot-timeline-present-color) !important;
  }
  
  .roadmap-icon-hover.icon-past, .roadmap-icon-hover.icon-start {
    background-color: transparent;
  }
  
  .roadmap-icon-hover.icon-future {
    background-color: var(--dot-timeline-future-color) !important;
  }
  
  .fa-hand-holding-usd.fa-icon-2 {
    margin-bottom: 0.75rem;
  }
  
  .dot-timeline .past, .dot-timeline .start {
    color: var(--dot-timeline-past-color);
    border-color: var(--dot-timeline-past-color);
  }
  
  .dot-timeline .current, .dot-timeline .present {
    color: var(--dot-timeline-present-color);
    border-color: var(--dot-timeline-present-color);
  }
  
  .dot-timeline .future{
    color: var(--dot-timeline-future-color);
    border-color: var(--dot-timeline-future-color);
  }
  
  .dot-timeline .roadmap-icon-hover.icon-future{
    border: 1px solid var(--dot-timeline-future-color) !important;
    background-color: var(--site-secondary-bgcolor) !important;
  }
  
  .dot-timeline .roadmap-icon-hover.icon-current{
    border: 1px solid var(--dot-timeline-present-color) !important;
    background-color: var(--site-secondary-bgcolor) !important;
  }
  
  .border-ring {
    position: absolute;
    /* border: 1px solid var(--site-border-lighter-grey); */
    border-radius: 50%;
    height: 3.25rem !important;
    width: 3.25rem !important;
    /* background-color: white; */
    z-index: 0;
  }
  
  .icon {
    transition: border 0.3s ease-in-out;
    cursor: pointer;
  }
  
  /* .icon:hover {
    border: 1px solid blue;
    border-radius: 50%;
  } */
  
  /* .icon:hover .border-ring {
    border: 1px solid blue;
  } */
  
  /* .border-ring:hover {
    border-color: var(--site-turquoise);
    box-shadow: var(--bs-d-2);
  } */
  
  .dot-timeline i, .dot-timeline svg, .dot-timeline .icon{
    z-index: 10;
  }
  
  .dot-timeline .past:hover i {
    color: var(--site-primary-duo);
  }
  
  @media (max-width: 576px){
    .dot-timeline{
      flex-direction: column;
      height: 45vh !important;
    }
    .dot-timeline .roadmap-icon-hover svg{
      display: none;
    }
  
    .dot-timeline svg{
      display: none;
    }
  
    .dot-timeline .icon-station-wrapper{
      width: 100% !important;
      position: absolute;
      top: 0;
      right: 50%;
    }
  
    .dot-timeline .roadmap-icon-hover {
      /* flex: 1; */
      justify-content: center;
      align-items: center;
      transition: 300ms ease-in-out;
      width: 1rem !important;
      height: 1rem;
      z-index: 5;
      background-color: var(--site-secondary-bgcolor) !important;
      border: 1px solid var(--dot-timeline-past-color) !important;
      padding: 0px;
    }
  
    .dot-timeline .start{
      display: flex;
      align-items: center;
      /* justify-content: space-between;
      width: 5rem; */
    }
  
    .dot-timeline .short-text, .icon-text{
      position: absolute;
      left: 35%;
      top: 0;
      display: inline-block;
    }
  
    .dot-timeline .start:before{
      content: '';
      position: absolute;
      height: 100%;
      width: 1px;
      background-color: #ddd;
      right: 50%;
      top: 50%;
  
    }
  
    .dot-timeline .past:before{
      height: 100%;
      width: 1px;
    }
  
    .dot-timeline .future:before{
      height: 100%;
      width: 1px;
    }
  
    .dot-timeline .current:before{
      height: 100%;
      width: 1px;
    }
  
    
    .dot-timeline .roadmap-icon-hover{
      background-color:  #4ac8b1 !important;
      border: 10px solid #ffffff !important;
      transform: scale(0.6);
      box-shadow: inset 0 0px 3px 0 #3793b7, 0 2px 4px 0 rgb(0 0 0 / 15%);
    }
  
    .dot-timeline .roadmap-icon{
      background-color:  #ffffff !important;
      border: 10px solid  #4ac8b1 !important;
      
    }
  
    .dot-timeline .start .roadmap-icon{
      transform: scale(0.6);
    }
  
    .dot-timeline .future .roadmap-icon{
      transform: scale(0.6);
    }
  
    .dot-timeline .finish .roadmap-icon{
      transform: scale(0.6);
    }
  
    .dot-timeline .current .roadmap-icon{
      transform: scale(0.7);
    }
  
    .dot-timeline .roadmap-icon svg{
      display: none;
      
    }
  
    .dot-timeline .roadmap-icon-hover.icon-current {
      border: 10px solid var(--dot-timeline-present-color) !important;
      background-color: var(--site-secondary-bgcolor) !important;
    }
  
    .dot-timeline .past, .dot-timeline .start, .dot-timeline .future, .dot-timeline .present, .dot-timeline .current{
      min-height: 3rem;
    }
  
    .dot-timeline .roadmap-icon-hover {
      width: 1rem !important;
      height: 1rem !important;
    }
  
    .dot-timeline .icon-text{
      position: absolute;
      top: 0rem;
      left: 3.5rem !important;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
  
    a.icon-text {
      opacity: 1 !important;
      top: -1rem;
      right: 2rem !important;
      height: 0rem !important;
    }
  
    .icon-past:hover ~ a.icon-text, .icon-start:hover ~ a.icon-text,  .icon-finish:hover ~ a.icon-text, .icon-current:hover ~ a.icon-text, .icon-future:hover ~ a.icon-text  {
      cursor: pointer;
      text-transform: capitalize;
      font-size: 0.95rem;
      visibility: visible;
      opacity: 1;
      top: 0px;
    }
  
    .start .icon-station-wrapper, .past .icon-station-wrapper, .current .icon-station-wrapper, .future .icon-station-wrapper, .finish .icon-station-wrapper {
      position: absolute;
      top: 0rem !important;
      left: 2rem !important;
      visibility: visible !important;
      transition: top 0.3s ease !important;
    }
  
    .finish:before {
      content: '';
      position: absolute;
      height: var(--navigation-line-thickness);
      background-color: var(--navigation-line-color);
      right: 50%;
      height: 0rem !important;
    }
  
  }
  
  .dot-timeline .roadmap-icon-hover.icon-future {
    border: 1px solid var(--dot-timeline-future-color) !important;
    background-color: var(--site-secondary-bgcolor) !important;
  }
  
  .dot-timeline .roadmap-icon-hover.icon-finish {
    border: 10px solid var(--dot-timeline-future-color) !important;
    background-color: var(--site-secondary-bgcolor) !important;
  }
  
  .dot-timeline .roadmap-icon-hover.icon-future:hover {
    border: 1px solid var(--dot-timeline-future-color) !important;
    background-color: var(--dot-timeline-future-color) !important;
  }
  
  .dot-timeline .roadmap-icon-hover.icon-finish:hover {
    border: 1px solid var(--dot-timeline-future-color) !important;
    background-color: var(--dot-timeline-future-color) !important;
  }
  
  .dot-timeline .roadmap-icon-hover.icon-present:hover, .dot-timeline .roadmap-icon-hover.icon-current:hover {
    border: 1px solid var(--dot-timeline-present-color) !important;
    background-color: var(--dot-timeline-present-color) !important;
  }
  
  .dot-timeline .roadmap-icon-hover.icon-past:hover, .dot-timeline .roadmap-icon-hover.icon-start:hover {
    border: 1px solid var(--dot-timeline-past-color) !important;
    background-color: var(--dot-timeline-past-color) !important;
  }
  
  a.icon-text {
    opacity: 0;
    cursor: pointer;
    text-transform: capitalize;
    font-size: 0.95rem;
    visibility: hidden;
    transition: all 300ms ease-in;
    top: 0;
  }
  
  
  .icon-past:hover ~ a.icon-text, .icon-start:hover ~ a.icon-text,  .icon-finish:hover ~ a.icon-text, .icon-current:hover ~ a.icon-text, .icon-future:hover ~ a.icon-text  {
    cursor: pointer;
    text-transform: capitalize;
    font-size: 0.95rem;
    visibility: visible;
    opacity: 1;
    /* top: 30px; */
  }
  
  
  .past, .current, .future{
    position: relative;
  }
  
  .start .icon-station-wrapper, .past .icon-station-wrapper, .current .icon-station-wrapper, .future .icon-station-wrapper, .finish .icon-station-wrapper{
    position: absolute;
    top: -2.2rem;
    left: 0;
    visibility: visible;
    transition: top 0.3s ease;
  }
  
  .start:hover .icon-station-wrapper, .past:hover .icon-station-wrapper, .current:hover .icon-station-wrapper, .future:hover .icon-station-wrapper, .finish:hover .icon-station-wrapper{
    visibility: visible;
    top: -20px; 
  }
  
  .start:hover .icon-text, .past:hover .icon-text, .current:hover .icon-text, .future:hover .icon-text, .finish:hover .icon-text {
    visibility: visible;
    opacity: 1;
  }
  
  .icon-future, .icon-current, .icon-past{
    position: absolute;
    height: 1rem !important;
    width: 1rem !important;
  }
  
  @media screen and (max-width: 576px) {
  
    a.icon-text {
      cursor: pointer;
      text-transform: capitalize;
      font-size: 0.95rem;
      visibility: visible !important;
      transition: all 300ms ease-in;
    }
  
  }
  
  .circular-container-sm {
    width: var(--site-profile-pic-small); 
    height: var(--site-profile-pic-small); 
    overflow: hidden;
    border-radius: 50%;
  }
  
  .circular-image {
    width: 100%; 
    height: 100%; 
    border-radius: 50%;
    overflow: hidden;
  }
  
  .circular-image img {
    width: 100%; 
    height: auto; 
    display: block; 
  }
  
  
  
  
  
  
  .use-item, .source-item{
    /* d-flex align-items-center justify-content-between p-2 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem;
  }
  
  .use-item:last-child, .source-item:last-child{
    margin-top: auto !important;
  }
  
  .sub-source-item{
    padding-left: 1.35rem !important;
  }
  
  .form-group.label-in label{
    position: absolute;
    z-index: 20;
    left: 4rem;
    top: 0rem;
    font-size: 0.8rem;
  }
  
  .form-group.label-in input, .form-group.label-in select {
    padding-top: 1.75rem;
  }
  
  .form-group select{
    -webkit-appearance: none; /* Safari */
    -moz-appearance: none;    /* Firefox */
    appearance: none;
  }
  
  /* .form-group.label-in input, .form-group.label-in select{
    padding-top: 20px !important;
  } */
  
  .form-group.label-in .input-group-text{
    width: 3rem !important;
  }
  
  .modal-content-form {
    margin-bottom: 5rem;
  }
  
  .text-wrap{
    white-space: wrap !important;
  }
  
  .text-start{
    text-align: start !important;
  }
  
  .filled-bar .chart-row-item {
    position: relative;
    height: 3rem;
    background-color: var(--site-dark-green);
    color: antiquewhite;
    min-height: unset;
    top: 25%;
    border: 1px solid antiquewhite;
    border-right-width: 0px;
    border-left-width: 0px;
    background-image: linear-gradient(180deg, #16655d 0%, #2b6f67 50%, #389087 100%);
  }
  
  .filled-bar-task-start .chart-row-item {
    border-top-left-radius: var(--site-border-radius);
    border-bottom-left-radius: var(--site-border-radius);
    margin-left: 1rem;
    border: 1px solid antiquewhite;
    
  }
  
  .filled-bar-task-finish .chart-row-item {
    border-top-right-radius: var(--site-border-radius);
    border-bottom-right-radius: var(--site-border-radius);
    /* margin-right: 2rem; */
    border: 1px solid antiquewhite;
    border-left-width: 0px;
    width: 80% !important;
  }
  
  .filled-bar-task-start-finish .chart-row-item {
    border-top-right-radius: var(--site-border-radius);
    border-bottom-right-radius: var(--site-border-radius);
    border-top-left-radius: var(--site-border-radius);
    border-bottom-left-radius: var(--site-border-radius);
    /* margin-right: 2rem; */
    border: 1px solid antiquewhite;
    border-left-width: 0px;
    width: 80% !important;
  }
  
  
  li.nav-item-min:hover {
    background-color: var(--site-off-white);
  }
  
  .loading-message{
    height: 30vh;
      border: 1px solid var(--site-light-grey);
      border-radius: var(--site-border-radius);
      padding: 1rem;
      display: flex;
      align-items: start;
      padding-top: 2rem;
      background-color: var(--site-light-off-white);
      /* color: white; */
  }
  
  .loading-message-top {
    position: absolute;
    bottom: 8rem;
    right: 2rem;
    z-index: 1100;
    background-color: white;
    width: 100%;
    border-radius: 1rem;
    box-shadow: var(--bs-d-7);
    border-top-left-radius: 1rem;
  }
  
  .loading-message-top-center {
    position: absolute;
    top: 8rem;
    right: calc(50% - 12.5rem);
    z-index: calc(var(--top-1-layer) + 2);
    background-color: white;
    width: 25rem;
    border-radius: 1rem;
    box-shadow: var(--bs-d-7);
    border-top-left-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
  }
  
  .irr-container {
    position: fixed;
    left: 5%;
    top: 10%;
    z-index: 15;
    display: flex;
    background-color: white;
    border-radius: var(--site-border-radius);
    box-shadow: var(--bs-d-2);
    width: 90%;
    min-height: 15rem;
    z-index: 1999;
}
  
  .axis {
    position: relative;
    width: 100%;
    top: 2rem;
    /* height: 100px; */
    /* border-bottom: 1px solid #333; */
    display: flex;
    flex-direction: column;
    /* overflow: auto; */
  }
  
  .axis-label{
    /* text-align: center; */
    margin-bottom: 6px; 
    position: relative;
    right: 3rem;
    font-weight: 400;
  }
  
  .tick {
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 10px;
    background-color: var(--site-border-light-grey);
  }
  
  .tick-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .tick-amount {
    position: absolute;
    top: -2rem !important;
    transform: translateX(50%);
  }
  
  
  .xaxis-container-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    margin-top: 2rem;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  .xaxis-container{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    overflow: auto;
    flex: 1;
    flex-direction: column;
  }
  
  .xaxis-wrapper{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 4rem;
    /* height: 120px; */
    /* border-bottom: 1px solid #333; */
  
  }
  
  .x-axis{
    /* overflow: auto; */
    border-top: 2px solid black;
  }
  
  .tick-indicator {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    content: '$';
    font-size: 14px;
    color: var(--site-medium-grey);
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .tick-indicator:before {
    content: ''; 
  }
  
  .tick-indicator:hover{
    color: var(--site-dark-turquoise);
  }
  
  @media screen and (max-width: 898px) {
    
    .tick-indicator:before {
      content: '$'; /* Show '$' sign for screens smaller than 600px */
      position: relative;
      top: 0;
      left: 0;
      transform: translateX(-50%);
      font-size: 14px;
      color: var(--site-medium-grey);
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      /* Add some visual styles for inspection */
      /* border: 1px solid red; */
      padding: 2px;
    }
  }
  
  /**********/
  .tick-label-bottom {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    content: '$';
    font-size: 12px;
    color: var(--site-medium-grey);
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .tick-label-bottom.even{
    top: -2rem !important;
  }
  
  .tick-label-bottom:before {
    content: ''; 
  }
  
  .tick-label-bottom:hover{
    color: var(--site-dark-turquoise);
  }
  
  @media screen and (min-width: 898px) and (max-width: 1000px) {
    .tick-label-bottom {
      font-size: 10px !important;
    }  
  
  }
  
  @media screen and (min-width: 1000px) and (max-width: 1200px) {
    .tick-label-bottom {
      font-size: 11px !important;
    }  
  
  }
  
  
  @media screen and (max-width: 898px) {
    .tick-label-bottom {
      display: none; /* Hide tick label for screens smaller than 600px */
    }  
  }
  
  
  
  .site-light-summary-text {
    color: white !important;
    font-size: 1.2rem !important;
    
  }
  
  .letter-spacing-1px{
    letter-spacing: 1px !important;
  }
  
  .site-header-boxed{
    padding: 1rem;
    border-radius: var(--site-border-radius);
  }
  
  @media screen and (max-width: 650px) {
    .table-responsive {
      display: flex;
    }
  
    .table-responsive tbody{
      flex: 1; /* tbody to take up the entire remaining space */
      flex-direction: column !important; /* Rows are placed horizontally */
    }
  
    .table-responsive tbody tr{
      display: flex;
      flex-direction: column !important;
    }
  
    .table-responsive th, .table-responsive td{
      display: flex;
      height: calc(var(--input-height) + 2rem);
      border-bottom: none !important;
      align-items: center;
      justify-content: space-between;
    }
  
    .table-responsive th div, .table-responsive td div{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
  
    .table-responsive td input.btn-site-default{
      width: auto;
      padding: 0.75rem 0.5rem;
    }
  
  }
  
  @media screen and (max-width: 576px){
    .row-subtitle{
      display: flex;
      flex-direction: row !important;
    }
    
    .row-subtitle span, .flex-table td.total, .summary-table-category-name{
      font-size: clamp(0.9rem, 1vw, 1.1rem) !important;
    }
  
    .row-title span, .flex-table td.total, .summary-table-category-name{
      font-size: clamp(0.9rem, 1vw, 1.1rem) !important;
    }
  
    .summary-table-account-name{
      font-size: clamp(1.1rem, 1.25vw, 1.3rem) !important;
    }
  }
  
  /*********** Map's Data Slider **************/
  
  #fullLeafMap .data-sliders-header-container, .data-sliders-header-container, #leafLetMapInsight .data-sliders-header-container, .data-sliders-header-container{
    position: relative !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #fullLeafMap .slider-header-image,  .slider-header-image, #leafLetMapInsight .slider-header-image,  .slider-header-image{
    position: relative !important;
    object-fit: cover;
    width: 100%;
    height: 120px !important;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    height: auto !important;
    max-height: 15rem !important;
  }
  
  #fullLeafMap .map-slider-text-name, #leafLetMapInsight .map-slider-text-name{
    text-transform: capitalize;
  
  }
  
  #fullLeafMap .map-slider-line-item, #leafLetMapInsight .map-slider-line-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
  
  }
  
  #fullLeafMap  .data-sliders-container .swiper-slide, #leafLetMapInsight  .data-sliders-container .swiper-slide{
      /* padding-top: 1rem;
      border: 1px solid var(--site-bg-primary-light); */
      padding: 1rem;
      border-bottom-left-radius: 1rem;
      border-bottom-right-radius: 1rem;
      overflow: auto;
  
  }
  
  #fullLeafMap .site-swiper-button-next, #fullLeafMap .site-swiper-button-prev, #leafLetMapInsight .site-swiper-button-next, #leafLetMapInsight .site-swiper-button-prev {
    position: unset;
    height: unset;
    width: unset;
    margin-top: unset;
    margin-bottom: 0rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
  }
  
  #fullLeafMap .swiper, #leafLetMapInsight .swiper {
    width: 300px;
    height: auto;
    min-height: 200px;
  }
  
  #fullLeafMap .swiper-nav, #leafLetMapInsight .swiper-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem;
    margin-bottom: 0rem;
  }
  
  #fullLeafMap .leaflet-marker-icon, #leafLetMapInsight .leaflet-marker-icon{
      margin-left: -15px;
      margin-top: -15px;
      width: 2rem !important;
      height: 2rem !important;
      transform: translate3d(319px, 210px, 0px);
      z-index: 210;
      background-color: white;
      padding: 0.1rem;
      border-radius: 1rem;
      border: 1px solid var(--site-turquoise);
      top: 0.5rem !important;
      right: 0.5rem !important;
  
  }
  
  
  #fullLeafMap .marker-cluster, #leafLetMapInsight .marker-cluster{
    margin-left: -15px;
    margin-top: -15px;
    width: 32px !important;
    height: 32px !important;
    transform: translate3d(319px, 210px, 0px);
    z-index: 210;
    background-color: #279a8f;
    padding: 0.1rem;
    border-radius: 50%;
    border: 1px solid white;
    top: 0.5rem !important;
    right: 0.5rem !important;
    background-image: var(--site-gradient-blue);
    display: flex;
    align-items: center;
    justify-content: center;
  
  }
  
  
  #fullLeafMap .marker-cluster div, #leafLetMapInsight .marker-cluster div{
    margin: 0rem !important;
    padding: 0rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem; 
    color: white;
  }
  
  #fullLeafMap .site-header-3, #leafLetMapInsight .site-header-3{
    margin-top: 0rem !important;
  
  }

/**************** halo + white ring *****************/
:root { --cluster-bg: #0b6bd6; }

/* Remove plugin’s default background */
.leaflet-marker-icon.cluster-icon { background: transparent; border: 0; }

/* sizes (match JS) */
.cluster-icon.sm { width: 44px; height: 44px; }
.cluster-icon.md { width: 54px; height: 54px; }
.cluster-icon.lg { width: 64px; height: 64px; }

/* main circle */
.cluster-icon .bubble {
  position: relative;
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  background: var(--site-dark-turquoise);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
  overflow: visible;
}

/* count text */
.cluster-icon .bubble > span { font-size: 14px; }
.cluster-icon.md .bubble > span { font-size: 15px; }
.cluster-icon.lg .bubble > span { font-size: 16px; }

/* crisp white ring */
.cluster-icon .bubble::before {
  content: "";
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  box-shadow: 0 0 0 4px #fff;
}

/* soft outer halo */
.cluster-icon .bubble::after {
  content: "";
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  box-shadow: 0 0px 0 16px rgb(21 139 103 / 42%);
  z-index: -1;
}

  
  .site-swiper-button-prev:after, .site-swiper-button-next:after {
    display: inline-flex;
    height: 2rem !important;
    width: 2rem !important;
    font-family: swiper-icons;
    font-size: 14px;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
    color: #fefefe;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-image: var(--site-gradient-blue);
    
  }
  
  .swiper-pagination-bullet {
    display: inline-flex;
    height: 0.5rem !important;
    width: 2.25rem !important;
    font-family: swiper-icons;
    font-size: 14px;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
    color: #fefefe;
    border: 1px solid grey;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background-color: var(--site-dark-green) !important;
    border-radius: 18px !important;
  }
  
  /* #fullLeafMap .leaflet-popup-content{
    margin: 33px 24px !important;
  } */
  
  #fullLeafMap .leaflet-popup-close-button, #leafLetMapInsight .leaflet-popup-close-button{
      top: 0.5rem !important;
      right: 0.5rem !important;
      padding: 1rem !important;
      background-color: rgb(230, 230, 230) !important;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      outline: none !important;
  
  }
  
  .custom-icon-class-parent{
    background: transparent !important;
      border: none !important;
      box-shadow: none !important;
  
  }
  
  .slider-header-address {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-family: 'Exo', sans-serif;
    font-size: var(--font-size-title);
    color: white;
    background-color: #0000008a;
    padding: 0.25rem 0.75rem;
  }
  
  .right-side-card-full-height, .right-side-card-full-height .right-side-card-summary{
    width: 30vw !important;
    border-top-left-radius: 2rem !important;
    height: calc(100vh - 5.5rem) !important; /* 5.5rem to offset the top nav height*/ 
  }
  
  .review-status{
    margin-left: 0.5rem !important;
    color: var(--site-dark-turquoise);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
  }
  
  .presentation-icon {
    color: var(--site-turquoise);
    /* cursor: pointer; */
    margin: 0.5rem !important;
  }
  
  .presentation-icon:hover {
    color: lightskyblue;
  }
  
  .img-fit-container{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  
  .img-fill-container {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  .img-fill-auto-container{
    width: 100% !important;
    height: auto;
    object-fit: cover !important;
    /* border: 1px solid var(--site-border-light-grey); */
    max-height: 400px;
  }
  
  /*********************** IRR Table **********************/
  #irr-table.table{
    margin: 3rem;
  
  }
  #irr-table.table thead th{
    font-family: var(--site-ff);
    font-size: 1.1rem;
    font-weight: 200;
    padding: 0.5rem !important;
  
  }
  
  .grid-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    border: 1px solid #ccc;
    padding: 0;
    width: 100%;
    height: max-content;
  }
  
  #draws_table.grid-container {
    display: grid;
    grid-template-columns: auto;
    border: 1px solid #ccc;
    padding: 0;
    width: 100%;
    margin: 3rem;
    border-radius: var(--site-border-radius);
    gap: 2px;
    height: max-content;
  }
  
  .grid-row-1-col-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 1rem;
  }
  
  
  .grid-row-1-col-4:first-child .grid-cell {
    font-size: 1.1rem;
    font-weight: 200;
    font-family: var(--site-ff);
  }
  
  .grid-cell {
    padding: 0.5rem !important;
    display: flex;
  }
  
  .grid-cell-header{
    display: none;
  }
  
  .grid-cell.column-header {
    text-transform: capitalize;
    font-family: var(--site-ff);
    font-weight: 300;
    font-size: clamp(1.05rem, 1vw, 1rem);
  }
  
  .grid-header-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 5px;
    padding: 0.5rem;
    grid-auto-flow: column;
    align-items: center;
    height: max-content;
  }
  
  .grid-table-5c {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    /* padding: 10px; */
    border-bottom: 2px solid black;
    border: 1px solid var(--site-turquoise);
    border-radius: var(--site-border-radius);
    position: relative;
    top: 4rem;
    margin: 2rem;
  }
  
  .grid-table-10c , .grid-table-12c {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0px;
    border: 1px solid var(--site-turquoise);
    border-radius: var(--site-border-radius);
  }
  
  .grid-table-12c .grid-table-header, .grid-table-12c .grid-table-row {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      position: sticky;
      top: 0rem;
      z-index: var(--top-4-layer);
  }

  .grid-table-12c .grid-table-header{
    border-top-left-radius: var(--site-border-radius);
  }
  
  .grid-row-1-col-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  
  .grid-row-1-col-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
  }
  
  .grid-row-1-col-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
  }
  
  .grid-header {
    font-weight: bold;
    text-transform: capitalize;
    border-bottom: 1px solid var(--site-turquoise);
  }
  
  .grid-total {
    border-top: 4px double var(--site-turquoise);
    padding: 0rem 1rem 1rem 0rem;
  }
  
  .grid-total .grid-cell{
    font-weight: 500;
  }
  
  .grid-cell:nth-child(1) {
    font-weight: 500;
    text-transform: capitalize;
    padding: 0.5rem 1rem !important;
  }
  
  .grid-header .grid-cell {
    font-weight: 500;
    padding: 1rem 0.5rem !important;
  }
  
  @media (max-width: 600px) {
  
    .grid-row-1-col-5, .grid-row-1-col-6 {
        grid-template-columns: 1fr; /* Each row now only has one column */
    }
    
  
    .grid-table-5c > div {
        display: grid;
        grid-template-columns: 1fr;
    }
  
    .grid-table-5c {
        max-width: 100%;
        overflow-x: auto;
        display: block;
    }
  
    .grid-cell {
        display: block;
        margin-bottom: 0.5rem;
    }
  
    .grid-header .grid-cell, .grid-total .grid-cell, .grid-row-1-col-5 .grid-cell {
        display: flex;
        flex-direction: column;
    }
  }
  
  
  .equity-breakdown-table{
      position: relative;
      top: 5rem;
      border: 1px solid var(--site-dark-green);
      border-radius: var(--site-border-radius);
      margin: 1rem;
  
  }
  
  .d-grid{
    display: grid !important;
  }
  
  
  .gap-05rem{
    gap: 0.5rem !important;
  }
  
  .gap-1rem{
    gap: 1rem !important;
  }
  
  .gap-1_5rem{
    gap: 1.5rem !important;
  }
  
  .gap-2rem{
    gap: 2rem !important;
  }
  
  .grid-fr-1-1{
    grid-template-columns: 1fr 1fr !important;
  }
  
  
  .grid-fr-2-1{
    grid-template-columns: 2fr 1fr !important;
  }
  
  .grid-fr-3-1{
    grid-template-columns: 3fr 1fr !important;
  }
  
  .grid-fr-4-1{
    grid-template-columns: 4fr 1fr !important;
  }
  
  .grid-row-1-col-1, .grid-col-1, .grid-1x1{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  
  .grid-row-1-col-2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-row-1-col-3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid-row-1-col-4{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  
  .grid-row-1-col-5{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  
  
  .grid-row-1-col-2-fr-2-1{
    display: grid;
    grid-template-columns: 2fr 1fr !important;
  
  }
  
  .grid-row-1-col-2-fr-3-1{
    display: grid;
    grid-template-columns: 3fr 1fr !important;
  
  }
  
  .grid-row-1-col-2-fr-3-2{
    display: grid;
    grid-template-columns: 3fr 2fr !important;
  
  }
  
  .grid-row-1-col-2-fr-4-1{
    display: grid;
    grid-template-columns: 4fr 1fr !important;
  
  }
  
  .grid-col-1-span-2{
    grid-column: 1 / span 2;
  
  }
  
  .grid-col-1-span-all{
    grid-column: 1 / -1;
  
  }
  
  .grid-image-40-text-60{
    display: grid;
    grid-template-areas: 'grid-image grid-text';
    grid-template-columns: 40% 60%; 
    gap: 1rem; 
  
  }
  
  
  
  .grid-image-40-text-60 .grid-image{
    grid-area: grid-image; 
  
  }
  
  .grid-image-40-text-60 .grid-text{
    grid-area: grid-text; 
    padding: 1rem;
  
  }
  
  .grid-text-60-image-40{
    display: grid;
    grid-template-areas: 'grid-text grid-image';
    grid-template-columns: 60% 40%; 
    gap: 1rem; 
    width: 100%;
  
  }
  
  .grid-text-40-image-60 .grid-image{
    grid-area: grid-image; 
  
  }
  
  .grid-text-40-image-60 .grid-text{
    grid-area: grid-text; 
    padding: 1rem;
  
  }
  
  @media screen and (max-width: 950px) {
    .grid-text-60-image-40, .grid-image-40-text-60{
      display: grid;
      grid-template-areas: 'grid-image'
                           'grid-text';
      grid-template-columns: 1fr; 
      gap: 1rem; 
    
    }
  
    .grid-image, .grid-text{
      display: flex;
      align-items: center;
      justify-content: center;
    
    }
    
  }
  
  .irr-phases-grid{
    display: grid;
    grid-template-areas: 
      'chart detail'
      'phases detail';
    grid-template-columns: 2fr 1fr;
  }
  
  @media screen and (max-width: 900px) {
    .irr-phases-grid{
      display: grid;
      grid-template-areas: 
        'detail'
        'chart'
        'phases';
      grid-template-columns: 1fr;
    }
    
  }
  
  .irr-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'header header'
      'timeline chart'
      'table detail'
      'table detail';
    gap: 1rem;
    padding: 3rem;
    height: 80vh !important;
    overflow: auto !important;
  }
  
  #detailed-irr-title{
    grid-area: header;
    margin-top: 1rem; 
  }
  
  #x-axis-container{
    grid-area: timeline;
  }
  
  #irr-chart-wrapper{
    grid-area: chart;
  }
  
  #grid-equity-break-down{
    grid-area: detail;
  }
  
  #irr-explanation-table{
    grid-area: table;
  }
  
  
  
  @media screen and (max-width: 1100px){
    .irr-grid{
      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas:
        'header'
        'timeline'
        'table'
        'chart'      
        'detail';

      height: 80vh !important;
      overflow: auto !important;
    }
  }
  
  .grid-equity-break-down{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
  }
  
  
  
  
  #irr-explanation-wrapper #irr-chart-wrapper{
    grid-area: chart;
  }
  
  
  @media screen and (max-width: 768px) {
    .grid-row-1-col-4 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      
      padding: 1rem;
    }
  
    .grid-row-1-col-4:first-child{
      display: none
    }
    
    .grid-cell-header {
      display: block;
      font-weight: 600;
      margin: 0.5rem 2rem;
    }
  }
  /********************* Grid **********************/
  
  .fade-out {
    animation: fadeOut 1s ease-out forwards;
    animation-delay: 1.5s;
  }
  
  @keyframes fadeOut {
    to {
      opacity: 0;
      transform: translateY(10px);
      visibility: hidden;
    }
  }
  
  
  
  #x-axis-container {
    position: relative;
    min-height: 4rem;
    cursor: pointer;
    z-index: 3;
  }
  
  /* .tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    cursor: pointer;
  }
  
  .tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    white-space: nowrap;
    display: none;
  }
  
  .tick:hover .tooltip {
    display: block;
  }
  
  */
  
  .tick .tick-date {
    min-width: 15rem;
    font-size: clamp(0.8rem, 1vw, 1rem);
  } 
  
  .tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    cursor: pointer;
    text-align: center;
  }
  
  svg .tick {
    position: static; 
    transform: revert-layer;  
    cursor: pointer;
    text-align: center;
  }
  
  
  
  .tick-description{
    /* background-color: var(--site-bg-light); */
    padding: 0.5rem !important;
    border-radius: 0.5rem !important;
  }
  
  .tick:nth-child(2n+1) .tick-description {
      position: absolute;
      top: 2rem;
      min-width: 15rem !important;
      font-size: clamp(0.85rem, 1vw, 1rem) !important;
    text-align: left;
  }
  
  .tick:nth-child(2n+1) .tick-date {
    position: absolute;
      top: -2rem !important;
    font-size: clamp(0.8rem, 1vw, 1rem);
    text-align: left;
  }
  
  
  .tick:nth-child(2n+1) .tick-amount {
    position: relative;
    top: 0rem !important;
    text-align: start;
    font-size: clamp(0.8rem, 1vw, 1rem);
  }
  
  .tick:nth-child(2n) .tick-amount {
      text-align: left;
      position: absolute;
      /* min-width: 15rem; */
    text-align: start;
    font-size: clamp(0.8rem, 1vw, 1rem);
  }
  
  .tick:nth-child(even) .tick-date,
  .tick:nth-child(even) .tick-amount,
  .tick:nth-child(even) .tick-description {
    position: absolute;
    top: 1.5rem;
    text-align: start;
    font-size: clamp(0.8rem, 1vw, 1rem);
  }
  
  .tick-date,
  .tick-amount,
  .tick-description {
    width: 100%;
  }
  
  .d3-bubble-chart-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(35%);
    top: 100%; /* Position below the circle */
    left: 50%;
    background-color: #f8f9fa70;
    border: 1px solid var(--site-bg-nav-dark);
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    white-space: nowrap;
    /* display: none; */
    white-space: normal;      /* Allow text to wrap */
    max-width: 200px;         /* Set a maximum width */
    word-wrap: break-word;    /* Break long words */
    text-align: left;         /* Align text to the left */
    box-sizing: border-box;   /* Include padding in width calculations */
    min-height: 10rem !important;
  }
  
  .d3-bubble-chart-tooltip::after {
    content: "";
    position: absolute;
    top: -10px; 
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--site-darker-green) transparent;
  }
  
  .d3-bubble-chart-tooltip .tooltip-info{
    display: flex;
    flex-direction: column;
  }
  
  .tooltip-info .text-key{
    color: var(--site-darker-green);
  }
  
  .d3-bubble-chart-tooltip .text-value {
      color: var(--site-primary-dark-bgcolor) !important;
  }
  
  .tick:hover .tooltip {
    display: block;
  }
  
  .interval {
    position: absolute;
    color: #999;
  }
  
  .tick:nth-child(even) .tick-description {
    top: -6rem !important;
    min-width: 15rem;
    font-size: clamp(0.85rem, 1vw, 1.05rem) !important;
  }
  
  canvas#irrChart {
    flex-basis: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    /* width: 800px !important; */
    height: auto;
    max-width: 650px;
  }
  
  @media screen and (max-width: 1100px) {
    canvas#irrChart {
      flex-basis: 50%;
      flex-grow: 0;
      flex-shrink: 0;
      /* width: 800px !important; */
      height: auto;
      max-width: 90%;
    }
  
    .irr-grid{
      padding: 1rem !important;
      height: 80vh !important;
      overflow: auto !important;
    }
    .irr-container{
      left: 2.5rem !important;
    }
  
    .irr-container .site-header-1{
      margin: 0rem !important;
  
    }
    
  }
  
  @media screen and (max-width: 600px) {
    canvas#irrChart {
      flex-basis: 50%;
      flex-grow: 0;
      flex-shrink: 0;
      /* width: 800px !important; */
      height: auto;
      max-width: 400px;
    }
    
  }
  
  #irr-chart-side-card.side-card{
    flex-basis: 100%;
    flex-grow:0;
    flex-shrink: 0;
  
  }
  
  .extra-information{
    position: absolute;
    border: 1px solid white;
    border-radius: 50%;
    display: none;
  }
  
  @media (max-width: 998px) {
    .extra-information{
      display: inline-flex;
    }
  
    .interval, .tick-amount, .tick-description{
      display: none !important;
    } 
  
    .tick:nth-child(2n+1) .tick-amount {
      position: absolute;
      top: 1rem;
      min-width: 15rem !important;
      text-align: start;
      font-size: clamp(0.8rem, 1vw, 1rem);
    }
  
  }
  
  .annotation-title{
    font-size: clamp(1.1rem, 1.5vw, 1.25rem) !important;
    font-family: var(--site-ff);
    font-weight: 200;
  
  }
  
  .main-card-collapser{
    background-color: var(--site-off-white);
    padding: 1rem;
    border-radius: var(--site-border-radius);
    margin: 0.35rem 0rem;
    color: var(--site-primary-text-dark);
    border: 1px solid var(--site-border-lighter-grey);
  }
  
  .main-card-collapser span[data-name="header"] {
    font-family: var(--site-ff) !important;
    font-size: clamp(1rem, 1vw, 1.1rem) !important;
    font-weight: 200;
  }
  
  .text-key{
    font-family: var(--site-ff) !important;
    font-weight: 300;
    font-size: clamp(1rem, 1vw, 1.05rem) !important;
    padding: 0.2rem !important;
    text-transform: capitalize;
  }
  
  .text-value{
    font-family: var(--site-ff) !important;
    font-weight: 300;
    font-size: clamp(1rem, 1vw, 1.05rem) !important;
    color: rgba(0, 0, 0, 0.5) !important;
  
  }
  
  .text-value:hover{
    color: var(--site-orange) !important;
  }
  
  .text-value-bold{
    font-family: var(--site-ff) !important;
    font-weight: 600 !important;
    font-size: clamp(1.2rem, 1vw, 1.4rem) !important;
  
  }
  
  .text-key-bold{
    font-family: var(--site-ff) !important;
    font-weight: 300 !important;
    font-size: clamp(1.2rem, 1vw, 1.4rem) !important;
  
  }
  
  .text-cashflow-timeline-light{
    color: rgba(250, 235, 215, 0.9) !important;
    font-size: clamp(0.9rem, 1vw, 1rem) !important;
  }
  
  .text-cashflow-timeline-header {
    color: var(--site-darker-green);
    font-size: clamp(0.85rem, 1vw, 0.95rem) !important;
    padding-left: var(--site-subheader-padding) !important;
  }
  
  .text-cashflow-timeline-light:hover{
    color: rgba(250, 235, 215, 1) !important;
  }
  
  .li-sublist .text-key {
    padding: 0.5rem 1rem !important;
  }
  
  [id^="additional-options-container-"] .text-key {
      font-size: clamp(1.2rem, 1vw, 1.4rem) !important;
      font-weight: 300;
      text-transform: uppercase;
      color: grey;
      padding-bottom: 1rem;
  }
  
  [id^="additional-options-container-"] .text-value {
    font-size: clamp(1.2rem, 1vw, 1.4rem) !important;
    font-weight: 600;
    text-transform: uppercase;
    padding-bottom: 1rem;
  }
  /*********** < and > navigators ****************/
  /* Needs a relative parent to be attached to. Also, need to include icons in the HTML and apply the styles: 
  
  */
  .nav-left-right-wrapper{
      /* border: 1px solid var(--site-border-lighter-grey);
      border-radius: 1rem; */
      padding: 1rem;
      margin-bottom: 1rem;
      position: absolute;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
  
  }
  
  .nav-left-right-wrapper .nav-left, .left-nav{
      border: 1px solid var(--site-border-light-grey);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.5rem;
      border-radius: 50%;
      margin: 0rem 0.25rem !important;
  }
  
  .nav-right-right-wrapper .nav-right, .right-nav{
    border: 1px solid var(--site-border-light-grey);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 50%;
    margin: 0rem 0.25rem !important;
  }
  
  .right-nav:hover, .left-nav:hover{
    border: 1px solid var(--site-light-grey) !important;
  }
  
  .site-header-1{
    font-family: var(--site-ff);
    font-weight: 300 !important;
    font-size: clamp(1.5rem, 2vw, 2rem) !important;
    text-align: center;
    text-transform: capitalize !important;
    border-radius: var(--site-border-radius);
    margin: 0rem 1.25rem 0.75rem 1.25rem;
    
  }
  
  .site-header-2{
    font-family: var(--site-ff);
    font-weight: 300 !important;
    font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
    text-align: center;
    text-transform: capitalize !important;
    border-radius: var(--site-border-radius);
    margin: 0rem 1rem 0.5rem 1rem;
    
  }
  
  .site-header-3 {
    font-family: var(--site-ff);
    font-weight: 500 !important;
    font-size: clamp(1.25rem, 1.5vw, 1.35rem) !important;
    text-align: center;
    text-transform: capitalize !important;
    margin: 1rem 0rem 0.5rem 0rem;
  }
  
  .site-header-4{
    font-family: var(--site-ff);
    font-weight: 300 !important;
    font-size: clamp(1rem, 1.5vw, 1.15rem) !important;
    text-align: center;
    text-transform: capitalize !important;
    margin: 0rem 1rem 0.5rem 1rem;
    
  }

  .site-header-5{
    font-family: var(--site-ff);
    font-weight: 300 !important;
    font-size: clamp(0.9rem, 1vw, 1.05rem) !important;
    text-align: center;
    text-transform: capitalize !important;
  }
  
  .site-sub-header-3 {
    font-family: var(--site-ff);
    font-weight: 300 !important;
    font-size: 1.1rem !important;
    text-align: center;
    text-transform: uppercase !important;
    margin: 1rem !important;
    width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* margin: 0rem 1rem 0.5rem 1rem; */
  }
  
  
  .header-1-gradiant-colorful{
    background-image: var(--site-gradient-insta);
    padding: 1rem;
    width: 100%;
    color: white;
  
  
  }
  
  .site-notification{
      position: fixed;
      bottom: 0px;
      right: 5rem;
      display: grid;
      grid-template-columns: minmax(200px, auto);
      background-color: var(--site-bg-light);
      box-shadow: var(--bs-d-3);
      z-index: 12;
      border-top-left-radius: var(--site-border-radius);
      border-top-right-radius: var(--site-border-radius);
  }
  
  /**************** Map Icon **************/
  /******* icon should look like this: <div class="text-icon text-icon--default text-icon--forsale text-icon--condo" style="position: absolute; cursor: pointer; text-align: center;">$949</div> */
  .text-icon.text-icon--default {
    width: auto;
    display: flex;
    display: inline-flex;
    align-items: center;
    border-radius: 12px;
    /* background-color: #005684; */
    background-image: var(--site-gradient-insta-darker);
    color: #ffffff;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #ffffff;
    font-size: 1rem;
    position: relative;
    white-space: nowrap;
    transform-origin: 50% calc(100% + 5px);
    /* transform: translate(-50%, calc(-100% - 4px)); */
    transition: background-color 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out;
  }
  .text-icon.text-icon--condo {
    background-position: -7px -123px;
  }
  
  .text-icon {
    width: 21px;
    height: 33px;
    color: #ffffff;
    font-size: 14px;
    line-height: 22px;
    z-index: 10;
  }
  
  .text-icon.text-icon--default:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -1px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 3.5px 0 3.5px;
    border-color: transparent;
    border-top-color: #b24cc1;
    transition: border-top-color 0.2s ease-out;
    border-width: 7px 3.5px 0 3.5px;
    z-index: -1;
    transform: translate(-50%, -1px);
  }
  .text-icon.text-icon--default:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -1px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 3.5px 0 3.5px;
    border-color: transparent;
    border-top-color: #b24cc1;
    transition: border-top-color 0.2s ease-out;
    border-width: 5.5px 4.5px 0 4.5px;
    z-index: -2;
    transform: translate(-50%, 0px);
  }
  
  .KPI-sliders-container{
    /* border: 1px solid var(--site-border-light-grey); */
    border-radius: var(--site-border-radius);
    
  
  }
  
  .KPI-sliders-container .grid-row-1-col-1 {
    margin: 0.5rem;
  }
  
  .leaflet-popup-content{
    /* Customizing the default component of the leaflet maps */
    margin: 0rem !important;
    padding: 0rem !important;
    min-width: 20rem !important;
  
  }

  .leaflet-popup-content button {
    margin: 0;
  }
  
  .layer-control.leaflet-control {
    background: white;
    border: 1px solid var(--site-light-off-white);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--bs-d-2);
  }
  
  .leaflet-control a:link{
    padding: 0px;
  }

  .leaflet-control .checkbox-wrapper .cbx span{
    font-family: var(--site-ff);
    font-size: 1.05rem !important;
    font-weight: 200;
  }

  .leaflet-control .checkbox-option {
    padding-top: 1rem;
  }

  
  /****** comparison-grid-table **********/
  /* Centering the grid */
  .comparison-grid-table {
    display: flex;
    align-items: stretch !important;
    justify-content: center;
    padding: 1rem;
    flex-direction: column;
  }
  
  #projectSummaryList.flex-ul-column {
    background-color: var(--site-white);
  }
  
  /* Styling the column and the row */
  .comparison-grid-table div[data-type="column-header"], .comparison-grid-table div[data-type="row-header"]{
    text-transform: capitalize;
    padding: 1rem;
    font-family: var(--site-ff);
    font-weight: 500;
    border-left: 1px solid var(--site-border-lighter-grey);
    border-bottom: 1px solid var(--site-border-lighter-grey);
  }
  
  .comparison-grid-table div[data-type="cell"] {
    padding: 1rem;
    font-family: var(--site-ff);
    font-weight: 200;
  }
  
  .border-site-radius{
    border: 1px solid var(--site-border-lighter-grey);
    border-radius: 1rem !important;
  }
  
  .cashflow-table .cashflow-header {
    background-color: transparent !important;
  }
  
  .cashflow-table .cashflow-header:hover {
    background-color: transparent !important;
  }
  
  .cashflow-table .cashflow-header:hover {
    border-bottom: 2px solid var(--site-green);
    border-radius: 0;
    padding-bottom: calc(0.75rem - 2px);
  }
  
  [id *="table-cashflow-cashflows-container"] tbody tr td:first-child{
    flex: auto !important;
  }
  
  [id *="table-cashflow-cashflows-container"] tbody tr td:first-child, [id *="table-cashflow-cashflows-container"] tbody tr td {
    flex: auto;
  }
  
  [id *="table-cashflow-cashflows-container"] thead tr:hover {
    background-color: transparent !important;
    border-radius: 0 !important;
    color: #44a79d;
    border: none !important;
    padding-left: 2px !important;
  }
  
  [id *="table-cashflow-cashflows-container"] tbody tr:hover {
    background-color: transparent !important;
    border-radius: 0 !important;
    color: #44a79d;
    border: none !important;
    padding-left: 2px;
    
  }
  
  [id *="table-cashflow-cashflows-container"] tbody{
    border-radius: 0px;
    border: none;
    
  }
  
  /******** proforma-items-table styling ***********/
  #proforma-items-table tr td:nth-child(1), #proforma-items-table th:nth-child(1) {
    width: 25rem !important;
  }
  
  #proforma-items-table tr{
    padding: 1.15rem !important;
  }
  
  #proforma-items-table tr:hover i{
    display: inline-flex !important;
  }
  
  #proforma-items-table td span {
    font-size: clamp(0.9rem, 1vw, 1rem);
  }
  
  #proforma-items-table td {
    min-width: 8rem !important;
  }
  
  .fa-pen:before {
    content: "\f304";
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .hide-i{
    cursor:pointer;
  }
  
  .hide-i i{
    display: none !important;
    
  }
  
  /* .hide-i:hover i{
    display: inline-flex !important;
  } */
  .fixed-floating-container-centered{
    position: fixed !important;
    max-height: 65% !important;
    top: 15% !important;
    width: 60vw;
    left: 20vw;
    display: flex !important;
    align-items: start !important;
    justify-content: center !important;
    background-color: var(--site-border-lighter-grey);
    padding: 1rem;
    border-radius: var(--site-border-radius) !important;
    border: 1px solid var(--site-border-light-grey) !important;
  
  }
  
  .floating-container {
    position: absolute;
    left: 5rem;
    top: 5rem;
    z-index: 15;
    display: flex;
    background-color: white;
    border-radius: var(--site-border-radius);
    box-shadow: var(--bs-d-2);
    width: 90%;
    min-height: 15rem;
    z-index: 1199;
  }
  
  [id^="proforma-item-form-wrapper-"] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin: 2rem !important;
  }
  
  .proforma-item-form-wrapper [data-role="row"]{
    padding: 1rem !important;
  }
  
  .proforma-item-form-wrapper select, .proforma-item-form-wrapper input {
    background-color: white;
  }
  
  #proforma-items-table-wrapper{
      max-width: 80vw;
      overflow: auto;
  }
  
  #left-side-card {
    position: sticky;
    top: -1rem;
    margin-top: -1rem;
    z-index: var(--top-2-layer) !important;
    
  }
  
  #left-side-menu {
      position: relative;
      top: -1rem;
    transition: width 600ms ease;
  }
  
  #left-side-menu:hover {
      width: 15rem !important;
  }
  
  #left-side-menu nav.nav-bar:hover {
      width: 15rem !important;
  }
  
  .left-card-border-radius{
    border-radius: var(--left-card-border-radius);
    border-right: 1px solid var(--site-border-lighter-grey) !important;
  }
  
  .foot-note-text {
    font-family: var(--site-ff);
    font-weight: 200;
    font-size: clamp(0.7rem, 1vw, 0.95rem) !important;
  }
  
  .cashflow-distribution-message {
    cursor: pointer !important;
  }
  .cashflow-distribution-message .text-warning{
    font-size: clamp(0.8rem, 1vw, 1rem) !important;
  }
  
  .add-project {
    box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);
    -webkit-font-smoothing: antialiased;
    font-family: var(--site-ff);
    font-size: 1rem;
    letter-spacing: normal;
    -webkit-align-items: center;
    align-items: center;
    background-color: #329e93 !important;
    /* background-image: none; */
    -webkit-border-radius: 16px;
    border-radius: 20rem;
    /* color: #e3f2ff; */
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    font-weight: 500;
    height: 40px !important;
    min-width: 40px;
    overflow: hidden;
    padding: 0 24px 0 0;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
}
  
  @media screen and (max-width: 576px) {
    .add-project {
      box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);
      -webkit-font-smoothing: antialiased;
      font-family: var(--site-ff);
      font-size: 1rem;
      letter-spacing: normal;
      -webkit-align-items: center;
      align-items: center;
      background-color: #329e93 !important;
      /* background-image: none; */
      -webkit-border-radius: 16px;
      border-radius: 50%;
      /* color: #e3f2ff; */
      display: -webkit-inline-box;
      display: -webkit-inline-flex;
      display: inline-flex;
      font-weight: 500;
      height: 4rem !important;
      width: 4rem !important;
      min-width: 4rem !important;
      border-radius: 50% !important;
      overflow: hidden;
      padding: 0 24px 0 0;
      align-items: center;
      justify-content: center;
      cursor: pointer !important;
      position: relative;
      left: 0rem;
      transition: all 300ms ease-in-out;
    }
  
    .add-project:hover{
      border-radius: 16px !important;
      min-width: 12rem !important;
      height: 4rem !important;
    }
  
    
    
    .add-project-link{
      display: none !important;
    }
    
    .add-project-link:hover{
      display: inline-flex !important;
    }
  
    .add-project:hover .add-project-link{
      display: inline-flex !important;
    }
  }
  .add-project-link {
    font-family: var(--site-ff);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    padding: 0rem 1rem;
    color: white;
    font-weight: 600;
  }
  
  .align-left {
    text-align: left !important;
    align-self: start !important;
  }
  
  .site-rounded-corners {
    border-radius: var(--site-border-radius);
  }
  
  .rounded-corners {
    border-radius: 1rem;
  }
  
  .map-context-title{
    background-color: #000000ba;
    position: relative;
    color: wheat;
    padding: 0.25rem !important;
  }
  
  .text-capitalize{
    text-transform: capitalize !important;
  }
  
  .place-top-right{
    top: 0rem !important;
    bottom: unset !important;
    right: 0rem !important;
    left: unset !important
  }
  
  .add-more-btn{
    padding: 14px;
    color: white;
    font-family: var(--site-ff);
    font-size: clamp(1rem, 1vw, 0.9rem);
  }
  
  .static-skeleton {
    background-color: #e2e5e7;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-size: 40px 100%;
    background-repeat: no-repeat;
    background-position: left -40px top 0;
    /* -webkit-animation: shine 1s ease infinite; */
    /* animation: shine 1s ease infinite; */
  }
  
  .proforma-note-wrapper {
    width: 100%;
    padding: 1rem !important;
  }
  
  .proforma-note {
    background-color: var(--site-light-grey);
    color: var(--site-link-light);
    border-radius: var(--site-border-radius);
    padding: 0.75rem 0.75rem;
  }
  
  .detailed-equity-container, .absolute-pop-up-box {
    position: fixed;
    min-width: 50vw !important;
    background-color: white !important;
    min-height: 60vh !important;
    z-index: var(--top-1-layer);
    left: 20%;
    top: 25%;
    border-radius: var(--site-border-radius);
    border: 1px solid var(--site-lightest-grey);
    overflow: auto;
  }
  
  .tooltip-left-arrow .site-tooltiptext::after {
    top: 50%;
    border-color: transparent transparent transparent #555;
    left: 100%;
    margin-left: 0rem !important;
  }
  
  .tooltip-left-arrow .site-tooltip{
    width: 100%;
  }
  
  .tooltip-left-arrow .site-tooltiptext {
    top: -200% !important;
    left: -102% !important;
    min-height: fit-content !important;
  }
  
  .link-extra{
    border-bottom: 1px dotted;
  }
  
  .bottom-1rem{
    bottom: 1rem !important;
  }
  
  .messages-feedback-dark-green, .messages-feedback-primary-dark{
    border-radius: var(--site-border-radius) !important;
    background-color: var(--site-dark-green) !important;
    color: var(--site-bg-light) !important;
    padding: 1rem !important;
    visibility: visible; /* Ensure visibility is also set to transition */
    transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out; /* Add visibility to the transition */
  
  }
  
  .feedback-message{
    font-family: var(--site-ff);
    font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
    font-weight: 300;
    padding: 1.5rem 1rem !important;
  }
  
  .loading-container-insta{
    background-image: var(--site-gradient-insta-darker-reverse) !important;
    border-radius: 1rem;
    color: white;
    margin: 2rem 0rem;
    width: 100%;
  }
  
  table#unit-mix-components-summary tr{
    transition: all 300ms ease;
  }
  
  .summary-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-basis: 100%;
    flex-grow: 1;
    flex-shrink: 0;
    margin: 0.35rem;
  }
  
  .summary-wrapper .summary-icon-wrapper{
    width: 0rem;
  }
  
  .summary-wapper-icon-text{
    flex-basis: 35%;
  }
  
  .sensitivity-analysis-title{
    font-size: clamp(1.75rem, 2vw, 2.5rem) !important;
    font-family: var(--site-ff);
    color: var(--site-bg-nav-dark);
    font-weight: 700;
  }
  
  .sensitivity-analysis-subtitle{
      font-size: clamp(0.95rem, 1.5vw, 1.05rem);
      color: #6c757d !important;
      padding: 0rem 1rem;
  }
  
  .sensitivity-analysis-table tbody tr:hover{
    background-color: var(--site-primary-bgcolor) !important;
    color: var(--site-dark-green) !important;
    border-left: 4px solid darkturquoise !important;
    padding-left: 0px;
  }
  
  /* sensitivity analysis table light theme */
  .sensitivity-analysis-table.light thead tr, .sensitivity-analysis-table.light #profitRow, .sensitivity-analysis-table.light #ROIRow{
    background-color: var(--site-dark-green) !important;
    color: wheat !important;
  }
  
  .sensitivity-analysis-table.light tr[data-indent="1"]{
    background-color: var(--site-border-lighter-grey);
    color: #464646 !important;
  }
  
  .sensitivity-analysis-table.light tbody tr[data-indent="2"] {
    background-color: #efefef;
    color: #494949 !important;
    border-left: 4px solid transparent;
  }
  
  .sensitivity-analysis-table.light tbody tr[data-indent="3"] {
    background-color: #f9f9f9;
    color: var(--site-bg-nav-dark) !important;
  }
  
  .sensitivity-analysis-table.light tbody tr[data-indent="4"] {
    background-color: #fff;
    color: var(--site-bg-nav-dark);
  }
  
  
  /* sensitivity-analysis-table dark theme */
  .sensitivity-analysis-table.dark thead tr{
    background-color: var(--site-bg-nav-dark);
    color: var(--site-border-lighter-grey);
  }
  
  .sensitivity-analysis-table.dark tr[data-indent="1"]{
    background-color: var(--site-dark-green);
    color: wheat;
  }
  
  .sensitivity-analysis-table.dark tbody tr[data-indent="2"] {
    background-color: var(--site-dark-turquoise) !important;
    color: white !important;
  }
  
  .sensitivity-analysis-table.dark tbody tr[data-indent="3"] {
    background-color: #389e95 !important;
    color: white !important;
  }
  
  .sensitivity-analysis-table.dark tr[data-indent="4"] {
    color: var(--site-dark-green) !important;
  }
  
  .sensitivity-analysis-table thead th {
    font-size: clamp(1rem, 1.5vw, 1.1rem) !important;
    font-family: system-ui;
    font-weight: 500;
  }
  
  
  @media screen and (max-width: 500px) {
    .sensitivity-analysis-table thead tr, .sensitivity-analysis-table tbody tr{
      display: flex !important;
      flex-wrap: nowrap !important;
      flex-direction: row !important;
    }
  
    .live-analysis-subitem-content{
      /* ml-3 pl-4 relative d-flex align-items-center justify-content-start */
      position: relative !important;
      display: none;
      align-items: center;
      justify-content: flex-start;
      margin-left: 0.25rem !important;
      /* padding-left: 1rem !important; */
      display: -webkit-box;
      -webkit-line-clamp: 1; /* This limits the text to one line */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    
    }
  
    .sensitivity-analysis-table tbody tr.hidden {
      display: none !important;
    }
  
  }
  
  .cashflow-bubble{
      background-color: var(--site-bg-primary-light);
      border: 1px solid var(--site-border-lighter-grey);
      text-transform: uppercase;
      margin-top: 1rem;
  }
  
  .text-disabled{
    cursor: default;
    color: #6c757d !important;
  }
  
  .svg-container {
    display: inline-flex;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    align-items: center;
    justify-content: center;
  }
  
  .svg-container:hover {
    background: #e1e1e1;
    border: 1px solid #bababa !important;
  }
  
  .site-top-error-container {
    position: fixed;
    height: 5rem !important;
    width: 50%;
    margin-bottom: 1rem !important;
    border-radius: var(--site-border-radius);
    top: 6.7rem !important;
  }
  
  table.sensitivity-analysis-table td, table.sensitivity-analysis-table td div:not([class*="site-title"]){
    /* padding: .75rem; */
    vertical-align: top;
    font-size: clamp(0.85rem, 1vw, 1rem) !important;
  }
  
  .top-scrollbar{
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 16px; /* Typical height of a scrollbar */
    border: none;
  }
  
  .text-dt {
      padding-left: 1rem !important;
    text-align: left !important;
  }
  
  #cashflow-table-title {
    font-family: var(--site-ff);
    font-size: clamp(1.1rem, 1.25vw, 1.2rem) !important;
    font-weight: 200;
    display: flex;
    align-items: start !important;
    justify-content: center !important;
    white-space: normal;
    padding: 2rem 1rem !important;
    padding-bottom: 0rem !important;
    text-transform: capitalize;
  }
  
  .site-mini-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    border: 1px solid var(--site-border-light-grey);
    border-radius: var(--site-border-radius);
    min-height: 20rem !important;
    max-height: 40rem !important;
    min-width: 12rem !important;
    /* max-width: 25rem !important; */
    position: relative;
    margin: 1rem;
    padding: 1rem;
    transform: all 600ms ease-in-out;
    box-shadow: var(--bs-d-4) !important;
    /* overflow: auto; */
  
  }
  
  .site-mini-card:hover {
    cursor: pointer;
  }
  
  .site-mini-card .site-title{
    font-family: var(--site-ff);
    font-weight: 200;
    font-size: var(--font-size-title) !important;
    text-transform: capitalize !important;
    margin: 1rem;
    color: grey;
    
  }
  
  .site-mini-card .site-subtitle{
    font-family: var(--site-ff);
    font-weight: 200;
    font-size: var(--font-size-subtitle) !important;
    color: var(--site-darker-green) !important;
    
  }
  
  .site-mini-card:hover{
    /* background-image: var(--site-gradient-bg-turquoise); */
    background-color: var(--site-dark-green) !important;
    color: white !important;
  }
  
  .site-mini-card:hover .site-title{
  color: antiquewhite;
  }
  
  .site-mini-card:hover .site-subtitle{
    color: white !important;
  }
  
  .site-mini-card.selected, .site-mini-card.selected .site-subtitle{
    background-color: var(--site-dark-green) !important;
    color: white !important;
  }
  
  .site-mini-card.selected .site-title{
    background-color: var(--site-dark-green) !important;
    color: antiquewhite !important;
  }
  
  button svg {
    margin: 0.1rem 1rem;
  }
  
  svg.notification {
    width: 3rem;
    height: 3rem;
    color: #f5deb39e;
    margin-left: 1rem;
    border: 1px solid transparent;
    border-radius: 50%;
    padding: 0.5rem;
    transition: all 300ms ease;
  }
  svg.notification:hover {
    width: 3rem;
    height: 3rem;
    color: #f5deb3;
    margin-left: 1rem;
    /* border: 1px solid #f5deb3; */
    border-radius: 50%;
    padding: 0.5rem;
  }
  
  .notification-badge{
    width: 1.5rem;
    height: 1.5rem;
    background-color: #f5deb39e;
    position: absolute;
    top: 0rem;
    left: 3.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms ease;
  }
  
  .nav-notification-button{
    position: relative;
  }
  
  .notification-number{
    position: absolute !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--site-bg-nav-dark);
  }
  
  .notification-badge:hover, a.notification:hover .notification-badge{
    background-color: #f5deb3 !important;
  
  }
  
  .notification-box {
    position: absolute;
    background-color: white;
    width: 35rem !important;
    display: flex;
    flex-direction: column;
    top: 5rem;
    border-radius: var(--site-border-radius);
    height: auto;
    min-height: 10rem;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--site-lightest-grey);
    box-shadow: var(--bs-d-2);
    top: 3.7rem;
    right: 0rem !important;
    
  }
  
  .notification-box.light{
    background-color: white;
  
  }
  
  .notification-box .header2{
    font-size: clamp(1.5rem, 1vw, 2rem) !important;
    font-family: var(--site-ff);
    font-weight: 600;
    margin: 1rem 2rem !important;
  }
  
  .notification-box.light .header2 {
    color: var(--site-bg-nav-dark);
    border-bottom: 1px solid lightgrey;
    margin-left: 0rem !important;
    margin-right: 0rem !important;
    padding-left: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .notification-item-image {
    width: 4rem !important;
    height: 4rem !important;
    border: 2px solid #ffa900;
    border-radius: 50%;
    padding: 1px;
    object-fit: cover;
  }
  
  .notification-image-icon {
    font-size: 1.15rem !important;
  }
  
  .notification-image-icon-wrapper {
    width: 2rem !important;
    height: 2rem !important;
    background-color: #6b5656;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    top: 2.5rem;
    left: 3.5rem;
    background-image: linear-gradient(45deg, #184e18, #087208, #4a854a, #279927, transparent);
  }
  
  .notification-message-wrapper {
    flex-basis: 70%;
    flex-grow: 0;
    flex-shrink: 0;
  }
  
  .notification-item-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 1rem;
    margin-bottom: 2rem;
    padding: 0.75rem;
    margin-right: 1rem;
  }
  
  .notification-box.light .notification-message{
    font-family: var(--site-ff);
    font-size: clamp(0.9rem, 1vw, 1rem) !important;
    color: var(--site-bg-nav-dark);
    padding: 0rem 0.5rem !important;
    text-transform: lowercase;
  }
  
  .notification-from{
    font-family: var(--site-ff);
    font-size: clamp(1rem, 1vw, 1.1rem) !important;
    font-weight: 600;
    color: var(--site-dark-turquoise);
    /* text-transform: capitalize !important; */
  }
  
  .notification-box.light .notification-time-stamp{
    font-family: var(--site-ff);
    font-size: clamp(0.9rem, 1vw, 1rem) !important;
    color: var(--site-medium-grey);
    padding: 0rem 0.5rem !important;
    text-transform: lowercase;
  }
  
  .notification-status-icon-new{
    background-color:hsla(0, 0%, 50%, 0.5);
    color: white;
  }
  
  .notification-status-icon-new{
    background-color:hsla(0, 0%, 50%, 0.5);
    color: lightgrey;
  }
  
  .notification-item-image-wrapper {
    position: relative;
    flex-basis: 25%;
    flex-grow: 0;
    flex-shrink: 1;
  }
  
  .notification-icon-wrapper {
    position: absolute;
    top: 1.25rem;
    left: 4.25rem;
    background-color: white;
    background-image: linear-gradient(45deg, #2fb064, #1d894b, #2fb064, transparent);
    border-radius: 50%;
    /* border: 1px solid transparent; */
    width: 2.5rem !important;
    height: 2.5rem !important;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  
  .notification-status-icon-wrapper {
    display: flex;
    flex-basis: 10%;
    flex-grow: 0;
    flex-shrink: 1;
  }
  
  .notification-box.light .notification-status-icon-new {
    background-color: hsl(0deg 0% 76.83% / 50%);
    color: #393939;
    font-size: 1.25rem !important;
    margin-right: 1.25rem;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  
  .notification-status-dot{
    width: 12px !important;
    height: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    
  }
  
  .notification-box.light .notification-status-dot.new{
    background-color: var(--site-dark-green) !important;
    
  
  }
  
  .notification-box.light .notification-status-dot.visited{
    background-color: transparent;
  }
  
  .notification-item-wrapper:hover {
    background-color: #ebebebc2;
    border-radius: var(--site-border-radius);
    padding: 0.75rem;
    margin-left: 1rem;
    margin-bottom: 2rem;
    margin-right: 1rem;
  }
  
  .notification-item-wrapper:hover .notification-status-dot {
    background-color: lightgrey !important;
  }
  
  .notification-badge.feature-announcement {
    width: fit-content;
    height: auto !important;
    border-radius: var(--site-border-radius);
    padding: 0.25rem 0.5rem !important;
    font-size: clamp(0.5rem, 1vw, 0.9rem) !important;
    white-space: nowrap;
    background: linear-gradient( 301deg,  rgba(226,66,249,0.94) 20.2%, rgba(79,147,249,1) 77.3% );
    background-size: 200% 200%; 
    color: white;
    background-position: right center;
    transition: all 600ms ease;
    /* border: 1px solid transparent !important; */
  }
  
  .notification-badge.feature-announcement:hover {
    background-position: left center;
  }
  
  .site-key, .site-value {
    font-family: var(--site-ff) !important;
    font-size: clamp(1rem, 1vw, 1.1rem) !important;
    padding-bottom: 0rem !important;
    padding-left: 0.25rem;
  }
  
  .site-value{
    padding-bottom: 1rem !important;
  }
  
  .site-key{
    color: lightgray;
  }
  
  .site-key:hover{
    color: antiquewhite !important;
  }
  
  .site-mini-card:hover .site-key{
    color: var(--site-border-light-grey) !important;
  }
  
  .site-mini-card.selected .site-key{
    color: var(--site-border-lighter-grey);
  }
  
  .site-mini-card:hover .site-value:hover{
    color: antiquewhite !important;
  }
  
  .site-key.white:hover{
    color: white !important;
  }
  
  
  .site-mini-card .site-key{
    color: var(--site-darker-green);
  }
  
  .site-consent-on-dark{
    color: white !important;
  }
  
  .site-consent-on-dark:hover{
    color: var(--site-bg-nav-dark) !important;
  }
  
  .site-mini-card.selected .site-consent-on-dark:hover {
    color: white !important;
  }
  
  .top-middle-feedback-container {
    position: absolute !important;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0rem !important;
    bottom: unset !important;
    width: 30rem !important;
    border-radius: var(--site-border-radius);
    padding: 1.5rem 1rem !important;
    left: 35%;
    z-index: var(--top-3-layer) !important;
    transition: all 300ms ease;
    flex-wrap: wrap;
  }
  
  .top-middle-feedback-container.dark{
    background-color: var(--site-dark-green) !important;
    color: antiquewhite !important;
  }
  
  .button-insta {
    margin: 0.5rem 1rem 0rem 2.5rem;
    padding: 1rem 0.5rem;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    border-radius: 10px;
    display: block;
    border: 0px;
    box-shadow: 0px 0px 14px -7px #df4ff8;
    background-image: linear-gradient(45deg, #8f78f9 0%, #c95bf9 51%, #4f93f8 100%);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    font-family: var(--site-ff);
    font-weight: 400;
  }
  
  .button-insta:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
  }
  
  .button-dark-green-linear {
    /* margin: 0.5rem 1rem 0rem 2.5rem; */
    padding: 1rem 0.5rem;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    border-radius: 10px;
    display: block;
    border: 0px;
    box-shadow: 0px 0px 14px -7px #268e83;
    background-image: linear-gradient(45deg, #40a89d 0%, #1a6860 51%, #307d74 100%);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    text-transform: uppercase;
    font-family: var(--site-ff);
    font-weight: 400;
  
  }
  
  .button-dark-green-linear:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
  }
  
  .cashflow-timeline-search{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
  }
  
  .cashflow-timeline-search #search-field-wrapper{
    margin: 0rem 0rem !important;
  }
  
  @media screen and (max-width: 1200px) {
    .cashflow-timeline-search{
      display: flex;
      flex-direction: column;
      width: 100%;
      position: relative;
      top: 0rem !important;
    }
    
  }
  
  .mini-cards-container {
    display: flex;
    align-items: start;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
  }
  
  
  .mini-cards-container .site-mini-card.selected {
    flex-basis: 60%;
    flex-grow: 0;
    flex-shrink: 0;
    max-width: unset !important;
  }
  
  @media screen and (max-width: 898px){
    .mini-cards-container{
      flex-wrap: wrap;
    }
    .mini-cards-container .site-mini-card.selected{
      flex: 1;
    }
  }
  
  .summary-line{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  
  #form_set{ /* for formsets styling*/
    position: sticky; 
  }
  
  .dx-none {
    display: unset;  /* removing display flex */
    display: none !important;
  }
  
  .btn-site-default svg {
    margin: 0;
  }
  
  .notification-announcement{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: var(--site-bg-nav-dark);
      margin: 2rem;
      font-family: var(--site-ff);
      font-weight: 500;
  
  }
  
  .summary-table-item-name {
    font-family: var(--site-ff) !important;
    font-weight: 400 !important;
    color: var(--site-dark-green) !important;
    line-height: 3rem;
  }
  
  .overflow-y-auto{
    overflow-y: auto;
  }
  
  .right-side-card-img-container{
    max-height: 20vh !important;
    width: auto !important;
    max-width: 35vw !important;
  }
  
  .round-border-gradient-green {
    border: 1px solid #54a94a;
    border-radius: 50%;
    padding: 0.5rem;
    width: 4rem !important;
    height: 4rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: var(--bs-d-2);
    background-image: var(--site-dark-green-gradiant); */
    color: var(--site-dark-green);
  }
  
  .public-review-pop-up{
    position: fixed !important;
    background-color: white;
    padding: 2rem !important;
    max-height: 50vh !important;
    border-radius: var(--site-border-radius);
    border: 1px solid var(--site-border-lighter-grey);
    z-index: var(--top-1-layer);
    min-width: 60vw !important;
    box-shadow: var(--bs-d-0);
    max-width: 80vw !important;
    left: 25%;
    right: 25%;
    top: 30vh !important;
    
  }
  
  .chat-message-container {
      background-color: var(--site-light-off-white);
      padding: 1rem;
      border-radius: var(--site-border-radius);
      margin-bottom: 2rem;
  }
  
  #rental-building-nav-tabs .nav-item:hover {
    border-left: 6px solid var(--site-dark-green) !important;
  }
  
  #rental-building-nav-tabs .nav-item.active {
    border-left: 6px solid var(--site-dark-green) !important;
  }
  
  table#table-payments th {
    font-family: var(--site-ff);
    font-weight: 200 !important;
    font-size: clamp(1rem, 1vw, 1.05rem) !important;
    text-transform: capitalize !important;
    color: antiquewhite !important;
    background-color: var(--site-dark-green);
    border: 1px solid var(--site-border-lighter-grey);
  }
  
  .top-navbar-nav .nav-item ul{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin-right: 2rem;
  }

  .top-navbar-nav form{
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  /* .site-navbar{
    max-height: var(--site-navbar-height-lg) !important;
  } */
  
  .search-filter-bar {
      position: relative !important;
      border-bottom: 1px solid var(--site-border-lighter-grey);
      z-index: var(--top-3-layer);
      background-color: white;
      flex: 1;
      display: grid;
      align-items: center;
      justify-content: start;
      grid-template-columns: 1fr 1fr 1fr;
      row-gap: 0.75rem;
      padding: 1rem;
      column-gap: 1rem;
  }
  
  .map-filter.double-range {
    min-width: 275px;
    max-width: 450px;
    position: absolute;
    z-index: var(--top-2-layer);
    background-color: var(--site-primary-trim-bgcolor);
    color: var(--site-primary-trim-color);
    min-height: 10rem;
    padding: 1rem 1rem;
    margin: 1.5rem 0.5rem;
    border-radius: var(--site-border-radius);
    border: 1px solid var(--site-primary-trim-border);
    min-height: 13rem;
    top: 3.33rem;
    padding-bottom: 4rem;
  }
  
  .map-filter .label-in label {
    position: absolute;
    z-index: 20;
    left: 0rem;
    top: -1.5rem;
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    text-transform: capitalize;
  }
  
  .map-filter.double-range .site-input-min-height {
    min-height: 2rem !important;
    padding-top: 0rem !important;
  }
  
  .double-range-container-wrapper {
    max-width: 400px !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0rem 0rem 0rem !important;
  }
  
  .double-range-title {
    margin: 0rem 1rem 1.5rem 1rem !important;
    text-transform: capitalize;
    font-weight: 600;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
  }
  
  .range-slider {
    height: var(--slider-bar-height);
    border-radius: var(--site-border-radius);
    background-color: var(--site-border-lighter-grey);
    position: relative;
  }
  
  .range-slider .range-progress {
    height: var(--slider-bar-height);
    position: absolute;
    left: 0;
    right: 0;
    border-radius: var(--site-border-radius);
    /* background-color: var(--site-dark-turquoise); */
    background: linear-gradient(90deg, #76fae9, #18afb1);
  }
  
  input[type=range] {
    position: relative;
    top: calc(-1 * var(--slider-bar-height) * 2 );
    width: 150%;
    -webkit-appearance: none;
    height: var(--slider-bar-height);
    background-color: none !important;
    border-radius: var(--slider-bar-border-radius);
    outline: none;
    /* transform: rotate(-90deg); */
    margin-bottom: 3.2rem;
    margin-top: 3rem;
  }
  
  .range-input {
    position: relative;
  }
  
  .range-input input {
    position: absolute;
    top: calc(-1*var(--slider-bar-height));
    /* left: 0.5rem; */
    height: var(--slider-bar-height) !important;
    width: 100%;
    background: none;
    pointer-events: none;
    /* -webkit-appearance: none; */
    margin: 0;
    padding: 0rem !important;
  }
  
  .range-value {
      position: absolute !important;
      margin-bottom: 0rem;
      background-color: var(--site-dark-turquoise);
      margin-top: 1.25rem !important;
      padding: 0.4rem;
      /* border-radius: var(--button-border-radius); */
      color: #fff;
      font-size: clamp(0.9rem, 1vw, 1rem);
      border-radius: 0.4rem;
      min-width: 4rem;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .range-value[name="min-range-value"]{
    bottom: 1.75rem !important;
  }
  
  #year-built-range-wrapper .range-input, #year-built-range-wrapper .range-slider{
    top: 3rem !important
  }
  
  .range-input input[type="range"]::-webkit-slider-thumb{
    height: calc(var(--slider-bar-height) * 3);
    width: calc(var(--slider-bar-height) * 3);
    border-radius: 50%;
    pointer-events: auto;
    -webkit-appearance: none;
    cursor: pointer;
    background: linear-gradient(90deg, #10ceb5, #25cbce);
    border: 2px solid white;
    transition: box-shadow 0.3s ease;
    box-shadow: var(--bs-d-7);
  }
  
  .range-input input[type="range"]:hover::-webkit-slider-thumb {
    box-shadow: 0 0 1px 8px rgba(1, 126, 115, 0.5); /* Less spread-out halo */
  }
  
  .range-input input[type="range"]:hover::-moz-range-thumb {
    box-shadow: 0 0 1px 8px rgba(1, 126, 115, 0.5); /* Less spread-out halo */
  }
  
  .range-input input[type="range"]:active::-webkit-slider-thumb {
    box-shadow: 0 0 1px 12px rgba(1, 126, 115, 0.3); /* Slightly larger glow */
  }
  
  .range-input input[type="range"]:active::-moz-range-thumb {
    box-shadow: 0 0 1px 12px rgba(1, 126, 115, 0.3); /* Slightly larger glow */
  }
  
  .range-input input[type="range"]::-moz-range-thumb{
    height: calc(var(--slider-bar-height) * 3);
    width: calc(var(--slider-bar-height) * 3);
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    background: rgba(1, 126, 115, 1);
    border: 3px solid #fff;
    transition: box-shadow 0.3s ease;
  }
  /* input[type="range"]::-moz-range-thumb.active {
    background: rgba(1, 126, 115, 0.6);
  }
  
  input[type="range"]::-webkit-slider-thumb.active {
    background: rgba(1, 126, 115, 0.6); 
  } */
  
  input[type="range"]:hover::-webkit-slider-thumb {
    box-shadow: 0 0 0px 8px rgb(30 255 141 / 20%);
  }
  
  input[type="range"]:hover::-moz-range-thumb.active {
    box-shadow: 0 0 0px 8px rgb(30 255 141 / 20%);
  }
  
  .filter-button-container {
    position: relative;
    height: 3rem !important;
    width: 100% !important;
    border: 1px solid var(--site-border-lighter-grey);
    padding: 0.65rem 1.5rem;
    border-radius: 10rem;
    background-color: #fefefe;
    /* margin: 0rem 0.5rem; */
    color: darkgray;
    /* min-width: 12rem !important; */
    /* max-width: 250px !important; */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .filter-button-container:hover{
    border: 1px solid var(--site-dark-green);
    color: var(--site-dark-green) !important;
  
  }
  
  .filter-button-container.active{
    border: 1px solid var(--site-dark-green);
    color: var(--site-dark-green) !important;
  
  }
  
  /* .filter-button-wrapper{
    margin: 0rem 1rem
  } */
  
  .keyword { color: #93ceff; }
  .string { color: #fffbcf; }
  .method { color: #85ff8b; }
  .comment { color: grey; }
  
  .full-address-list-price{
      bottom: 1rem;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: white;
      width: 100%;
      padding: 0.5rem !important;
      border-top: 1px solid var(--site-border-lighter-grey);
      border-bottom: 1px solid var(--site-border-lighter-grey);
  
  }
  
  .sticky-note-orange {
    position: absolute;
    top: 20%;
    right: 0;
    background-color: #fba803;
    padding: 0.5rem 1rem !important;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    border: 1px solid var(--site-border-lighter-grey);
    border-left: 0px;
  }
  
  span.sticky-note-text {
    font-size: clamp(0.8rem, 1vw, 1rem);
    font-family: var(--site-ff);
    font-weight: 200;
    cursor: pointer;
    color: white;
  }
  
  .listing-brochure-container{
    position: fixed;
    top: 10rem !important;
    left: 20%;
    z-index: var(--top-1-layer);
    border: 1px solid var(--site-border-lighter-grey);
    background-color: white;
    padding: 1rem;
    border-radius: var(--site-border-radius);
    box-shadow: var(--bs-d-2);
  }
  
  .classic-business-card {
    display: flex;
    flex-direction: column;
    align-items: self-start;
    /* padding: 0.5rem; */
    border: 1px solid var(--site-border-lighter-grey);
    border-radius: var(--site-border-radius);
    max-height: 20rem;
    margin: 1rem;
  }
  
  .classic-business-card .company-section {
    flex: 1;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: end;
    flex-direction: column;
  }
  
  
  .classic-business-card .person-section {
    flex: 1;
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: start;
    flex-direction: column;
    padding: 0.5rem 1rem !important;
  }
  
  .classic-business-card .person-section.center {
    flex: 1;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    padding: 0.5rem 1rem !important;
    padding-top: 1rem !important;
  }
  
  .business-card-title{
      font-size: clamp(1rem, 1.5vw, 1.1rem) !important;
      font-family: var(--site-ff);
      font-weight: 300;
      text-transform: capitalize;
      color: var(--site-medium-grey);
      margin-bottom: 1rem;
  }
  
  .business-card-subtitle{
    font-size: clamp(0.9rem, 1.5vw, 1rem) !important;
    font-family: var(--site-ff);
    font-weight: 300;
    text-transform: capitalize;
    color: var(--site-medium-grey);
    margin-bottom: 1rem;
  
  }
  
  .business-card-name {
    font-size: clamp(1rem, 1.5vw, 1.15rem) !important;
    font-family: var(--site-ff);
    font-weight: 300;
    text-transform: capitalize;
    color: var(--site-dark-green);
  }
  
  .business-card-description {
    font-size: clamp(0.8rem, 1.5vw, 1rem) !important;
    font-family: var(--site-ff);
    font-weight: 300;
    text-transform: capitalize;
    color: var(--site-medium-grey);
  }
  
  .contact-pair {
    display: flex;
    align-items: center;
    justify-content: start;
    flex: 1 1 40%;
  }
  
  .contact-pair-name {
    margin-left: 1rem;
    text-transform: capitalize;
    font-weight: 400;
    font-family: var(--site-ff);
    font-size: clamp(0.9rem, 1vw, 1rem);
    color: grey;
  }
  
  .contact-pair-value {
    margin-left: 1rem;
    text-transform: capitalize;
    font-weight: 400;
    font-family: var(--site-ff);
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    color: var(--site-dark-green);
  }
  
  .icon-1-5rem{
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
  
  .icon-2-0rem{
    width: 2rem !important;
    height: 2rem !important;
  }
  
  .icon-2-5rem{
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  
  .icon-1-5rem{
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
  
  .classic-business-card.small {
    max-height: unset !important;
    width: 16rem !important;
    height: 20rem !important;
  }
  
  .classic-business-card.small .contact-pair {
    flex: 1 1 100%;
    margin-bottom: 0.25rem;
  }
  
  .classic-business-card.dark .icons_img-lg{
    background-color: var(--site-bg-nav-dark);
  }
  
  .top-gradiant-insta-header{
    background-image: var(--site-gradient-insta-darker);
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
    padding-top: 1rem;
  }
  
  .top-gradiant-blue-header{
    background-color: #555;
    /* background-image: var(--site-gradient-green); */
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
    padding-top: 1rem;
  }
  .business-card-texts-wrapper{
    /*d-flex flex-column mb-3*/
    display: flex;
    flex-direction: column;
    margin: 0.25rem 0rem !important;
  }
  
  .classic-business-card .center .business-card-texts-wrapper{
    align-items: center;
  
  }
  
  .classic-business-card .center .business-card-name{
    color:white;
  }
  
  .classic-business-card .center .business-card-description{
    color: wheat;
  }
  
  /************ Business Card Swiper ****************/
  /* Business Card Swiper Container */
  .bc-swiper-container {
    width: 100%;
    height: 100%;
    position: relative;
    padding-bottom: 30px; /* Padding for pagination */
    overflow: hidden; /* Ensure slides don't overflow the container */
  }
  
  /* Business Card Swiper Wrapper and Slides */
  .bc-swiper-wrapper {
    display: flex;
    align-items: center;
    justify-content: center; 
  }
  
  .bc-swiper-slide {
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition for opacity and scale */
    opacity: 1; /* Default lower opacity */
    transform: scale(0.9); /* Default slight scale down */
    width: auto; /* Ensure Swiper controls the width */
  }
  
  .bc-swiper-slide-active,
  .bc-swiper-slide-selected {
    
    border: 2px solid #ffa900; /* Add a border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow */
    transition: border 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
  
  }
  
  /* Navigation Buttons */
  .bc-swiper-pagination {
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 10px;
    left: 0;
    z-index: 10;
  }
  
  /* Navigation Buttons */
  .bc-swiper-button-prev, .bc-swiper-button-next {
    color: white;
    z-index: 20;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    position: absolute;
    background-color: rgb(83 82 82 / 80%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
  }
  
  /* Style the arrows inside the buttons */
  /* .bc-swiper-button-prev::after,
  .bc-swiper-button-next::after {
    display: inline-flex;
    height: 2rem !important;
    width: 2rem !important;
    font-family: swiper-icons;
    font-size: 14px;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
    color: #fefefe;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-image: var(--site-gradient-insta-darker);
    background-color: var(--site-bg-nav-dark);
  } */
  
  
  
  /* Positioning of the buttons */
  .bc-swiper-button-prev {
      left: 10px;
  }
  
  .bc-swiper-button-next {
      right: 10px;
  }
  
  
  .classic-business-card.small .missing-image {
    width: var(--icon-xl) !important;
    height: var(--icon-xl) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 2rem !important;
    background-color: #7d9df7 !important;
  }
  
  .classic-business-card.small .missing-image-text {
    font-family: var(--site-ff);
    font-size: clamp(1rem, 1.5vw, 1.15rem) !important;
    font-weight: 300;
    color: white;
    text-transform: capitalize;
  }
  
  .contact-image-small {
    width: var(--icon-xs) !important;
    height: var(--icon-xs) !important;
    padding: 1px;
    object-fit: cover;
    /* background-color: white; */
    border-radius: 50%;
  
  }
  
  .contact-name-small {
    font-family: var(--site-ff);
    font-weight: 500;
    color: var(--site-bg-nav-dark);
    font-size: clamp(0.9rem, 1vw, 1.1rem) !important;
    padding-right: 1rem !important;
    padding-left: 0.5rem !important;
  }
  
  .contact-image-name:hover{
    background-color: rgb(255,169, 0, 20%) !important; 
  
  }
  
  .contact-image-name, .email-bubble-md{
    border: 1px solid rgb(255, 169, 0);
    background-color: rgb(255,169, 0, 10%) !important;   
    border-radius: 10rem;
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0.1rem;
    margin-right: 0.5rem !important;
    margin-top: 0.5rem !important
  }

  .email-bubble-sm {
    border: 1px solid rgb(255, 169, 0);
    background-color: rgb(255,169, 0, 10%) !important;
    border-radius: 10rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.75rem;
    gap: 1rem;
    width: 100%;
  }
  
  .selected-contact-list-sm{
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0rem 1rem !important;
  }
  
  .contact-list{
    display: flex;
    flex-direction: column;
    max-height: 35vh !important;
    overflow-y: scroll;
  }
  
  .contact-list-item{
    /* d-flex align-items-center justify-content-start border-bottom */
    display: flex;
    align-items: center;
    justify-content: start;
    border-bottom: 1px solid var(--site-border-lighter-grey);
    /* margin-bottom: 0.25rem; */
    padding: 0.5rem !important;
    min-height: unset !important;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
  }
  
  .contact-list-item:hover {
    border: 1px solid var(--site-milori-blue);
    /* padding: 0.5rem !important; */
    border-radius: 0.5rem;
    background-color: #0073b11a;
  }
  
  .contact-list-item.active{
    border: 1px solid var(--site-milori-blue);
    background-color: #0073b11a;
    border-radius: 0.5rem;
  }
  
  
  
  .short-contact-name, .contact-list-item .separator, .short-contact-company {
    font-family: var(--site-ff);
    font-weight: 500;
    margin-left: 0.5rem;
    font-size: clamp(1rem, 1vw, 1.1rem) !important;
    margin-bottom: 0.25rem;
  }
  
  img#listing-agent-headshot {
    border-color: var(--site-milori-blue);
  }
  
  .tagged-contacts-sm{
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 0.25rem 2rem !important;
    height: calc(var(--icon-sm)+1rem);
  }
  
  .site-apps-wrapper {
    position: absolute;
    width: 25vw;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    background-color: #fdfdfd;
    color: var(--site-primary-text-dark);
    border: 1px solid var(--site-lightest-grey);
    border-radius: var(--site-border-radius);
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    top: 5rem;
    right: 0rem;
    margin-left: 0px;
    box-shadow: var(--bs-d-2);
    text-transform: capitalize;
    border: 8px solid #98dae25c;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
}
  
  .site-apps-app {
    background-color: var(--site-off-white);
    background-image: linear-gradient(90deg, #a1fff8 0%, #97d9e187 100%);
    /* background-color: transparent; */
    height: 5.5rem !important;
    width: 5.5rem !important;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem;
    transition: all 300ms ease;
    margin-bottom: 0rem !important;
}
  
  .site-apps-app:hover{
    background-color: var(--site-off-white);
    
    
  }
  
  .site-apps-app:hover svg{
    fill: white;
  }
  
  .site-apps-app:hover ~ .contact-app-text {
      color: var(--site-milori-blue);
      font-weight: 400;
  }
  
  /* Base styles for the sliding panel */
  .site-apps {
    position: fixed; /* Fixed position so it stays in place relative to the viewport */
    top: 0;
    right: -100vw; /* Initially pushed completely off-screen to the right */
    height: 100vh; /* Full vertical height of the screen */
    background-color: white;
    transition: right 0.4s ease; /* Smooth sliding effect */
    z-index: 999; /* Ensure it appears above other elements */
  }
  
  /* Width adjustments based on screen size */
  @media (min-width: 1200px) { /* Large screens */
    .site-apps {
      width: 50vw;
    }
  }
  
  @media (min-width: 768px) and (max-width: 1199px) { /* Medium screens */
    .site-apps {
      width: 75vw;
    }
  }
  
  @media (max-width: 767px) { /* Small screens */
    .site-apps {
      width: 85vw;
    }
  }
  
  @media (max-width: 767px){
    .site-apps-wrapper {
      position: absolute;
      max-height: 60vh;
      overflow-y: auto;
      overflow-x: hidden;
      text-align: center;
      background-color: #fdfdfd;
      color: var(--site-primary-text-dark);
      border: 1px solid var(--site-lightest-grey);
      border-radius: var(--site-border-radius);
      padding: 8px 0;
      position: absolute;
      margin-left: 0px;
      box-shadow: var(--bs-d-2);
      text-transform: capitalize;
      border: 8px solid #98dae25c;
      z-index: 1;
      top: 5rem;
      right: 50%;
      width: 85vw;
      transform: translate(50%, 40%);
    }
    
  
  }
  
  
  /* Class to slide the panel into view */
  .site-apps.active {
    right: 0;
    position: fixed;
    z-index: var(--top-1-layer);
    top: var(--site-navbar-height-lg);
    box-shadow: var(--bs-d-8);
  }
  
  .contact-app-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
  }
  
  .contact-app-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background-color: #58a36c;
    width: 100%;
    color: white;
    padding: 1rem;
    background-image: var(--site-gradient-blue-green) !important;
  }
  
  /* Grid Table Container */
  #contact-grid {
    display: block;
    width: 100%;
    margin: 20px auto;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent wrapping of content */
  }
  
  /* Inner container for the grid (header and rows) */
  .grid-table {
    display: grid;
    grid-template-columns: 100px 150px 150px 150px 150px 250px; /* Fixed width columns */
    min-width: max-content; /* Ensure grid expands to fit columns */
  }
  
  /* Grid Table Header */
  .grid-table-header {
    display: grid;
    /* grid-template-columns: var(--empty-rows-contact); */
    background-color: #f3f3f3;
    /* color: white; */
    font-weight: bold;
    border-bottom: 2px solid #71dec9;
    align-items: center;
    /* padding: 0.5rem 1rem !important; */
    border-top: 1px solid var(--site-border-lighter-grey);
  }

  .grid-table-header-item.headshot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* Grid Table Header */
  .grid-table-header.empty-row {
    display: grid;
    grid-template-columns: var(--empty-rows-contact);
    background-color: #f3f3f3;
    /* color: white; */
    font-weight: bold;
    border-bottom: 2px solid #71dec9;
    align-items: center;
    padding: 0.5rem 1rem !important;
    border-top: 1px solid var(--site-border-lighter-grey);
    height: var(--empty-row-height) !important;
  }

  .grid-table-header.empty-row,
  .grid-table-row.empty-row {
    display: grid;
    grid-template-columns: var(--empty-rows-contact); /* 6 columns defined by --empty-rows-contact */
    gap: 0;
    padding: 0 !important;
    height: var(--empty-row-height) !important;
    
  }

  .grid-table-row.empty-row {
    height: var(--empty-row-height) !important;
  }

  .grid-table-row.empty-row:hover{
    border-left: 0px solid transparent !important;
  }

  .grid-table-row.empty-row .grid-table-cell {
    /* padding: 1rem !important; */
    border: 0px solid var(--site-border-lighter-grey) !important;
    border-right: 1px solid var(--site-border-lighter-grey) !important;
  }

  .grid-table-row.empty-row .grid-table-cell.cell-error{
    border: 1px solid red !important;
    border-radius: var(--site-border-radius-md) !important;
    overflow: visible;
  }

  /* .grid-table-row.empty-row:hover .grid-table-cell {
    border: 1px solid var(--site-border-lighter-grey) !important;
  } */

  .grid-table-header-item, .grid-table-cell {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--site-ff);
    font-weight: 500;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--site-border-lighter-grey);
    border-right: 1px solid var(--site-border-lighter-grey);
  }

  .grid-table-header-item:last-child,
  .grid-table-cell:last-child {
    border-right: none;
  }

  /* Remove border-bottom for last row cells (if needed) */
  .grid-table-row.empty-row:last-child .grid-table-cell {
    border-bottom: none;
  }
  
  /* Grid Table Header Item */
  .grid-table-header-item {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--site-ff);
    font-weight: 500;
    text-transform: capitalize;
  }
  
  /* Grid Table Body */
  .grid-table-body {
    display: block; /* Body wraps individual rows */
    z-index: var(--top-4-layer);
    height: 50vh;
    overflow: auto;
  }
  
  .grid-table-body .cbx span {
    position: relative;
    left: 1rem;
  }
  #nav-contacts-grid .grid-table-body{
      display: block;
      height: 65vh;
      overflow: auto;
    
    
  }
  
  /* Grid Table Row */
  .grid-table-row {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 2fr 2fr 2fr 2fr;
    background-color: white;
    border-bottom: 1px solid #ddd;
    gap: 0.25rem;
    height: 4.25rem !important;
  }
  
  /* .grid-table-row:last-child {
    border-bottom-left-radius: var(--site-border-radius);
    border-bottom-right-radius:var(--site-border-radius);
  } */
  
  /* Grid Table Cell */
  .grid-table-cell {
      /* padding: 2px; */
      text-align: left;
      font-size: clamp(0.85rem, 1vw, 1rem) !important;
      font-family: var(--site-ff);
      font-weight: 300;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative; /* for the pseudo-element dot if needed */
      border: 1px solid transparent;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  
  
  
  /* Image inside grid table */
  .grid-table-cell img {
    width: var(--icon-sm) !important;
    height: var(--icon-sm) !important;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid orange;
    padding: 0.1rem;
  }
  
  .contacts-grid-seach-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 1rem;
    justify-content: space-between;
  }
  
  .contact-filter.filter-button {
    border: 1px solid #00a7ba;
    border-radius: 0.5rem;
    /* background-color: #37b7ab; */
    cursor: pointer !important;
    padding: 0.75rem 0.75rem !important;
    /* color: white; */
    width: 18%;
    flex: 1;
    max-width: 12rem;
    min-width: 9rem;
    background-image: var(--site-gradient-subtle-blue);
}

  #project-types-checklist {
    height: 3rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .contacts-grid-seach-wrapper .search-field {
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    height: unset;
    border-color: #00a7ba;
  }

  .contacts-grid-seach-wrapper input.search-field:hover, .contacts-grid-seach-wrapper input.search-field:focus {
    border-color: var(--site-primary-link-hover);
    box-shadow: rgb(122 181 226 / 62%) 0px 1px 2px 0px, rgb(64 173 255 / 15%) 0px 1px 3px 1px;
  }

  .contact-filter.filter-button:hover {
    box-shadow: var(--bs-d-7);
    background-color: #28968c;
    color: white;
    background-image: var(--site-gradient-blue-green);
  }
  
  .grid-table-header .checkbox-cbx { /* grid-table-header has a darker background color */
    color: white !important;
    background-color: white;
    border-color: var(--site-turquoise) !important;
    outline: none;
  }
  
  .grid-table-row.selected {
    background-color: lightgoldenrodyellow;
  }
  
  .tag-contacts-container{
      position: fixed;
      top: 6rem;
      background-color: white;
      border-radius: 1rem;
      border: 1px solid var(--site-border-lighter-grey);
      left: 25%;
      width: 50%;
      z-index: var(--top-2-layer) !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1rem;
      box-shadow: var(--bs-d-8);
  }
  
  .popup-dialog-box-title {
    font-family: var(--site-ff);
    font-size: clamp(1.75rem, 2vw, 2rem) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--site-border-lighter-grey);
    margin-top: 2rem;
    /* margin-bottom: 1.5rem; */
    padding-bottom: 0.5rem;
    text-transform: uppercase !important;
    font-weight: 500;
}
  
  .popup-dialog-box-container {
    position: fixed;
    top: calc(var(--top-navbar-height-lg) + 1rem);
    background-color: white;
    /* border-radius: 1rem; */
    border: 1px solid var(--site-border-lighter-grey);
    left: 25%;
    right: 1%;
    z-index: var(--top-1-layer) !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-shadow: var(--bs-d-8);
    height: 85vh !important;
    border-radius: var(--site-border-radius-xl);
  }
  
  .popup-dialog-box-input {
    font-family: var(--site-ff);
    font-size: var(--font-size-subtitle);
    font-weight: 300;
    padding: 0.5rem 1rem;
    border: 1px solid var(--site-border-lighter-grey);
    border-radius: var(--site-border-radius-md);
    background-color: transparent;
    outline: none !important;
    margin: 0.5rem 0rem 1rem 0rem;
    padding: 1rem 3rem !important;
    width: 100%;
    margin-left: 0rem;
}
  
  .popup-dialog-box-input::placeholder{
    font-family: var(--site-ff);
    font-weight: 300;
    font-size: var(--font-size-subtitle);
    color: var(--site-border-light-grey);
    /* padding-left: 2rem; */
  }
  
  .search-icon-wrapper.left {
    position: absolute;
    top: 2rem;
    left: 1rem;
    color: var(--site-border-light-grey);
  }
  
  .dialog-box-body {
    padding: 0rem 3rem 2rem 3rem;
  }
  
  .btn-site-round:hover {
    color: wheat;
  }
  
  .contact-tag, .existing-contact-tag {
    border: 1px solid var(--site-dark-green);
    border-radius: var(--site-border-radius-xl);
    padding: 0.5rem 1.25rem;
    margin-right: 1rem;
    background-color: #14605724;
    font-family: var(--site-ff);
    font-size: clamp(0.9rem, 1vw, 1rem);
    font-weight: 200;
    text-wrap: nowrap;
    margin-bottom: 0.5rem;
    cursor: pointer;
  }
  
  .simple-tag {
    border: 1px solid var(--site-dark-green);
    padding: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: var(--site-ff);
    font-weight: 200;
    
  }
  
  span.simple-tag.tagged {
    background-color: var(--site-dark-green);
    color: antiquewhite;
  }
  
  .contact-tag.active, .contact-tag:hover, .existing-contact-tag:hover {
    background-color: var(--site-dark-green) !important;
    color: antiquewhite !important;
  }
  
  .no-existing-record {
    width: 100%;
    font-family: var(--site-ff);
    font-weight: 300;
    padding: 1.25rem;
    font-size: clamp(1.1rem, 1vw, 1.25rem);
  }
  
  .editable-field:empty::before {
    position: absolute;
    content: attr(data-placeholder);
    color: var(--site-border-light-grey);
    left: 3rem; /* Allowing for an icon to be displayed inside the contenteditable and to its left */
    top: 2rem;
    pointer-events: none;
  }
  
  section#contact-tags-body {
    margin: 0rem 3rem 3rem 3rem;
  }
  
  .tag-wrapper{
    position: relative;
    width: fit-content;
    white-space: nowrap;
  }
  
  .simple-tag ~ .x-outside {
    position: absolute;
    top: -1rem;
    right: 0rem;
    background-color: #fafafa;
    width: 1.5rem;
    height: 1.5em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--site-border-lighter-grey);
    /* color: antiquewhite; */
    visibility: hidden;
    cursor: pointer;
}
  
  .tag-wrapper:hover .x-outside{
    visibility: visible;
  }
  
  .tags-container {
    display: flex;
    align-items: center;
    justify-content: start;
  }
  
  /* .empty-dashed-box {
    border: 0.3rem dashed #999;
    padding: 3rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem; 
    width: 100%;
  } */
  
  .tags-wrapper, .empty-dashed-box {
    /* height: 8rem; */
    border: 1px solid var(--site-border-lighter-grey);
    width: 100%;
    border-radius: 1rem;
    padding: 2rem 1rem;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: start;
  }
  
  .side-map-card {
    overflow-y: auto;
    height: 100vh;
    border-left: 1px solid var(--site-border-lighter-grey);
    background-color: white;
  }
  
  /* #search-filter-bar-container{
    height: 5rem !important;
  } */
  
  .compare-container {
    display: flex;
    justify-content: space-between;
  }
  
  .select-element {
    position: relative;
  }
  
  .project-list {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    z-index: 1000;
    border-radius: 9px;
    max-height: 30rem;
    overflow-y: auto;
  }
  
  .project-item {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .project-item img {
    width: 50px !important;
    height: 50px !important;
    margin-right: 10px;
  }
  
  .project-selector, .proforma-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  
  }
  .compare-sort-bar{
    display: flex;
    align-items: center;
    justify-content: start;
  }
  
  .header-container {
    display: flex;
    align-items: center;
    justify-content: start;
    transition: all 0.3s ease;
    /* border-bottom: 1px solid var(--site-border-lighter-grey); */
    padding-bottom: 1rem;
    /* height: 6rem !important; */
    position: sticky;
    top: 0rem;
    z-index: var(--top-1-layer);
    background-color: white;
    padding: 0.6rem 1rem;
  }
  
  .site-map-card .header-container{
    box-shadow: var(--bs-d-7);
  }
  
  .search-component, .compare-component, .sort-component {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0.5rem;
  }
  
  .search-component {
    background-color: #fefefe;
    border: 1px solid #e1e1e8;
    padding: 5px 1rem !important;
    outline: none;
    border-radius: 10rem;
    /* flex-basis: 25% !important; */
    height: 3.35rem !important;
    flex: 1;
  }
  
  #search-projects::-webkit-input-placeholder {
    font-size: var(--site-fs-flex);
  }
  
  #search-projects::-moz-placeholder {
    font-size: var(--site-fs-flex);
  }
  
  #search-projects:-ms-input-placeholder {
    font-size: var(--site-fs-flex);
  }
  
  #search-projects::placeholder {
    font-size: var(--site-fs-flex);
  }
  
  
  .search-component.active {
    display: flex;
    align-items: center;
    justify-content: start;
    flex: 1;
  }
  
  .compare-component.active {
    flex: 1;
    justify-content: flex-start;
  }
  
  .sort-component {
    position: relative;
    z-index: 1;
    /* flex-basis: 25% !important;
    flex-grow: 1; */
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
  }
  
  
  .sort-component.active{
    display: flex;
    flex-basis: 70% !important;
    flex-grow: 1;
  }
  
  .sort-component .sort-buttons-wrapper{
    display: none;
  }
  
  .sort-component.active .sort-buttons-wrapper{
    display: flex !important;
  }
  
  .sort-component .sort-icon{
    display: flex;
  }
  
  .sort-component.active .sort-icon{
    display: none !important;
  }
  
  .search-input {
    background-color: #fefefe;
    border: 1px solid transparent;
    width: 100%;
    padding: 0px 10px;
    outline: none;
    transition: all 0.3s ease;
    display: flex;
  }
  
  .search-input::placeholder{
    font-family: var(--site-ff);
    font-weight: var(--site-fw);
    font-size: var(--site-fs);
    color: var(--site-fc);
  }
  
  .search-component.active .search-input{
    display: flex;
  }
  
  .search-component.active{
    width: 100%;
  }
  
  .compare-buttons-wrapper {
    display: flex;
    gap: 10px;
    margin-left: 20px;
  }
  
  .compare-component i, .sort-component i {
    font-size: 24px;
    cursor: pointer;
  }
  
  .compare-component .compare-buttons-wrapper {
    display: none;
  }
  
  .compare-component.active .compare-buttons-wrapper {
    display: flex;
  }
  
  /* Responsive design considerations */
  @media (max-width: 768px) {
    .header-container {
        grid-template-columns: 1fr 1fr 1fr;
    }
  }
  
  .side-map-card .sort-buttons-wrapper{
    width: 100%;
    position: relative;
  }
  
  .side-map-card .sort-buttons-wrapper .filter-button-container{
    max-width: unset !important;
  }
  
  #compare-component-icon-wrapper, #sort-component-icon-wrapper {
    background-color: var(--site-off-white);
    width: 4rem;
    height: 3rem;
    padding: 0.35rem 1.4rem;
    border-radius: 4px;
    border: 1px solid #e1e1e8;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1rem;
  }
  
  .component-icon-wrapper{
    background-color: var(--site-off-white);
    width: 4rem;
    height: 3rem;
    padding: 0.35rem 1.4rem;
    border-radius: 4px;
    border: 1px solid #e1e1e8;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1rem;
  }
  
  
  
  .btn.btn-primary.compare-button{
    height: 3rem;
    min-width: 10rem !important;
  }
  
  .project-image {
    /* position: relative !important; */
    object-fit: fill;
    width: 100%;
    height: 120px !important;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    height: 15rem !important;
    max-height: 15rem !important;
  }
  
  .project-card {
    overflow: hidden; /* Prevent content from overflowing */
    /* width: 100%; Ensure the card takes up the full width of the grid cell */
    box-sizing: border-box; /* Include padding and borders in the total width */
    border: 1px solid var(--site-border-lighter-grey);
  }
  
  .project-card:hover {
      border: 1px solid var(--site-dim-turquoise);
      box-shadow: var(--bs-d-2);
  }
  
  .project-card .swiper-wrapper{
    position: relative;
    top: 1.5rem;
    padding-bottom: 2rem;
  }
  
  
  .list-slider-line-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    margin: 0;
  }

  .list-slider-line-item:last-child {
    margin-bottom: 1rem !important;
  }
  
  .slider-line-item-components{  
    display: flex;
    align-items: center;
    justify-content: start;
  }
  
  #listings-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 1rem;
    background-color: white;
  }
  
  @media screen and (max-width: var(--medium-screen)) {
    div#side-map-body {
      display: grid;
      grid-template-columns: repeat(1, 1fr); /* One equal column */
      gap: 20px; /* Adjust the spacing between grid items */
      padding: 1rem;
    }
  }
  
  #side-map-body .project-card {
    border-radius: 8px !important;
  }
  
  .project-card .site-header-3 {
    margin-top: 0rem !important;
  }
  
  .side-map-body {
      display: flex;
      align-items: center;
      justify-content: center;
    background-color: white;
  }
  
  .side-map-body .swiper{
    width: 100%;
    padding: 0rem 1rem;
    height: 100% !important;
  }
  
  .swiper-slide{
    padding: 0rem 1rem !important;
  }
  
  .side-map-body .swiper-button-prev, .side-map-body .swiper-button-next{
    top: 1.5rem !important;
  }
  
  .project-card .project-address {
    position: absolute;
    /* top: 13rem; */
    background-color: #ddfff3;
    width: 100%;
    padding: 0.5rem;
    font-family: var(--site-ff);
    font-size: var(--site-fs);
    font-weight: 200;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-image: var(--site-gradient-subtle-blue);
    text-transform: capitalize;
    padding: 0.75rem !important;
    font-weight: 600;
  }
  
  .bg-site-gradient-dark-primary{
    background-image: linear-gradient(45deg, #673ab7f7 0%, #291558 100%, #12134b 0%) !important;
    color: #ffebef !important;
  
  }
  
  .bg-site-gradient-light-primary{
    background-image: linear-gradient(0deg, #bef6f2 0%, #91f3ff 100%) !important;
    color: var(--site-bg-nav-dark) !important;
  
  }
  
  .compare-projects-wrapper {
    background-color: white;
    width: 100%;
    position: sticky;
    top: 5rem;
    z-index: var(--top-2-layer);
    border-bottom: 1px solid var(--site-border-lighter-grey);
    padding: 0rem 1rem 0.5rem 1rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .compare-proforma-wrapper{
    background-color: white;
    width: 100%;
    position: sticky;
    top: 10rem;
    z-index: var(--top-2-layer);
    border-bottom: 1px solid var(--site-border-lighter-grey);
    padding: 1rem !important;
  }
  
  @media screen and (max-width: 64rem) {
    .compare-projects-wrapper {
      flex-direction: column;
    }
    
  }
  
  .project-list, .proforma-list {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    z-index: 1000;
    border-radius: var(--site-border-radius-lg);
    box-shadow: var(--bs-d-8);
}
  
  .project-list img {
    width: 7rem !important;
    height: auto !important;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
  }
  
  #fullLeapMapAndSideCard {
    width: 100% !important;
    height: 90vh !important;
    display: grid;
    grid-template-columns: 3fr 2fr;
    
  }
  
  .select-project-name {
    font-family: var(--site-ff);
    font-weight: 300;
    text-transform: uppercase;
    color: var(--site-primary-dark-bgcolor);
    font-size: 1rem;
  }
  
  .select-project-address {
    font-family: var(--site-ff);
    font-weight: 300;
    color: var(--site-medium-grey);
    text-overflow: ellipsis;
    word-break: break-word;
  }
  
  .project-item:hover {
    background-color: aliceblue;
  }
  
  .project-selector .selected, .proforma-selector .selected {
    color: var(--site-primary-dark-bgcolor);
    text-transform: uppercase;
  }

  .proforma-selector .selected, .project-selector .selected {
    white-space: nowrap;        /* Prevents text from wrapping to the next line */
    overflow: hidden;           /* Hides overflow text */
    text-overflow: ellipsis;    /* Adds the ... */
    display: inline-block;      /* Ensures the ellipsis works inside span */
    max-width: 100%;            /* Ensures it respects container width */
  }
  
  
  .filter-button-container.selected {
    background-color: aliceblue;
  }
  
  #side-map-header-select-proformas {
    z-index: var(--top-3-layer) !important;
  }
  
  .select-proforma-name {
    padding: 0.5rem 1rem;
    font-family: var(--site-ff);
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--site-medium-grey);
  }
  
  .proforma-line:hover {
    background-color: aliceblue;
  }
  
  .proforma-line:hover .select-proforma-name {
    color: var(--site-dark-green);
  }
  
  .comparison-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    margin: 1rem !important;
    border: 1px solid var(--site-border-lighter-grey);
    border-radius: 1rem;
    position: relative;
    top: 1rem;
  }
  
  .comparison-grid-header {
    background-color: #329e93;
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: bold;
  }
  
  .comparison-grid-row{
    display: grid;
    grid-template-columns: minmax(0, 10rem) repeat(auto-fit, minmax(150px, 1fr));
  
  }

  @media screen and (max-width: 500px) {
    .comparison-grid-row{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    
    }
    
  }
  .comparison-grid-cell {
    background-color: #71dec9;
    padding: 10px;
    text-align: center;
    border: 1px solid #e1e1e8;
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 1rem;
  }
  
  
  .comparison-header-row{
      display: grid;
      grid-template-columns: minmax(0, 10rem) repeat(auto-fit, minmax(150px, 1fr));
      /* gap: 1rem; */
  
  }
  .row-header-cell{
    
      /* min-width: 10rem; */
      display: flex;
      align-items: center;
      justify-content: start;
      padding: 1rem;
  
  }
  
  /* Grid classes for different column counts */
  .grid-template-columns-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .grid-template-columns-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-template-columns-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid-template-columns-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .grid-template-columns-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  
  /* Example of other necessary styles */
  .comparison-grid-header {
    background-color: var(--site-light-table-header-bg-color);
    color: var(--site-light-table-header-color);
    padding: 10px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #e1e1e8;
    font-family: var(--site-ff);
    font-weight: 300;
    text-transform: uppercase;
    font-size: clamp(1rem, 1vw, 1.1rem);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .comparison-grid-row {
    display: grid;
  }
  
  .row-header-cell {
    background-color: var(--site-light-table-header-bg-color);
    color: var(--site-light-table-header-color);
    padding: 10px;
    text-align: left;
    border: 1px solid #e1e1e8;
    font-weight: bold;
    font-family: var(--site-ff);
    font-weight: 200;
    text-transform: capitalize;
    border-bottom-style: none;
    border-left-style: none;
  }
  
  .comparison-grid-cell {
    background-color: var(--site-light-table-cell-bg-color);
    color: var(--site-light-table-cell-color);
    padding: 10px;
    text-align: center;
    border: 1px solid #e1e1e8;
    border-top-style: none;
    border-left-style: none;
    border-right-style: solid;
  }
  
  .comparison-grid-header:last-child {
    border-top-right-radius: var(--site-border-radius);
    border-top-style: none;
    border-right-style: none;
  }
  
  .comparison-grid-row:last-child .comparison-grid-cell:last-child {
    border-bottom-right-radius: 1rem;
    border-bottom-style: none;
  }
  
  .comparison-grid-row:last-child .row-header-cell {
    border-bottom-left-radius: 1rem !important;
  }
  
  .comparison-grid-row:last-child .comparison-grid-cell {
    border-bottom-style: none;
  }
  
  .comparison-header-row .comparison-grid-header{
    border-top-style: none;
  }
  
  #comparison-grid-header-row-header {
    background-color: var(--site-light-table-cell-bg-color);
    border-top-left-radius: 1rem;
  }
  
  .proforma-line:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  
  .proforma-line:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  
  #card-feedback .close-button-container{
    margin: 0rem !important;
  }
  
  svg.crud-icon-5 {
    fill: #0073b1;
  }

  .search-filter-bar .site-grad-button {
      max-width: 100% !important;
  }
  
  @media screen and (min-width: 1350px) and (max-width: 1600px){
    #listings-wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      padding: 1rem;
    }
  }
  
  @media screen and (min-width: 1000px) and (max-width: 1350px) {
    .filter-button-container {
      position: relative;
      /* height: clamp(2.5rem, 2vw, 3rem) !important; */
      width: 100% !important;
      border: 1px solid var(--site-border-lighter-grey);
      padding: 0.5rem 1.25rem;
      border-radius: 10rem;
      background-color: #fefefe;
      /* margin: 1rem; */
      color: darkgray;
      min-width: 12rem !important;
      max-width: 250px !important;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .filter-button-wrapper {
      width: 100%;
      margin: 0;
    }
  
    .site-grad-button {
      min-width: 8rem !important;
      padding: 1.2rem 1.5rem !important;
      border: 0px !important;
      margin: 0.5rem;
      cursor: pointer;
    }

    .filter-button-container{
      margin: 0rem 0.5rem !important;
    }
  
    .market-insight-filters .filter-button-container{
      margin: 0rem 0rem !important;
    }
  
    .search-filter-bar{
      flex-wrap: wrap;
      /* margin-top: 1rem; */
      /* left: 4rem; */
      background-color: white !important;
      /* max-width: 50%; */
    }
    #search-filter-bar-container{
      height: unset !important;
    }
  
    #listings-wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      padding: 1rem;
    }

    #listings-wrapper.single-card {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 20px;
      padding: 1rem;
      place-items: center;
    }

    #listings-wrapper.single-card .project-visual{
      width: 100%;
    }
  }
  
  @media screen and (max-width: 64rem) {
    #sorts-up-down.site-btn-group {
        display: none;
    }
  
    #sorts-up-down.site-btn-group.active {
      display: flex;
      flex-basis: 80%;
  }
  }
  
  @media screen and (max-width: 45rem) {
    #search-filter-bar-container {
      height: unset !important;
      flex-direction: column !important;
      display: flex;
    }
  
  }
  
  @media screen and (max-width: 1000px) {
    .filter-button-container {
      min-width: 12rem !important;
      margin: 0.25rem 0rem !important;
      padding: 0.5rem 1.2rem !important;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 100% !important;
    }
    .search-filter-bar {
      position: fixed;
      border-bottom: 1px solid var(--site-border-lighter-grey);
      z-index: var(--top-3-layer);
      background-color: white;
      flex: 1;
      width: 100%;
      /* display: flex; */
      /* align-items: center; */
      /* justify-content: start; */
      flex-wrap: wrap !important;
      /* left: 3rem; */
      /* max-width: 50vw; */
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
  
      
    #search-filter-bar-container {
      height: unset !important;
      
    }
  
    #search-filter-bar-container #reset-filter-button{
      margin: 0.25rem !important;
      padding: 0.5rem 1.2rem !important;
    }
  
    .filter-button-wrapper {
      margin: 0rem 0rem;
    }
  
    #fullLeafMap, #leafLetMapInsight {
      position: relative;
      flex-basis: 40vw;
      height: 100vh;
      z-index: 1;
      flex-grow: 1;
      flex-shrink: 0;
    }
  
    .side-map-card {
      flex-basis: 50%;
      flex-grow: 0;
      flex-shrink: 0;
      overflow-y: auto;
      height: 100vh;
    }
  
    #listings-wrapper {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 20px;
      padding: 1rem;
    }
  
    .project-card{
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: space-between;   
      margin: 0.4rem;
      box-shadow: 0 0 0 0px rgb(0 0 0 / 15%), 0 1px 5px rgb(0 0 0 / 20%);
      max-width: 700px;
    }
  
  
  }
  
  #reset-filter-button{
    margin: 0rem !important;
  }
  
  .button-wrapper {
    display: flex;
    align-items: center;
    justify-content: end;
    margin: 1rem !important;
  }
  
  .body-map-full-page {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
  
  @media screen and (max-width: 576px) {
    .body-map-full-page{
      overflow: auto;
    }
  
    #fullLeapMapAndSideCard{
      width: 100% !important;
      /* height: 90vh !important; */
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      overflow: auto;
    }
    
    
    #fullLeafMap, #leafLetMapInsight {
      position: relative;
      flex-basis: 40vw;
      height: 100vh;
      z-index: 1;
      flex-grow: 1;
      flex-shrink: 0;
    }
    
    .side-map-card {
      flex-basis: 50%;
      flex-grow: 0;
      flex-shrink: 0;
      overflow-y: auto;
      height: 100vh;
    }
    
    .search-filter-bar{
      max-width: 100%;
    }
  
    #listings-wrapper {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 20px;
      padding: 1rem;
      margin: 1rem;
  }
  
    .list-slider-line-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 1rem;
      margin: 0;
      flex-wrap: wrap;
    }
  
    
    .list-slider-line-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      padding-bottom: 1rem;
      margin: 0;
    }
    
  }
  
  .in-search-result-feedback{
    display: none;
    position: absolute;
    right: 1rem;
  } 
  
  .search-component.active .in-search-result-feedback{
    display: flex;
  }
  
  .z-index-top-1{
    z-index: var(--top-1-layer) !important;
  }
  
  .z-index-top-2{
    z-index: var(--top-2-layer) !important;
  }
  
  .z-index-top-3{
    z-index: var(--top-3-layer) !important;
  }
  
  .sort-option:hover {
    background-color: aliceblue;
    color: var(--site-dark-blue-bg);
  }
  
  .sort-option:first-child {
    padding-top: 1rem;
  }
  
  .sort-option {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    color: grey;
  }
  
  .project-badge {
    background-color: #ededed;
    padding: 0.5rem 0.5rem;
    border-right-style: none;
    font-size: clamp(0.9rem, 1vw, 1rem);
    top: 14rem;
    width: 100%;
    border-bottom: 1px solid var(--site-border-lighter-grey);
    font-family: var(--site--ff);
    font-weight: 300;
  }
  
  .text-overflow-15rem{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 15rem;
  }
  
  .text-overflow-10rem{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 10rem;
  }
  
  .font-crisp{
    font-weight: 300;
  }
  
  .font-bold{
    font-weight: 500;
  }

  .font-bolder{
    font-weight: 600;
  }
  
  .font-family-primary{
    font-family: var(--site-ff) !important;
  }
  
  .site-btn-group {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      z-index: 2;
      right: 10%;
      top: 25% !important;
  }
  
  .site-btn-group-item{
    /* background-color: var(--site-off-white); */
    width: 2rem;
    height: 2rem;
    padding: 0.35rem 1.4rem;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: transparent;
    color: var(--site-border-light-grey);
    
  }
  
  .site-btn-group-item.left{
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    
  }
  
  .site-btn-group-item.right{
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
  }
  
  .site-btn-group-item.active{
    /* background-color: var(--site-milori-blue); */
    /* border: 1px solid #e1e1e8; */
    cursor: pointer !important;  
    color: var(--site-milori-blue);
    border-color: var(--site-milori-blue);
  }
  
  .text-nowrap{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  
  }
  
  .contact-app-body{
    height: 100%;
  }
  
  .contact-form {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    height: 65vh !important;
    overflow-y: auto;
    padding: 1rem 0rem;
  }
  .contact-form .category-container {
    padding: 1rem 3rem;
}

  .contact-form .site-compact-input-underlined input + .site-compact-input-label.has-value, .site-compact-input-underlined select + .site-compact-input-label.has-value {
    position: absolute !important;
    top: -20% !important;
  }
  
  .contact-us-bg {
    background-image: url('/static/images/contactus_develuppers2.png'); /* Replace with the correct relative or absolute path to your image */
    background-size: cover; /* Ensures the image covers the entire container */
    background-position: center; /* Centers the image within the container */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    height: 100vh; /* Sets the container height to full viewport height */
    width: 100%; /* Ensures the container spans the full width */
    display: flex; /* Enables flexbox for easy alignment of content */
    align-items: center; /* Vertically centers content */
    justify-content: center; /* Horizontally centers content */
    color: white; /* Sets a default font color for text inside the background */
    font-family: 'Arial', sans-serif; /* Optional: Customize the font */
  }
  
  .contact-us-wrapper{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    background-color: #ffffffcc;
    margin: 0rem;
    background-image: url(/static/images/contactus_develuppers2.png);
    background-size: cover;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    width: auto;
    align-items: stretch;
    color: var(--site-dark-blue-bg);
    font-family: var(--site-ff);
  }
  
  @media screen and (max-width: 1024px) {
    .contact-us-wrapper {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 1rem;
    }
  }
  
  #contact-us-title-and-wrapper{
    display: grid;
    grid-template-columns: 1fr;
    max-width: 1200px;
    margin-top: 3rem;
  }
  
  @media screen and (max-width: 1200px) {
    #contact-us-title-and-wrapper{
      display: grid;
      grid-template-columns: 1fr;
      max-width: 1200px;
      margin-top: 3rem;
      margin-left: 5rem;
      margin-right: 5rem;
    }
    
  }
  
  .contact-us-title {
    background-image: var(--site-gradient-blue-green);
    margin-bottom: 0rem !important;
    font-size: clamp(1.5rem, 1.5vw, 2.5rem);
    font-weight: 600;
    font-family: var(--site-ff);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-top-right-radius: var(--site-border-radius);
    border-top-left-radius: var(--site-border-radius);
  }
  
  .square-border-radius{
    border-radius: 0rem !important;
  }
  
  .contact-form-description {
    background-color: #ffffffcc;
    display: flex;
    flex-direction: column;
    padding: 3rem !important;
    margin: 2rem !important;
    border-radius: var(--site-border-radius);
  }
  
  .contact-form input:focus {
    border-color: var(--site-primary);
    box-shadow: 0 0 4px 1px var(--site-primary),0 0 0 1px #00d0e4;
    outline: 0;
  }
  
  .contact-form input[required].contact-input:hover {
    border: 1px solid var(--site-primary);
  }
  
  .contact-field {
    margin-top: 1rem;
    position: relative;
    padding: 1rem 1rem 0rem 1rem;
  }
  
  .contact-field label {
    margin: 0;
    padding: 0rem 1rem 0.25rem 0.25rem;
    font-size: var(--site-fs);
    font-weight: 600;
    text-transform: capitalize;
    color: var(--site-medium-grey);
  }
  
  .contact-field .contact-input {
    height: 3rem;
    border-radius: 4px;
  }
  
  .contact-input:focus{
      color: #495057;
      background-color: #fff;
      border-color: var(--site-primary);
      outline: 0;
      box-shadow: 0 0 0 .2rem #71dec932;
  }
  
  .contact-field:focus-within label {
    color: black; 
  }
  
  .contact-app-container .contacts-grid {
    height: 100%;
    background-color: #fafafa;
  }
  
  
  .contact-app-container .form-footer {
    height: 10rem;
    background-color: aliceblue;
    border-top: 1px solid var(--site-border-lighter-grey);
    display: flex;
    align-items: start;
    justify-content: space-around;
    position: absolute;
    bottom: 5rem;
    width: 100%;
  }
  
  
  .form-footer button {
    margin-top: 1rem;
    border: 1px solid #00a7ba;
    border-radius: 0.5rem;
    background-color: #37b7ab;
    cursor: pointer !important;
    padding: 0.75rem 0.75rem !important;
    color: white;
    min-width: 10rem;
  }
  
  .contact-field .contact-select {
    height: 3rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 0 1rem;
    background-color: #fff;
    font-size: var(--site-fs);
    appearance: none;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23666666%22 d=%22M7 10l5 5 5-5z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    cursor: pointer;
    width: 100%;
  }
  
  .contact-field .contact-select:hover, .contact-field .contact-select:focus{
      color: #495057;
      background-color: #fff;
      border-color: var(--site-primary) !important;
      outline: 0;
      box-shadow: 0 0 0 .2rem #71dec932 !important;
  }
  
  .contact-form .site-compact-input-underlined {
    max-width: unset;
  }
  
  .site-compact-input-group select {
    height: 3.5rem !important;
    width: 100%;
    appearance: none;
    /* background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23666666%22 d=%22M7 10l5 5 5-5z%22/%3E%3C/svg%3E'); */
    /* max-width: 73vw !important; */
    border-radius: var(--site-border-radius-sm);
  }
  
  #create-contact-buttons-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  
  .contact-form .tag {
    border: 1px solid grey;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    width: fit-content;
    margin: 0.5rem 1rem 0.5rem 0rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .delete-tag-button{
      display: none;
      position: absolute;
      top: 0rem;
      right: 0rem;
      width: 1.75rem;
      height: 1.75rem;
      background-color: #fafafa;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--site-border-lighter-grey);
      cursor: pointer;  
  }
  
  .tag-wrapper:hover .delete-tag-button {
    display: flex;
  }
  
  h3.category-header {
    font-size: var(--site-fs);
    font-weight: var(--site-fw);
    font-family: var(--site-ff);
    border-bottom: 1px solid var(--site-primary);
    text-transform: uppercase;
  }
  
  .field-label-icon{
     /* text-capitalize has-value d-flex align-items-center justify-content-between */
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .field-label-icon i {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    color: var(--site-dark-green);
  }
  
  .field-label-name {
    font-size: var(--site-fs);
    font-weight: 300;
    font-family: var(--site-ff);
    color: var(--site-dark-green);
  }
  
  .grid-table-row:hover {
    background-color: var(--site-primary-bgcolor);
    color: #44a79d;
    border-left: 2px solid darkturquoise;
  }
  
  .contact-app-container .checkbox-wrapper {
    visibility: hidden;
  }
  
  .contact-app-container .checkbox-wrapper.checked {
    visibility: visible;
  }
  
  .grid-table-row:hover .checkbox-wrapper {
    visibility: visible;
  }
  
  #slideshow-presentation.active {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw !important;
    height: 90vh !important;
    background-color: white;
    /* border: 1px solid var(--site-border-lighter-grey); */
    box-shadow: var(--bs-d-5);
  }
  
  #slideshow-presentation.modal-container.active {
    transform: translate(-50%, -50%) scale(1);
    max-height: 80vh !important;
    overflow: auto;
    max-width: 100vw !important;
    z-index: 20000;
  }
  
  #slideshow-presentation.default-light-round-1 .presentation-title {
    font-size: clamp(5rem, 2vw, 10rem);
    font-family: Georgia;
    font-weight: 600;
    text-transform: capitalize;
    padding: 0rem 2rem;
  }
  
  #slideshow-presentation.default-light-round-1 .presentation-subtitle {
    font-size: clamp(2rem, 2vw, 5rem);
    font-family: var(--site-ff);
    font-weight: 200;
    text-transform: uppercase;
    color: var(--site-pale-blue);
    padding: 0rem 2rem 2rem 2rem;
  }
  
  .default-light-round-1 .presentation-logo {
      width: 100%;
      /* height: 10rem !important; */
      /* border-radius: 50%; */
      display: flex;
      align-items: center;
      justify-content: center;
      /* background-color: var(--site-compact-color-bg-high-contrast); */
      margin: 0rem;
      /* border: 1px solid var(--site-dark-blue-title); */
      background-color: #e4f5ff;
      /* background-image: linear-gradient(160deg, #0093E9 0%, #c1f7f2 100%); */
  }
  
  .default-light-round-1 .presentation-logo img {
    width: 10rem;
    height: auto;
  }
  
  .default-light-round-1 .presentation-image {
    grid-area: content;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .default-light-round-1 .presentation-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
  #slideshow-presentation.default-light-round-1 #slideshow-presentation-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'header'
    'title'
    'subtitle'
    'content'
    'footer';
    grid-template-rows: 10vh 10vh 10vh 60vh 10vh;
    width: 100% !important;
    background-color: #0093E9;
    background-color: #a3d8fb;
    background-image: linear-gradient(160deg, #a3d8fb 0%, #c1f7f2 100%);
  }
  #slideshow-presentation.default-light-round-1 #slide-show-front-page-main-image {
    height: 40vh !important;
    width: 40vh !important;
    border-radius: 50%;
    object-fit: fill;
  }
  
  
  .presentation-logo {
    grid-area: header;
  }
  
  .presentation-title {
    grid-area: title;
  }
  
  .presentation-subtitle {
    grid-area: subtitle;
  }
  
  .presentation-image {
    grid-area: content;
  }
  
  #slideshow-presentation.default-light-round-2 #slideshow-presentation-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'header content'
    'title content'
    'subtitle content';
    width: 100% !important;
    grid-template-columns: 3fr 5fr;
    grid-template-rows: 10vh auto 30vh;
  }
  
  /* Title and subtitle will be on the left side */
  #slideshow-presentation.default-light-round-2 .presentation-title {
    grid-area: title;
    font-size: clamp(5rem, 2vw, 10rem);
    font-family: serif;
    font-weight: 400;
    text-transform: capitalize;
    align-self: start;
  }
  
  #slideshow-presentation.default-light-round-2 .presentation-subtitle {
    grid-area: subtitle;
    font-size: clamp(2rem, 2vw, 5rem);
    font-family: var(--site-ff);
    font-weight: 200;
    text-transform: uppercase;
    color: var(--site-pale-blue);
    align-self: start;
  }
  
  /* Image will be on the right side */
  #slideshow-presentation.default-light-round-2 .presentation-image {
    grid-area: content;
    align-self: center;  /* Vertically centers the image */
    justify-self: end;   /* Align the image to the right */
  }
  
  .invite-to-login {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      padding: 1rem;
      border-radius: var(--site-border-radius);
  }
  
  #market-insight-content{
    background-color: #fafafa;
    border-radius: 1rem;
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    border: 1px solid var(--site-dark-green);
  }
  
  #market-insight-header-row{
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: var(--site-dark-green);
      margin-bottom: 1rem;
      padding: 1.5rem;
      border-radius: 1rem;
      color: white;
      border: 2px solid white;
  }
  
  #market-insight-header-row .header-section {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--site-border-light-grey);
    cursor: pointer;
  }
  
  #market-insight-header-row .header-section.active {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
  }
  
  .header-section i {
      margin-right: 0.5rem;
      font-size: 1.35rem;
      display: flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
  }
  
  .header-section .header-text{
    font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  }
  
  .market-insight-chart{
    height: 400px;
    width: 700px;
  }
  
  .market-insight-filter-wrapper {
    background-color: var(--site-secondary-bgcolor) !important;
    border: 1px solid var(--site-border-lighter-grey);
    padding: 1rem;
    border-radius: var(--site-border-radius);
    margin: 1rem 0rem;
  }
  
  .market-insight-light-box-wrapper {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin: 1rem 0rem;
    background-color: white;
    border: 1px solid var(--site-border-lighter-grey);
    padding: 1rem;
    border-radius: var(--site-border-radius);
    margin: 1rem 0rem;
    padding-bottom: 0rem !important;
  }
  
  .market-insight-light-box-wrapper {
      margin-right: 1rem !important;
    margin-top: 0rem;
  }
  
  .filters-wrapper.grid-area .settings {
      padding: 0rem !important;
      background-color: transparent;
      border: 0px;
      margin-bottom: 0rem;
  }
  
  .filters-wrapper.row {
      display: grid;
      grid-template-columns: 2fr 4fr 1fr;
      flex-wrap: nowrap;
  }
  
  .filters-wrapper.row .menu {
      display: none !important;
  }
  
  
  .market-insight-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0rem;
    gap: 1rem;
  }
  
  .market-insight-filters label {
      padding:0px 10px !important;
  }

  .market-insight-filters .site-compact-input-group {
    display: flex;
    flex-direction: column;
  }

  .market-insight-filters select{
    box-shadow: none !important;
  }
  
  @media screen and (min-width:1000px) and (max-width: 1500px) {
    #market-insight-filters {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      margin: 1rem 0rem;
    }
    
    
  }
  
  @media screen and (min-width: 800px) and (max-width: 1000px) {
    .market-insight-filters {
      display: grid;
      grid-template-columns: 1fr 1fr;
      margin: 1rem 0rem;
    }
  
  
    div.site-compact-input-group {
      margin-bottom: 1rem;
      position: relative;
    }
  
  }
  
  @media screen and (min-width: 600px) and (max-width: 800px) {
    .market-insight-filters{
      grid-template-columns: 1fr 1fr;
      max-width: 100vw;
      gap: 0.5rem;
    }
    .site-compact-input-group {
      margin-bottom: 0rem !important;
      position: relative;
      
    }
  
  }
  
  
  
  .market-insight-filter-buttons{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  
  #mls-market-insight-wrapper {
      /* position: fixed; */
      /* width: 80vw !important; */
      height: 100vh;
      overflow: auto;
      padding: 0rem 2rem;
  }
  
  @media screen and (max-width: 600px){
    #mls-market-insight-wrapper{
      padding: unset;
    }
  }
  
  .listing-content-wrapper {
    display: flex;
    flex-direction: column;
  }
  
  img.listing-content-main-pic {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  .listing-content-pic {
      flex-basis: 35%;
      overflow: hidden;
      flex-grow: 0;
      flex-shrink: 0;
      margin-right: 1rem;
      border-radius: 8px;
  }
  
  .right-side-card-summary .minimize-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--site-border-lighter-grey);
    box-shadow: none;
  }
  
  .minimize-width-5rem{
    width: 5rem !important;
    flex: none !important; /* Turning off flex-basis */
  }
  
  .minimize-width-7rem{
    width: 7rem !important;
    flex: none !important; /* Turning off flex-basis */
  }
  
  .minimize-width-6rem{
    width: 6rem !important;
    flex: none !important; /* Turning off flex-basis */
  }
  
  .left-side-card-KPI-on-hover{
      position: absolute;
      right: 6rem;
      background-color: #329e93;
      min-width: 4rem;
      padding: 0.5rem;
      border-radius: 8px;
      color: white;
  }
  
  
  #KPI-table .grid-1x2{
    border-bottom: 1px solid var(--site-border-lighter-grey);
    padding-top: 0.5rem !important;
  }
  
  #KPI-table .grid-1x2 div:nth-child(even) {
    justify-self: end;
  }
  
  #KPI-table .grid-1x2 div:nth-child(odd) {
    justify-self: start;
  }
  
  .absolute-shit-by-7rem {
    position: absolute !important;
    right: 6rem !important;
  }
  
  .site-KPI-value-floating {
    background-color: var(--site-dark-green) !important;
    color: wheat !important;
    padding: 0.5rem;
    min-width: 6rem !important;
    border-radius: 8px;
  }
  
  .minimized [data-role="KPI-value"] {
    display: none !important;
  }
  
  .minimized [data-role='KPI-name']:hover + [data-role='KPI-value']{
    display: flex !important;
  }
  
  .minimized article:hover .link-detail{
    color: wheat !important;
  }
  
  .minimized .site-tooltip{
      position: relative;
      /* display: inline-block; */
      /* border-bottom: 1px dotted black; */
      overflow: visible;
      /* width: 100%; */
      margin: 0 !important;
      padding: 0 !important;
      margin-left: 6px !important;
      display: none
  }
  
  .minimized .m-2 { /* Overriding the margins when minimized */
    margin-left: 0px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0px !important;
    width: 100%;
  }
  
  .minimized .collapser-title {
    background-color: transparent;
    align-items: center !important;
    justify-content: center !important;
    display: flex;
    padding-left: 0rem !important;
    padding-right: 0rem;
  }
  
  .minimized .collapser-title-icon {
    width: 3rem;
    height: 3rem;
    background-color: transparent;
    border-radius: 50%;
    color: var(--site-dark-green);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--site-dark-green);
  }
  
  .minimized .collapser-title-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--site-dark-green);
  }
  
  .minimized .collapser-title-icon svg path.fa-primary {
    fill: var(--site-primary-duo);
  }
  
  .minimized .collapser-title-icon svg path.fa-secondary {
    fill: #00388d;
  }
  
  .minimized .collapser-title-icon .fa-primary {
    fill: wheat !important; /* Goes against the dark-green background */
  }
  
  .right-side-cards.minimized{
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    align-items: center;
    justify-content: flex-start;
  
  }
  
  .rent-assumption-p3 {
    display: grid;
    grid-template-columns: 2fr 7fr;
    grid-template-rows: auto;
    gap: 0.5rem;
    box-sizing: border-box;
    border: 1px solid var(--site-border-lighter-grey);
    margin: 1rem 1rem;
    border-radius: 5px;
  }
  
  .rent-assumption-p3 .assumption-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem;
  }
  
  .assumption-item.note {
    flex-basis: 35%;
    flex-grow: 0;
    flex-shrink: 0;
  }
  
  .assumption-item.period {
    flex-basis: 30%;
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .assumption-item.period .period{
    font-weight: 600;
  }
  
  .assumption-item.period .note{
    color: var(--site-border-light-grey);
    font-size: 1rem;
  }
  
  .assumption-item.value {
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    padding-left: 0rem !important;
  }
  
  .assumption-uom{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0rem 1rem;
  }
  
  .assumption-item input {
    width: 100%!important;
    border-left: 1px solid var(--site-border-lighter-grey);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid var(--site-border-lighter-grey);
  }
  
  .assumption-item input:focus {
    box-shadow: none !important;
    border-bottom: 3px;
    border-image-slice: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  
  #cashflow-table thead{
      position: sticky;
      top: 0rem;
      background-color: white;
      z-index: 2;
      border: 1px solid var(--site-border-lighter-grey);
  }
  
  #cashflow-table thead th{
    border: 1px solid var(--site-border-lighter-grey);
  }
  
  .summary-title{
    font-size: clamp(1.35rem, 1.5vw, 1.5rem);
    font-family: var(--site-ff) !important;
    font-weight: 600;
    /* border-bottom: 1px solid var(--site-border-lighter-grey); */
    
  }
  
  .summary-list{
    padding-left: 2rem;
    padding-bottom: 0rem;
  }
  
  .summary-subtitle{
    font-size: clamp(1.25rem, 1.5vw, 1.35rem);;
    font-family: var(--site-ff) !important;
    font-weight: 200;
    color: var(--site-medium-grey);
    /* border-bottom: 1px solid var(--site-border-lighter-grey); */
    padding-left: 2rem;
    
  }
  
  #KPI-table article {
      border-left: var(--nav-border-thickness) solid transparent !important;
    padding: 0.5rem;
  }
  
  #KPI-table article:hover {
      background-color: var(--site-border-light-grey);
      border-left: var(--nav-border-thickness) solid var(--site-dark-turquoise) !important;
      background-color: var(--site-bg-primary-light);
  }
  
  .minimized .date-summary{
    font-family: var(--site-ff) !important;
    font-weight: 300;
    font-size: clamp(1rem, 1vw, 1.2rem) !important;
  }
  
  .minimized .date-summary-value{
    display: none !important;
  }
  
  .minimized .grid-1x2{
    display: grid;
    grid-template-columns: 1fr;
  }
  
  #annual-cashflow-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0;
    border-bottom: 0px !important;
  }
  
  #annual-cashflow-table table{
    display: grid;
    grid-template-columns: 1fr;
    width: 100% !important;
  }
  
  #annual-cashflow-table td{
    max-width: unset !important;
    min-width: unset !important;
  }
  
  .chart-container-d3{
    display: flex;
    align-self: center;
    justify-content: center;
  }
  
  
  /* .chart-container-d3 rect{
    pointer-events: all;
    fill-opacity: 0;
    stroke-opacity: 0;
    z-index: 1;
  }
  
  .chart-container-d3.tooltip {
    position: absolute;
    padding: 5px;
    background-color: red;
    color: blue;
    border: 1px solid white;
    border-radius: 4px;
    display: none;
    opacity: 0.9;
    font-size: 14px;
    z-index: 1000;  
  }
  
  .chart-container-d3.tooltip-line {
    stroke: red;
    stroke-opacity: 0.75;
    stroke-width: 1px;
    stroke-dasharray: 3, 3;
    z-index: 999;
  } */
  .chart-container-d3.tooltip {
    position: absolute;
    top: 0px;
    padding: 10px; 
    background-color: var(--site-dark-green);
    color: wheat;
    border: 1px solid white;
    border-radius: 4px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    font-size: 14px;
    z-index: 1000;
    max-width: 200px;  
    width: 8rem;
    height: 2rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .chart-container-d3.tooltip-line {
    stroke: red;
    stroke-opacity: 0.75;
    stroke-width: 1px;
    stroke-dasharray: 1, 1;
  }
  
  
  
  #market-insight-filter-buttons .toggle-switch-text {
    /* width: 25rem !important; */
    flex-wrap: wrap;
  }
  
  .contact-app-text {
      font-family: var(--site-ff);
      font-weight: 100;
      font-size: calc(1.2 * var(--site-fs));
      color: var(--site-medium-grey);
  }
  
  .contact-app-text:hover {
      font-family: var(--site-ff);
      font-weight: 400;
      font-size: calc(1.2 * var(--site-fs));
      color: var(--site-milori-blue);
  }
  
  .site-app-wrapper{
    display: grid;
    grid-template-columns: 1fr;
    width: 5.5rem !important;
    gap:0.25rem;
    margin: 1rem;
  
  }
  
  .market-insight-filters .filter-button-container, .market-update-kpi-wrapper .filter-button-container{
    border: 1px solid var(--site-medium-grey);
    border-bottom: 0.125rem solid var(--site-medium-grey);
    border-radius: 6px;
    width: 10rem;
    height: 3.5rem !important;
    font-size: 1.0625rem;
    padding-left: var(--input-padding) !important;
    line-height: 147.6%;
    padding-top: 0.825rem;
    padding-bottom: 0.5rem;
    /* margin-top: 0.5rem !important; */
    min-width: unset !important;
    max-width: unset !important;
    width: 100% !important;
  }
  
  .market-insight-filters article input[type="text"]{
    max-height: 3rem !important;
    border-radius: 0.25rem !important;
    height: calc(1.5em + .75rem + 2px);
  }
  
  .market-insight-filters article input[type="range"]{
    border: 0px !important;
    padding:0rem !important;
    height: 6.5px !important;
  }
  
  /* .range-value[name="min-range-value"] {
      bottom: 0rem;
  }
  
  .range-value[name="max-range-value"] {
      top: 0rem;
  } */
  
  .grid-switches{
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
  }
  
  /* .grid-switches div {
      margin-bottom: 0.25rem;
  } */
  
  div#chart-setting-icon {
    background-color: var(--site-border-lightest-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 8px;
    border: 1px solid var(--site-border-lighter-grey);
  }
  
  @media screen and (max-width: 1200px) {
    .grid-switches{
      display: grid;
      grid-template-columns: 2fr 2fr 1fr;
    }
  }
  
  @media screen and (max-width: 600px) {
    .market-insight-filters {
        grid-template-columns: 1fr ;
        max-width: 90vw;
        gap: 0.5rem;  
    }  
  
    .grid-switches {
      display: grid;
      grid-template-columns: 1fr;
      max-width: 400px;
      gap: 0.5rem;
    }
  
    .market-insight-filters div.site-compact-input-group {
      position: relative;
      margin: 0.5rem 0rem !important;
      padding: 0rem !important;
    }
  
    .market-insight-filters .site-compact-input-group label {
      position: relative;
      margin-bottom: 0rem !important;
      margin: 0rem !important;
      padding: 0rem !important;
    }
  
    .market-insight-filters .site-compact-input-underlined select + .site-compact-input-label.has-value {
      color: var(--site-secondary-link);
      position: absolute;
      top: -0.75rem !important;
      background-color: #fafafa;
      font-size: 1.1rem;
      padding: 0rem 0.5rem;
    }
  
    .market-insight-filters .field-label-icon i {
      font-size: clamp(1rem, 1vw, 1.5rem);
      margin-right: 0.5rem;
      color: var(--site-dark-green);
    }
  
    .market-insight-filters .field-label-name {
      font-size: clamp(0.9rem, 1vw, var(--site-fs));
      font-weight: 300;
      font-family: var(--site-ff);
      color: var(--site-dark-green);
    }
  
    .market-insight-filters .site-compact-input-underlined select {
      margin: unset;
      /* width: 90% !important; */
      height: 2.75rem !important;
      font-size: clamp(0.9rem, 1vw, 1.05rem);
      padding-left: var(--input-padding) !important;
      line-height: 147.6%;
      padding-top: 0.825rem;
      padding-bottom: 0.5rem;
    } 
  
    .market-insight-filters .filter-button-container {
      height: 2.75rem !important;
      font-size: clamp(0.9rem, 1vw, 1.05rem);
    }
  
    .map-filter.double-range {
      min-width: 275px;
      max-width: 450px;
      position: absolute;
      z-index: var(--top-2-layer);
      background-color: white;
      min-height: 10rem;
      padding: 1rem 1rem;
      /* margin: 1.5rem 0.5rem; */
      border-radius: var(--site-border-radius);
      border: 1px solid var(--site-dark-green);
      min-height: 13rem;
      top: 2rem;
    }
  
    input[data-type="switch"] + label {
      cursor: pointer;
      text-indent: -999px;
      width: 40px;
      height: 20px;
      background: grey;
      display: block;
      border-radius: 20px;
      position: relative;
    }
  
    input[data-type="switch"] + label::after {
      content: '';
      position: absolute;
      top: 1.5px;
      left: 2.5px;
      width: 17px;
      height: 17px;
      background: #fff;
      border-radius: 20px;
      transition: 0.3s;
    }
  }
  
  @media screen and (max-width: 1200px){
    #market-insight-filter-buttons {
      padding: 0rem 1rem !important;
    }
  
    #market-insight-filters label .site-compact-input-label, #market-insight-compare-content label .site-compact-input-label {
      padding: 0rem 3px 0px 3px;
      margin: 0rem -1rem;
    }
  
  }
  
  
  /* CSS for styling the radio buttons like Google's Material Design */
  
  /* ++++ Added specificity to prevent interference */
  .year-built-range-wrapper .year-built-types-radio-group {
      display: grid;
      grid-template-columns: 1fr;
      margin-top: 10px;
  }
  
  .year-built-range-wrapper .year-built-type-label {
    display: flex;
    align-items: center;
    margin-right: 15px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #202124;
    user-select: none;
    position: relative;
  }
  
  .year-built-range-wrapper .year-built-type-label input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 1.5px solid rgba(0, 0, 0, 0.54);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    outline: none;
    cursor: pointer;
    display: inline-block; /* ++++ Added display inline-block */
  }
  
  .site-compact-input-group input[name="year-built-type"]{
    padding: 0.5rem;
  }

  .site-compact-input-group input {
    max-height: 3.5rem !important;
    border-radius: var(--site-border-radius-sm);
  }

  .site-compact-input-group > label:not(:has(.site-compact-input-helper)){
      display: grid;
      grid-template-columns: 1fr;
      margin: 0rem !important;
      /* padding: 0rem 1rem !important; */
  }
  
  [id^="additional-revenue-inputs-group"] .site-table-tr-center {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 1rem;
    row-gap: 2rem;
  }

  @media screen and (max-width: 740px){
    [id^="additional-revenue-inputs-group"] .site-table-tr-center {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      padding: 1rem;
    }

    .site-compact-input-group label {
      display: grid;
      grid-template-columns: 1fr;
      margin: 0rem !important;
      padding: 0rem 0rem !important;
    }
    
  }
  
  .year-built-range-wrapper .year-built-type-label input{
    margin-bottom: 0rem !important;
  }
  
  .year-built-range-wrapper .year-built-type-label {
    margin-bottom: 1rem !important;
  }
  
  .year-built-range-wrapper .year-built-type-label input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 7%;
    left: 7%;
    width: 85%;
    height: 85%;
    background-color: #006400; /* ---- Changed to dark green */
    border-radius: 50%;
  }
  
  /* ++++ Apply box shadow on label when it's active */
  .year-built-range-wrapper .year-built-type-label input:focus {
    box-shadow: 0 0 0 4px rgba(0, 100, 0, 0.2); /* ---- Added dark green box shadow when pressed */
  }
  
  /* ---- Ensure no persistent focus box-shadow */
  .year-built-range-wrapper .year-built-type-label input:focus {
    box-shadow: none;
  }
  
  
  #year-built-range-wrapper .map-filter.double-range{
    min-height: 25rem;
  }
  
  @media screen and (max-width: 600px){
    .year-built-range-wrapper .year-built-type-label input[type="radio"]:checked::after {
      content: '';
      position: absolute;
      top: 6%;
      left: 6%;
      width: 85%;
      height: 85%;
      background-color: #006400; /* ---- Changed to dark green */
      border-radius: 50%;
    }
  
    .modal-container {
      position: fixed;
      top: 5rem;
      left: 0;
      transform: translate(-50%, -50%) scale(0);
      transition: 200ms ease-in-out;
      /* border-radius: 10px; */
      background-color: var(--site-secondary-bgcolor);
      border-radius: 15px;
      z-index: 100;
      /* width: 500px; */
      max-width: 80%;
    }
  
    .modal-container.active {
      transform: translate(0%, 0%) scale(1);
      max-height: 85vh !important;
      overflow: auto;
      max-width: 90vw;
      z-index: var(--top-1-layer);
      width: 80vw !important;
    }
  
  
  }
  
  .listing-table-wrapper{
    max-height: 800px;
    overflow: scroll;
    padding-bottom: 5rem;
    
    
  }
  
  @media screen and (max-width: 850px) {
    .listing-table-wrapper {
      max-height: 600px;
      overflow: scroll;
      padding-bottom: 5rem;
      margin: 2rem 1rem !important;
      width: auto;
    }
  
    .grid-table-12c {
      display: flex !important;
      /* flex-direction: column; */
      overflow: scroll;
      width: 80vw !important;
    }
  
    .grid-table-12c .grid-table-header, .grid-table-12c .grid-table-row{
      display: flex !important;
      flex-direction: column;
    }
  
    .grid-table-header {
      display: grid;
      grid-template-columns: 1fr 2fr 2fr 2fr 2fr 2fr 2fr;
      padding: 0rem 0.5rem !important;
      border-radius: 0 !important;
    }
  
    .grid-table-header-item {
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      /* height: 100%; */
      width: 100%;
      /* min-height: 4rem; */
      font-size: clamp(0.9rem, 1vw, 1rem);
    }
  
    .grid-table-body {
      display: flex;
      flex-direction: row;
      overflow: auto;
    }
  
    .grid-table-12c .grid-table-row {
      display: flex;
      flex-direction: column;
      
    }
  
    .grid-table-cell {
      text-align: left;
      font-size: clamp(1rem, 1vw, 1.1rem) !important;
      font-family: var(--site-ff);
      font-weight: 300;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 100%;
      width: 100%;
      /* min-height: 4rem; */
      font-size: clamp(0.9rem, 1vw, 1rem) !important;
    } 
  }
  
  .chart-title-d3 {
      font-size: clamp(1.5rem, 2vw, 2.5rem);
      font-family: var(--site-ff);
      font-weight: 200;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--site-border-radius);
      padding: 0.25rem;
    flex-direction: column;
  }
  
  .sort-arrow.up-arrow, .sort-arrow.down-arrow {
      background-color: transparent;
      color: #5ec8b3;
      cursor: pointer;
  }
  
  .sort-arrow.up-arrow:hover, .sort-arrow.down-arrow:hover {
      color: var(--site-primary);
  }
  
  .legend {
      display: grid;
      gap: 3rem;
  }
  
  .chart-legend-d3{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--site-dark-turquoise);
    border-radius: 8px;
    /* margin-bottom: 4rem; */
  }
  
  .slider-range-d3 {
      position: relative;
      z-index: var(--top-5-layer);
  }
  
  .buttons-group-3 {
    border: 1px solid var(--site-border-light-grey);
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: fit-content;
    align-items: center;
    height: fit-content;
  }
  
  .three-options-box {
    padding: 0.5rem;
    background-color: #f4f4f4;
    text-wrap: nowrap;
    cursor: pointer !important;
    transition: all 300ms ease;
  }
  
  .three-options-box:hover{
    background-color: #276f66 !important;
    color: white;
    cursor: pointer !important;
  }
  
  .three-options-box:nth-child(1) {
    border-right: 1px solid var(--site-border-light-grey);
    padding: 0.5rem;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  
  .three-options-box:last-child {
    border-left: 1px solid var(--site-border-light-grey);
    padding: 0.5rem;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  
  .three-options-box.active{
      background-color: #276f66;
      color: white;
  }
  
  .display-settings {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid var(--site-border-lighter-grey);
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    height: 3rem;
  }
  
  .setting-icon {
    padding: 0rem 2rem;
  }
  
  .setting-icon i, .setting-text {
    font-size: var(--site-fs-subtitle);
    font-weight: 500;
  }
  
  .market-insight-header {
    display: flex;
    align-items: center;
    justify-content: start;
  }
  
  .x-axis-tick text, .y-axis text {
    font-size: clamp(0.7rem, 1vw, 0.8rem);
    fill: var(--site-lightest-grey);
    font-weight: 400;
  }
  
  .x-axis-tick text:hover, .y-axis text:hover {
    font-size: clamp(0.9rem, 1vw, 1rem);
    fill: var(--site-dark-green);
  }
  
  
  .interest-rate-marker text {
    font-size: 1rem;
    font-family: var(--site-ff);
    fill: #84a996;
    z-index: 1000;
  }
  
  .interest-rate-marker text:hover {
    font-size: 12px;
    fill: var(--site-dark-green);
    z-index: 10;
    text-shadow: 1px 1px 2px #c6c6c6, -1px -1px 2px #ffffff, 1px -1px 2px #d3e4ca, -1px 1px 2px #8ec071;
  }
  
  #compare-toggle-switch-wrapper{
    min-width: 23rem !important
  }
  
  label.site-compact-input-underlined svg, .button-icon svg {
    width: .85rem !important;
    height: .85rem !important;
    fill: #666666 !important;
    /* position: relative; */
    bottom: 0.25rem;
  }
  
  .custom-drop-down {
    background-color: white;
    margin-top: 0.35rem;
    padding: 1rem 0rem 0rem 0rem;
    border-radius: 8px;
    border: 1px solid var(--site-border-lighter-grey);
    position: absolute;
    z-index: var(--top-3-layer);
    width: 100%;
    max-height: 50vh;
    overflow: auto;
    z-index: var(--top-3-layer)
  }
  
  
  label.site-compact-input-underlined .custom-drop-down svg {
    width: 12px !important;
    height: 10px !important;
    fill: var(--site-dark-green) !important;
    position: relative;
    bottom: 0.25rem;
  }
  
  .custom-drop-down .checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 0.5rem;
    padding-left: 1.5rem;
    padding-top: 0.5rem !important;
  }
  
  .custom-drop-down .checkbox-wrapper:hover {
    border-left: 2px solid darkturquoise;
    background-color: var(--site-primary-bgcolor);
  }
  
  .custom-drop-down .checkbox-wrapper .cbx {
    margin: 0rem 0.5rem 0rem 0rem;
  }
  
  .custom-drop-down .custom-option {
    font-family: var(--site-ff);
    font-size: clamp(0.95rem, 2vw, 1.1rem);
  }
  
  .custom-drop-down .checkbox-wrapper .site-checkbox:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
  }
  
  .custom-drop-down .checkbox-wrapper label{
    padding: 0;
  }
  
  .custom-drop-down .checkbox-wrapper input[type="checkbox"] {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .custom-drop-down .checkbox-wrapper .cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none !important;
    stroke: #FFFFFF;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
  }
  
  .site-form-control.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23666666%22 d=%22M7 10l5 5 5-5z%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right;
    position: relative;
    left: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: start;
    color: black;
    font-size: 1.0625rem;
    font-family: var(--site-ff);
  }
  
  .site-compact-input-group .site-form-control.select{
    height: 4rem !important;
  }
  
  .custom-drop-down .search-field {
    height: 3rem;
    border-radius: 8px;
  }
  
  .custom-drop-down .select-options{
    padding: 0rem 0.5rem;
  
  }
  .compare-box-insta-bg {
      background-image: 20rem;
      color: white;
      padding: 0.5rem 1rem;
      margin: 0rem 1rem;
      border-radius: 8px;
      width: 12rem;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .site-button-border-gradient-insta {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #c128b8;
    /* background-color: #000000; */
    border: none;
    border-radius: 20rem;
    margin: 0.5rem 0rem;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer; /* Added for better UX when using div */
    z-index: 1;
  }
  
  .site-button-border-gradient-insta::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--site-gradient-insta);
    z-index: -1;
    border-radius: 20rem;
  }
  
  .site-button-border-gradient-insta::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background-color: #ffffff; /* Same as the element's background color */
    z-index: -1;
    border-radius: 20rem;
    transition: background-color 0.4s ease; 
  }
  
  .site-button-gradient-insta{
    background-image: var(--site-gradient-insta);
    color: white;
    border-radius: var(--site-border-radius);
    border: 2px solid wheat;
    margin: 0rem 1rem;
    padding: 1rem 2rem;
  }
  
  /* Hover effect */
  .site-button-border-gradient-insta:hover{
    color: white;
  }
  .site-button-gradient-insta:hover::after, .site-button-border-gradient-insta:hover::after {
    /* background-image: var(--site-gradient-insta); 
    transition: background-image 600ms ease-in-out; 
    background-size: 100%; 
    background-position: center; 
    animation: gradient-fill 600ms forwards;  */
    background-image: var(--site-gradient-insta);
    background-position: right center;
    color: #fff;
    text-decoration: none;
  }
  
  /* Keyframes for the gradient fill */
  @keyframes gradient-fill { 
    from {
      background-size: 0%; 
    }
    to {
      background-size: 200%; 
    }
  }

  .site-button-gradient-blue-green {
    background-image: var(--site-gradient-blue-green);
    color: var(--site-dark-green);
    border-radius: var(--site-border-radius);
    border: 2px solid wheat;
    margin: 0rem 1rem;
    padding: 1rem 2rem;
    font-weight: 600;
    text-transform: capitalize;
    outline: none;
  }

  .site-button-gradient-blue-green:hover::after, .site-button-gradient-blue-green:hover::after {
    /* background-image: var(--site-gradient-insta); 
    transition: background-image 600ms ease-in-out; 
    background-size: 100%; 
    background-position: center; 
    animation: gradient-fill 600ms forwards;  */
    background-image: var(--site-gradient-blue-green);
    background-position: right center;
    color: #fff;
    text-decoration: none;
  }
  
  [id^="selected-item-"].simple-tag {
    margin-right: 2rem !important;
  }
  
  [id^="selected-item-"].simple-tag .close-button {
      left: 50%;
    bottom: 50%;
    right: 0;
    transform: translate(50%, -100%);
    display: none;
  }
  
  [id^="selected-item-"].simple-tag:hover .close-button{
    display: block;
    left: 65%;
    top: -35% !important;
    right: 0;
  }
  
  .toggle-switch {
      margin-left: 2rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;
  }
  
  .chart-d3-title-part {
    font-size: clamp(1rem, 1.25vw, 1.2rem) !important;
    font-family: var(--site-ff);
    font-weight: 400;
    /* margin: 0rem 1rem; */
    color: var(--site-dark-green);
    text-transform: capitalize;
    min-width: fit-content;
    background-color: var(--site-bg-primary-light);
    border-radius: 8px;
    padding: 6px;
    margin-right: 1rem;
    margin-bottom: 8px;
  }
  
  .chart-d3-title-part:hover {
    background-color: var(--site-dark-green);
    color: white;
  }
  
  .chart-d3-title-part:after {
    /* content: ' | '; */
    margin: 0rem 0.5rem;
  }
  
  .chart-d3-title-part:last-child:after {
    content: '';
  }
  
  .site-description{
    overflow:auto;
    font-size: var(--site-fs);
    font-family: var(--site-ff);
    font-weight: 300;
  }
  
  svg.d3-bubble-chart g.d3-bubble-chart-main{
    transform: translate(5%, 10px);
  }
  
  svg.d3-bubble-chart text.x-axis-label {
    transform: translate(25%, -3%);
  }
  
  svg.d3-bubble-chart text.y-axis-label{
    transform: rotate(90deg) translate(20%, -80%);
    transform-origin: center;
  
  }
  
  #d3-mls-chart-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ensure it spans the parent container's width */
    height: 400px; /* Default height */
    margin: 0;
    padding: 0;
  
    overflow: hidden; /* Prevent any unwanted overflow */
    position: relative; /* Ensure proper positioning of SVG content */
  }
  
  
  @media screen and (max-width: 768px) {
    #d3-mls-chart-container {
      height: 300px; /* Adjust height for tablets */
    }
  }
  
  @media screen and (max-width: 480px) {
    #d3-mls-chart-container {
      height: 250px; /* Adjust height for mobile */
    }
  }
  
  
  #d3-mls-chart-container svg {
    width: 100%; /* Allow the SVG to scale to fill the container */
    height: 100%; /* Maintain proportional scaling */
    display: block; /* Remove inline spacing issues */
    overflow: visible; /* Ensure contents inside the SVG are not clipped */
  }
  
  
  
  @media screen and (min-width: 1200px) {
    #d3-mls-chart-container{
      width: 100%;
      height: 400px;
    
    }
    
  }
  
  #market-insight-compare-content {
      display: grid;
      grid-template-areas: "city" 
                         "community";
      gap: 1rem;
  }
  
  @media screen and (max-width: 726px) {
    #market-insight-compare-content{
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 1rem;
    }
    
    
  }
  
  .bubble-records-table {
      position: absolute;
      top: 10rem;
      width: 90vw !important;
      z-index: var(--top-1-layer);
      border: 1px solid var(--site-border-lighter-grey);
      border-radius: 8px;
      padding: 1rem;
      background-color: white;
      left: 7rem;
      box-shadow: var(--bs-d-3);
  }
  
  .bubble-records-title-row {
    height: 5rem;
    background-color: white;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
  }
  
  #bubble-records .close-button-container {
    z-index: var(--top-1-layer);
  }
  
  .header-form {
      background-color: #fafafa;
      padding: 2rem;
      border-radius: var(--site-border-radius);
      margin: 2rem;
      border: 1px solid var(--site-border-lighter-grey);
      display: flex;
      flex-direction: column;
    min-width: 50vw !important;
  }
  
  .nav-item-underline {
      cursor: pointer;
      position: relative;
      text-align: center;
      font-family: var(--site-ff);
      font-size: var(--site-fs-subtitle);
  }
  
  .nav-item-underline::after{
    position: absolute;
    content: "";
    height: 3px;
    width: 0%;
    background-color: #ff105e;
    left: 0;
    bottom: -7px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    animation: appear 0.2s linear;
  
  }
  
  
  .nav-item-underline:hover::after{
    position: absolute;
    content: "";
    height: 3px;
    width: 100%;
    background-color: #ff105e;
    left: 0;
    bottom: -7px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    animation: appear 0.2s linear;
  
  }
  
  .nav-item-underline.active::after{
    position: absolute;
    content: "";
    height: 3px;
    width: 100%;
    background-color: var(--site-bg-nav-dark);
    left: 0;
    bottom: -7px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
  }
  
  @keyframes appear {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }
  
  .responsive-grid{
    display: grid;
    /* grid-template-columns: repeat(2, 1fr); */
    gap: 1rem;
    align-items: start;
    margin: 1rem 2rem;
    padding: 1rem;
  }
  @media screen and (max-width: 800px){
    .responsive-grid{
      display: grid;
      grid-template-columns: repeat(1, 1fr) !important;
      gap: 1rem;
    }
  
  }
  
  .section-header {
      font-family: var(--site-ff);
      font-size: clamp(1.25rem, 1vw, 1.75rem);
      text-transform: capitalize;
      color: var(--site-bg-nav-dark);
      font-weight: 400;
      border-bottom: 1px solid var(--site-border-lighter-grey);
      margin: 0.5rem 0rem;
  }
  
  .component-form{
    width: 90% !important;
  }
  
  #real-estate-purchase-scenario {
      display: flex;
      align-items: center;
      justify-content: center;
    position: sticky;
    top: 7rem !important;
  
  }
  
  #scenario-analysis-wrapper, .scenario-analysis {
      display: flex;
      flex-direction: column;
      background-color: white;
      padding: 2rem clamp(1rem, 1vw, 4rem) !important;
      border-radius: var(--site-border-radius);
      border: 1px solid var(--site-light-grey);
  }
  
  #scenario-analysis-wrapper .component-wrapper{
    height: 40vh !important;
    overflow-y: auto;
    overflow-x: hidden;
  
  }
  
  
  #real-estate-purchase-scenario .site-compact-input-group{
    margin-bottom: 0.25rem !important;
  }
  
  .underline-nav-bar {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      border-bottom: 2px solid #e0e0e0;
      margin-top: 1.5rem;
      flex-wrap: wrap;
  }
  
  .underline-nav-item {
      margin: 0 15px;
      padding: 10px;
      font-size: var(--site-fs-subtitle);
      color: var(--site-dark-green);
      cursor: pointer;
      position: relative;
      transition: color 0.3s ease-in-out;
      text-transform: capitalize;
    flex: 1;
  }
  
  .underline-nav-item.active {
      color: var(--site-dark-green);
      font-weight: bold;
  }
  
  .underline-nav-item:hover {
      color: var(--site-dark-green);
  }
  
  .underline-nav-item:hover::after, .underline-nav-item.active::after{
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background-color: var(--site-dark-green);
      transition: width 0.3s ease, left 0.3s ease;
      width: 100%;
      left: 0;
  }
  
  #real-estate-purchase-scenario .site-compact-input-label {
      top: -0.5rem !important;
      font-size: 0.9375rem;
      margin-bottom: 32px;
      background-color: transparent;
      padding: 3px;
      width: max-content !important;
      background-color: #fff;
  }
  
  
  .site-alert-instruction {
      background-color: #c2e7ff4f;
      padding: 1rem 2rem;
      border-radius: var(--site-border-radius);
      margin-top: 1rem;
      border: 1px solid #b3c6d2;
      font-family: var(--site-ff);
      font-size: var(--site-fs);
      font-weight: 300;
  }
  
  .full-page-center-content{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }
  
  .upgrade-subscription-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #fafafa;
    border: 1px solid var(--site-border-lighter-grey);
    border-radius: var(--site-border-radius);
    width: 50%;
    padding: 3rem;
    max-width: 40rem;
  }
  
  .guage-chart-container {
      display: flex;
      align-items: start;
      justify-content: center;
      height: 250px !important;
      /* background-color: #fafafa;
      border: 1px solid var(--site-light-grey);
      border-radius: var(--site-border-radius); */
  }
  
  /* where --site-dark-green: #16665d */
  .gauge-gradient-stop1 { stop-color: #6fd5c9; }
  .gauge-gradient-stop2 { stop-color: #48b1a5; }
  .gauge-gradient-stop3 { stop-color: #279084; }
  .gauge-gradient-stop4 { stop-color: var(--site-dark-green); }
  
  /* Blue Gradients */
  .gauge-gradient-primary-stop1 { stop-color: #a8edea; } /* Light Aqua */
  .gauge-gradient-primary-stop2 { stop-color: #6fd5c9; } /* Bright Teal */
  .gauge-gradient-primary-stop3 { stop-color: #48b1a5; } /* Rich Teal */
  .gauge-gradient-primary-stop4 { stop-color: #16665d; } /* Deep Blue-Teal */
  
  /* Orange Gradients */
  .gauge-gradient-secondary-stop1 { stop-color: #ffecb3; } /* Pale Yellow */
  .gauge-gradient-secondary-stop2 { stop-color: #ffc107; } /* Vibrant Orange */
  .gauge-gradient-secondary-stop3 { stop-color: #ff9800; } /* Rich Orange */
  .gauge-gradient-secondary-stop4 { stop-color: #ff5722; } /* Deep Orange */
  
  /* Purple Gradients */
  .gauge-gradient-tertiary-stop1 { stop-color: #e0c3fc; } /* Soft Lilac */
  .gauge-gradient-tertiary-stop2 { stop-color: #a29bfe; } /* Light Purple */
  .gauge-gradient-tertiary-stop3 { stop-color: #6c5ce7; } /* Rich Purple */
  .gauge-gradient-tertiary-stop4 { stop-color: #341f97; } /* Deep Violet */
  
  
  .gauge-tick {
      font-size: 1rem !important;
      font-family: var(--site-ff);
      fill: var(--site-dark-green);
  }
  
  .d3-guage-md{
    width: 100% !important;
    height: auto !important;
    max-width: 50rem !important;
  }
  
  
  .pie-chart-label-text{
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  }
  
  .d3-pie-chart{
    width: 100% !important;
    height: auto !important;
    position: relative;
  }
  
  .d3-pie-chart-legend-item {
      display: flex;
      align-items: center;
      justify-content: start;
      margin-bottom: 0.25rem;
  }
  
  .d3-pie-chart-legend-color{
    width: clamp(1.25rem, 1.5vw, 1.75rem);
    height: clamp(1.25rem, 1.5vw, 1.75rem);
    border-radius: 3px;
    margin-right: clamp(0.5rem, 1vw, 1rem);
  }
  
  .d3-pie-chart-legend-text {
      font-size: clamp(0.9rem, 1vw, 1rem);
      padding-left: 0rem;
      padding-right: 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
  }
  
  .d3-pie-chart-legend-text .legend-label{
    text-transform: capitalize;
    font-family: var(--site-ff);
    font-weight: 300;
    font-size: clamp(0.9rem, 1vw, 1rem);
  }
  
  .d3-pie-chart-tooltip {
    position: absolute;
    text-align: center;
    padding: 6px;
    font-size: 12px;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
  }
  
  .kpi-charts{
    /* d-flex align-items-center justify-content-between flex-wrap */
    display: grid;
    grid-template-columns: repeat(3, 1fr);   
  }
  
  @media screen and (max-width: 767px) {
    .kpi-charts{
      /* d-flex align-items-center justify-content-between flex-wrap */
      display: grid;
      grid-template-columns: 1fr;   
    }
    
  
  }
  
  .detailed-explanation.active {
    max-width: 50vw !important;
  }
  
  /* Profit text styling */
  .profit-label {
    font-weight: bold;
  }
  
  .profit-value {
    font-weight: bold;
  }
  
  .d3-charts-container {
      display: grid;
      grid-template-columns: 1fr;
      justify-content: space-between;
      background-color: #fafafa;
      border: 1px solid var(--site-light-grey);
      border-radius: var(--site-border-radius);
  }
  #d3-pie-chart-container svg {
    width: 100%;
    height: 100%;
    display: block; /* Remove any default margins or paddings */
  }
  
  .d3-pie-chart-and-legend-h{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .d3-pie-chart-and-legend-v{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  
  .d3-pie-chart-legend{
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1 0 50%;
    column-gap: 2rem;
    row-gap: 0.5rem;
  }
  
  .d3-pie-chart-slice-value-hovered{
    font-size: 1rem;
    text-transform: uppercase;
    color: red;
    fill: red;
  }
  
  .needle-gauge-text{
    font-size: clamp(1.2rem, 1.5vw, 1.5rem);
    font-family: var(--site-ff);
    text-transform: capitalize;
  }
  
  .pie-chart-slice-info{
    min-height: 5rem !important;
  }
  
  .pie-chart-slice-info .slice-label, .pie-chart-slice-info .slice-value {
    text-transform: capitalize;
    font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  
  }
  
  .field-error-border{
    border: 1px solid var(--site-orange) !important;
  }
  
  .field-error-text{
    color: var(--site-orange) !important;
    font-weight: 250;
  }
  
  /* Tooltip Container */
  .site-tooltip-v2 {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  /* Tooltip Text (Hidden by Default) */
  .site-tooltip-v2 .site-tooltiptext-v2 {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%; /* Position above the tooltip trigger */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333; /* Dark background */
    color: #fff; /* White text */
    text-align: left;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.5;
    z-index: 1;
    transition: opacity 0.3s ease-in-out;
    width: 250px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* Tooltip Arrow */
  .site-tooltip-v2 .site-tooltiptext-v2::after {
    content: '';
    position: absolute;
    top: 100%; /* Position the arrow at the bottom of the tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: #333 transparent transparent transparent; /* Arrow color matches the tooltip background */
  }
  
  /* Show Tooltip on Hover */
  .site-tooltip-v2:hover .site-tooltiptext-v2 {
    visibility: visible;
    opacity: 1;
  }
  
  /* Formula Section Styling */
  .tooltip-formula {
    font-weight: bold;
    margin-bottom: 8px;
    color: #ffdd57; /* Optional: Highlight the formula in a different color */
  }
  
  /* Description Section Styling */
  .tooltip-description {
    color: #f1f1f1;
  }
  
  .landing-page-footer .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #1c4d47;
    margin-left: 0rem !important;
    margin-right: 0rem !important;
    max-width: 100%;
  }
  
  .footer-social ul{
    display: flex;
    align-items: center;
    justify-content: start;
  }
  
  .landing-page-footer {
    font-size: 10px;
    font-style: normal;
    text-align: left;
    border: 0px;
    width: 100%;
    height: 200px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #1c4d47;
    color: white;
    margin-top: 8rem;
  
  }
  
  .footer-links a, .footer-bottom a {
    color: var(--site-border-light-grey);
  }
  
  .footer-links a:hover, .footer-bottom a:hover {
    color: white;
  }
  
  .footer-content {
    display: flex;
    flex-direction: column;
    margin: auto;
  }
  
  .footer-bottom {
    color: var(--site-border-lighter-grey);
  }  
  
  .confirmation-message {
    background-color: #b3bff5;
    padding: 2rem;
    border-radius: var(--site-border-radius);
    margin-top: 2rem;
  }
  
  #develuppers-address .popup-content{
    padding: 1rem !important;
  }
  
  .about-section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 5rem;
    max-width: 1400px;
    background-color: var(--site-lighter-grey);
    padding: 3rem;
    border-radius: var(--site-border-radius);
    border: 1px solid var(--site-border-lighter-grey);
  }
  
  .container.page {
    background-color: #fafafa;
    padding: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 5rem auto;
    max-width: 1200px;
    border-radius: var(--site-border-radius);
    border: 1px solid var(--site-border-lighter-grey);
  }
  
  #founder-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    background-color: #ffefe1;
    padding: 1rem;
    border-radius: 1rem;
  }
  
  .founder-story-image {
    /* background-image: url(/static/images/ehsan_profile_pic3.jpg); */
    background-size: contain;
    /* background-position: 100% 100%; */
    background-repeat: no-repeat;
  
  }
  
  .founder-story-image img{
      width: 100%;
      height: auto;
      border-radius: 1rem;
  
  }
  
  
  #founder-text, .static-text-block {
    font-size: clamp(1rem, 1vw, 1.1rem);
    font-weight: 300;
    line-height: 1.75;
    font-family: var(--site-ff);
    margin-top: 1rem;
    margin-bottom: 2rem;
  }
  
  .about-us-li{
    font-size: clamp(1rem, 1vw, 1.1rem);
    font-weight: 300;
    line-height: 1.75;
    font-family: var(--site-ff);
    margin-bottom: 0.5rem;
  
  }
  
  .about-us-li strong{
    font-weight: 600;
    font-size: clamp(1rem, 1vw, 1.1rem);
    line-height: 1.75;
    font-family: var(--site-ff);
    margin-bottom: 0.5rem;
  }
  
  #year-built-range-wrapper button.reset-filter{
    margin-top: 6rem !important;
    margin-bottom: 0rem;
  
  }
  
  
  /* Default styles (applies to all screen sizes unless overridden) */
  .meta-data-items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin: 0rem 2rem;
    background-color: white;
    padding: 2rem;
    /* border-radius: var(--site-border-radius);
    border: 1px solid var(--site-border-lighter-grey); */
  }
  
  /* Small Devices (Tablets in Portrait Mode: 576px - 767px) */
  @media (max-width: 767px) {
    .meta-data-items {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }
  }
  
  /* Extra Small Devices (Phones: 0px - 575px) */
  @media (max-width: 575px) {
    .meta-data-items {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
  }
  
  /* Ultra Small Devices (Narrow phones or very small screens) */
  @media (max-width: 360px) {
    .meta-data-items {
        grid-template-columns: 1fr; /* Single column */
    }
  }
  
  
  .meta-data-item-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    background-color: #ececec;
    padding: 1rem;
  }
  
  .meta-data-item-wrapper .meta-data-value {
    font-size: clamp(2.25rem, 1.25vw, 2.5rem) !important;
    font-weight: 600;
    color: var(--site-milori-blue-hover);
  }
  
  .meta-data-item-wrapper .meta-data-name, .meta-data-item-wrapper .meta-data-unit {
    font-size: clamp(0.8rem, 0.9vw, 1.25rem) !important;
    color: var(--site-medium-grey);
    text-transform: capitalize;
    padding: 1rem;
  }
  
  
  
  .gradient-border-insta {
    position: relative;
    padding: 15px; /* Adjust padding to make space for the border */
    border-radius: var(--site-border-radius); /* Apply the border radius */
    background: white; /* Background color of the content */
    z-index: 1;
    overflow: hidden; /* Ensure the gradient doesn't spill out */
  }
  
  .gradient-border-insta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--site-gradient-insta); /* Gradient for the border */
    border-radius: var(--site-border-radius); /* Same border-radius as the parent */
    z-index: -1; /* Place behind the content */
    padding: 2px; /* Thickness of the border */
    -webkit-mask: 
      var(--site-gradient-insta) content-box, 
      var(--site-gradient-insta); /* Mask to create the border effect */
    mask: 
      var(--site-gradient-insta) content-box, 
      var(--site-gradient-insta);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  
  
  img.image-cell-xl {
    width: var(--icon-xl) !important;
    height: var(--icon-xl) !important;
  }
  
  .icon-svg-sm {
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .icon-svg-md{
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .icon-svg-lg{
    width: 3rem;
    height: 3rem;
  }
  
  .icon-svg-xl{
    width: 3.5rem;
    height: 3.5rem;
  }
  
  .listing-info-wrapper{
    width: 100%;
    padding: 0rem 0.5rem;
  }
  
  .feature-value-name {
      font-weight: 200;
      text-transform: capitalize;
      margin-left: 0.5rem;
  }
  
  .listing-icon-wrapper{
    display: flex;
    align-items: center;
    justify-content: start;
    margin-bottom: 0.65rem;
  }
  
  .margin-comfortable{
    margin: 1rem !important;
  }
  
  .margin-condensed {
    margin: 0.5rem !important;
  }
  
  .slideshow-name {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-family: var(--site-ff);
    font-weight: 500;
    text-transform: capitalize;
  }
  
  .empty-invoice-wrapper {
    padding: 1rem 3rem;
    font-family: var(--sit-ff);
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    font-weight: 200;
  }
  
  #subscription-invoices-wrapper{
    margin-bottom: 4rem;
  }
  
  .subscription-wrapper{
    /* d-flex flex-column align-items-stretch justify-content-start flex-1-1-auto */
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
  }
  
  .subscription-text-center {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.25rem, 1.5vw, 1.75rem);
    color: var(--site-pale-blue);
  }
  
  .subscription-tier-feature{
    font-family: var(--site-ff);
    font-size: clamp(1rem, 1vw, 1.1rem) !important;
    font-weight: 200;
    text-transform: capitalize !important;
  }
  
  .subscription_tier_header{
    font-family: var(--site-ff);
    font-size: clamp(1.2rem, 1.1vw, 1.4rem) !important;
    font-weight: 500;
    text-transform: capitalize !important;
  }
  
  .subscription-comparison-header{
    font-family: var(--site-ff);
    font-size: clamp(1.1rem, 1vw, 1.25rem) !important;
    font-weight: 400;
    text-transform: capitalize !important;
  }
  
  .subscription-section-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 1rem 3rem;
  }
  
  .subscription-title{
    display: flex;
    border-bottom: 1px solid var(--site-border-lighter-grey);
    margin-bottom: 1rem;
  }
  
  #feature-comparison-chart .selected[data-column-name="developer"], #feature-comparison-chart .selected[data-column-name="professional"], #feature-comparison-chart .selected[data-column-name="builder"] {
    background-color: aliceblue;
    padding: 1rem;
  }
  
  .subscription-packages {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
  
  @media screen and (max-width: 750px) {
    .subscription-packages {
      display: grid;
      grid-template-columns: 1fr;
    }
    
  }
  
  @media screen and (min-width: 750px) and (max-width: 1200px) {
    .subscription-packages {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }
    
  }
  
  .subscription-section-wrapper .img_rounded.text-center {
    font-family: var(--site-ff);
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
  }
  
  #modals-container > section, .modal-container {
      z-index: var(--top-2-layer);
      background-color: white;
      border: 1px solid var(--site-border-lighter-grey);
      border-radius: 1rem;
      box-shadow: var(--bs-d-2);
      width: 50% !important;
  
  }
  
  .key-value-entry{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
  }
  
  @media screen and (max-width: 576px) {
    .key-value-entry{
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 0.75rem;
    }
    
  }
  
  #operating-expenses-container {
    border: 1px solid var(--site-border-lighter-grey);
    border-radius: 1rem;
  }
  
  table#operating-expenses-container tbody {
    border: none;
  }
  
  #operating-expenses-container thead{
    border-bottom: 1px solid var(--site-border-lighter-grey);
  }
  
  #operating-expenses-container thead tr {
    border: none;
    background-color: unset;
    border-bottom: 1px solid var(--site-border-lighter-grey);
    border-radius: 0rem;
  }
  
  #operating-expenses-container thead tr th {
    background-color: unset;
  }
  
  .border-active {
    border-bottom: 1px solid var(--site-green) !important;
    border-left: 3px solid var(--site-green) !important;
    position: relative !important;
    cursor: pointer;
  }
  
  /* .border-active::before {
    content: "\F4FA";  
    font-family: "bootstrap-icons" !important;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--site-green);
  
  } */
  
  .custom-plus-icon {
    color: var(--site-green);
    font-size: 1.25rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(35%,-40%);
  }
  
  .auto-suggest-container {
    margin: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
  }
  
  .auto-suggest-container .suggestion-item {
    margin-right: 1rem;
    border: 1px solid #007bff;
    color: #007bff;
    padding: 0.25rem 0.35rem;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 0.5rem;
  }
  
  .auto-suggest-container .suggestion-item:hover {
      background-color: #007bff;
      border: 1px solid #0062cc;
      color: white;
  }
  
  .add-proforma-item-modal {
    max-width: 600px !important;
  }
  
  .add-proforma-item-modal .modal-content {
    padding: 0rem 2rem;
    border: 0px;
  }
  
  .add-proforma-item-modal input:not([type="range"]){
      background-color: white !important;
  }
  
  /********************** Realtor app *******************/
  .realtor-app-wrapper {
    display: flex;
    width: 100%;
    align-items: start;
    justify-content: flex-start;
  }
  
  .realtor-app-wrapper #left-side-menu, .realtor-app-wrapper #left-side-menu-nav{
    width: 5rem;
  }
  /********************** Official Market Update in services ***********************/
  :root{
    --market-swiper-container-width: 65vw;
    --market-swiper-slide-width: calc( var(--market-swiper-container-width) / 3.5 );
    --empty-row-height: 3rem;
    --empty-rows-contact: 1fr 2fr 2fr 2fr 2fr 3fr;
  }
  #official_market_update {
    display: grid;
    grid-template-columns: 1fr;
  }
  
  .macro-wrapper {
    display: flex;
    flex-direction: column;
    align-items: anchor-center;
    width: 100%;
    margin-bottom: 1rem;
  }
  
  /* To display a row of meta data */
  .meta-data-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 0rem;
    grid-template-rows: max-content;
    padding: 0rem 2rem;
    border-radius: var(--site-border-radius);
  }
  
  .meta-data-row .meta-data-item-wrapper{
    width: 20rem !important;
    margin: 2rem 1rem;
  }
  
  
  
  
  .meta-data-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
  
  .meta-data-chart{
    padding-top: 1rem;
  }
  
  .meta-data-item-wrapper i{
    font-size: 1.5rem;
    padding: 0rem 1rem;
  }
  
  .site-container-wrapper {
    display: flex;
    align-items: start;
    height: 100%;
  }
  
  .site-container-wrapper #left-side-menu {
    position: relative;
    top: -1rem;
    transition: width 600ms ease;
    align-self: stretch;
    height: 100%;
  }
  
  .dashboard-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0rem 2rem 2rem 2rem;
    background-color: white;
    border-radius: var(--site-border-radius);
    border: 1px solid var(--site-border-lighter-grey);
    grid-template-rows: max-content max-content;
  }
  
  /* .dashboard-card .meta-data-item-wrapper {
    width: 17rem !important;
  } */
  
  .meta-data-items.market-update{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 0rem 2rem;
    background-color: white;
    padding: 2rem;
  
  }
  
  .dashboard-card-title, .dashboard-card-title-wrapper {
    font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
    font-family: var(--site-ff);
    font-weight: 600;
    text-transform: uppercase;
  }
  
  #market-data-title-wrapper, .dashboard-card-title-wrapper{
    padding: 2rem 2rem 0.5rem 3rem;
    border-bottom: 1px solid var(--site-border-lighter-grey);
  }
  
  #market-update-kpi-wrapper .site-compact-input-group {
    min-width: 15rem !important;
    width: 100%;
    margin-bottom: 0rem !important;
  }

  #market-update-kpi-wrapper #select-area, #market-update-kpi-wrapper #select-sub_area {
    position: relative;
    bottom: 1.65rem;
}
  
  .market-update-kpi-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  #market-update-kpi-wrapper {
    margin: 1rem 4rem 0rem 4rem;
  }
  
  
  @media screen and (max-width: 767px) {
    .meta-data-row{
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
  
    .meta-data-row .meta-data-item-wrapper {
      width: 14rem !important;
      margin: 2rem 0rem;
    }
  
    .meta-data-row .meta-data-item-wrapper{
      width: 100% !important;
    }
  
    
  
    .market-update-kpi-wrapper{
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin: 2rem !important;
    }
  
    .meta-data-item-wrapper .meta-data-value {
      font-weight: 600;
      color: var(--site-milori-blue-hover);
      font-size: clamp(1.5rem, 1.25vw, 2rem) !important;
    }
  
    .meta-data-item-wrapper .meta-data-name, .meta-data-item-wrapper .meta-data-unit {
      color: var(--site-medium-grey);
      text-transform: uppercase;
      font-size: clamp(1rem, 1.15vw, 1.15rem) !important;
    }
  
    .meta-data-items.market-update{
      grid-template-columns: repeat(2, 1fr);
    }
  
  }
  
  @media screen and (max-width: 600px) {
    .meta-data-row{
      grid-template-columns: 1fr;
    }
  
    .meta-data-items.market-update{
      grid-template-columns: 1fr;
    }
  }
  
  /* .meta-data-items .swiper-button-prev {
    position: relative;
    left: -4rem;
    background-color: deepskyblue;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    font-size: 1rem !important;
    color: white;
  } */
  
  /* .meta-data-items .swiper-button-prev {
    position: relative;
    right: -4rem;
    background-color: deepskyblue;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    font-size: 1rem !important;
    color: white;
  } */
  
  
  .meta-data-items .swiper-container{
    position: relative;
    max-width: var(--market-swiper-container-width) !important;
    overflow: hidden;
  
  }
  
  .meta-data-items .swiper-slide {
    padding: 0rem 1rem !important;
    max-width: var(--market-swiper-slide-width) !important;
  }
  
  .meta-data-items .swiper-button-next:after, .meta-data-items .swiper-button-prev:after{
    font-size: 2rem;
    color: white;
  }
  
  .meta-data-items .swiper-button-next, .meta-data-items .swiper-button-prev {
    width: 5rem;
    height: 5rem;
    background-color: var(--site-dark-green);
    border-radius: 50%;
    color: wheat;
  }
  
  .grid-template-columns-1fr{
    grid-template-columns: 1fr !important;
  }
  
  
  #official_market_update{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content max-content;
    margin-top: 2rem;
  }
  
  .site-alert-gradient-info {
    background-color: aliceblue;
    padding: 1rem;
    /* border-left: 10px solid var(--site-milori-blue); */
    border-radius: 8px;
    background-image: var(--site-gradient-blue-sky);
  }
  
  .site-alert-info {
      background-color: white;
      padding: 1rem;
      border-left: 6px solid var(--site-milori-blue);
      border-radius: 8px;
      border-bottom: 1px solid var(--site-milori-blue);
      border-top: 1px solid var(--site-milori-blue);
      border-right: 1px solid var(--site-milori-blue);
      display: flex;
      align-items: center;
      justify-content: start;
      width: 100%;
  }
  
  .site-alert-info.alert-info{
    color: var(--site-milori-blue);
    
  }

  .site-alert-error {
    background-color: #ffe7d3;
    color: #525252;
    margin: 1rem 3rem;
    color: #252525;
    padding: 1rem;
    border-left: 6px solid var(--site-orange);
    border-radius: 8px;
    border-bottom: 1px solid var(--site-orange);
    border-top: 1px solid var(--site-orange);
    border-right: 1px solid var(--site-orange);
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
  }

  .site-alert-error, .site-alert-error.span{
    font-weight: 500;
    font-family: var(--site-ff);
    font-size: 1rem;
  }
  
  .buyers-market svg, .sellers-market svg, .balanced-market svg {
    width: 4.5rem;
    height: 4rem;
    margin-right: 1rem;
    display: inline-flex;
  }
  
  #add-proforma-item-timeline select, #add-proforma-item-timeline input:not([type="range"]) {
      min-width: 6rem !important;
      
  }
  /* 
  .add-proforma-item-modal input[type="range"]{
    width: 100% !important;
  } */
  
  #date-slider-wrapper {
      margin: 2.5rem 1rem 5rem 1rem;
    padding: 0rem 2rem;
  }
  
  .date-range-container .site-input-group{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  @media screen and (max-width: 767px) {
    .date-range-container .site-input-group{
      display: flex;
      /* flex-direction: column; */
      align-items: start;
      justify-content: start;
    }
  
    #add-proforma-item-timeline select, #add-proforma-item-timeline input:not([type="range"]) {
      min-width: unset !important;
      width: 100% !important;
    }
  }
  
  /* Remove default spinner */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  /* Firefox */
  input[type="number"] {
    -moz-appearance: textfield !important;
  }
  
  /* Custom up/down arrows */
  input[type="number"] {
    /* background: url("/static/icons/arrow_down.png") no-repeat right 0.5rem bottom 0.5rem,
            url("/static/icons/arrow_up.png") no-repeat right 0.5rem top 0.8rem; */
    background-size: 0.8rem 0.8rem;
    padding-right: 2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid var(--site-border-lighter-grey);
}
  /* Rotate the top arrow 180 degrees to make it an up arrow */
  input[type="number"]::before {
    content: "";
    position: absolute;
    right: 0.75rem;
    top: 0.4rem;
    width: 1rem;
    height: 1rem;
    background: url("/static/icons/arrow_down.png") no-repeat center;
    background-size: contain;
    transform: rotate(180deg); /* Flip the image */
    pointer-events: none; /* Ensure it does not interfere with input */
  }
  
  input[type="number"]:focus {
    /* background: url("/static/icons/arrow_down.png") no-repeat right 0.5rem bottom 0.7rem,
            url("/static/icons/arrow_up.png") no-repeat right 0.5rem top 0.7rem; */
    background-size: 0.8rem 0.8rem;
    padding-right: 2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: textfield !important;
  }
  
  .slide-card {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: white;
    transition: transform 0.5s ease-in-out;
  }
  
  .slide-card {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: white;
    transition: transform 0.3s ease-in-out;
  }
  
  /* Moves the element into view */
  .slide-in {
    transform: translateX(0);
  }
  
  /* Moves the element out of view */
  .slide-out {
    transform: translateX(100%);
  }
  
  svg.mini-chart g text {
    font-size: 7px !important;
  }
  
  .mini-chart rect.hover-bg {
    opacity: 0.2;
    stroke: #000000;
    stroke-width: 1;
    rx: 2;
    ry: 2;
  }
  
  .mini-chart rect.hover-bg-x {
    opacity: 0.2;
    stroke: #000000;
    stroke-width: 1;
    rx: 2;
    ry: 2;
  }
  
  /****************/
  .market-update-kpi-wrapper {
    display: grid;
    /* Define two rows and four columns */
    grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 equal columns = 25% each */
    grid-template-rows: auto auto;
    gap: 1rem;
    grid-template-areas:
      "year month city community"
      "housing-types range-sliders range-sliders range-sliders";
  }
  
  /* Assign elements to grid areas */
  #month-year-selects-wrapper {
    grid-area: year;
    display: flex;
    gap: 1rem;
  }
  
  #select-month {
    grid-area: month;
  }
  
  #city-community-wrapper {
    grid-area: city;
    display: flex;
    gap: 1rem;
  }
  
  #select-sub_area {
    grid-area: community;
  }
  
  #select-housing_types {
    grid-area: housing-types;
  }
  
  #market-KPI-range-sliders {
    grid-area: range-sliders;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  
  /* Mobile layout */
  @media (max-width: 768px) {
    .market-update-kpi-wrapper {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto auto auto;
      grid-template-areas:
        "year month"
        "city community"
        "housing-types housing-types"
        "range-sliders range-sliders";
    }
    
    #month-year-selects-wrapper,
    #city-community-wrapper {
      display: contents;
    }
    
    #market-KPI-range-sliders {
      grid-template-columns: 1fr;
    }
  }
  
  .flex-0-0-50 img{ /* Making sure the image does not overflow its container */
    max-width: 100%;
    height: auto;
    display: block;
  }

#add-project-property-container{
  height: 80vh !important;

}
  
.two-components-side-by-side {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0rem;
    border-radius: 2rem !important;
    overflow: hidden;
    box-shadow: var(--bs-d-2);
    margin: 1rem;
    background-color: white;
}

@media screen and (max-width: 1000px) {
    .two-components-side-by-side {
        position: relative;
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 1rem;
        border-radius: 2rem !important;
        overflow: hidden;
        box-shadow: var(--bs-d-2);
    }
}
  
  .two-components-side-by-side label {
    padding: 0rem;
    margin: 0.75rem 0rem !important;
  }
  
  .two-components-side-by-side input, .two-components-side-by-side select {
    height: 4.25rem;
    font-size: 1rem !important;
  }
  
  .two-components-side-by-side label.site-compact-input-underlined .site-compact-input-label {
    top: -10% !important;
    padding: 0rem 0.5rem 0rem 0.25rem;
  }
  
  .object-fit-cover{
    object-fit: cover;
  }
  
  #link_share_modal_content{
    padding: 1rem 3rem !important;
  }

  #link_share_modal_content input {
    padding: 0.5rem 1rem !important;
    width: 100%;
    border-radius: var(--site-border-radius-sm);
    outline: none;
    font-size: var(--site-fs-flex);
    padding: 1rem !important;
    font-weight: 300;
    letter-spacing: .0142857143em;
  }
  
  textarea#link-email-message-content {
    padding: 2rem;
  }
  
  .flex-center-wrapper {
    display: flex;
    margin: 2rem 0rem;
    align-items: center;
    justify-content: center !important;
  }
  
  #comment-box-content input {
    min-height: 5rem !important;
    margin: 1rem;
    padding: 1rem;
  }
  
  
  #from-wrapper, #to-wrapper{
    display: flex;
    gap: 1rem !important;
    align-items: center;
    justify-content: space-between;
  }
  
  .side-card-header{
    margin: 2rem 0rem 1rem 0rem !important;
  }

.two-components-side-by-side .form-wrapper{
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 35%;
    height: 100%;
    overflow: auto;
}

.two-components-side-by-side .map-wrapper {
    flex: 1;
    height: 100% !important;
    min-height: 400px;
}

.two-components-side-by-side form {
    display: flex;
    flex-direction: column;
    max-height: 50vh !important;
}

.form-delete-icon {
    flex-basis: 4%;
    flex-grow: 1;
    flex-shrink: 0;
    align-self: flex-end;
    margin: 0rem;
    margin-bottom: 1rem;
    margin-left: 0.5rem;
}

.form-delete-icon i {
    font-size: 1.3rem !important;
    cursor: pointer;
    color: var(--site-medium-grey);
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-self: center;
    background-color: transparent;
}

.form-delete-icon:hover i {
    font-size: 1.3rem !important;
    cursor: pointer;
    color: var(--site-dark-turquoise);
    /* background-color: var(--site-medium-grey);
    border: 1px solid var(--site-medium-grey); */
}

.suite-detail{
  /* flex-rcs w-100 pb-3 px-3 border-bottom */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  padding-top: 0rem;
  border-bottom: 1px solid var(--site-border-lighter-grey);  

}

.suite-detail .detail-text i {
  color: var(--site-dark-turquoise);
  margin-right: 1rem !important;
}

#unit-mix-grid-container{
  max-width: 100%;
}

.right-side-card-summary .summary-title{
  font-size: clamp(1.35rem, 1.5vw, 1.5rem);
  font-family: var(--site-ff) !important;
  font-weight: 600;
  /* border-bottom: 1px solid var(--site-border-lighter-grey); */
  padding: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--site-border-lighter-grey);
}

#rent-roll-content table thead, #cashflow-table thead {
  position: sticky;
  top: 0;
  background-color: #fafafa;
  z-index: 2;
  color: #a2a2a2;
}

#rent-roll-table table thead th{
  border: 1px solid var(--site-light-grey);
  font-weight: 200;
  padding-left: 10px;
  font-family: var(--site-ff);
  color: #faebd7;
}

#rent-roll-content table{
  margin: 0rem !important;
}

.site-popup-info div {
  width: 100%;
}

.site-popup-info .close-button-container{
    z-index: var(--top-5-layer);
    position: absolute;
    top: 0;
}

#rent-roll-table td{
    font-family: var(--site-ff);
    font-size: clamp(0.9rem, 1vw, 1rem);
    font-weight: 400;
}

.text-promotion{
  font-family: var(--site-ff);
  font-weight: 300;
  font-size: clamp(1.2rem, 1.2vw, 1.5rem);
  color: antiquewhite;
}

.tabs {
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  /* background: white; */
  padding: 50px;
  padding-bottom: 80px;
  width: 70%;
  height: 250px;
  /* box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); */
  border-radius: 5px;
  min-width: 240px;
}
.tabs input[name=tab-control] {
  display: none;
}
.tabs .content section h2,
.tabs ul li label {
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 18px;
  color: #428BFF;
}

.tabs ul {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-direction: row;
  margin-bottom: 0px;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  padding-bottom: 0rem !important;
}

.tabs ul li {
  box-sizing: border-box;
  flex: 1;
  width: 25%;
  padding: 0 10px;
  text-align: center;
}
.tabs ul li label {
  transition: all 0.3s ease-in-out;
  color: #929daf;
  padding: 5px auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.tabs ul li label br {
  display: none;
}
.tabs ul li label svg {
  fill: #929daf;
  height: 1.2em;
  vertical-align: bottom;
  margin-right: 0.2em;
  transition: all 0.2s ease-in-out;
}
.tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {
  outline: 0;
  color: #bec5cf;
}
.tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg {
  fill: #bec5cf;
}

.tabs .slider {
  position: relative;
  width: 100%;
  height: 2px;
  transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
  background-color: #e6e6e6 !important;
}

.tabs .slider .indicator {
  position: absolute;
  top: -1px;
  left: 0;
  height: 4px;
  background: var(--site-dark-turquoise);
  border-radius: 1px;
  transition: transform .33s cubic-bezier(.38,.8,.32,1.07);
}

.tabs .content {
  margin-top: 30px;
}
.tabs .content section {
  /* display: none; */
  -webkit-animation-name: content;
          animation-name: content;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  line-height: 1.4;
}
.tabs .content section h2 {
  color: #428BFF;
  display: none;
}
.tabs .content section h2::after {
  content: "";
  position: relative;
  display: block;
  width: 30px;
  height: 3px;
  background: #428BFF;
  margin-top: 5px;
  left: 1px;
}

@-webkit-keyframes content {
  from {
    opacity: 0;
    transform: translateY(5%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes content {
  from {
    opacity: 0;
    transform: translateY(5%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
@media (max-width: 1000px) {
  .tabs ul li label {
    white-space: initial;
  }
  .tabs ul li label br {
    display: initial;
  }
  .tabs ul li label svg {
    height: 1.5em;
  }
}
@media (max-width: 600px) {
  .tabs ul li label {
    padding: 5px;
    border-radius: 5px;
  }
  .tabs ul li label span {
    display: none;
  }
  .tabs .slider {
    display: none;
  }
  .tabs .content {
    margin-top: 20px;
  }
  .tabs .content section h2 {
    display: block;
  }
}

.tabs ul label{
  margin-bottom: 0.5rem !important;
}

.bs-nav .nav-item{
  width: unset !important;
}

.bs-nav {
  margin-bottom: 0rem !important;
  padding-bottom: 0rem;
}

.financial-accounts .tabs{
  padding: 0rem !important;
  padding-bottom: 2rem !important;

}


.financial-accounts .nav-tabs .nav-link{
  text-transform: capitalize;
  color: var(--site-medium-grey);
  padding-left: 10%;
}

.financial-accounts .nav-tabs .nav-link.active {
  font-weight: 500 !important;
  padding-left: 10%;
}

.tabs label .active {
  color: var(--site-dark-turquoise);
  font-weight: 600 !important;
}

.card-body-content .back-button, .display-in-page .back-button{
  cursor: pointer;
}

.card-body-content .back-button:hover, .display-in-page .back-button:hover{
  color: var(--site-turquoise);
}


.financial-accounts .nav-tabs .nav-link:hover{
  color: var(--site-primary-link-hover);
}

.financial-accounts .tab-content input::placeholder {
  color: var(--site-border-light-grey);
  font-style: normal;

}

.financial-accounts .tabs ul li:hover, .financial-accounts .tabs ul li:hover span{
  color: var(--site-border-light-grey);
  font-style: normal;

}

.financial-accounts .content table thead tr{
  background-color: transparent;
  border: 0px;
  border-bottom: 1px solid var(--site-border-lighter-grey);
  border-radius: 0px !important;
}

.financial-accounts .content table tbody tr:first-child:hover {
  border-top-right-radius: 0rem !important;
  border-top-left-radius: 0rem !important;
  
}

.financial-accounts .content table tbody{
  border: 0px !important;
}

.financial-accounts .nav-item{
  border-left: none !important;
}

.bs-nav li.nav-item {
  background-color: #f2f2f2;
  min-width: 15rem;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.bs-nav .nav-link{
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.display-in-page .tabs{
  height: 100% !important;
  width: 100% !important;
}

.border-radius-0 {
  border-radius: 0 !important;
}

.border-radius-1rem{
  border-radius: 1rem !important;
}

.border-radius-2rem{
  border-radius: 2rem !important;
}


.round-top-border{
  border-top-left-radius: var(--site-border-radius);
  border-top-right-radius: var(--site-border-radius);
}

.add-headshot {
  color: grey;
  cursor: pointer;
}

.add-headshot:hover {
  color: var(--site-dark-turquoise);
}

/* Default grid cell styling */
.grid-table-cell {
  border: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect on grid cell */
.grid-table-cell:hover {
  border-color: #2b9abf;
  box-shadow: 0 0 0 1px #2b9abf inset;
  border-radius: 4px;
  cursor: text;
}

/* Input styling for active cell */
.grid-table-cell-input {
  border: 1px solid transparent;
  outline: none;
  background-color: white;
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Active input styling when focused */
.grid-table-cell-input:focus {
  border-color: #2b9abf;
  box-shadow: 0 0 0 1px #2b9abf;
}

.grid-table-cell:focus-within {
  background-color: #e6f7fb; /* Soft blue background to highlight active row */
}



.grid-table-cell:has(.grid-table-cell-input:not(.d-none)) {
  padding: 0; /* removes the inner gap */
}

/* Let the input fill the cell completely */
.grid-table-cell-input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 0.5rem;
  box-sizing: border-box;
  font-size: 1rem;
  background: aliceblue;
  min-height: 2.25rem;
  border: 1px solid var(--site-border-lighter-grey);
  border-radius: var(--site-border-radius-sm);
}

/* Remove the focus indicator box-shadow and border-radius for a flat fill */
.grid-table-cell-input:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.headshot-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 2.5rem; /* Adjust this to match the icon size exactly */
  max-height: 2.5rem;
}

.uploaded-headshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #ccc;
  max-width: 2.5rem; /* Adjust this to match the icon size exactly */
  max-height: 2.5rem;

}

.delete-headshot-btn {
  position: absolute;
  top: -2px;
  right: -6px;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background-color: #f44336;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

/* Blue highlight for the cell that’s currently being edited */
.grid-table-cell.active-cell {
  border: 1px solid #2b9abf !important;
  box-shadow: 0 0 0 1px #2b9abf inset;
  border-radius: 4px;
}

.grid-table-body .add-icon-cell { 
  text-align:center; 
  cursor:pointer;
  display: flex;
  align-items: center;
  justify-self: center;
  width: 100%;
}

.grid-table-cell-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.grid-table-body .add-icon-cell i { 
  color:#2b9abf; 
  flex: 1;
  
}

.grid-table-body .add-row { 
  background:#f8f8f8; 
  border-bottom: 1px solid #2b9abf !important;
}

.img-wrapper-sm{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--icon-sm) + 0.5rem) !important; 
  height: calc(var(--icon-sm) + 0.5rem) !important; 
  border-radius: 50%;
  /* border: 1px solid orange; */
  /* padding: 0.1rem; */
}

.img-wrapper-sm img {
	width: calc(var(--icon-sm) + 0.5rem) !important;
	height: calc(var(--icon-sm) + 0.5rem) !important;
	border-radius: 50%;
	object-fit: cover;
	padding: 3px;
}

.img-wrapper-md{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--icon-md) + 0.5rem) !important; 
  height: calc(var(--icon-md) + 0.5rem) !important; 
  border-radius: 50%;
  border: 1px solid orange;
  padding: 0.1rem;
}

.img-wrapper-md img{
  width: calc(var(--icon-md) + 0.5rem) !important; 
  height: calc(var(--icon-md) + 0.5rem) !important; 
  border-radius: 50%;
	object-fit: cover;
	padding: 3px;

}

.img-wrapper-md{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--icon-lg) + 0.5rem) !important; 
  height: calc(var(--icon-lg) + 0.5rem) !important; 
  border-radius: 50%;
  border: 1px solid orange;
  padding: 0.1rem;
}

.img-wrapper-md img{
  width: calc(var(--icon-lg) + 0.5rem) !important; 
  height: calc(var(--icon-lg) + 0.5rem) !important; 
  border-radius: 50%;
	object-fit: cover;
	padding: 3px;

}

.buttons-container{
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 1rem;
  width: 100%;
}

.site-compact-input-underlined {
  position: relative;
}

.site-compact-input-underlined-wrapper{
  position: relative !important;
}

.site-compact-input-underlined-wrapper .site-compact-input-label {
	position: absolute !important;
	left: 1rem !important;
	background-color: white;
	padding: 0.75rem;
}

.site-compact-input-group input.comment-email-input {
	max-height: 6rem !important;
	height: 5rem !important;
	padding-left: 1.5rem !important;
}

.email-bubbles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  justify-content: start;
  position: absolute;
  top: 33.5%;
  left: 2%;
  gap: 0.5rem;
}

.email-bubble-container {
  position: absolute;
  top: 50%;
  left: 0.5rem; /* adjust to align with your padding-left */
  transform: translateY(-50%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  pointer-events: none; /* allow clicks to pass through to the input */
  width: calc(100% - 1rem); /* adjust width to input padding */
}

.email-bubble {
  background-color: #e0e0e0;
  border-radius: 24px;
  padding: 2px 6px;
  pointer-events: auto;
  width: 100%;
  min-width: 10rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  display: inline-block;
  vertical-align: middle;
}

.email-bubble .delete-x-button {
  margin-left: 5px;
  cursor: pointer;
}

.logo-text-pair {
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: 0.25rem;
}

.logo-text-text {
  font-family: var(--site-ff);
  font-size: 1rem;
  color: #6c757d !important;
  margin-left: 0.5rem;
}

.contact-card-sm{
    position: relative;
    width: 100%;
    border: 1px solid var(--site-border-lighter-grey);
    padding: 1rem;
    border-radius: var(--site-border-radius);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    margin: 0rem 1rem 0.25rem 0rem;
}

.contact-card-header{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.tags-group{
  display: flex;
  flex-wrap: wrap;
  margin: 0.5rem 0rem 1rem 0rem;
}

.tag-badge {
  margin-bottom: 0.7rem;
  margin-right: 0.7rem;
  display: inline-flex !important;
  padding: .25em .4em;
  font-size: 85%;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  align-items: center;
  justify-content: center;
}

.tag-badge:hover {
  background-color: #7a7a7a;
  color: #ededed !important;
  cursor: pointer !important;
}

.start-rating-wrapper{
  display: flex;
  align-items: center;
  justify-content: start;
  margin: 0rem 1.5rem !important;
  max-width: fit-content !important;
}

.popup-context{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.popup-context-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  overflow: auto !important;
  max-height: 75vh !important;
  padding: 0rem 1rem;
}

.site-total-box{  
  
  font-size: clamp(1.1rem, 1.1vw, 1.25rem) !important;
  color: var(--site-darker-green);
  border-radius: var(--site-border-radius);
  background-color: ;
}

.x-button-sm{
  position: absolute;
  top: -0.75rem;     /* sits a bit higher than the container*/
  right: -0.75rem;   /* sits on the top right corner */
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid transparent;
  padding: 0.15rem;
  border-radius: 50%;  
}

.contact-tag.tag-badge .x-button-sm {
  background-color: #dfe7e6;
  border: 1px solid white !important;
  display: none;
}

.relative:hover .x-button-sm{
  background-color: var(--site-medium-grey) !important;
  font-weight: 500;
  color: var(--site-border-lighter-grey);
}

.contact-tag.tag-badge.relative:hover .x-button-sm {
  background-color: var(--site-dark-green) !important;
  font-weight: 500;
  color: white;
  display: block;
}

.success-icon {
  margin-left: 0.5rem;
  color: green;
  font-weight: bold;
  animation: fadeOut 3s ease-in-out forwards;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

.no-scroll{
    overflow: hidden;
    position: fixed;
    width: 100%;

}

.fixed-modal-header{
    position: fixed;
    top: 0rem;
    width: 100%;
    background-color: white;
    z-index: var(--top-3-layer);
}

.fixed-modal-header ~ .modal-body{
  position: relative;
  top: 5rem !important;
}

#other-bubble.email-bubble-sm {
  max-width: fit-content;
}

.recipient-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.recipient-list input {
  border: 0px solid transparent;
}

.recipient-list-wrapper {
  border: 1px solid var(--site-medium-grey);
  border-radius: var(--site-border-radius-sm);
  padding: 0.5rem 1rem;
}

.recipient-list-wrapper label {
  margin-bottom: 0rem !important;
  color: darkturquoise;
}

.recipient-list-wrapper input:focus {
  outline: none;
  border: none;
}

#email-list-input {
  border: none;
  outline: none;
}

.cell-tooltip-error{
  position: absolute;
  top: 100%;
  left: 0;
  background: #f44336;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  z-index: 10;
  white-space: pre-wrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  max-width: 200px;
}

.autocomplete-suggestions {
  margin: 1rem 2rem;
  background-color: var(--site-off-white);
  border-radius: var(--site-border-radius-sm);
  padding: 1rem;
}

.autocomplete-suggestions {
  margin: 1rem 2rem;
  background-color: var(--site-off-white);
  border-radius: var(--site-border-radius-sm);
  padding: 1rem;
  grid-area: text;
}

.autocomplete-suggestions li {
  margin-bottom: 1rem;
  font-size: 1rem;
  font-family: var(--site-ff);
  cursor: pointer;
}

.autocomplete-suggestions li:hover {
  color: var(--site-primary-link-hover);
}

button i {
  margin: 0rem 0.5rem;
  font-size: 1.2rem;
  font-weight: 300;
}

.form-card-layout .img-edit {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.form-card-layout .img-edit i {
  font-size: 1.25rem;
}
/************ Tailwind CSS **************/ 
/* bottom-1 / right-1  →  0.25 rem (4 px) offset           */
.bottom-1  { bottom: 0.25rem; }
.right-1   { right:  0.25rem; }
.bg-slate-100 { background-color: #f1f5f9; }  /* light grey-blue */

/* ─────────── Drop-shadow (subtle) ─────────────────────── */
.shadow {
  box-shadow: 0 1px 3px rgba(0,0,0,0.18),
              0 1px 1px rgba(0,0,0,0.12);
}

/* ─────────── Optional: hover effect for the pen icon ──── */
.button-hover\:shadow:hover {                /* add class if desired */
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

#add-property-form {
  max-height: 30vh;
  overflow-y: auto;
}

.form-title-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--site-bg-primary-light);
    border-bottom: 1px solid var(--site-border-lighter-grey) !important;
    padding: 2rem 0rem 1rem 2rem;
    margin-bottom: 1rem;
    width: 100%;
    flex-wrap: wrap !important;
}

.form-title-2{
    font-family: var(--site-ff);
    font-size: clamp(1.25rem, 1.25vw, 1.5rem);
    line-height: 1.25rem;
    font-weight: 600;
    color: hsla(0, 0%, 20%, 0.85);
    text-transform: uppercase;
}

#additional-revenue-inputs-group-laundry-collapsible {
  width: 100%;
}

.label-icon-wrapper {
  position: relative;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  background-color: white;
  max-width: fit-content;
  padding: 0rem 1rem;
  min-height: 2.5rem !important;
  
}

.market-update-kpi-wrapper .range-sliders-container {
  position: relative;
  bottom: 1.2rem;
}

.file-thumbnail-preview {
  max-width: 7rem;
  height: auto;
}

.footer-links ul, .footer-social ul {
  padding: 0rem;
}

.footer-links li {
  padding-bottom: 0.5rem;
}

.grid-two-4fr-one-1fr {
  display: grid;
  grid-template-columns: minmax(120px, 4fr) minmax(120px, 4fr) 1fr;
  gap: 1rem; /* optional, adds space between grid items */
  align-items: center;
}
