/* mayor map */

:root {
  --cty-bg_mayor: #332E21;
  --cty-txt_mayor: white;
  --cty-border_accordion: white;

  --cty-border-mayor: 1px solid white; /* layer control button */
  --cty-txt-mayor-on: white;
  --cty-bg-mayor-on: #00C1D4;
  --cty-bg-mayor-on-hover: #00C1D4;
  --cty-txt-mayor-off: rgba(0,0,0,0.75);
  --cty-bg-mayor-off: #6b6145;
  --cty-bg-mayor-off-hover: #6b6145;
  --cty-bg-mayor-off-icon : #eee;
  --cty-txt-mayor-off-icon : #444;
  
  --cty-bg-mayor1: #FF5E26; --cty-txt-mayor1:white; 
  --cty-bg-mayor2: #12703E; --cty-txt-mayor2:white; 
  --cty-bg-mayor3: #12703E; --cty-txt-mayor3:white; 
  --cty-bg-mayor4: #12703E; --cty-txt-mayor4:white; 
  --cty-bg-mayor5: navy  ; --cty-txt-mayor5: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%; padding:24px; position:relative; z-index:20; background-color:var(--cty-bg_mayor); } 
.mayor-controls-hold { width:100%; max-width:400px; margin:0 auto; }
.mayor-panel { display:block; width:100%; height:500px; position:relative; z-index:1; border: 4px solid var(--cty-bg_mayor); }
.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; padding:40px 30px; overflow:hidden; }
  .mayor-panel { width:calc(100% - 400px); height:840px; border-left:0px; }
}

.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:italic; font-size:1rem; }

.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 { border:1px solid var(--cty-border_accordion); background-color:var(--cty-bg_mayor); border-top:0; padding:12px 16px; }
.mayor-layers-hold ul { margin:20px 0 0 0; padding:0; list-style:none; }
.mayor-layers-hold ul li { margin:0 0 2px 0; padding:0; list-style:none; }
.mayor-layers-hold ul li a { display:block; width:100%; padding:10px; color:var(--cty-txt_mayor); }
@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; }
}

#mayor-drawer { display:table; width:100%; text-decoration:none; }
#mayor-drawer:hover { text-decoration:none; }
.mayor-drawer-label { display:table-cell; width:auto; text-align:left; padding:0 16px; font-size:16px; line-height:40px; }
.mayor-drawer-icon { display:table-cell; width:24px; text-align:right; padding:0 16px; font-size:16px; line-height:40px; }
#mayor-drawer.is-open .mayor-drawer-icon { transform: rotate(180deg); }
@media all and (min-width: 992px) {
  #mayor-drawer { display:none; }
}
 
.mayor-drawer-closed { max-height:0px; overflow:hidden; }
.mayor-drawer-open { max-height:900px; transition: var(--cty-transition-hover);  overflow:hidden; }

.mayor-drawer-drop-rel { position:relative; width:100%; height:40px; }
.mayor-drawer-drop-abs { position:absolute; top:0px; width:100%; }


/* 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); }




/* map popups */

.mayor-marker-sm { width:24px; height:24px; cursor: pointer; border-radius:12px; background-color:black; text-align:center; 
  font-size:12px; line-height:24px; color:white; box-shadow: 0px 0px 2px 0px rgba(255,255,255, 0.4); }

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

.mayor-marker-1, .mayor-marker-layer1 { background-color:var(--cty-bg-mayor1); color:var(--cty-txt-mayor1); }
.mayor-marker-2, .mayor-marker-layer2 { background-color:var(--cty-bg-mayor2); color:var(--cty-txt-mayor2); }
.mayor-marker-3, .mayor-marker-layer3 { background-color:var(--cty-bg-mayor3); color:var(--cty-txt-mayor3); }
.mayor-marker-4, .mayor-marker-layer4 { background-color:var(--cty-bg-mayor4); color:var(--cty-txt-mayor4); }
.mayor-marker-5, .mayor-marker-layer5 { background-color:var(--cty-bg-mayor5); color:var(--cty-txt-mayor5); }

.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:#332E21; 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-name { margin:0.5rem 0; font-weight:700; font-size:1.1rem; }
.mapboxgl-popup-content p.mayor-pop-address { margin:0.5rem 0; font-size:0.9rem;  }
.mapboxgl-popup-content p.mayor-pop-link { margin:0.5rem 0; }