/* mayor map */

:root {
  --cty-bg_mayor: #001A72;
  --cty-txt_mayor: white;
  --cty-border_accordion: white;

  --cty-border-mayor: 1px solid #e9f8fb; /* layer control button */
  --cty-txt-mayor-on: #001A72;
  --cty-bg-mayor-on: #e9f8fb;
  --cty-bg-mayor-on-hover: #fafafa;

  --cty-txt-mayor-off: #e9f8fb;
  --cty-bg-mayor-off: #001A72;
  --cty-bg-mayor-off-hover: #001661;
  --cty-bg-mayor-off-icon : #e9f8fb;
  --cty-txt-mayor-off-icon : #001A72;
  
  --hex-0: #000000; /* no status */
  --hex-558: #019a44; /* recently completed */
  --hex-559: #dfbe29; /* under construction */
  --hex-560: #28abdf; /* pipeline */
  --hex-561: #666666; /* other */

}

.circle-icon { display:inline-block; width:20px; height:20px; border-radius:10px; border:1px solid white; }

.fg-0 { color:black; }
.fg-558 { color:var(--hex-558); }
.fg-559 { color:var(--hex-559); }
.fg-560 { color:var(--hex-560); }
.fg-561 { color:var(--hex-561); }

.mayor-marker-sidehex.status-bg-558 { background-color:var(--hex-558); }
.mayor-marker-sidehex.status-bg-559 { background-color:var(--hex-559); }
.mayor-marker-sidehex.status-bg-560 { background-color:var(--hex-560); }
.mayor-marker-sidehex.status-bg-561 { background-color:var(--hex-561); }

.mayor-0 { background-color:var(--hex-0); color:white; }
.mayor-status-558 { background-color:var(--hex-558); color:white; }
.mayor-status-559 { background-color:var(--hex-559); color:white; }
.mayor-status-560 { background-color:var(--hex-560); color:white; }
.mayor-status-561 { background-color:var(--hex-561); color:white; }



.mayor-bg { background-color:var(--cty-bg_mayor); color:var(--cty-txt_mayor); }    

.mayor-map { display:block; width:100%; background-color:var(--cty-bg_mayor); }
.mayor-controls { display:block; width:100%; position:relative; z-index:20; background-color:var(--cty-bg_mayor); }
.mayor-controls h2 { margin-top:0; }
.mayor-controls-hold { width:100%; padding:24px 30px; } 

.mayor-panel { display:block; width:100%; height:500px; position:relative; z-index:1; }
.mayor-panel #mayor_clmap { width:100%; height:100%; background-color:var(--cty-bg_mayor); }
@media all and (min-width: 992px) {
  .mayor-map { display:flex; flex-direction: row-reverse; width:100%; max-width:9999px; margin:0 auto; }
  .mayor-controls { width:400px; height:840px; }
  .mayor-panel { width:calc(100% - 400px); height:840px; border-left:0px; }
  .mayor-controls-hold { height:840px; padding:40px; display:flex; align-items:center; }
}

.mayor-intro-title { color: inherit; text-align:center; margin-bottom:1rem; font-size:1.5rem; } 
.mayor-intro-text { color: inherit; } /* contains html */
.mayor-intro-advice { color: inherit; font-style:normal; font-size:1rem; text-wrap:balance; }
.mayor-layers-help { color:inherit; font-size:0.8rem; text-transform:uppercase; margin:24px 0 8px 0; }

.mayor-drawer-handle { border:1px solid var(--cty-border_accordion); background-color:var(--cty-bg_mayor); }
.mayor-drawer-handle a { display:block; background-color:var(--cty-bg_mayor); color:var(--cty-txt_mayor); }
.mayor-drawer-handle a:hover { background-color:var(--cty-bg_mayor); color:var(--cty-txt_mayor); }
.mayor-layers-hold {  padding:12px 0; }
.mayor-layers-hold ul { margin:0; padding:0; list-style:none; }
.mayor-layers-hold ul li { margin:0 0 2px 0; padding:0; list-style:none; }

@media all and (min-width: 992px) {
  .mayor-intro-title { text-align:left; }
  .mayor-drawer-handle { border:0; }
  .mayor-layers-hold { border:0; padding:0; background-color:inherit; }
}


/* layer control */

.mayor-layer { display:block; width:100%; border: var(--cty-border-mayor);
  padding: 8px 8px;
  margin-bottom:10px;
  border-radius: 26px;
  text-decoration: none;
  text-align:left;
  font-size:16px; 
  line-height:22px;
  font-weight:700;
}

.mayor-layer span { display:inline-block; width:22px; height:22px; border:0px solid white; 
  border-radius:12px; margin-right:6px; text-align:center; font-size:12px; line-height:22px; }

.mayor-layer-show-true { background-color:var(--cty-bg-mayor-on); color:var(--cty-txt-mayor-on); transition: var(--cty-transition-hover) }
.mayor-layer-show-true:hover { background-color:var(--cty-bg-mayor-on-hover); color:var(--cty-txt-mayor-on); }
.mayor-layer-show-false { background-color:var(--cty-bg-mayor-off); color:var(--cty-txt-mayor-off); transition: var(--cty-transition-hover) }
.mayor-layer-show-false:hover { background-color:var(--cty-bg-mayor-off-hover); color:var(--cty-txt-mayor-off); }

.mayor-layer-show-true span { display:inline-block; }
.mayor-layer-show-false span { display:inline-block; background-color:var(--cty-bg-mayor-off-icon); color:var(--cty-txt-mayor-off-icon); }

.mayor-marker-sidebar {  background-color:#001a72; color:white;}
.mayor-marker-sidehex {  background-color:#001a72; }




/* map popups */

.mayor-popup { border-top:8px solid black; }
.mayor-popup-status-558 { border-color:var(--hex-558); }
.mayor-popup-status-559 { border-color:var(--hex-559); }
.mayor-popup-status-560 { border-color:var(--hex-560); }
.mayor-popup-status-561 { border-color:var(--hex-561);}


.mayor-marker-lg { width:32px; height:32px; cursor: pointer; border-radius:16px; text-align:center; 
  font-size:16px; line-height:32px; box-shadow: 0px 0px 2px 0px rgba(255,255,255, 0.4); }

.mayor-panel .mapboxgl-popup { width: 240px; padding-bottom: 10px!important; } /* adjust padding bottom to height of marker */
.mayor-panel .mapboxgl-popup-content { text-align: center; padding:0; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.4); }

.mapboxgl-popup-content .mayor-popup-content { background-color:white; color:#001A72; padding:1.2rem; line-height:1.25; }
.mapboxgl-popup-content div.mayor-pop-image { width:100%; height:120px; background-position:center center; background-size:cover; }
.mapboxgl-popup-content p.mayor-pop-status { margin:0; font-weight:500; text-transform:none; font-size:0.7rem; line-height:1.1; }
.mapboxgl-popup-content p.mayor-pop-category { margin:0.8rem 0; font-weight:600; text-transform:uppercase; font-size:0.8rem; line-height:1.3; }
.mapboxgl-popup-content p.mayor-pop-name { margin:0.5rem 0; font-weight:700; font-size:1.4rem; line-height:1.1; }
.mapboxgl-popup-content p.mayor-pop-address { margin:0.5rem 0; font-size:0.9rem;  }
.mapboxgl-popup-content p.mayor-pop-link { margin:1rem 0 0.5rem 0; }