/* Generic telluswhere implementation stylesheet */


/* General */
#mapcontainer #map {z-index: 100px;}
body .ui-front {z-index: 500;}
.leaflet-popup-content-wrapper {width: 250px; min-height: 80px;}
.bubble p {margin: 0 0 5px;}
.bubble p.id {text-align: right; font-size: 0.83em; margin: 0; padding: 0 0 3px;}
.bubble p.id a {color: #bbb;}
.bubble p.caption:before {color: #900; content: "\201C"; /* https://monc.se/kitchen/129/rendering-quotes-with-css/ */ font-family: Arial, Helvetica, sans-serif; font-size: 4.5em; font-weight: bold; line-height: 0; margin: 0 5px 0 -5px; vertical-align: bottom;}
p.problem {text-align: right; margin: 4px 0 0; padding: 0; font-size: 0.92em;}
p.problem a {color: #898989;}
.leaflet-popup-content form#problem p {margin-bottom: 5px; padding-bottom: 0;}
.leaflet-popup-content form#problem input, .leaflet-popup-content form#problem textarea {margin-top: 0; padding-top: 0;}
p#formwarning {color: red;}
table.metadatatable td.value, p.metadata {font-weight: bold;}
p.metadata {margin-bottom: 2em;}
table.popupproperties tr td:first-child {width: 60%;}
.smallmap {width: 100%; height: 100%;}
table.reviewmetadata {width: 200px;}
table.reviewmetadata tr td:first-child {width: 60%;}
.leaflet-marker-icon.deleted {opacity: 0.6;}
.leaflet-container.cursorzoomin {cursor: zoom-in;}

/* Popups */
#map span.truncate {cursor: zoom-in;}

/* Help text, hidden by default */
#mapcontainer #helptext {display: none; position: absolute; bottom: 10px; left: 10px; width: 100px; z-index: 500; opacity: 0.9; background-color: yellow; color: #111; padding: 4px 8px; margin: 0; font-size: 0.76em; border-radius: 10px; line-height: 1.2em;}

/* Likes */
#likes {float: right; margin: 0; margin-left: 4px; padding: 3px 5px; min-width: 7em; background-color: #bbb; border-radius: 5px;}
#likes {transition: background-color .5s ease-in-out; transition: border-color .5s ease-in-out;}
#likes:hover {background-color: #ccc; border-color: gray;}
#likes.liked {border: 1px solid #999;}
#likes p {margin: 0; padding: 0 0 0 5px; line-height: 20px;}
#likes p a, #likes p img, #likes p span {vertical-align: middle;}
#likes p span, #likes a {color: black; text-decoration: none;}
.leaflet-popup .hasphoto #likes img {margin-top: 0;}
#likes span {padding-left: 2px;}
#likes.liked #likestext {color: #603;}
#likes.changed {animation: yellow-fade 2s ease-in 1;}
@keyframes yellow-fade {
	0% {background-color: yellow;}
	100% {background-color: none;}
}

/* 'Lines' table style */
table.lines {border-collapse: collapse; /* width: 95%; */}
.lines td, .lines th {border-bottom: 1px solid #e9e9e9; padding: 6px 8px 2px 1px; vertical-align: top; text-align: left;}
.lines tr:first-child {border-top: 1px solid #e9e9e9;}
table.lines td.value p:first-child {margin-top: 0;}
table.lines td.value p:last-child {margin-bottom: 0;}
table.lines td:last-child ul:first-child {margin-top: 0;}
table.lines td:last-child ul:first-child li:first-child {margin-top: 0;}
table.compressed td {padding-top: 1px; padding-bottom: 1px;}

/* Drawing */
body.auditlocation #drawing, body.auditaddlocation #drawing {display: none;}	/* Hidden by default */
body.auditlocation .edit-clear, body.auditaddlocation .edit-clear {display: none;}
strong.success {color: green;}

/* #!# Form workarounds */
#form_latitude, #form_longitude, #form_zoom, #form_location {display: none;}
form .latitude, form .longitude, form .zoom, form .location {display: none;}

/* Map */
#mapcontainer {position: relative;}
#mapcontainer #map {width: 100%; height: 100%;}

/* Geocoder autocomplete */
#geocoder input {-webkit-appearance: none; -webkit-border-radius: 0;}
#mapcontainer #geocoder {position: absolute; top: 10px; left: 55px; z-index: 1001; box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.5);}
#mapcontainer #geocoder input {padding: 5px; font-size: 1em; color: #603; width: 200px;}
#mapcontainer #geocoder input, .ui-autocomplete {border: 1px solid #ccc;}
.ui-autocomplete-loading {background: white url('/images/ui-anim_basic_16x16.gif') right center no-repeat;}
.ui-autocomplete {background-color: white; z-index: 1000; width: 200px; list-style: none; margin-left: 0; padding-left: 0;}
.ui-autocomplete li {list-style: none; margin-left: 0; padding-left: 0; font: inherit;}
.ui-autocomplete li:first-child a {padding-top: 9px;}
.ui-autocomplete li a {padding: 5px 15px 3px; display: block; color: #603;}
.ui-autocomplete li a span {color: gray; font-size: 0.81em;}
.ui-autocomplete li a.ui-state-active {cursor: pointer; background-color: #f7f7f7; color: inherit;}

/* Filters and overlay */
#mapcontainer #filters, #mapcontainer #overlay {z-index: 500; position: absolute; left: 10px; bottom: 10px; opacity: 1;}
#mapcontainer #filters select, #mapcontainer #overlay {padding: 3px 6px; border-radius: 5px; border-color: #bbb; color: #444; margin-right: 5px;  box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2);}
#mapcontainer #filters select {appearance: none;}
#mapcontainer #overlay {border-width: 1px; border-style: solid; background-color: white; font-size: 0.9em; padding: 2px 8px 3px;}
#mapcontainer #overlay {left: 245px;}

/* Home page geocoder */
body.home #geocoder .geolocation {float: left; display: none; width: 50px; height: 50px;}

/* Export */
p#export {display: none; /* Hidden by default, shown by JS */}
p#export, p#export a {opacity: 0.6;}

/* Share buttons */
p.whatsapp a {background-color: #1dc143; padding: 5px 8px; border-radius: 4px; font-size: 0.9em; text-decoration: none;}
p.whatsapp img {width: 16px; height: 16px; vertical-align: middle; border: 0;}

/* Areas page */
body.areas table.splitlist {width: 100%; table-layout: fixed;}
body.areas table.splitlist td {width: 33%;}
body.areas table.splitlist ul {list-style: none; margin: 0; padding: 0;}

/* Feedback handling */
#feedback {display: none;}
.feedback.vex.vex-theme-plain .vex-content {width: 550px; max-width: 90%;}
.feedback.vex.vex-theme-plain .vex-dialog-buttons {display: none;}
.feedback table td {vertical-align: top;}
.feedback textarea, .feedback input[type='text'], .feedback input[type='email'] {width: 100%;}
.feedback input[type='submit'] {margin-top: 1.2em;}
.feedback.vex.vex-theme-plain .vex-content p.success {color: green;}
.feedback.vex.vex-theme-plain .vex-content p.error {color: red;}

/* Mobile styles; see: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions */
@media only screen and (min-width: 320px) and (max-width: 768px) {
	body.home #geocoder .geolocation {display: inline;}
}