/* Palette:
	yellow - #ffed00
*/

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/css/raleway_800.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* General */
body { margin: 0; padding: 0; font-family: "Asap", sans-serif; font-optical-sizing: auto; }
#map { position: absolute; top: 60px; bottom: 16px; left: 0; width: 100%; }
#footer { position: absolute; bottom: 0; height: 16px; left: 0; right: 0; text-align: right; font-size: 10px; padding: 0 5px 2px 0; }
#footer span { padding-top: 5px; display: inline-block; cursor: pointer; }
a { color: black; }
#header a, #footer a { text-decoration: none; }
#header a:hover { text-decoration: underline; }
.as_link { color: black; text-decoration: underline; cursor: pointer; }

/* Sidepanel overall appearance */
#sidepanel {
	display: none;
	width: 0;
	position: absolute; 
	top: 60px; bottom: 16px;
	right: 0;
	padding: 0 10px; box-sizing: border-box;
	max-height: calc(100% - 60px);
	overflow-y: scroll;
	z-index: 1003;
}
.sided #map {
	width: calc(100% - 450px);
}
.sided #sidepanel {
	display: block;
	width: 450px;
	background-color: #ffed00;
}
.h_close { font-weight: normal; font-size: larger; float: right; margin-top: -20px; cursor: pointer; }
.floating_close { position: absolute; font-weight: normal; font-size: 25px; top: 10px; right: 15px; cursor: pointer; }

@media only screen and (max-width: 800px) {
	#sidepanel {
		bottom: 0; top: auto; left: 0; right: 0;
		max-height: calc(100% - 350px);
	}
	.sided #map { width: 100%; }
	.sided #sidepanel { width: 100%; }
}

/* Sidebar browser content */

.browse_types { background-color: white; padding: 10px; border-radius: 10px; }
.browse_types span { display: inline-block; background-color: #ffee00; margin-right: 10px; padding: 5px 15px; border-radius: 30px; }
.browse_types img { width: 40px; vertical-align: middle; }

.browse_tags { background-color: white; padding: 10px; border-radius: 10px; margin-top: 15px; }
.browse_tags span { 
	color: #555; border: 1px solid gray; 
	padding: 2px 4px; 
	background-color: #DDD; border-radius: 4px; 
	display: inline-block; 
	margin-right: 10px; margin-bottom: 3px;
}
.browse_tags span strong { color: black; font-weight: normal; }

.browse_gallery { background-color: white; padding: 10px; border-radius: 10px; margin-top: 15px; }
.browse_gallery img { 
	width: 100px; height: 100px; object-fit: cover; border-radius: 5px; 
	vertical-align: top;
	margin-right: 10px;
	cursor: pointer;
}

.browse_text { background-color: white; padding: 10px; border-radius: 10px; margin-top: 15px; }
.browse_text div { padding-top: 5px; margin-bottom: 8px; line-height: 1.3em; cursor: pointer; }
.browse_text div:before {
	content: "❝";
	font-family: Georgia;
	font-size: 30px; display: inline-block;
	margin-right: 5px;
	color:#889c0b;
	margin-top: 3px; vertical-align: text-top; max-height: 0.5em;
}
.browse_list li {
	cursor: pointer;
	text-decoration: underline;
}

.browse_score { background-color: white; padding: 10px 10px 15px 10px; border-radius: 10px; margin-top: 15px; }
.browse_score img { width: 50px; vertical-align: middle; margin-right: 10px; float: left;}
.browse_score b { margin-right: 5px; font-size: 1.5em; }
.browse_score span { display: block; }

.browse_another { margin-top: 15px; border-bottom: 2px solid black; padding-bottom: 30px; }
.browse_another button { border: 3px solid black; }
.browse_another button:hover { background-color: #EEE; }

.backlink { margin-top: 1em; cursor: pointer; }
#fullview_header h2 { margin-top: 0.5em; }

/* Header */
#header {
	position: absolute; top: 0; height: 60px; width: 100%;
	background: url("/site_images/brand/modes.png"); background-size: auto 50px; background-repeat: no-repeat;
	background-position-x: 260px; background-position-y: 2px;
}
#header .logo { max-height: calc(100% - 20px); padding: 10px 10px 10px 20px ; }
#header .subtitle { max-height: calc(100% - 20px); font-family: Raleway; display: inline-block; vertical-align: top; margin-top: 17px; font-size: 1.2em; }
#header #login { position: absolute; right: 50px; top: 20px; }
#hamburger_menu { position: absolute; right: 20px; top: 20px; width: 20px; cursor: pointer; }

/* Mode select */
#mode_select {
	font-family: Raleway;
	font-size: 1em;
	padding: 3px;
	outline-width: 0 !important;
}

/* Menu */
#menu_dropdown {
	position: absolute; right: 20px; top: 45px;
	border: 2px solid black; color: black; background-color: white; min-width: 100px;
	text-align: right; padding: 5px;
	z-index: 5000; display: none;
}
#menu_dropdown div,#menu_dropdown a { padding: 5px; cursor: pointer; color: black; text-decoration: none; display: block; }
#menu_dropdown div:hover,#menu_dropdown a:hover { background-color: #DDD; }

/* Generic full-page popup */
.popup {
	z-index: 1002; position: fixed; top: 20px; left: 20px; bottom: 20px; right: 20px; 
	background: white; overflow-y: scroll; display: none;
	padding: 20px 10px 20px 10px;
	border-radius: 16px; border: 8px solid #ffed00;
}
.popup h2 { margin: 0 0 10px 0; }
.popup img { max-width: 100%; }
.popup #static_content a>img { padding-right: 40px; }
.credit { font-size: smaller; font-style: italic; padding-top: 10px; }
.example_hexes span.example { font-size: x-large; }
.hex_1 { color: #EB5B66; }
.hex_2 { color: #FF9662; }
.hex_3 { color: #FFB76D; }
.hex_4 { color: #CABCB1; }
.hex_5 { color: #9EA2F4; }
.alt_colour .hex_1 { color: #8EC7C1; }
.alt_colour .hex_2 { color: #DBE5A8; }
.alt_colour .hex_3 { color: #F7F296; }
.alt_colour .hex_4 { color: #F9CBB1; }
.alt_colour .hex_5 { color: #F48FB5; }

#survey_hurry { padding: 5px 5px 5px 10px; border-radius: 15px; background: #f28d53; color: white; font-weight: bold; margin-bottom: 20px; width: fit-content; }
#survey_hurry button { margin-left: 10px; }
.question, .fullview_comments, .fullview_feedback { padding: 20px; border-radius: 8px; background: #F7F7F7; margin-bottom: 10px; }
.fullview_feedback { margin-bottom: 20px; }
.popup button, .buttonish { font-family: "Asap"; 
	border-style: none; border-radius: 8px; border: 3px solid #ffed00; color: black;
	font-size: larger; font-weight: bold;
	background-color: #ffed00; padding: 8px; cursor: pointer; }
.popup button:hover, .buttonish:hover, #sidepanel .buttonish { border-color: black; }


.info_panel {
	padding: 4px 10px; border-radius: 8px; border: 2px solid #F7F7F7; font-size: small;
	background-color: rgba(248,248,248,0.7);
}
.info_panel p { margin: 6px 0; }

.popup.minimal { 
	width: fit-content; height: fit-content; margin: auto; max-width: 100vw; max-height: 100vh; inset: 0;
	filter: drop-shadow(2px 4px 6px black);
}

#popup_close { position: absolute; top: 10px; right: 10px; padding: 0 6px 3px 6px; border-radius: 5px; font-size: x-large; cursor: pointer; }
#popup_close:hover { background-color: #EEE; }
#popup_buttons { margin-top: 10px; }
#popup_buttons button { margin-right: 20px; }

/* Comments */
.fullview_comments, .fullview_feedback { background-color: #f5dee4; }
.fullview_comments h4 { color: #f0037f; }
.comment_faces .image_radio label { border-color: #f5dee4; padding: 5px 0 5px 0; }
.comment_faces .image_radio label img { width: 35px; }
.comment_faces { margin-right: 3em; }
.comment_faces, .comment_photo { display: inline-flex; align-items: center; vertical-align: middle; }
.comment_photo img { max-height: 100px; }
.comment_photo_intro { padding-right: 10px; }
.comment_button { display: block; margin-top: 10px; }

/* Autocomplete */
#search_autocomplete {
	z-index: 100;
	position: fixed;
	top: 70px; left: 20px;
}
.aa-Input { padding-left: 10px !important; }

/* Zoom warning */
#zoom_warning { 
	z-index: 101; position: fixed; top: 80px; left: calc(50% - 130px); right: calc(50% - 130px); padding: 15px;
	background: #f28d53; color: white; font-weight: bold; font-size: 1.2em; border: 2px solid white; text-align: center; display: none;
}
#zoom_warning.flash { background-color: blue; border-color: yellow; }
#zoom_warning a { color: white !important; }

/* Draw toolbox */
#draw_toolbox {
	z-index: 1001; position: fixed; bottom: 30px; left: calc(50% - 275px); right: calc(50% - 275px); padding: 15px;
	background: #f28d53; color: white; font-weight: bold; font-size: 1.2em; border: 2px solid white; border-radius: 8px;
	display: none;
}
#draw_toolbox .left {
	float: left;
}
#draw_toolbox .right {
	float: right;
	height: 158px;
	padding-left: 10px;
	border-left: 2px solid white;
	vertical-align: middle;
}
#draw_icons { padding-top: 10px; }
#draw_icons img {
	width: 100px; height: 100px;
	border-style: none; border-radius: 8px; border: 8px solid #ffed00; color: black;
	background-color: #ffed00; padding: 3px; cursor: pointer;
	margin-right: 10px;
}
#draw_icons img.selected { border-color: #e5005b; }
#draw_next { margin-top: 10px; width: 100%; }
#draw_cancel { margin-top: 10px; width: 100%; font-size: 0.8em; font-weight: normal; width: 100%; }

/* Prompt */
#prompt { 
	z-index: 1001; padding: 20px; 
	background: #ffed00; color: black; border: 2px solid white; display: none;
	border-radius: 8px;
	max-width: 80%;

	position: fixed; top: 40px; 
	text-align: center;
	left: 50%; transform: translate(-50%,0);
}

/* Comments */
.fullview_comments h4 { margin: 0 0 8px 0; font-size: 1.1em; }
.fullview_comments textarea { width: 100%; min-height: 50px; }
.fullview_comments button, button.objection_button { font-size: medium; font-weight: normal; }
.objection_button { margin-right: 3em; }

/* Toolkit */
#toolkit { 
	z-index: 1000; position: fixed; bottom: 20px; left: 20px; width: calc(100% - 40px); 
	box-sizing: border-box; padding: 5px 10px 5px 15px;
	background-color: #ffed00;
	border: 6px solid white; border-radius: 16px;
	height: 190px; overflow-x: scroll; 
	max-height: 25vh;
}
#toolkit div { height: 100%; width: 1150px; }
#toolkit.admin div { width: 1150px; }
.shapeButton {
	cursor: pointer;
	font-size: large; border-style: none; padding: 0;
	background: rgba(255,255,255,0);
}
.shapeButton img { height: 150px; max-height: calc(25vh - 30px); }
.shapeButton>img { border: 5px solid rgba(0,0,0,0); border-radius: 5px; }
.shapeButton.selected>img { border-color: #e5005b; }

/* Survey/full view */
.question { margin: 10px 0 10px 0; }
.question .prompt { font-size: large; font-weight: bold; margin-bottom: 10px; }
.question span.tag { display: inline-block; border: 1px solid gray; border-radius: 4px; background-color: #EEE; padding: 2px; margin-right: 10px; }
.question textarea { width: 100%; min-height: 50px; }
.question input[type='text'] { min-width: 50%; }
.question input[type='file'] { display: block; margin-bottom: 10px; }
.question .face img { width: 100px; height: 100px; }
.question .input_subhead { display: block; font-weight: bold; color: #f28d53; }
.question .input { line-height: 1.5em; }
.question .input_radio { margin-right: 1em; display: inline-block; }
.question .input_checkbox { margin-right: 1em; display: inline-block; } 
.question .input_freeform { white-space: nowrap; }
.question .input_freeform input[type='text'] { min-width: 20%; }
span.photos span { display: inline-block; width: fit-content; height: fit-content; position: relative; margin-right: 2em; }
span.photos img { display: inline-block; position: relative; }
span.photos .img_delete { display: none; }
span.photos span:hover { cursor: pointer; }
span.photos span:hover .img_delete { 
	display: block; position: absolute; bottom: 0; right: 0; top: 0; left: 0; width: 100%; height: 100%; 
	padding: 5px;
	color: white; background-color: rgba(255,0,0,0.5);
}
.thumbs { display: inline-block; /*float: right; margin-top: 8px; margin-right: 10px;*/ }
.like_count, .objection_count { margin-left: 10px; }
.like_thumb, .objection_thumb { margin-right: 10px; }
.clickable { cursor: pointer; }

/* Variations when answered (rather than interactive) */
.static .question { padding-top: 10px; padding-bottom: 10px; }
.static .question .face img { width: 30px; height: 30px; vertical-align: middle; }
.static .qt_multiple_choice div,
.static .qt_multiple_choice_mode div,
.static .qt_tags div,
.static .qt_thumbs div,
.static .qt_faces div { display: inline; }

.comment { background-color: #f7f7f7; color: #444; padding: 5px; margin-bottom: 1em; }
.comment>img.comment_photo { float:right; max-height: 100px; margin-left: 1em; cursor: pointer; }
.comment>img.comment_score { float:left; height: 30px; margin-right: 10px; margin-bottom: 4px; }
.comment:after { content: ""; clear: both; display: table; } /* clearfix */
.comment .comment_attrib { font-size: smaller; margin-bottom: 4px; }
.comment .comment_body { font-style: italic; }

#reports > *:not(:last-child) {
	border-bottom: 10px solid #ffed00;
	margin-bottom: 1em;
} 

/* Full-screen image */

#dim { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.8); display: none; z-index: 6000; }
#full_image { 
	position: fixed; 
	top: 50%; left: 50%; 
	transform: translate(-50%, -50%); 
	cursor: pointer; 
	max-height: 90%; max-width: 90%; 
	display: none; z-index: 6001; border: 10px solid white;
}

/* Tagify */
tags.tagify { background-color: white; }

/* Button-style checkboxes */
.buttonboxes .input { line-height: 1.8em; }
.buttonboxes label span { 
	background-color: #BBB; 
	padding: 3px;
	border-radius: 12px;
	color: white;
	cursor: pointer;
	padding: 2px 10px 2px 15px;
}
.buttonboxes label input[type=checkbox] {
	visibility: hidden;
	display: block; height: 0; width: 0; position: absolute; overflow: hidden;
}
.buttonboxes input[type=checkbox]:checked + span {
	background-color: #f28d53 !important;
}
.buttonboxes input[type=checkbox] + span:before {
  content: "\2717";
  left: -7px;
  position: relative;
  color: white;
}
.buttonboxes input[type=checkbox]:checked + span:before {
  content: "\2713";
}

/* Map popups */
.mapboxgl-popup-tip { border-top-color: #ffed00 !important; border-bottom-color: #ffed00 !important; }
.mapboxgl-popup-content { border: 8px solid #ffed00; border-radius: 12px; font-family: "Asap"; font-size: 1.2em; }
.mapboxgl-popup-content h4 { font-weight: bold; font-size: 1.5em; margin: 0 0 10px 0; }
.mapboxgl-popup-close-button { font-size: larger; outline: 0 !important; }

/* Map popup content */
.summary_link,.popup_full_link { cursor: pointer; background: #EEE; margin: 0 0 3px 0; border-radius: 3px; padding: 0 4px; }
.summary_link:hover, .popup_full_link:hover { background: #ffed00; }
.popup_back { margin: -5px 0 5px 0; cursor: pointer; }
.popup_thumbnail { max-width: 100px; max-height: 100px; margin-bottom: 5px; display: block; border-radius: 6px; }

/* Map switcher */
#basemap_control {
	position: fixed; right: 50px; top: 68px;
	z-index: 99;
	font-size: smaller;
}
.floating_control { clear: none !important; }
.basemap_control {
	background-color: white; color: black;
	border: 2px solid #DDD; border-radius: 5px; padding: 0; 
}
.basemap_control div { text-align: center; padding: 4px 8px; cursor: pointer; }
#basemap_map, #basemap_sat, #basemap_key { border-bottom: 2px solid #DDD; }
.basemap_control div.selected { background-color: #DDD; color: white; cursor: default; }

/* Image radio buttons */
.image_radio input { display: none !important; }
.image_radio label { border: 5px solid #F7F7F7; cursor: pointer; display: inline-block; opacity: 0.3; padding: 5px; }
.image_radio label img { width: 50px; }
.image_radio input:checked + label { opacity: 1.0; }
.static .image_radio label { border-width: 0; padding: 0 0 0 5px; }
.editable .image_radio input:checked + label { border: 5px solid #ffed00; background-color: #ffed00; border-radius: 6px; }

/* Moderation and permalink */
.moderation_icon { color: #e5005b; display: inline-block; cursor: pointer; }
.moderation_icon img { height: 15px; margin-bottom: -1px; }
.copy_icon { height: 16px; cursor: pointer; }
.copy_icon.flash { background-color: blue; color: white; }

/* =========================================================================================================
   Latest page */

.latest_entry {
	padding: 20px 0;
}
.latest_entry img { max-width: 100%; }
.latest_entry:nth-child(odd) { 
	background-color: #EEE; 
	margin-left: -20px; border-left: 20px solid #EEE;
	margin-right: -20px; border-right: 20px solid #EEE;
}

/* =========================================================================================================
   Responsive elements */

@media only screen and (max-width: 700px) {
	#login { display: none !important; }
}
@media only screen and (max-width: 600px) {
	#toolkit { height: 110px; padding-left: 5px; overflow-y: hidden; }
	#toolkit div { width: 400px; overflow-y: hidden; }
	#toolkit img { height: 80px; }
	#zoom_warning { top: auto; bottom: 40px; z-index: 1001; }
	.not_mobile { display: none !important; }
	.logo { max-width: calc(100vw - 130px); }
	#search_autocomplete { max-width: calc(100vw - 170px); }
	.question { padding: 5px 10px; }
	.question .face img { width: 50px; height: 50px; }
	#header { background: none !important; }
}
@media only screen and (max-width: 549px) {
	#header .subtitle { margin-top: -10px; margin-left: 20px; display: block; }
	#header .logo { max-height: 38px; }
	#header { height: 90px; }
	#map { top: 90px; }
	#search_autocomplete { top: 100px; }
	#basemap_control { top: 98px; }
}

/* =========================================================================================================
   Third-party CSS */

/* Google Fonts */
/* vietnamese */
@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/asap/v30/KFO7CniXp96ayz4E7kSn66aGLdTylUAMa3OUBHMdazTgWw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/asap/v30/KFO7CniXp96ayz4E7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/asap/v30/KFO7CniXp96ayz4E7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/asap/v30/KFO9CniXp96a4Tc2DaTeuDAoKsE615hGW36eA1EfWzU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/asap/v30/KFO9CniXp96a4Tc2DaTeuDAoKsE615hHW36eA1EfWzU.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/asap/v30/KFO9CniXp96a4Tc2DaTeuDAoKsE615hJW36eA1Ef.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}