@charset "UTF-8";

:root {
	--input-border-color:#dddddd;
	--box-shadow-central:0 0 0 1px var(--input-border-color), 0 2px 4px 0 rgb(0 0 0 / 7%), 0 1px 1.5px 0 rgb(0 0 0 / 5%);
	--global-background-color: #fff;
	--global-text-color: #000;
	--global-text-color: #000;
}

* {
	box-sizing:border-box;
	padding:0;
	margin:0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;      
}
html.fixed,
html.fixed body {
	overflow:hidden;
	position:fixed;
	-webkit-backface-visibility:hidden;
}
body,html {
	touch-action: manipulation;
	top:0;
	left:0;
	width:100%;
	height:100%;
	max-width:100%;
	max-height:100%;
	overflow:hidden !important;
}
html:not(.neighborhoodsGeoJSONAvailable) .neighborhood-display,
html:not(.neighborhoodsGeoJSONAvailable) .action-toggle-shapes, {
	display:none;
}
body {
	background:#ededed;
	background:#424d5c;
	background:#1f2227;
	background:#ededed;
	background:#fff;
	color:#fff;
}
html.dark-mode body {
	background:#1b2931;
}
.brand {
	text-align:left;
	font-family: 'Gochi Hand', cursive;
	font-size:4vw;
	text-decoration:none;
	color:#fff;
    text-shadow:0px 6px 0 rgba(0,0,0,0.25), -2px 2px 0 rgba(0,0,0,0.25), 0 3px 0 rgba(0,0,0,0.25), 0 -2px 0 rgba(0,0,0,0.25), 1px 1px rgba(0,0,0,0.25), -1px -1px 0 rgba(0,0,0,0.25), 1px -1px 0 rgba(0,0,0,0.25), -1px 1px 0 rgba(0,0,0,0.25);
	position:fixed;
	bottom:75px;
	vertical-align:middle;
	cursor:pointer;
	left:25px;
	z-index:9001;
}
html.embed .brand {
	bottom:0.5em;
}
.brand.minimal {
	bottom:25px;
}
.brand .img-map {
	width:1em;
	vertical-align:middle;
}
.slogan {
	font-family: 'Gochi Hand', cursive;
	font-size:3vw;
	font-size:calc(1vw + 1vh + 1vmin);
	color:#fff;
	vertical-align:middle;
	z-index:10000;
	pointer-events:none;
}
.brand .img-fire {
	width:1em;
	vertical-align:middle;
}
.brand .small {
	font-size:0.75em;
	font-weight:normal;
}
.vignette {
	display:none;
	display:block;
	box-shadow:0 0 100px rgba(0,0,0,1) inset;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:1;
	z-index:4;
	pointer-events:none;
}
body,input,p,.tag-box {
	font-family:"Nunito","Helvetica Neue","Helvetica",sans-serif;
}
.map-container {
	position:relative;
	/*background-image:url('/assets/hoodmaps-amsterdam.png');*/
	background-size:cover;
	width:100%;
	height:100%;
	left:0;
	top:0;
	overflow:hidden;
	background:#1b2931;
	background:#e7e5e0;
}

	.map-below {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		/*height:calc(100% - 2.5em);*/
		height:100%;
		z-index:2;
		opacity:1;
	}
	.map-above {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		/*height:calc(100% - 2.5em);*/
		height:100%;
		z-index:3;
	}
	.map-canvas {
		cursor: none;
		z-index:1;
		opacity:1;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		pointer-events:none;
		opacity:1;
	}
	body.heatmap .map-canvas {
		opacity:1;
	}
	.map-canvas.active {
		pointer-events:auto;
	}
.color-picker {
	pointer-events:none;
	width:100vw;
	z-index:9001;
	position:absolute;
	top:-0.25em;
	margin-bottom:-0.25em;
	font-size:1em;
	display:none;
}
body.pixels .color-picker,
body.heatmap .color-picker,
body.map3d .color-picker,
body.vectors .color-picker {
	display:block;	
}
.color-picker img {
	height:1.5em;
	vertical-align:middle;
}
.color-picker div {
	overflow:hidden;
	pointer-events:all;
	float:left;
	opacity:1;
	cursor:pointer;
	width:14.2857142857%;
	width:calc(100vw / 7);
}
.color-picker div span.tag {
	font-weight:normal;
	color:#fff;
	display:block;
	text-align:center;
	width:100%;
	font-weight:800;
	vertical-align:middle;
	height:3em;
	line-height:3em;
	font-size:1em;
}
.color-picker div span.tag span.label {
	font-size:1.25em;
	text-shadow:1px 1px 1px #000;
	vertical-align:middle;
}
@media (max-width: 600px) {
	.color-picker div span.tag span.label {
		/*font-size: 12px;*/
	}
}
@media (min-width:800px) {
	.color-picker div {
		margin-top:1em
	}
	html.embed .color-picker div {
		margin-top:0;
		margin-bottom:1em;
	}
	html:not(.demoRunning) .color-picker div:hover,
	html:not(.demoRunning) .color-picker div.active {
		height:4em;
		margin-top:0;
	}
}
@media (max-width:800px) {
	.color-picker div.active span.tag {
		border:2px solid #fff;
		font-weight:800;
	}
}

.brush {
	pointer-events:none;
	position:fixed;
	display:none;
	top:0;
	z-index:3;
	font-size:3em;
	left:0;
    opacity:1;
    border-radius:100%;
    /*border:0.5px solid rgba(0,0,0,0.5);*/
}
@media (max-width:600px) {
	.brush {
		display:none;
	}
}
.brush.draw {
	display:block;
	color:#000;
	width:0.8em;
	margin-left:-0.5em;
	margin-top:-0.5em;
	height:1.1em;
    /*box-shadow:0px 0px 2px #fff;*/
    /*border-radius:100%;*/
    /*text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000, 2px 2px #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;*/
}
.brush .fa {
	display:none;
}
.brush.tag {
	display:block;
	font-size:2em;
	width:auto !important;
	height:auto !important;
}
.brush.tag .fa {
	display:block;
	color:rgba(0,0,0,0.35);
}
html.dark-mode .brush.tag .fa {
	color:#fff;
}

.brush.half {
	font-size:1.5em;
}
.brush.double {
	font-size:6em;
}
.brush .emoji {
	display:none;
    /*right: 28px;
    top: -33px;*/
    position: relative;
    font-size: 0.65em;
    text-shadow: none;
    right: -1em;
    bottom: -1em;
}
.brush .emoji img {
	height:1em;
}
.brush.active {
	display:block;
}
.city-selector {
	display:none;
	height:3.5em;
	width:400vw;
	white-space: nowrap;
}
.city-selector-scroller {
	overflow:hidden;
	white-space: nowrap;
	overflow-x:scroll;
	-webkit-overflow-scrolling:touch;
	bottom:-0.9em;
	left:0;
	width:100%;
	z-index:9001;
	position:fixed;
	color:#fff;
	font-size:1em;
	z-index:100;
	height:3.5em;
}
.city-selector a {
	text-decoration:none;
	float:left;
	background:#fff;
	opacity:1;
	width:calc(100vw / 6.5);
	cursor:pointer;
	margin-top:0.25em;
	text-align:center;
	border-right:1px solid #fff;
}
.city-selector a span {
	font-weight:normal;
	color:#616161;
	display:block;
	text-align:center;
	width:100%;
	font-weight:800;
	vertical-align:middle;
	height:3em;
	line-height:3em;
	text-transform:uppercase;
    margin-top: -0.15em;
}
.city-selector a:hover,
.city-selector a.active {
	opacity:1;
	height:4em;
	line-height:4em;
	margin-top:-0.5em;
}

.zoom-buttons {
	box-shadow:1px 2px 4px rgba(0,0,0,.03);
	bottom:calc(53px + 14px);
	right:14px;
	width:auto;
	display:block;
	position:absolute;
	z-index:9001;
}
@media (max-width:800px) {
	.zoom-buttons {
		bottom:7em;
	}
}
.zoom-buttons div:first-of-type {
	margin-bottom:1px;
}
.zoom-buttons div {
	display:block;
	color:#000;
	background:#fff;
	padding:7px;
	padding-left:15px;
	padding-right:15px;
	cursor:pointer;
	text-align:center;
	font-weight:800;
	font-size:2.5em;
	/*border:1px solid #ddd;*/
	/*box-shadow:0 1px 2px 0 rgba(0,0,0,.1) !important;*/
	box-shadow: var(--box-shadow-central) !important;
	border-radius:6px;
}
.zoom-buttons div:hover {
	background-color:#f5f5f5;
}
.zoom-buttons div.action-zoom-in {
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
}
.zoom-buttons div.action-zoom-out {
	border-top-left-radius:0;
	border-top-right-radius:0;
}
.action-best-area-mode,
.action-tag-mode,
.action-undo,
.action-draw-mode,
.action-drag-mode {
	position:fixed;
	cursor:pointer;
	z-index:9001;
	font-weight:800;
	display:none;
	color:#000;
	top:10em;
	padding:1em;
	right:14px;
	background-color:#fff;
	box-shadow: var(--box-shadow-central) !important;
	border-radius:6px;
}


.action-tag-mode {
	top:15em;
	top:13.25em;
	padding-left:1.15em;
	display:block;
}

.action-best-area-mode {
	top:19em;
	top:17.2em;
	padding-left:1.25em;
	padding-right:1.25em;
	padding-top:1.325em;
	padding-bottom:1.325em;
	display:block;
}
.action-undo {
	top:18em;
	padding-left:1.15em;
	display:none;
}
.action-tag-mode.active,
.action-draw-mode.active,
.action-drag-mode.active {
	display:block;
}
@media (min-width:800px) {
	.action-draw-mode,
	.action-drag-mode {
		top:7.35em;
	}
	.action-tag-mode {
		top:12.5em;
	}
	.action-undo {
		top:15em;
	}
}
.action-tag-mode .fa,
.action-undo .fa,
.action-draw-mode .fa,
.action-drag-mode .fa {
	font-size:1.4em;
	padding-bottom:0.25em;
	padding-top:0.25em;
}
.action-tag-mode span,
.action-undo span,
.action-draw-mode span,
.action-drag-mode span {
	font-size:2em;
}
.action-tag-mode:hover,
.action-undo:hover,
.action-draw-mode:hover,
.action-drag-mode:hover {
	background-color:#f5f5f5;
}
div.action-zoom-in:active,
div.action-zoom-out:active,
.action-tag-mode:active,
.action-undo:active,
.action-draw-mode:active,
.action-drag-mode:active,
.action-enable-gps:active {
	background-color:#ededed;
}

@media (max-width:600px) {
	.action-undo {
		display:none;
	}
}
canvas {
	opacity:1;
	/*mix-blend-mode: darken;*/
}
/*.map-canvas:not(.active) {*/
/*.map-canvas {
	-webkit-filter:blur(25px);
	-moz-filter:blur(25px);
	filter:blur(25px);
}
.map-canvas.no-blur {
	-webkit-filter:none;
	-moz-filter:none;
	filter:none;
}*/

.loading-text {
	z-index:-1;
	width:30em;
	max-width:75vw;
	padding:1em;
	font-family:sans-serif;
	font-weight:800;
	background:#fff;
	position:fixed;
	left:50%;
	top:50%;
	color:#000;
	line-height:1.5;
	padding:1em;
	text-align:center;
	transform:translateY(-50%) translateX(-50%);
}
body.no-color-picker .action-draw-mode,
body.no-color-picker .action-tag-mode {
	display:none;
}
body.no-color-picker .color-picker {
	display:none;
}
body.no-color-picker .top-left-buttons {
	top:4em;
}
body.no-color-picker .action-draw-mode,
body.no-color-picker .action-drag-mode {
	top:4em;
}
body.no-color-picker .action-tag-mode {
	top:9em;
}
.top-left-buttons {
	top:7.5em;
	top:calc(6em + 30px);
	left:14px;
	position:fixed;
	z-index:100;
	width:75%;
	pointer-events:none;
}


@media (max-width:800px) {
	html:not(.embed) .top-left-buttons {
		top:calc(14px + 14px + 3em);
	}
	html:not(.embed) body.no-color-picker .top-left-buttons {
		top:4em;
	}
}
.bottom-left-buttons {
	bottom:1em;
	left:1em;
	position:fixed;
	z-index:100;
}
@media (max-width:800px) {
	.bottom-left-buttons {
		bottom:1em;
	}
	.notice-contributors {
		display:none !important;
	}
}
.notice-first-draw-cta {
	position:fixed;
	top:4em;
	z-index:10;
	left:40%;
	color:#000;
	font-weight:800;
	display:none;
}
.notice-first-draw-cta span.notice {
	background-color:#fff;
	padding:0.5em;
	margin-left:-0.75em;
	position:relative;
	top:-0.5em;
}
@media (max-width:800px) {
	.notice-first-draw-cta {
		left:1em;
		top:6.75em;
	}
	.notice-first-draw-cta span.notice {
	    margin-left: -4.75em;
	    top: 2.5em;
	}
}
img.hand-drawn-arrow {
	transform:rotate(-90deg);
	width:7em;
	opacity:0.8;
}
span.hide-on-mobile {
	display:inline;
}
@media (max-width:600px) {
	.hide-on-mobile {
		display:none !important;
	}
}
.tags {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:10;
	pointer-events:none;
}
.map-above .tag-box {
	position:relative;
}
.tag-box .tag {
	/*max-width:225px;*/
	max-width:8em;
	text-align:center;
	outline:none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
	/*white-space: normal;*/
	display:inline-block;
	vertical-align: middle;
	line-height:1.25;
	/*text-shadow:1px 1px 1px rgba(0,0,0,1), 4px 4px 0px rgba(0,0,0,0.125);*/
	/*text-shadow:1px 1px 1px rgba(255,255,255,1), 4px 4px 0px rgba(0,0,0,0.125);*/
	/*text-shadow:0px -1px 1px rgba(0,0,0,0.125), 1px 1px 1px #000, 4px 4px 0px rgba(0,0,0,0.125);*/
	font-weight:bold;
}
.hipster_center span,
.pre_hipster_center span,
.tag-box.tag,
.notice-demo,
.tag-box .tag {

	text-shadow:
		-1px -1px 0 rgba(0,0,0,1),
		1px -1px 0 rgba(0,0,0,1),
		-1px 1px 0 rgba(0,0,0,1),
		1px 1px 0 rgba(0,0,0,1),

		-2px -2px 0 rgba(0,0,0,1),
		2px -2px 0 rgba(0,0,0,1),
		-2px 2px 0 rgba(0,0,0,1),
		2px 2px 0 rgba(0,0,0,1),

		0px 3px 0 rgba(0,0,0,1),
		3px 0px 0 rgba(0,0,0,1),
		-3px 0px 0 rgba(0,0,0,1),
		0px -3px 0 rgba(0,0,0,1),
		
		1px 1px 0px #000,
		2px 2px 0px #000,
		4px 4px 0px rgba(0,0,0,0.125),
		1px 2px 4px rgba(0,0,0,0.03),
		15px 25px 5px rgba(0,0,0,0.25);

	text-shadow:
		-1px -1px 0 #1b2931,
		1px -1px 0 #1b2931,
		-1px 1px 0 #1b2931,
		1px 1px 0 #1b2931,

		-2px -2px 0 #1b2931,
		2px -2px 0 #1b2931,
		-2px 2px 0 #1b2931,
		2px 2px 0 #1b2931,

		0px 3px 0 #1b2931,
		3px 0px 0 #1b2931,
		-3px 0px 0 #1b2931,
		0px -3px 0 #1b2931,
		
		1px 1px 0px #000,
		2px 2px 0px #000,
		4px 4px 0px rgba(0,0,0,0.125),
		1px 2px 4px rgba(0,0,0,0.03),
		15px 25px 5px rgba(0,0,0,0.25);

	text-shadow:-1px -1px 0 #1b2931, 1px -1px 0 #cecece, -1px 1px 0 #1b2931, 1px 1px 0 #1b2931, -2px -2px 0 #1b2931, 2px -2px 0 #1b2931, -2px 2px 0 #1b2931, 2px 2px 0 #1b2931, 0px 3px 0 #1b2931, 3px 0px 0 #1b2931, -3px 0px 0 #1b2931, 0px -3px 0 #1b2931, 1px 1px 0px #000, 2px 2px 0px #000, 4px 4px 0px rgba(0,0,0,0.125), 1px 2px 4px rgba(0,0,0,0.03), 15px 25px 5px rgba(0,0,0,0.25);

	text-shadow:-1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444, -2px -2px 0 #444, 2px -2px 0 #444, -2px 2px 0 #444, 2px 2px 0 #444, 0px 3px 0 #444, 3px 0px 0 #444, -3px 0px 0 #444, 0px -3px 0 #444, 1px 1px 0px #000, 2px 2px 0px #000, 4px 4px 0px rgba(0,0,0,0.125), 1px 2px 4px rgba(0,0,0,0.03), 15px 25px 5px rgba(0,0,0,0.25);

	text-shadow:1px 1px 0 #454545,1px 2px 0 #454545,3px 3px 0 #454545,-1px -1px 0 #454545,1px -1px 0 #454545,-1px 1px 0 #454545,0px 1px 0 #454545,4px 4px 0px rgba(0,0,0,0.125), 1px 2px 4px rgba(0,0,0,0.03), 15px 25px 5px rgba(0,0,0,0.25);

	text-shadow:1px 1px 0 #454545,1px 2px 0 #454545,3px 3px 0 #454545,-1px -1px 0 #454545,1px -1px 0 #454545,-1px 1px 0 #454545,0px 1px 0 #454545;



}
.tag-box.insert {
	z-index:1000 !important;
}
.tag-box {
	display:none;
	cursor:pointer;
	/*transform:translateX(-50%);*/
    /*white-space: nowrap;*/
}
.tag-box.show {
	display:block;
	/*pointer-events:none;*/
	opacity:1;
}
.tag-box {
	text-decoration:none;
}
.tag-box span {
	text-decoration:none;
}
.tag-box.upvoted,
.tag-box.self {
	display:block !important;
	opacity:1 !important;
}


.tag-box.upvoted .fa.action-upvote {
	display:inline-block !important;
	opacity:1 !important;
}
.tag-box.upvoted .fa.action-downvote {
	opacity:0 !important;
	float:left !important;
	margin-right:6px !important;
}
.tag-box.upvoted span.votes {
	left:37px !important;
	opacity:1 !important;
}
.tag-box.insert .tag {
    text-decoration: underline;
    text-decoration-skip: ink;
    font-size:20px;
}
.tag-box.insert .tag a:hover {
	color:#eee;
}
.tag-box {
	cursor:default;
	/*-webkit-transform:translateX(-50%);
	transform:translateX(-50%);*/
	outline:none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}



.tag-box span.time {
	opacity:0;
    position: absolute;
    bottom: -15px;
    right:0;
    font-size: 0.5em;
    text-shadow: 1px 1px 1px rgba(0,0,0,1), 5px 5px 0px rgba(0,0,0,0.125);
}

.tag-box .tag a {
	color:#fff;
}
.tag-box span.votes {
	opacity:0;
	pointer-events:none;
	font-size:0.75em;
	position:absolute;
    /*bottom: -1.25em;*/
    top:35px;
	left: 18px;
	width:30px;
	text-align:center;
	font-size:11px;
	text-shadow:1px 1px 1px rgba(0,0,0,0.75);
}

.tag-box.self .time,
.tag-box.self .votes,
.tag-box.self .fa.action-upvote,
.tag-box.self .fa.action-downvote,
.tag-box.hover:not(.insert):not(.isMetaData) .time,
.tag-box.hover:not(.insert):not(.isMetaData) .votes,
.tag-box.hover:not(.insert):not(.isMetaData) .fa.action-upvote,
.tag-box.hover:not(.insert):not(.isMetaData) .fa.action-downvote,
.tag-box:hover:not(.insert):not(.isMetaData) .time,
.tag-box:hover:not(.insert):not(.isMetaData) .votes,
.tag-box:hover:not(.insert):not(.isMetaData) .fa.action-upvote,
.tag-box:hover:not(.insert):not(.isMetaData) .fa.action-downvote,
.mapboxgl-marker:hover .tag-box:not(.insert):not(.isMetaData) .time,
.mapboxgl-marker:hover .tag-box:not(.insert):not(.isMetaData) .votes,
.mapboxgl-marker:hover .tag-box:not(.insert):not(.isMetaData) .fa.action-upvote,
.mapboxgl-marker:hover .tag-box:not(.insert):not(.isMetaData) .fa.action-downvote,
.tag-box:active:not(.insert):not(.isMetaData) .time,
.tag-box:active:not(.insert):not(.isMetaData) .votes,
.tag-box:active:not(.insert):not(.isMetaData) .fa.action-upvote,
.tag-box:active:not(.insert):not(.isMetaData) .fa.action-downvote,
.tag-box:focus:not(.insert):not(.isMetaData) .time,
.tag-box:focus:not(.insert):not(.isMetaData) .votes,
.tag-box:focus:not(.insert):not(.isMetaData) .fa.action-upvote,
.tag-box:focus:not(.insert):not(.isMetaData) .fa.action-downvote {
	opacity:1;
	pointer-events:initial;
}
.tag-box.alwaysDisplay .votes,
.tag-box.alwaysDisplay .fa.action-upvote,
.tag-box.alwaysDisplay .fa.action-downvote {
	opacity:1;
}



.tag-box .gif {
	display:none;
	position:absolute;
	top: -15px;
	right: -35px;
	pointer-events:none;
}
.tag-box.show .gif {
	display:block;
}
.tag-box {
	font-weight:800;
	color:#fff;
	position:absolute;
}

.tag-box .tag {
	vertical-align:top;
	text-align: left;
}
.tag-text-box {
	z-index:9001;
	position:absolute;
	display:none;
	left:300px;
	top:300px;
	margin-left:-0.5em;
	margin-top:-0.5em;
	white-space:nowrap;
}
.tag-text-box input {
	outline:none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
	padding:0.5em;
	font-weight:800;
	font-size:1em;
	box-shadow:1px 1px 1px rgba(0,0,0,0.75);
	z-index:11;
	border:none;
	-webkit-user-select: auto;
	-moz-user-select: auto;
	-ms-user-select: auto;
	user-select: auto;    
	border-radius:6px;  
	box-shadow: var(--box-shadow-central);
}
.action-save-tag {
	margin-left:0.5em;
}
.action-save-tag,
.fa.action-upvote,
.fa.action-downvote {
	font-size:24px;
	padding:6px;
	background:#fff;
	color:#000;
	border-radius:100%;
	pointer-events: auto;
	text-shadow:none;
	cursor:pointer;
	border:2px solid #fff;
	z-index:100;
	box-shadow:1px 1px 1px rgba(0,0,0,0.75);
	box-shadow: var(--box-shadow-central);
}
.fa.action-downvote.downvoted,
.fa.action-downvote:hover {
	background:#ff4742;
	color:#fff;
}
.tag-box.self .fa.action-upvote,
.action-save-tag:hover,
.fa.action-upvote.upvoted,
.fa.action-upvote:hover {
	background:#2BDE73;
	color:#fff;
}
.action-save-tag:active,
.fa.action-downvote:active,
.fa.action-upvote:active {
	background:#000;
	color:#fff;
}
.fa.action-downvote {
	padding-left:6.5px;
	padding-right:6.5px;
}
.action-save-tag,
.fa.action-upvote {
	padding-left:6.5px;
	padding-right:6px;
	padding-bottom:4px;
}

.fa.action-upvote,
.fa.action-downvote {
	opacity:0;
	pointer-events:none;
}

.by {
	background:#fff;
	border-top-left-radius:6px;
	/*border:1px solid #ddd;*/
	box-shadow:0 1px 2px 0 rgba(0,0,0,.1) !important;
	position:fixed;
	color:#000;
	bottom:0;
	right:0;
	font-weight:500;
	z-index:970000;
	border-top-left-radius: 0.2em;
	padding: 0.5em;
}
.by:hover {
	background-color:#f5f5f5;
}
.by img {
	border-radius:2em;
	width:1.5em;
	vertical-align:middle;
}
.by p {
	margin:0;
	vertical-align:middle;
	display:inline;
	margin-left:0.5em;
	font-weight:600;
}



html.embed:not(.places) .tag-box {
	pointer-events:none;
}


html.embed .top-left-buttons div,
html.embed .top-left-buttons a {
	display:none;
}
html.embed .top-left-buttons .action-toggle-tags,
html.embed .top-left-buttons .action-toggle-cafes,
html.embed .top-left-buttons a.action-city-index,
html.embed .top-left-buttons a.action-edit-in-embed {
	display:inline-block;
}

html.embed .action-view-log,
html.embed .by,
html.embed .notice-first-draw-cta,
html.embed .notice-contributors,
html.embed .paid-insert,
html.embed .action-buy-print,
html.embed .fa.action-upvote,
html.embed .fa.action-downvote,
html.embed .action-drag-mode,
html.embed .action-tag-mode,
html.embed .action-draw-mode,
html.embed .notice-first-draw-cta,
html.embed .notice-contributors,
html.embed .action-make-my-map,
html.embed .action-embed-city,
html.embed .action-share-mymap,
html.embed .action-city-index,
html.embed .action-embed-city,
html.embed .city-selector,
html.embed .city-selector-scroller,
html.screenshot .neighborhood-display,
html.screenshot .producthunt-voter,
html.screenshot .search,
html.screenshot .fa.search-icon,
html.screenshot .top-left-buttons,
html.screenshot .bottom-left-buttons,
html.screenshot .action-make-my-map,
html.screenshot .action-embed-city,
html.screenshot .by,
html.screenshot .brand,
html.screenshot .legal,
html.screenshot .action-buy-print,
html.screenshot .pre_hipster_center,
html.screenshot .hipster_center,
html.screenshot .zoom-buttons,
html.screenshot .fa.action-upvote,
html.screenshot .fa.action-downvote,
html.screenshot .action-enable-gps,
html.screenshot .action-toggle-blur,
html.screenshot .action-drag-mode,
html.screenshot .action-tag-mode,
html.screenshot .action-draw-mode,
html.screenshot .notice-crowdsourced,
html.screenshot .notice-hold-control-to-drag-3d-map,
html.screenshot .notice-first-draw-cta,
html.screenshot .notice-contributors,
html.screenshot .paid-insert,
html.screenshot .action-city-index,
html.screenshot .action-toggle-3d,
html.screenshot .action-toggle-tags,
html.screenshot .city-selector,
html.screenshot .city-selector-scroller {
	display:none !important;
}
html.hide-color-picker .color-picker {
	opacity:0;
	display:none;
}
html.hide-tags .tags {
	opacity:0;
	display:none !important;
}
.notice-demo,
.notice-crowdsourced {
	position:fixed;
	bottom:50px;
	left:0;
	z-index:100;
	pointer-events:none;
	background:rgba(255,255,255,0.75);
	padding:4px;
	color:#000;
	font-size:12px;
}
html.embed .notice-crowdsourced {
	display:none;
}
@media (max-width:800px) {
	.notice-crowdsourced {
		display:none;
	}
}
.notice-demo {
	left:auto;
	bottom:auto;
	top:7px;
	right:21px;
	font-size:48px;
}
@media (max-width:800px) {
	.notice-demo {
		font-size:24px;
	}
}
.notice-demo .emoji {
	text-shadow:none;
	padding-top:4px;
}
.notice-demo span {
	vertical-align: top;
	display:inline-block;
}
.notice-demo {
	display:none;
}
.legal {
	cursor:pointer;
	position:fixed;
	text-decoration:none;
	font-weight:800;
	color:#fff;
	text-shadow:1px 1px 1px rgba(0,0,0,0.75);
	border:none;
	top:60px;
	font-size:0.75em;
	text-transform:uppercase;
	left:0.5em;
	z-index:10;
}
@media (max-width:600px) {
	html:not(.embed) .legal {
		top:8em;
	}
}


.top-left-buttons div,
.top-left-buttons a,
.action-book-accommodation,
.bottom-left-buttons div,
.bottom-left-buttons a {
    box-shadow:1px 2px 4px rgba(0,0,0,.03);
	pointer-events:all;
	text-decoration:none;
	left:1em;
	font-weight:800;
	background-color:#fff;
	z-index:9001;
	color:#000;
	cursor:pointer;
	display:inline-block;
	margin-right:14px;
	/*border:1px solid #ddd;*/
	box-shadow:var(--box-shadow-central) !important;
	border-radius:6px;
    padding: 0.3em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
.action-book-accommodation:hover,
.top-left-buttons div:hover,
.top-left-buttons a:hover,
.bottom-left-buttons div:hover,
.bottom-left-buttons a:hover {
	background-color:#f5f5f5;
}
.action-book-accommodation:active,
.top-left-buttons div:active,
.top-left-buttons a:active,
.bottom-left-buttons div:active,
.bottom-left-buttons a:active {
	background-color:#ededed;
}


/*.by-levelsio {
	padding-top:4px !important;
	vertical-align:bottom;
}
.by-levelsio img {
	line-height:1.5;
	width:25px;
	height:25px;
	border-radius:100%;
	vertical-align:middle;
	margin:1px;
}
@media (max-width:800px) {
	.by-levelsio {
		display:none;
	}
}*/
.paid-insert {
	cursor:pointer;
	position:fixed;
	text-decoration:none;
	font-weight:800;
	color:#fff;
	/*text-shadow:1px 1px 1px rgba(0,0,0,0.4),1px 1px 5px rgba(0,0,0,0.4),1px 1px 10px rgba(0,0,0,0.75);*/
	background:#fff;
	color:#777;
	border:none;
	bottom:0;
	font-size:1em;
	text-transform:uppercase;
	left:0;
	text-align:center;
	z-index:9002;
	left:50%;
	transform:translateX(-50%);
	padding:0.75em;
	width:100%;
}
.paid-insert:hover {
	background:#ff4742;
	color:#fff;
}
.paid-insert:hover .button {
	background:#fff;
	color:#ff4742;
}
.paid-insert .button {
	padding:0.5em;
	background:#ff4742;
	color:#fff;
	margin:0.25em;
	display:inline-block;
	text-decoration:none;
}
.paid-insert .button.close {
	background:#222;
	color:#fff;
}
.paid-insert .button.close:hover {
	background:#fff;
	color:#222;
}
@media (max-width:600px) {
	.paid-insert {
		display:none;
	}
}

.modal-embed-city {
	background:#fff;
	padding:2em;
	position:fixed;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
	z-index:9200;
	display:none;
	color:#000;
}
.modal-embed-city textarea {
	font-size:1.25em;
	font-family:Courier;
	color:#000;
	height:5em;
	width:20em;
}
.modal-embed-city textarea.sfw {
	display:none;
}

@media (max-width:600px) {
	.action-embed-city {
		display:none;
	}
	.action-buy-print {
		left:5em;
	}
}

.brand {
	display:none;
}
html.embed .brand {
	display:block;
}
html .action-edit-in-embed {
	display:none;
}
html.embed .action-edit-in-embed {
	display:inline-block;
}


@media (max-height:600px) {
	.by {
		display:none;
	}
}

@media (max-height:400px) {
	.action-draw-mode {
		display:none !important;
	}
}
input.search {
	border-bottom:1px solid #ddd;
	border:none;
	outline:none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-appearance:none;
	appearance:none;
	max-width:400px;
	width: 100%;
	-webkit-user-select: auto;
	-moz-user-select: auto;
	-ms-user-select: auto;
	user-select: auto;    
    padding: 0.5em;
    font-size: 2em;
    font-weight: 800;
    border-radius: 0;
    text-align: center;
    box-shadow:1px 2px 4px rgba(0,0,0,.03);
}
@media (max-width:600px) {
	input.search {
		font-size:1em;
		padding:1em;
		max-width:none;
	}
}
.self-map-marker {
	position:fixed;
	top:-100vh;
	left:-100vw;
	z-index:9;
	width:70px;
	pointer-events:none;
}
.location-map-marker {
	position:fixed;
	top:-100vh;
	left:-100vw;
	z-index:9;
	width:50px;
	transform:translateX(-50%) translateY(-100%);
	pointer-events:none;
}

@media (max-width:800px) {
	html:not(.embed) .color-picker {
		font-size:1em;
		height:6em;
		bottom:0;
		margin-bottom:0;
	}
	html:not(.embed) .color-picker div {
		width:calc(100vw / 4);
	}
	html:not(.embed) .color-picker div:nth-child(-n+3) {
		width:calc(100vw / 3);
	}
	html:not(.embed) .action-edit-in-embed,
	html:not(.embed) .action-city-index,
	html:not(.embed) .action-toggle-tags {
		top:6.75em;
	}
}

/*.tag-box.new {
	animation: fadeIn 1s infinite alternate;
}
@keyframes fadeIn { 
		from { opacity: 0; } 
}*/

@media (max-width:800px) {
	.action-embed-city {
		display:none !important;
	}
}



.notice-first-draw-cta {
	display:none !important; /* 2017-08-06 kill intro */
}



@media (max-width:500px) {
	html {
		font-size:0.9em;
	}
	.fa.search-icon {
		top:0.85em;
	}
}
@media (max-width:400px) {
	html {
		font-size:0.8em;
	}
}


@media (min-width:300px) and (max-width:374px) {
	.by,
	.bottom-left-buttons a,
	.bottom-left-buttons div {
		display:none;
	}
	.action-enable-gps,
	.top-left-buttons .action-city-index,
	.top-left-buttons .action-toggle-blur,
	.top-left-buttons .action-toggle-tags {
		display:inline-block;
	}
}

@media (min-width:250px) and (max-width:300px) {
	.by,
	.zoom-buttons,
	.top-left-buttons a,
	.top-left-buttons div,
	.bottom-left-buttons a,
	.bottom-left-buttons div {
		display:none;
	}
	.action-enable-gps,
	.top-left-buttons .action-city-index {
		display:inline-block;
	}
}


@media (max-width:250px) {
	.by,
	.zoom-buttons,
	.top-left-buttons a,
	.top-left-buttons div,
	.bottom-left-buttons a,
	.bottom-left-buttons div,
	.action-tag-mode {
		display:none;
	}
	.action-enable-gps,
	.top-left-buttons .action-city-index {
		display:inline-block;
	}
}

html.embed .action-enable-gps,
html.embed .zoom-buttons {
	bottom:8em;
}

html.screenshot .map-container {
	/* to fix empty edges */
    width: 110vw;
    height: 110vh;
    top: -5vh;
    left: -5vw;
}


.color-picker div.yellow {
	   background-color: #ffc924;
	   box-shadow:0px -4px #ffd76a;
}
.color-picker div.green {
	   background-color: #2BDE73;
	   box-shadow:0px -4px #16ad52;
}
.color-picker div.void {
    background-color: #333;
	    box-shadow:0px -4px #000;
}
.color-picker div.red {
    background-color: #ff4742;
	    box-shadow:0px -4px #ff7873;
}
.color-picker div.green {
    background-color: #2BDE73;
	    box-shadow:0px -4px #73e797;
}
.color-picker div.blue {
	   background-color: #42a5ff;
	   box-shadow:0px -4px #75bdff;
}
.color-picker div.darkblue {
	   background-color: #1c5182;
	   box-shadow:0px -4px #597da1;
}
.color-picker div.silver {
	   background-color: #cacaca;
	   background-color:#1c2a31;
	   background-color:#ccc;
	   box-shadow:0px -4px #e5e5e5;
	   box-shadow:0px -4px #525a5f, 0px -10px rgba(0,0,0,.05);
	   box-shadow:0px -4px #525a5f;
	   box-shadow:0px -4px #ffffff;
	   box-shadow:0px -4px #ddd;
}
.color-picker div.darkgrey {
	   background-color: #444;
	   box-shadow:0px -4px #555;
}

.neighborhood-list div.yellow {
	   border-left:14px solid #ffc924;
}
.neighborhood-list div.green {
	   border-left:14px solid #2BDE73;
}
.neighborhood-list div.red {
    border-left:14px solid #ff4742;
}
.neighborhood-list div.green {
    border-left:14px solid #2BDE73;
}
.neighborhood-list div.blue {
	   border-left:14px solid #42a5ff;
}
.neighborhood-list div.darkblue {
	   border-left:14px solid #1c5182;
}
.neighborhood-list div.silver {
  	border-left:14px solid#1c2a31;
}
.neighborhood-list div.darkgrey {
  	border-left:14px solid #444;
}

html.embed .color-picker div.yellow {
	   box-shadow:0px 4px #ffd76a;
}
html.embed .color-picker div.green {
	   box-shadow:0px 4px #16ad52;
}
html.embed .color-picker div.void {
	    box-shadow:0px 4px #000;
}
html.embed .color-picker div.red {
	    box-shadow:0px 4px #ff7873;
}
html.embed .color-picker div.green {
	    box-shadow:0px 4px #73e797;
}
html.embed .color-picker div.blue {
	   box-shadow:0px 4px #75bdff;
}
html.embed .color-picker div.darkblue {
	   box-shadow:0px 4px #597da1;
}
html.embed .color-picker div.silver {
	   box-shadow:0px 4px #525a5f;
	   box-shadow:0px 4px #fff;
	   box-shadow:0px 4px #c7c7c7;
}
html.embed .color-picker div.darkgrey {
	   box-shadow:0px 4px #333;
}


html.tag .tag-box {
	/* center tag */
	left:0 !important;
	top:45vh !important;
	height:calc(100vh - 6em) !important;
	width:100vw !important;
	transform:none !important;
	-webkit-transform:none !important;
	-moz-transform:none !important;
	-ms-transform:none !important;
	text-align:center !important;
	margin:0 !important;
	padding-right:5vw;
	padding-left:5vw;
}
html.tag .tag-box .tag {
	font-size:50px;
	max-width:none;
	text-shadow:0 1px rgba(0,0,0,0.4);
}
html.tag .tag-box .gif { 
	display:none;
}
.twitter-follow-button-container {
	position:fixed;
	bottom:0;
	right:9em;
	margin:0.25em;
	font-weight:800;
	text-decoration:none;
	z-index:9001;
}
html.screenshot .twitter-follow-button-container {
	display:none;
}
html.screenshot .map-above,
html.screenshot .map-below {
	height:100%;
}
@media (max-width:800px) {
	.twitter-follow-button-container {
		display:none;
	}
}

.tag-box.isMetaData {
	min-width:auto;
}

.search.search {
	cursor:text;
	position:fixed;
	top:0;
	z-index:100;
	padding:0.5em;
	/*border:1px solid #ddd;*/
	box-shadow: var(--box-shadow-central) !important;
	font-size:1.35em;
	color:#000;
	font-weight:800;
}

.color-picker {
	top:3.3em;
}
.action-enable-gps {
	border-radius:100%;
	position:absolute;
	cursor:pointer;
	bottom:4em;
	/*border:1px solid #ddd;*/
	box-shadow: var(--box-shadow-central) !important;
	right:auto;
	left:14px;
	bottom:calc(53px + 14px);
	z-index:100;
	background-color:#fff;
	box-shadow:1px 2px 4px rgba(0,0,0,.03);
}

@media (max-width:800px) {
	.action-enable-gps {
		bottom: 7em;
	}
}

.action-enable-gps:hover {
	background-color:#f5f5f5;
}
.action-enable-gps:active {
	background-color:#ededed;
}

.action-enable-gps img {
	width:45px;
	height:45px;
}

.autocomplete-box {
	font-size:1.5em;
	position:fixed;
	top:2.1em;
	z-index:10000;
	width:100%;
	max-width:400px;
	text-align:center;
	display:none;
	min-height:200px;
	background:#fff;
	border-bottom-left-radius:6px;
	border-bottom-right-radius:6px;
	max-height:calc(100vh - 200px);
	border-top:1px solid #ddd;
}
@media (max-width:600px) {
	.autocomplete-box {
		max-width:none;
	}
}

.autocomplete-box .loading_spinner {
	font-size:16px;
	position:absolute;
	margin-top:-23px;
}
.autocomplete-box div.result {
	background:#fff;
	color:#000;
	padding:0.39em;
	padding-bottom:0.5em;
	padding-top:0.5em;
	border-right:1px solid #ddd;
	border-left:1px solid #ddd;
	border-bottom:1px solid #ddd;
	cursor:pointer;
	font-size:16px;
	text-align:left;
	padding-left:14px;
	padding-right:14px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.autocomplete-box div.result:hover {
	background:#f5f5f5;
}
.autocomplete-box div.result:active {
	opacity:0.5;
}
.loading_spinner_2018 .loading_spinner_div {
    margin: 0 auto;
    transform: translateX(-50%);
    left: 50%;
    position: fixed;
}
.loading_spinner_2018 .loading_message {
	pointer-events:none;
	margin:0 auto;
	width:100%;
	max-width:17em;
	pointer-events:none;
	background:#fff;
	padding:1em;
	color:#6f6f6f;
	padding:7px;
	padding-left:14px;
	padding-right:14px;
	font-weight:800;
	border-radius:6px;
	border:1px solid #f5f5f5;
	display:none;
	margin-top:4em;
}
.loading_spinner_2018 .loading_message.show {
	display:block;
}

.loading_spinner_2018 .loader_spinner_svg {
	width:3em;
	height:3em;
}

.loader_spinner_circle {
    stroke-width: 6;
    stroke-miterlimit: 10;
    /*stroke: #f5f5f5;*/
}

.loader_spinner_circle--spinner {
    stroke-dasharray: 1,220;
    stroke-dashoffset: 0;
    -webkit-animation: loading_spinner_2018_dash 1.5s ease-in-out infinite,color 3s ease-in-out infinite;
    animation: loading_spinner_2018_dash 1.5s ease-in-out infinite,color 3s ease-in-out infinite;
    stroke-linecap: square;
    stroke:#ff4742;
}

.loader_spinner_circle {
    stroke-width: 6;
    stroke-miterlimit: 10;
}

.loader_spinner_svg {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: loading_spinner_2018_rotate;
    animation-name: loading_spinner_2018_rotate;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes loading_spinner_2018_rotate {
	100% {
	    -webkit-transform: rotate(1turn);
	    transform: rotate(1turn);
	    color: transparent;
	}
}

@keyframes loading_spinner_2018_dash {
	0% {
	    stroke-dasharray: 1,220;
	    stroke-dashoffset: 0;
	}
	50% {
	    stroke-dasharray: 97.9,220;
	    stroke-dashoffset: -38.5;
	}
	100% {
	    stroke-dasharray: 97.9,220;
	    stroke-dashoffset: -136.4;
	}
}

@keyframes loading_spinner_2018_color {
	0% {
	    stroke: #ff4742;
	}
	50% {
	    stroke: #ff4742;
	}
	100% {
	    stroke: #ff4742;
	}
}

.loading_spinner_2018 {
	height:3em;
	pointer-events:none;
	display:block;
	z-index:9999;
	position:fixed;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
}
.loading_spinner_2018.show {
	display:block;
}

.daily_notice {
	position:fixed;

    bottom: 0;
    text-align:center;
    text-decoration:none;
    width: 100%;
    display: block;
    left: 0;
    padding: 1em;
    z-index: 10000000;
    /*border-top:1px solid #f5f5f5;
    border-bottom:1px solid #f5f5f5;*/
    color:#6f6f6f;
    background:#fff;
    border-top:1px solid #f5f5f5;
    border-bottom:1px solid #f5f5f5;
    
    /*background: #fd4a3c;
    color:#fff;*/
}

@media (max-width:800px) {
	.daily_notice {
		display:none;
	}
}


.map-marker-place {
	box-shadow:4px 4px 0px rgba(0,0,0,0.125);
	padding:0.5em;
	font-size:16px;
	padding-top:0.25em;
	padding-bottom:0.25em;
	border-radius:6px;
	text-align:center;
	text-shadow:none;
	cursor:pointer;
	z-index:1;
    margin-top: -35px;
	margin-left: 5px;
	text-align:left;
	text-overflow:ellipsis;
	max-width:140px;
	overflow:hidden;
	white-space: nowrap;
}
.map-marker-place:hover,
.map-marker-place.hover {
	opacity:0.75 !important;
}
.map-marker-place:active {
	opacity:0.75 !important;
}
.map-marker-place:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #fff;
    bottom: 0px;
    left: -webkit-calc(50% - 4px);
    left: calc(50% - 4px);
    position: fixed;
    z-index: 2;
}

.map-marker-place:before {
    content: "";
    width: 8px;
    height: 8px;
    position: fixed;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #fff;
    bottom: 0px;
    left: -webkit-calc(50% - 4px);
    left: calc(50% - 4px);
    box-shadow: 2px 2px 0px 0 rgba(0,0,0,.1);
}
.map-marker-place.score-100:after {
    border-top: 4px solid #2bde73;
}
.map-marker-place.score-100:before {
    background-color: #2bde73;
}
.map-marker-place.score-100 {
	background-color:#2bde73;
	border:2px solid #00c059;
	color:#fff;
}

.map-marker-place.score-90:after {
    border-top: 4px solid #6ff066;
}
.map-marker-place.score-90:before {
    background-color: #6ff066;
}
.map-marker-place.score-90 {
	background-color:#6ff066;
	border:2px solid #4dd24a;
	color:#fff;
}

.map-marker-place.score-80:after {
    border-top: 4px solid #91e861;
}
.map-marker-place.score-80:before {
    background-color: #91e861;
}
.map-marker-place.score-80 {
	background-color:#91e861;
	border:2px solid #73ca43;
	color:#fff;
}

.map-marker-place.score-70:after {
    border-top: 4px solid #b3de58;
}
.map-marker-place.score-70:before {
    background-color: #b3de58;
}
.map-marker-place.score-70 {
	background-color:#b3de58;
	border:2px solid #96c13b;
	color:#fff;
}

.map-marker-place.score-60:after {
    border-top: 4px solid #d6d552;
    border-top: 4px solid #f99d4c;
}
.map-marker-place.score-60:before {
    background-color: #d6d552;
    background-color: #f99d4c;
}
.map-marker-place.score-60 {
	background-color:#d6d552;
	border:2px solid #bbba38;
	background-color:#f99d4c;
	border:2px solid #d98231;
	color:#fff;
}

.map-marker-place.score-50:after {
    border-top: 4px solid #f9cd4a;
    border-top: 4px solid #f99d4c;
}
.map-marker-place.score-50:before {
    background-color: #f9cd4a;
    background-color: #f99d4c;
}
.map-marker-place.score-50 {
	background-color:#f9cd4a;
	border:2px solid #bf9801;
	background-color:#f99d4c;
	border:2px solid #d98231;
	color:#fff;
}

.map-marker-place.score-40:after {
    border-top: 4px solid #f9b54a;
    border-top: 4px solid #f9874e;
}
.map-marker-place.score-40:before {
    background-color: #f9b54a;
    background-color: #f9874e;
}
.map-marker-place.score-40 {
	background-color:#f9b54a;
	border:2px solid #db9b30;
	background-color:#f9874e;
	border:2px solid #db6e36;
	color:#fff;
}

.map-marker-place.score-30:after {
    border-top: 4px solid #f99d4c;
    border-top: 4px solid #f9874e;
}
.map-marker-place.score-30:before {
    background-color: #f99d4c;
    background-color: #f9874e;
}
.map-marker-place.score-30 {
	background-color:#f99d4c;
	border:2px solid #d98231;
	background-color:#f9874e;
	border:2px solid #db6e36;
	color:#fff;
}

.map-marker-place.score-20:after {
    border-top: 4px solid #f9874e;
    border-top: 4px solid #fa6f4c;
}
.map-marker-place.score-20:before {
    background-color: #f9874e;
    background-color: #fa6f4c;
}
.map-marker-place.score-20 {
	background-color:#f9874e;
	border:2px solid #db6e36;
	background-color:#fa6f4c;
	border:2px solid #da5334;
	color:#fff;
}

.map-marker-place.score-10:after {
    border-top: 4px solid #fa6f4c;
}
.map-marker-place.score-10:before {
    background-color: #fa6f4c;
}
.map-marker-place.score-10 {
	background-color:#fa6f4c;
	border:2px solid #da5334;
	color:#fff;
}

.map-marker-place.score-0:after {
    border-top: 4px solid #ff4742;
}
.map-marker-place.score-0:before {
    background-color: #ff4742;
}
.map-marker-place.score-0 {
	background-color:#ff4742;
	border:2px solid #de232c;
	color:#fff;
}


.place-info-box {
	display:none;
	margin:14px;
	position:fixed;
	bottom:0;
	left:0;
	width:calc(100% - 28px);
	padding:1em;
	background:#fff;
	border-radius:6px;
	/*border:1px solid #ddd;*/
	box-shadow:0 1px 2px 0 rgba(0,0,0,.1) !important;
	z-index:100000000;
	color:#000;
	cursor:pointer;
}

html.embed .place-info-box {
	bottom: 40px;
}

.place-info-box:hover {
	opacity:0.95;
}
.place-info-box:active {
	opacity:0.9;
}

.place-info-box .img {
	background-color:#f5f5f5;
	background-size:cover;
	border-radius:6px;
	width:4em;
	height:4em;
	float:left;
	margin-right:0.75em;
}

.place-info-box .title {
	font-weight:800;
}
.place-info-box .subtitle {
	color:#000;
	white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}
.place-info-box .rating {
	position:absolute;
	top:0;
	right:0;
	padding:0.5em;
	margin:0.5em;
	background:red;
	border-radius:6px;
	color:#fff;
	font-weight:800;
}


.by {
	display:none !important;
}
.place-info-box .rating-100 {
	background-color:#2bde73;
	border:2px solid #00c059;
	color:#fff;
}
.place-info-box .rating-90 {
	background-color:#6ff066;
	border:2px solid #4dd24a;
	color:#fff;
}
.place-info-box .rating-80 {
	background-color:#91e861;
	border:2px solid #73ca43;
	color:#fff;
}
.place-info-box .rating-70 {
	background-color:#b3de58;
	border:2px solid #96c13b;
	color:#fff;
}
.place-info-box .rating-60 {
	background-color:#d6d552;
	border:2px solid #bbba38;
	background-color:#f99d4c;
	border:2px solid #d98231;
	color:#fff;
}
.place-info-box .rating-50 {
	background-color:#f9cd4a;
	border:2px solid #bf9801;
	background-color:#f99d4c;
	border:2px solid #d98231;
	color:#fff;
}
.place-info-box .rating-40 {
	background-color:#f9b54a;
	border:2px solid #db9b30;
	background-color:#f9874e;
	border:2px solid #db6e36;
	color:#fff;
}
.place-info-box .rating-30 {
	background-color:#f99d4c;
	border:2px solid #d98231;
	background-color:#f9874e;
	border:2px solid #db6e36;
	color:#fff;
}
.place-info-box .rating-20 {
	background-color:#f9874e;
	border:2px solid #db6e36;
	background-color:#fa6f4c;
	border:2px solid #da5334;
	color:#fff;
}
.place-info-box .rating-10 {
	background-color:#fa6f4c;
	border:2px solid #da5334;
	color:#fff;
}
.place-info-box .rating-0 {
	background-color:#ff4742;
	border:2px solid #de232c;
	color:#fff;
}

.modal-help {
	display:none;
	background:#fff;
	border-radius:6px;
	/*border:1px solid #ddd;*/
	box-shadow:0 1px 2px 0 rgba(0,0,0,.1) !important;
	height:auto;
	color:#000;
	z-index:1000000;
	position:fixed;
	padding:28px;
	margin-top:1.5em;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
	max-width:600px;
	width:calc(100% - 2em);
	box-shadow:1px 2px 4px rgba(0,0,0,.03);
}


.modal-help p {
	margin-bottom:1em;
}

.action-close-modal-help {
	background-color:#ff4742;
	border:2px solid #ff4742;
	color:#fff;
	padding:14px;
	text-align:center;
	font-weight:800;
	border-radius:6px;
	cursor:pointer;
}
.action-close-modal-help:Hover {
	background:none;
	color:#ff4742;
}

.noscript {
	z-index:10000000;
	position:fixed;
	top:0;
	left:0;
	width:auto;
	height:100%;
	background:#fff;
	cursor:text;
	padding:2em;
	text-align:left;
	color:#000;
	overflow-y:scroll;
}
.noscript li {
	width:calc(33% - 0.75em);
	display:inline-block;
	margin:0.25em;
}

body.map3d .action-toggle-vectors,
body.map3d .action-toggle-places,
body.map3d .action-draw-mode,
body.map3d .action-tag-mode,
body.map3d .action-embed-city,
body.map3d .daily_notice {
	display:none;
}

body.map3d .action-rotate-3d-map {
	display:inline-block;
}

body:not(.map3d) .action-rotate-3d-map {
	display:none;
}
body:not(.map3d) .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
	display:none !important;
}
.mapboxgl-ctrl-top-right .mapboxgl-ctrl {
	margin:14px !important;
	margin-top:10em !important;
}
@media (max-width:800px) {
	.mapboxgl-ctrl-top-right .mapboxgl-ctrl {
		display:none !important;
	}
}
@media (max-width:500px) {
	.mapboxgl-ctrl-top-right .mapboxgl-ctrl {
		margin-top:12em !important;
	}
}
.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > .mapboxgl-ctrl-compass-arrow {
	width:30px !important;
	height:30px !important;
}
.mapboxgl-ctrl-group > button {
	width:56px !important;
	height:64px !important;
}
.mapboxgl-ctrl-zoom-out,
.mapboxgl-ctrl-zoom-in {
	display:none !important;
}

.action-toggle-tags {
	margin-bottom:14px;
}

.color-picker {
	top:auto;
	bottom:0.25em;
	display:block;
}
html.embed .color-picker {
	top:-0.25em;
	bottom:auto;
}

.action-undo, .action-draw-mode, .action-drag-mode,
html:not(.embed) .top-left-buttons {
	top:5em;
	top:calc(6em + 30px);
}


.action-best-area-mode .fa,
.action-tag-mode .fa,
.action-draw-mode,
html.neighborhoodsGeoJSONAvailable .top-left-buttons {
	top:calc(6em + 30px);
}
html:not(.neighborhoodsGeoJSONAvailable) .top-left-buttons {
	top:5em;
}

.bottom-left-buttons {
	bottom:4em;
}
@media (max-width:800px) {
	.bottom-left-buttons {
		bottom:7em;
	}
}
.mapboxgl-ctrl-top-right .mapboxgl-ctrl {
	margin-top:7em !important;
}
html:not(.embed) .legal {
	bottom:4em;
	opacity:0.5;
	top:auto !important;
}

.fa.search-icon {
	position:fixed;
	top:28px;
	pointer-events:none;
	left:28px;
	z-index:1000;
	font-size:1.5em;
	color:#000;
}

.action-book-accommodation {
	display:none;
}
.action-book-accommodation {
	max-width: 300px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	position:fixed;
	z-index:100;
	bottom:4em;
	left:14px;
}

html.places .modal-book-accommodation,
html.places .action-book-accommodation {
	bottom:14px;;
}
@media (max-width:800px) {
	.action-book-accommodation {
		bottom:7em;
	}
}
body:not(.map3d) .notice-hold-control-to-drag-3d-map {
	display:none;
}
body.map3d .notice-hold-control-to-drag-3d-map {
	display:inline-block;
}
body .notice {
	display:none;
	position:fixed;
	bottom:60px;
	left:50%;
	transform:translateX(-50%);
	z-index:1000;
	color:#fff;
	font-size:14px;
	pointer-events:none;
	transition:opacity 0.3s;
}
@media (max-width:800px) {
	body.map3d .notice-hold-control-to-drag-3d-map {
		display:none;
	}
	body.map3d .mapboxgl-ctrl-top-right {
		display:none !important;
	}
}


.cursor-grab {
	cursor:move !important;
	cursor:grab !important;
	cursor:-webkit-grab !important;
	cursor:-moz-grab !important;
}

.cursor-pointer {
	cursor:pointer !important;
}

html.embed.places .legal {
	display:none;
}
html.embed.places .zoom-buttons {
	top:4em;
	bottom:auto;
}

body.hide-search .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
	margin-top:1em !important;
}
body.hide-search input.search,
body.hide-search .fa.search-icon {
	display:none;
}

body.hide-search .zoom-buttons {
	bottom:4em;
}
body.hide-search .producthunt-voter {
	display:none;
}
body.hide-search .action-drag-mode,
body.hide-search .action-draw-mode,
body.hide-search .top-left-buttons {
	top:1em;
}
body.hide-search .action-best-area-mode,
body.hide-search .action-tag-mode {
	top:6em;
}


html.embed .action-drag-mode,
html.embed .action-draw-mode,
html.embed .top-left-buttons {
	top:7.5em;
}
html.embed .action-enable-gps,
html.embed .zoom-buttons {
	bottom:1em;
}

html.places .action-embed-city,
html.places .daily_notice,
html.places .action-toggle-3d,
html.places .action-toggle-tags,
html.places .action-toggle-vectors,
html.places .action-draw-mode,
html.places .action-tag-mode {
	display:none !important;
}
html.places .action-enable-gps {
	bottom:1em;
}
html.embed .action-book-accommodation,
html.embed .action-enable-gps {
	display: none;
}

.top-left-buttons div {
	margin-bottom:7px;
}


.producthunt-voter {
	position:fixed;
	top:8em;
	left:1em;
	z-index:10;
}
@media (max-width:800px) {
	.producthunt-voter {
		display:none;
	}
}
.search.search {
    width: calc(100% - 28px);
    left: 14px;
    top: 14px;
    border-radius: 5px;
}
.autocomplete-box {
    width: calc(100% - 14px - 14px);
    left: 14px;
    top:2.65em;
}
.autocomplete-box div.result:last-of-type {
	border-bottom-left-radius:6px;
	border-bottom-right-radius:6px;
}


#hoodmapsTempDivToMeasureWidthHeightOfTag .tag-box {
	top:0 !important;
	left:0 !important;
	transform:none !important;
	margin:0 !important;
	position:relative !important;
	display:inline-block !important;
	background:blue;
}






.mapboxgl-ctrl-group {
	-webkit-box-shadow:none !important;
	box-shadow:none !important;
	border:1px solid #ddd !important;
}

.hipster_center,
.pre_hipster_center {
	display:none;
	position:fixed;
	z-index:3;
	pointer-events:none;
	text-align:center;
	border:4px dashed rgba(255,255,255,0.75);
	border-color:#888888;
    border-radius: 100%;
    background:rgba(0,0,0,0.05);
	transform:translateX(-50%) translateY(-50%);
}
.pre_hipster_center span,
.hipster_center span {
	font-size:17px;
	text-align:center;
	font-weight:bold;
	left:50%;
	top:50%;
	width:90%;
	color:#fff;
	position:fixed;
	/*text-shadow:1px 1px 1px #000, 4px 4px 0px rgba(0,0,0,0.125);*/
	transform:translateX(-50%) translateY(-50%);
	display:block;
}

.sidebar {
	position:fixed;
	left:14px;
	top:11em;
	width:345px;
	height:calc(100% - 28px - 15em);
	border-radius:6px;
	z-index:100;
	overflow:hidden;
	background:#fff;
	border-right:1px solid #ddd;
    box-shadow:1px 2px 4px rgba(0,0,0,.03);
    border-left:2px solid #fff;
    display:none;
}
html:not(.neighborhoodsGeoJSONAvailable) .sidebar {
	display:none;
}
@media (max-width:1400px) {
	html.neighborhoodsGeoJSONAvailable .sidebar {
		display:none;
	}
}

.neighborhood-list div {
	color:#000;
	padding:14px;
	border-bottom:1px solid #ddd;
}
.neighborhood-list {
	overflow-y:scroll;
	height:100%;
}
.neighborhood-list div:hover {
	background:#f5f5f5;
	cursor:pointer;
}
.main-container {
	/*margin-left: 430px;*/
	position: relative;	
	overflow:hidden;
	height:100%;
	width:100%;
}

.modal-book-accommodation {
	position:fixed;
	color:#000;
	border-radius:6px;
    box-shadow:1px 2px 4px rgba(0,0,0,.03);
	background:#fff;
	padding:14px;
	padding-left:21px;
	padding-right:21px;
	display:none;
	left:14px;
	bottom:4em;
	/*border:1px solid #ddd;*/
	box-shadow:0 1px 2px 0 rgba(0,0,0,.1) !important;
	z-index:100;
	text-align:left;
}
@media (max-width:800px) {
	.modal-book-accommodation {
		bottom:7em;
	}
}
.modal-book-accommodation img {
	border-radius:100%;
	vertical-align:middle;
	/*border:1px solid #ddd;*/
	box-shadow:0 1px 2px 0 rgba(0,0,0,.1) !important;
	margin-bottom:7px;
	margin-right:14px;
	object-fit:contain;
}
.modal-book-accommodation a {
	text-decoration:none;
	color:#000;
}
.modal-book-accommodation a:hover {
	opacity:0.75;
}
.modal-book-accommodation a:active {
	opacity:0.5;
}

.modal-book-accommodation .current-neighborhood {
	font-weight:800;
	margin-bottom:10px;
	display:block;
}
html.screenshot .modal-help {
	display:none !important;
}


/* <2019-07: minimize features to clean up> */
	.producthunt-voter,
	/*.by-levelsio,*/
	.action-embed-city,
	/*.action-toggle-tags,*/
	.action-toggle-vectors {
		display:none !important;
	}
/* </2019-07: minimize features to clean up> */


html.editing .map-above {
	/* if editing mode, let clicks go to the canvas below not the map above */
	pointer-events:none;
}

.neighborhood-display {
	position:fixed;
	top:4.9em;
	text-align:center;
	left: 14px;
	width:calc(100% - 28px);
	max-width:400px;
	background:#fff;
	border-radius:6px;
	font-weight:bold;
	padding:7px;
	/*border:1px solid #ddd;*/
    box-shadow: var(--box-shadow-central) !important;
	padding-left:14px;
	padding-right:14px;
	color:#000;
	z-index:100;
	text-overflow:ellipsis;
	overflow: hidden;
    white-space: nowrap;
}
html.embed .neighborhood-display {
	top:4em;
}

.mapboxgl-ctrl-bottom-right {
	bottom: calc(4em + 4px) !important;
}
html.embed .mapboxgl-ctrl-bottom-right {
	bottom:0 !important;
}
@media (max-width:800px) {
	.mapboxgl-ctrl-bottom-right {
		bottom: calc(8em + 4px) !important;
	}
}
@media (max-width:600px) {
	.neighborhood-display {
		max-width:none;
	}
	.mapboxgl-ctrl-bottom-right {
		bottom: calc(19em + 4px) !important;
		right:4px !important;
	}
}


.tags.shadow {
	opacity:1;
	z-index:5;
}
.tags.shadow .tag {
	position:relative;
	top:30px;
	left:10px;
	color:#000;
	text-shadow:none;
	opacity:0.125 !important;
	filter:blur(1px);
}

#youtube-music {
	opacity:1;
	position:absolute;
	z-index:-10;
	opacity:0;
}


@media (min-width:600px) {
	.action-best-area-mode,
	.action-tag-mode,
	.action-undo,
	.action-draw-mode,
	html.neighborhoodsGeoJSONAvailable .action-draw-mode,
	.action-drag-mode {
		top:14px;
	}

	.action-tag-mode {
		top:calc(5em + 14px);
	}
}




@media (max-width:600px) {
	.hipster_center,
	.pre_hipster_center {
		border:2px dashed rgba(255,255,255,0.75);
	}
	.hipster_center span,
	.pre_hipster_center span {
		font-size:12px;
	}
	.tag-box.tag,
	.tag-box .tag {
		font-size:0.65em;
	}
}

/*html.demoRunning,
html.demoRunning .color-picker div,
html.demoRunning .color-picker {
	pointer-events:none !important;
}*/

html:not(.neighborhoodsGeoJSONAvailable) .neighborhood-display {
	display:none !important;
}

html.embed.places .top-left-buttons {
	display:none;
}


.action-enable-gps img.compass-icon {
	width:25px;
	height:25px;
	transform:rotate(45deg);
	margin:14px;
	margin-left:18px;
}

/*
.aux-item {
	position:fixed;
	bottom:0;
	padding:14px;
	z-index:100000;
	border-top:1px solid #ddd;
	width:100vw;
	background:#fff;
	color:#000;
	text-align:center;
}
.aux-item h2 {
	font-size:14px;
	margin-bottom:7px;
}
.aux-item p {
	margin-bottom:14px;
}
@media (max-height:600px) {
	.aux-item p {
		display:none;
	}
}
.aux-item .sponsored {
	position:absolute;
	top:3.5px;
	right:3.5px;
	opacity:0.25;
	font-size:10px;
}
.aux-item .button {
	border:1px solid #ff4742;
	background:#ff4742;
	display:table;
	margin:7px auto;
	padding:7px;
	color:#fff;
	font-weight:bold;
	border-radius:6px;
}

.aux-item:hover {
	background:#f5f5f5;
}
.aux-item:active {
	opacity:0.5;
}
@media (max-width:600px) {
	.aux-item .button {
		display:none;
	}
	html:not(.screenshot):not(.embed) .main-container {
		height:calc(100% - 58px);
	}
}
@media (min-width:600px) {
	.aux-item .button,
	.aux-item h2,
	.aux-item p {
		display:inline-block;
		font-size:14px;
		margin-left:3.5px;
		margin-right:3.5px;
	}
	html:not(.screenshot):not(.embed) .main-container {
		height:calc(100% - 78px);
	}
}
@media (max-width:800px) {
	.aux-item p {
		display:none;
	}
}
html.embed .search.search,
html.screenshot .aux-item,
html.embed .aux-item {
	display:none;
}
*/





/* block edits for now 2022-10 */
/* re-enabled 2024-01 with new SQLite optimizations */
/* .action-tag-mode,
.action-undo,
.action-draw-mode,
.action-drag-mode {
	display: none !important;
}

.color-picker,
.color-picker div {
	pointer-events: none !important;
}

*/