@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   CP DESIGN TOKENS — the single source of truth for colour on this site.

   WHY THIS FILE LOOKS LIKE THIS
   -----------------------------
   Before this, colour lived as 797 hardcoded hex literals across base.html
   (487), event_list.html (219) and the React styles.css (91). Between them the
   two Django templates called var() exactly zero times. This file already
   existed and declared 13 tokens, of which precisely one — --cp-font — was
   ever referenced.

   Measured across those three files there were 42 distinct greys. Nobody chose
   42 greys; ~28 of them appear 1-5 times and are drift. The ramp below
   collapses them onto the rungs that actually carry the design (#111 x32,
   #1a1a1a x32, #2a2a2a x51, #555 x32, #888 x21, #eee, #fff) and everything
   else maps onto its nearest real rung.

   THE MIGRATION-SAFETY RULE — read before changing the blocks below
   ----------------------------------------------------------------
   Bare :root is DARK, not light. That is deliberate and it is the property
   that makes a phased conversion safe: while most of the site is still
   hardcoded dark hex, a converted component must land on the same ground as
   its unconverted neighbour. If :root were light, every file converted before
   the last one would clash with the ones after it.

   For the same reason light mode is currently OPT-IN ONLY, via
   [data-theme="light"]. The prefers-color-scheme rule that makes it automatic
   is written out at the bottom of this block, commented, with the exact
   condition for switching it on. Do not enable it while any surface still has
   hardcoded colour — a half-converted auto-light site is worse than no light
   mode at all.

   ADDING A COLOUR
   ---------------
   Don't. Use a rung. If you genuinely need a new one, add it to BOTH themes
   in this file and nowhere else, and check it with:
       python3 scripts/check_contrast.py
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Type ──────────────────────────────────────────────────────────────── */
  --cp-font:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cp-mono:    'JetBrains Mono', 'Courier New', Courier, monospace;

  /* ── Surfaces, darkest to lightest ─────────────────────────────────────── */
  --cp-chrome:    #0e0e0e;  /* nav bars, header, fixed overlays        */
  --cp-bg:        #111111;  /* page ground                    (x32)   */
  --cp-card:      #121212;  /* cards sitting on the ground             */
  --cp-raised:    #151515;  /* filter bar, raised strips               */
  --cp-input:     #1a1a1a;  /* inputs, chips, wells           (x32)   */

  /* ── Lines, faintest to strongest ──────────────────────────────────────── */
  --cp-line:      #1e1e1e;  /* hairline between rows                   */
  --cp-border:    #2a2a2a;  /* the standard border            (x51)   */
  --cp-border-hi: #333333;  /* hover / emphasis                        */

  /* ── Text, faintest to brightest ───────────────────────────────────────── */
  /* NOTE: on #111, --cp-faint (1.94:1), --cp-dim-3 (2.53:1) and --cp-dim-2
     (3.29:1) all FAIL WCAG AA for text. They are kept at their current values
     so this file is a no-op on the live site; see docs/PALETTE.md for the
     passing alternatives and the decision that is pending on them. Prefer
     --cp-dim or brighter for anything a user actually has to read. */
  --cp-faint:     #444444;  /* dividers, disabled, decoration only     */
  --cp-dim-3:     #555555;  /* de-emphasised labels           (x32)   */
  --cp-dim-2:     #666666;  /* secondary meta                          */
  --cp-dim:       #888888;  /* muted body text                (x21)   */
  --cp-text-2:    #cccccc;  /* secondary text                          */
  --cp-text:      #eeeeee;  /* primary text                            */
  --cp-text-hi:   #ffffff;  /* emphasis, hover                         */

  /* ── Accent ────────────────────────────────────────────────────────────── */
  /* --cp-orange is the brand value and is used on dark grounds (6.66:1) and as
     a FILL. --cp-accent is the one to use for TEXT and links, because #ff6b35
     on a light ground is 2.62:1. On dark the two are the same colour; on light
     they diverge. Text on a filled orange is always --cp-on-accent — never
     white, which is 2.84:1 and is already failing today on the welcome CTA. */
  --cp-orange:    #ff6b35;  /*                                 (x130) */
  --cp-accent:    #ff6b35;
  --cp-accent-hi: #ff9944;
  --cp-accent-lo: #2a1508;  /* tinted ground behind accent text        */
  --cp-on-accent: #111111;  /* text placed ON a filled accent          */

  /* ── Category hues ─────────────────────────────────────────────────────── */
  --cp-music:   #cc88ff;
  --cp-arts:    #66bbff;
  --cp-bike:    #55dd55;
  --cp-fund:    #6699ff;
  --cp-food:    #ddaa33;
  --cp-hybrid:  #ff9944;

  /* ── Second accent ──────────────────────────────────────────────────────
     The teal that was living as the 3-digit shorthand #4bb -- which is why it
     survived every 6-digit grep. It marks curated things: playlist channels,
     sound channels, "play this", the save chip. Not drift, a real second
     accent, so it gets a token rather than being folded into the orange. */
  --cp-accent-2:    #44bbbb;  /* 8.16:1 on #111 */
  --cp-accent-2-hi: #77ffff;
  --cp-on-accent-2: #04202a;  /* 7.29:1 on #44bbbb */

  /* ── Semantic ──────────────────────────────────────────────────────────── */
  --cp-success: #4caf50;
  --cp-warn:    #ff8c00;
  --cp-danger:  #cc4466;
  --cp-live:    #ee5533;  /* a stream that is on air right now */

/* Tinted grounds and hairlines for the semantic colours. The board (Free &
   Trade, support, feedback) builds whole panels out of "green meaning give" and
   "red meaning closed/blocked", and it did that with hand-picked dark hexes —
   #0a1a0a/#0f1f0f/#1a3a1a for green, #2a1010/#5a2020 for red. Those are the
   same three-token idea as --cp-accent-lo, so they get names rather than being
   rewritten as literal drift. */
--cp-success-lo:   #0a1a0a;
--cp-success-line: #1a3a1a;
--cp-danger-hi:    #ff6b6b;
--cp-danger-lo:    #2a1010;
--cp-danger-line:  #5a2020;

  /* ── Resource hub ───────────────────────────────────────────────────────
     Shelter categories. These are NOT decoration and they are NOT drift -- the
     colour is the whole signal on a map of emergency services, so each keeps
     its own token and its own foreground rather than being folded into the
     generic semantic three. Light values are darkened for the ground, and the
     foregrounds flip with them. */
  --cp-rh-emergency:    #8b0000;  --cp-rh-emergency-fg: #ffaaaa;
  --cp-rh-warming:      #003366;  --cp-rh-warming-fg:   #aaddff;
  --cp-rh-cooling:      #004d00;  --cp-rh-cooling-fg:   #aaffaa;
  --cp-rh-smoke:        #4a0060;

  /* ── Translucent surfaces & depth ──────────────────────────────────────────
     These were rgba() literals, which the migration audit could not even see
     until it learned to count them -- base.html alone had 54, including the
     bottom nav's own background, so the "0 literals left" gate would have gone
     green while whole surfaces were still pinned dark.
     --cp-chrome-a is the frosted nav/header ground; --cp-scrim is what sits
     behind a modal; the shadows are stated once so light mode can soften them
     rather than dropping a dark-tuned shadow onto an off-white page. */
  --cp-chrome-a:  rgba(14,14,14,.97);
  --cp-chrome-a2: rgba(14,14,14,.92);
  --cp-scrim:     rgba(0,0,0,.65);
  --cp-scrim-hi:  rgba(0,0,0,.92);
  --cp-shadow:    0 8px 30px rgba(0,0,0,.7);
  --cp-shadow-sm: 0 -2px 16px rgba(0,0,0,.7);

  /* ── Geometry ──────────────────────────────────────────────────────────── */
  --cp-radius:    8px;
  --cp-radius-sm: 4px;
  --cp-radius-lg: 14px;
}

/* ═══ LIGHT — opt-in only until the conversion is finished ═══════════════════
   Every text rung below was solved for its contrast bar against #f7f6f3 rather
   than eyeballed, and carries a warm bias so the neutrals sit with CP's orange
   instead of reading as cold office grey. Ratios in comments are measured. */
:root[data-theme="light"] {
  --cp-chrome:    #ffffff;
  --cp-bg:        #f7f6f3;
  --cp-card:      #ffffff;
  --cp-raised:    #f1efea;
  --cp-input:     #ebe8e2;

  --cp-line:      #e8e5de;
  --cp-border:    #dbd7cf;
  --cp-border-hi: #c4bfb5;

  --cp-faint:     #938d87;  /*  3.04:1 — decoration only  */
  --cp-dim-3:     #75706b;  /*  4.53:1 — passes AA        */
  --cp-dim-2:     #67635e;  /*  5.52:1                    */
  --cp-dim:       #575350;  /*  7.04:1                    */
  --cp-text-2:    #3a352f;  /* 11.23:1                    */
  --cp-text:      #1a1918;  /* 16.24:1                    */
  --cp-text-hi:   #000000;  /* 19.43:1                    */

  /* The brand orange stays the brand orange as a FILL; only text-orange moves. */
  --cp-orange:    #ff6b35;
  --cp-accent:    #c2410c;  /*  4.79:1 as text on #f7f6f3 */
  --cp-accent-hi: #9a3412;
  --cp-accent-lo: #fbeee6;
  --cp-on-accent: #111111;  /*  6.66:1 on #ff6b35         */

  /* All six category hues fail on a light ground at their dark values
     (1.64–2.57:1). These are the solved replacements, all ≥4.5:1. */
  --cp-music:   #7c3aed;    /* 5.27:1 */
  --cp-arts:    #1d6fd0;    /* 4.59:1 */
  --cp-bike:    #15803d;    /* 4.64:1 */
  --cp-fund:    #3a5bd5;    /* 5.34:1 */
  --cp-food:    #a16207;    /* 4.56:1 */
  --cp-hybrid:  #b45309;

  --cp-accent-2:    #116b63;  /* 5.88:1 on #f7f6f3 */
  --cp-accent-2-hi: #0b514b;
  --cp-on-accent-2: #ffffff;

  --cp-success: #15803d;
  --cp-warn:    #b45309;
  --cp-danger:  #b91c1c;
  --cp-live:    #c2410c;
  --cp-success-lo:   #e8f5e9;
  --cp-success-line: #b7dfb9;
  --cp-danger-hi:    #b91c1c;
  --cp-danger-lo:    #fdecec;
  --cp-danger-line:  #f3c9c9;

  --cp-rh-emergency:    #fde8e8;  --cp-rh-emergency-fg: #8b0000;
  --cp-rh-warming:      #e6f0fb;  --cp-rh-warming-fg:   #003366;
  --cp-rh-cooling:      #e6f5e6;  --cp-rh-cooling-fg:   #004d00;
  --cp-rh-smoke:        #f3e8fb;

  /* White chrome, and shadows an off-white page can carry without looking
     bruised -- a dark-tuned 0.7 alpha shadow reads as a smudge on light. */
  --cp-chrome-a:  rgba(255,255,255,.97);
  --cp-chrome-a2: rgba(255,255,255,.92);
  --cp-scrim:     rgba(26,25,24,.45);
  --cp-scrim-hi:  rgba(26,25,24,.72);
  --cp-shadow:    0 8px 30px rgba(30,20,10,.14);
  --cp-shadow-sm: 0 -2px 16px rgba(30,20,10,.10);
}

/* ═══ AUTOMATIC LIGHT ═══════════════════════════════════════════════════════
   Enabled 2026-09-06, once scripts/check_contrast.py --audit reported zero
   hardcoded colour across every tracked file. Before that a viewer whose OS
   prefers light would have got the converted files in light and the rest in
   dark, which is worse than no light mode at all.

   Guarded with :not([data-theme="dark"]) so an explicit dark choice still
   beats a light OS. The [data-theme="light"] block above does the same job
   in the other direction. Between them all three viewer states resolve:
   explicit light, explicit dark, and the un-stamped "follow the system"
   default that most people are actually in.
   ═════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --cp-chrome:    #ffffff;
    --cp-bg:        #f7f6f3;
    --cp-card:      #ffffff;
    --cp-raised:    #f1efea;
    --cp-input:     #ebe8e2;

    --cp-line:      #e8e5de;
    --cp-border:    #dbd7cf;
    --cp-border-hi: #c4bfb5;

    --cp-faint:     #938d87;  /*  3.04:1 — decoration only  */
    --cp-dim-3:     #75706b;  /*  4.53:1 — passes AA        */
    --cp-dim-2:     #67635e;  /*  5.52:1                    */
    --cp-dim:       #575350;  /*  7.04:1                    */
    --cp-text-2:    #3a352f;  /* 11.23:1                    */
    --cp-text:      #1a1918;  /* 16.24:1                    */
    --cp-text-hi:   #000000;  /* 19.43:1                    */

    /* The brand orange stays the brand orange as a FILL; only text-orange moves. */
    --cp-orange:    #ff6b35;
    --cp-accent:    #c2410c;  /*  4.79:1 as text on #f7f6f3 */
    --cp-accent-hi: #9a3412;
    --cp-accent-lo: #fbeee6;
    --cp-on-accent: #111111;  /*  6.66:1 on #ff6b35         */

    /* All six category hues fail on a light ground at their dark values
       (1.64–2.57:1). These are the solved replacements, all ≥4.5:1. */
    --cp-music:   #7c3aed;    /* 5.27:1 */
    --cp-arts:    #1d6fd0;    /* 4.59:1 */
    --cp-bike:    #15803d;    /* 4.64:1 */
    --cp-fund:    #3a5bd5;    /* 5.34:1 */
    --cp-food:    #a16207;    /* 4.56:1 */
    --cp-hybrid:  #b45309;

    --cp-accent-2:    #116b63;  /* 5.88:1 on #f7f6f3 */
    --cp-accent-2-hi: #0b514b;
    --cp-on-accent-2: #ffffff;

    --cp-success: #15803d;
    --cp-warn:    #b45309;
    --cp-danger:  #b91c1c;
    --cp-live:    #c2410c;

    --cp-rh-emergency:    #fde8e8;  --cp-rh-emergency-fg: #8b0000;
    --cp-rh-warming:      #e6f0fb;  --cp-rh-warming-fg:   #003366;
    --cp-rh-cooling:      #e6f5e6;  --cp-rh-cooling-fg:   #004d00;
    --cp-rh-smoke:        #f3e8fb;

    /* White chrome, and shadows an off-white page can carry without looking
       bruised -- a dark-tuned 0.7 alpha shadow reads as a smudge on light. */
    --cp-chrome-a:  rgba(255,255,255,.97);
    --cp-chrome-a2: rgba(255,255,255,.92);
    --cp-scrim:     rgba(26,25,24,.45);
    --cp-scrim-hi:  rgba(26,25,24,.72);
    --cp-shadow:    0 8px 30px rgba(30,20,10,.14);
    --cp-shadow-sm: 0 -2px 16px rgba(30,20,10,.10);
  }
}

/* ── Migration bridge ───────────────────────────────────────────────────────
   frontend/src/events/styles.css already consumes 66 var() calls against its
   own private :root — --bg, --card-bg, --orange and friends. Rather than a
   risky find-and-replace inside a bundled file, those names are aliased onto
   the canonical rungs here. The React file's own :root can then be deleted and
   it inherits themes for free. Delete these aliases once the bundle has been
   migrated to --cp-* names directly. */
:root {
  --bg:       var(--cp-bg);
  --card-bg:  var(--cp-card);
  --card-bd:  var(--cp-line);
  --orange:   var(--cp-accent);
  --text:     var(--cp-text);
  --dim:      var(--cp-dim);
  --faint:    var(--cp-faint);
  --music:    var(--cp-music);
  --arts:     var(--cp-arts);
  --bike:     var(--cp-bike);
  --fund:     var(--cp-fund);
  --food:     var(--cp-food);
  --hybrid:   var(--cp-hybrid);
  --radius:   var(--cp-radius);
}

/* ── Global font override ─────────────────────────────── */
body,
.sh-inner,
.sh-search-input,
.ev-card h2,
.cp-bar,
.cp-panel,
.fb-root {
  font-family: var(--cp-font);
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(leaflet/leaflet.css#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(leaflet/images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(leaflet/images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(leaflet/images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}