@font-face {
	font-family: LinotteSemiBold;
	src: url("fonts/Linotte-SemiBold.otf") format("opentype");
}

body { padding: 1em 2em 1em 2em; }
body.full_bleed { padding: 0; }
h2 { border-bottom: 2px solid #333; padding-bottom: 0.2em; margin-bottom: 1em; }
h3 { border-bottom: 1px solid #333; padding-bottom: 0.2em; margin-bottom: 1em; }
a:hover { text-decoration: underline; }

#dim {
	position: fixed; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0;
	background-color: black; opacity: 0.3;
	display: none;
	z-index: 99;
}

#formEditor {
	position: fixed;
	left: 5%; right: 5%; top: 5%; bottom: 5%;
	background-color: white;
	display: none;
	z-index: 1001;
}
#formEditor.crossed { background-image: url(/site_images/grey_diagonal_light.png); }

#formFields {
	position: absolute;
	padding: 20px 20px 80px 20px;
	left: 0; right: 0; top: 0; bottom: 0;
	overflow-y: auto;
}
@media only screen and (max-width: 800px) {
	#formFields { padding-bottom: 120px; }
}
#existingIssue { background-color: #EEE; padding: 8px; }

#formFooter {
	position: absolute;
	bottom: 0; right: 0; left: 0;
	background-color: #EEE;
	padding: 0.5em 20px 0.5em 20px;
	border-top: 4px solid white;
}
#likeCount, #likeThumb { float: right; margin-top: 0.5em; }
#likeCount { padding-left: 0.5em; }
#likeThumb:hover { cursor: pointer; }
#deleteButton { margin-left: 2em; }

#loginModal,#styleModal,#iconModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: auto; max-width: 500px; min-width: 300px;
	height: auto; max-height: 500px;
	background-color: white;
	padding: 20px;
	display: none;
	z-index: 100;
	overflow-y: auto;
}
#loginModal .close {
	position: absolute;
	right: 10px;
	top: -5px;
	z-index: 9001;
	font-size: xx-large;
	cursor: pointer;
	color: #222;
}
#loginModal .close:hover { color: #000; }
#iconModal table { font-size: 0.8em; }
#iconWarning { font-style: italic; font-size: smaller; }

#login_form tr>td:first-child { padding-left: 0 !important; }
#password_help { margin-bottom: 1em; }
.form_hint, #password_help { font-size: smaller; color: #222; }

#back { font-size: small; }


/* Reset Picnic form elements */

td,th { padding-right: 0.6em; } /* it's way too big in Picnic */

select.unpicnic {
	width: auto;
	padding-right: 40px;
}
.unpicnic[type=radio],
.unpicnic[type=checkbox],
.leaflet-container [type=radio],
.leaflet-container [type=checkbox] {
	opacity: 1;
	width: auto;
	display: inline;
	height: auto;
	line-height: auto;
	padding: 0;
	position: revert;
}
.leaflet-container input,
.leaflet-container textarea,
.leaflet-container .select select {
	height: auto;
	border-radius: 0;
	width: auto;
}

/* Toggle buttons */

input.togglable {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

label.togglable {
	margin: 10px;
	padding: 5px;
	border: 2px solid gray;
	border-radius: 4px;
	display: inline-block;
}

input:checked + label.togglable { background-color: #BBB; color: white; }

/* Quill classes */

.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }

/* General editors */

#form_name, #marker_name, #schema_name { font-size: 0.9em; font-weight: normal; border: 1px solid #CCC; border-radius: .2em; padding: 5px 7px; }

/* Help page */

.help_page h2, .help_page h3, .help_page h4, .help_page p { padding: 0; }
.help_page p { color: #444; font-size: 0.9em; }

/* Form appearance */

.field { margin: 0; padding: 10px; }
.field p { margin: 0; padding: 5px; }
.field.odd { background-color: #EEE; }
tr:nth-child(even) { background-color: white !important; }

p.fieldText_label { padding: 0; }
.fieldText_headline { font-weight: bold; font-size: 1.5em; border-bottom-width: 0; margin-bottom: 0; }
h3.fieldPrompt { border-bottom-width: 0; margin-bottom: 6px; }

[type=radio]+.checkable:before, 
[type=checkbox]+.checkable:before, 
[type=radio]+.checkable:after, 
[type=checkbox]+.checkable:after {
	top: 0.5em;
}

.grid_table { margin: 10px; }
.grid_item { text-align: center; }
th.grid_item { padding: 0.3em 1em 0.3em 1em; }
td.grid_item { padding: 0.3em 1em 1.3em 1em; background-color: #EEE; }
td.grid_rowname { background-color: #EEE; }

.grid_view {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-gap: 10px;
}
.grid_view [type=radio]+.checkable, 
.grid_view [type=checkbox]+.checkable {
	display: inline-block;
}
.grid_view [type=radio]+.checkable:before, 
.grid_view [type=checkbox]+.checkable:before, 
.grid_view [type=radio]+.checkable:after, 
.grid_view [type=checkbox]+.checkable:after {
	top: 4px;
	transform: none;
}

.grid_slider { width: 100%; table-layout: fixed; }
.grid_item_slider .slider { text-align: center; }
/* this is so that we can make the slider width <100% so that it aligns with the centre of the first/last columns, not the edges */

.valueInput { display: inline-block; }
div.textNotInteractive {
	padding: .3em .6em;
	border: 1px solid #ccc;
	border-radius: .2em;
	line-height: 1.5;
	color: #777;
	min-height: 1.5em;
}
div.textLengthWarning { font-size: 0.7em; color: red; }

.face { margin-right: 20px; }
.face img { filter: grayscale(100%); max-width: 50px; max-height: 50px; cursor: pointer; }
.face img.selected, .face img:hover { filter: grayscale(0%); }

ul#auto-geocoder-results { list-style-type: none; padding: 0px; margin: 0px; }
ul#auto-geocoder-results li { border-top: 1px solid gray; padding: 3px 0 3px 10px; margin: 0px; }

/* Questions-only mode (no map) */

.questions_only #loginFooter {
	position: absolute; bottom: 0; left: 0;
	padding: 3px 8px; font-size: smaller; background-color: #EEE;
}
.questions_only #add_prompt {
	font-size: large;
    position: absolute;
	width: fit-content;
	height: fit-content;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}



/* Project editor */

h3 { padding-top: 1em; }
.project_table td { vertical-align: top; white-space: nowrap; }
.project_table tr td:first-child { padding-left: 0; }
.project_table tr { border-bottom: 1px solid #EEE; }

#available_schemas,#selected_schemas,
#available_reports,#selected_reports {
	display: inline-block;
	padding: 10px;
	border: 1px dotted gray;
	vertical-align: top;
	min-height: 100px;
	max-height: 400px;
	overflow-y: scroll;
}
#selected_schemas, #selected_reports { margin-right: 30px; }
#selected_schemas>p, #available_schemas>p,
#selected_reports>p, #available_reports>p { margin: 0 0 10px 0; border-bottom: 1px solid gray; }
.movable_schema, .movable_report { background-color: #999; color: white; padding: 5px; font-size: smaller; cursor: pointer; }
#project_map_container>div { margin-top: 30px; vertical-align: top; display: inline-block; }
#project_map { width: 600px; max-width: 100%; height: 400px; background-color: #EEE; }
.small_input { width: 50px; }

#buttonFooter {
	padding: 5px 2em 5px 2em;
	position: fixed;
	bottom: 0; left: 0; right: 0;
	background-color: #DDD;
	border-top: 3px solid #CCC;
	z-index: 1000; /* above map */
}
#buttonFooter span {
	font-size: small;
	vertical-align: center;
	float: right;
	padding-top: 1em;
}

body.nonEditable .requireEditable { display: none !important; }
body.editable .requireNonEditable { display: none !important; }

/* Dashboard */

#download_map { width: 600px; max-width: 100%; height: 400px; background-color: #EEE; margin-top: 30px; }

/* Index pages */

.project_owner, .project_link { font-size: small; color: #777; font-style: italic; }

.index_container {
	display: flex;
	flex-flow: row wrap;
	gap: 20px;
}

.index_item {
	padding: 10px;
	flex-basis: 300px;
	background-color: #A39A94;
	color: white;
	border-radius: 5px;
}
.index_item h3 { border-bottom-width: 0; padding: 0; margin: 0; font-weight: normal; }
.index_item p.attrib { margin: 0; font-size: smaller; }
.index_item.lighter { background-color: #C0D631; color: black; }

.index_icons {
	margin-top: 15px;
	display: flex; flex-flow: row; gap: 10px;
}
.index_icons a {
	display: block;
	padding: 10px;
	flex-basis: 50px;
	background-color: white;
	cursor: pointer;
	border-radius: 3px;
}
.index_icons a:hover { border: 2px solid #414042; }
.index_icons a img {
	vertical-align: middle;
}
.index_icons a { display: inline; position: relative; }
.index_icons a:hover:after { background: #333; background: rgba(0,0,0,.8); border-radius: 5px; top: 26px; color: #fff; content: attr(tooltip); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; white-space: nowrap; margin-top: 15px; } 
.index_icons a:hover:before { border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; top: 20px; content: ''; left: 50%; position: absolute; z-index: 99; transform: scaleY(-1); margin-top: 15px; }

.index_sublinks { 
	display: none;
	margin-top: 10px;
	font-size: medium;
	padding: 10px; background-color: white; border-radius: 3px;
}
.index_sublinks ul { margin: 0; padding: 0; }
.index_sublinks li { list-style-type: none; padding: 0px; margin: 0px; }
.index_sublinks .link_list li img { height: 20px; cursor: pointer; }