/* TM CMS page */



    section#intro {
        padding: 10vw 0px;
        text-align: center;
    }
    section#intro .container h1 {
      padding: 0px 0px 4vh 0px;
    }
    section#intro .container h2 {
      text-align: center;
      text-transform: none;
      font-size: 2vw;
      display: block;
    }
    section .container.top-accent-line {
        padding: 10vw 0px;
        border-top: 3px solid var(--accent-color);
    }

    section#site-map                                  { padding: 0px; }
    section#site-map div.container                    { padding: 10vw 0px 10vw 0px; }
    section#site-map div.container div.map-container  { 
      padding: 0px 10vw; 
      text-align: center; 
      --color-status-available: #437447;
      --color-status-hold: #d5d576;
      --color-status-conditionally-sold: #df7f09;
      --color-status-sold: #ab4848;
      --color-status-future: #727272;
      --color-status-quick-possession: var(--accent-color);
    }
    section#site-map div.container div.map-container div#legend               { padding: 0px 0px 0px 0px; display: inline-block; }
    section#site-map div.container div.map-container div#legend:after         { clear: both; }
    section#site-map div.container div.map-container div#legend div           { font-size: 18px; float: left; display: inline-block; padding: 10px 20px; }
    section#site-map div.container div.map-container div#legend div.label     { font-size: 20px; font-weight: bold; }
    section#site-map div.container div.map-container div#legend div           {  }
    section#site-map div.container div.map-container div#legend div::before   { content: ''; height: 18px; width: 18px; border-radius: 100%; display: inline-block; margin: 0 12px 0 0; position: relative; top: 5px;  }

    section#site-map div.container div.map-container div#legend div.available:before { background-color: var(--color-status-available); }
    section#site-map div.container div.map-container div#legend div.hold:before { background-color: var(--color-status-hold); }
    section#site-map div.container div.map-container div#legend div.conditionally-sold:before { background-color: var(--color-status-conditionally-sold); }
    section#site-map div.container div.map-container div#legend div.sold:before { background-color: var(--color-status-sold); }
    section#site-map div.container div.map-container div#legend div.quick-possession:before { background-color: var(--color-status-quick-possession); }
    section#site-map div.container div.map-container div#legend div.future:before { background-color: var(--color-status-future); }
    


    svg#interactive-map { }
    svg#interactive-map text                              { font-family: Lato, sans-serif; }
    svg#interactive-map g#lot_numbers text                { fill: #000; font-size: 12px; font-weight: bold; }
    svg#interactive-map g#road_names text                 { fill: #fff; font-size: 20px; }
    svg#interactive-map g#road_names text.park            { fill: #fff; font-size: 30px; }
    svg#interactive-map g#future text                     { fill: #fff; font-size: 20px; }

    svg#interactive-map g#units polygon                   { fill: var(--color-status-future); stroke: #000000; stroke-width: 1; }
    svg#interactive-map g#units polygon.future            { fill: var(--color-status-future); }
    svg#interactive-map g#units polygon.quick-possession  { fill: var(--color-status-quick-possession); }
    svg#interactive-map g#units polygon.available         { fill: var(--color-status-available); }
    svg#interactive-map g#units polygon.hold              { fill: var(--color-status-hold); }
    svg#interactive-map g#units polygon.conditionally-sold{ fill: var(--color-status-conditionally-sold); }
    svg#interactive-map g#units polygon.sold              { fill: var(--color-status-sold); }

    svg#interactive-map g#units polygon.available:hover   { cursor: pointer; /* fill: #cdba4b; */ stroke: #ffffff; stroke-width: 1; }
    svg#interactive-map g#background rect                 { fill: #e9e9e9; }
    svg#interactive-map g#roads                           { fill: #2f2f33; }
    svg#interactive-map g#sidewalks path                  { fill: #9b9b9b; }
    svg#interactive-map g#circles circle, g#circles path  { fill: #9f8f32; }
    svg#interactive-map g#future polygon                  { fill: var(--color-status-future); }
    svg#interactive-map g#park g#park g#greenspace polygon{ fill: #617e61; }



    div.unit-details { text-align: center; }