/* TODO
	5-12-2022 when the browser window resizes, below a certain width, 
	the welcome survey window becomes static and doesnt' resize back up if the brwoser window width increases
	I've tried changing a bunch of the width settings but haven't yet figured out what the static value is coming from
	It's not a huge problem but it's not the preferred functionality.
*/

:root{
	--bckgrnd-color:#848485;
	--text-color:#2F2F2F;
	--light-text-color:#979798;
	--dark-text-color:#2F2F2F;
	--button-color:#2F2F2F;
	--dark-button-color:#2F2F2F;
}

/* background-color:var(--bckgrnd-color); */

.bckgrnd{
	background-color: var(--bckgrnd-color);
}

html, body {
	top:0;
	bottom:0;
	position:absolute!important;
	min-height:auto!important;
	max-height: 100%;
	min-width:350px;
	width:100vw;
	overflow:hidden;
}

/* html[lang="en"] [lang="pt"]:not(.lang),
html[lang="en"] [lang="es"]:not(.lang),
html[lang="en"] [lang="km"]:not(.lang),
html[lang="es"] [lang="pt"]:not(.lang),
html[lang="es"] [lang="en"]:not(.lang),
html[lang="es"] [lang="km"]:not(.lang),
html[lang="pt"] [lang="en"]:not(.lang),
html[lang="pt"] [lang="es"]:not(.lang),
html[lang="pt"] [lang="km"]:not(.lang),
html[lang="km"] [lang="en"]:not(.lang),
html[lang="km"] [lang="es"]:not(.lang),
html[lang="km"] [lang="pt"]:not(.lang) { */
/* html[lang="en"] [lang]:not(.lang):not([lang="en"]),
html[lang="es"] [lang]:not(.lang):not([lang="es"]),
html[lang="pt"] [lang]:not(.lang):not([lang="pt"]),
html[lang="km"] [lang]:not(.lang):not([lang="km"]) {
	display:none!important;
} */
/* html[lang="en"] .lang[lang="en"],
html[lang="es"] .lang[lang="es"],
html[lang="pt"] .lang[lang="pt"],
html[lang="km"] .lang[lang="km"] {
	display:none!important;
} */
html [lang]:not([lang="en"]) {display:none!important;}

.lang:hover {text-decoration:underline;}

.lang {
	font-weight:bold;
	cursor:pointer;
}

body {
	font-family: 'Source Sans Pro', sans-serif;
	/* font-size:14px; */
}

#sidebarDiv, #sidebarDiv * {transition: all 0.2s;}
i.fas {transition: 0s !important;}

/* set width and position of sidebar content */
#sidebarDiv>.row>.col {
	width:100%;
	min-width:300px;
}
#sidebarDiv>* {
	padding-top:16px;
	padding-bottom:16px;
	flex-grow:1;
	min-width:300px;
	overflow-x:hidden;
}
#sidebarDiv {
	overflow-y:hidden;
}
#sidebarDiv>.row {
	overflow-y:auto;
}

/* resize/collapse sidebarDiv */

#sidebarDiv {
	max-height:100%;
	max-height:100%;
	overflow-y:auto;
	z-index:1000;
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}
#sidebarDiv {
	min-width: 50vw;
	max-width: 50vw;
}
#sidebarDiv.start {
	min-width: max(50vw, 450px);
	max-width: max(50vw, 450px);
}
#sidebarDiv.activeMap {
	min-width:450px;
	max-width:450px;
}
#sidebarDiv.activeSurvey {
	min-width: max(50vw, 450px);
	max-width: max(50vw, 450px);
}
#sidebarDiv.collapsed {
	max-width:390px !important;
	min-width:390px !important;
	margin-left:-390px !important;
}

#sidebarResize-mobile {display:none;}
.sidebarResize {
	line-height:0;
	position:absolute;
	left:0;
	top:25px;
	padding: 8px;
	cursor:ew-resize;
	background-color: #fff;
	z-index:1000;
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.sidebarResize:hover{background-color: #f4f4f4;}
@media (max-width: 1300px) {
  #sidebarDiv {
		min-width: 600px;
	  max-width: 600px;
  }
}
@media (max-width: 650px) {
  #sidebarDiv {
		min-width: calc(100vw - 50px) !important;
	  max-width: calc(100vw - 50px) !important;
  }
}
@media (max-width: 450px) {
	#sidebarDiv {
		min-width: calc(100vw) !important;
		max-width: calc(100vw) !important;
	}
  #welcomePane,#controls.start {
		min-width: calc(100vw) !important;
	  max-width: calc(100vw) !important;
  }
	#sidebarResize {display:none;}
	#sidebarResize-mobile {
		display:initial;
		position: fixed;
    left: initial;
    right: 25px;
    border-radius: 4px;
	}
}

/* start page */
#sidebarDiv:not(.start)>.row>.col.start {
	display:none !important;
}
#sidebarDiv.start>.row>.col:not(.start) {
	display:none !important;
}
#sidebarDiv.activeMap>#survey {display:none !important;}
#sidebarDiv.start #logo {display:none !important;}
#sidebarDiv:not(.start) .startLogo {display:none !important;}

/* toggle between survey and controls */

#sidebarDiv>.row.active .activehide,
#sidebarDiv>.row:not(.active) .activeshow {
	margin-bottom:-100%;
	opacity:0;
	display:none !important;
}
#sidebarDiv>.active {max-height:100% }
#sidebarDiv>#controls:not(.active) { max-height:68px; min-height:68px; }

#sidebarDiv.activeSurvey>#logo {
	display:none !important;
}

#controls {	background-color:#f0f0f0; }
#controls.active {
	height: calc(100% - 100px);
	overflow-y:auto;
}

#instructions {
	position:absolute;
	right:50px;
}

/* welcome survey */
.welcome-pg {
	position:absolute;
	max-width:100%;
	min-width:100%;
	max-height:0;
	overflow:hidden;
	opacity:0;
}
.welcome-pg.active {
	position:relative;
	opacity:1;
	max-height:none;
	padding-bottom:53px;
}
.welcome-pg.next {right:-100%;}
.welcome-pg.prev {left:-100%;}
#welcomeControl {
	position:absolute;
	text-align:center;
	bottom:16px;
}
.form-group .nav-pills .nav-link {
	background-color:#f8f9fa;
	border-color:#f8f9fa;
	color:inherit;
	text-decoration:none;
	transition:0s;
	display:flex;
	flex-direction:column;
}
.form-group .nav-pills .nav-link p {
	flex-grow:1;
}
.form-group .nav-pills .nav-link input {
	opacity:0; position:absolute;
}
.form-group .nav-pills .nav-link:hover,
.form-group .nav-pills .nav-link:focus  {
	background-color:#e2e6ea;
}
.form-group .nav-pills .nav-link.active,
.form-group .nav-pills .nav-link.active:hover,
.form-group .nav-pills .nav-link.active:focus {
	background-color:#141a72;
	color:white!important;
}

#drawing>*:last-child,.legend-body>*:last-child {
	margin-bottom:0 !important;
}

/* etc */

#mapDiv {
	background-color: #ccc;
	overflow:hidden;
}
.leaflet-boundary-pane .leaflet-interactive {
	cursor:grab
}
.leaflet-container.draw, .leaflet-interactive.draw {
	cursor:crosshair !important;
}

.legend-help {
	font-size:12px;
	opacity:0;
	line-height: 28.8px;
 }
#controls:hover .legend-help {
	opacity:0.5;
}
.legend-item { opacity:0.4; display:flex; }
.legend-item.active { opacity:1 }
.legend-item:hover,.legend-group-items:hover {
	cursor:pointer;
	opacity:0.6;
}
.legend-icon { height:25px;width:25px; }
.legend-text { flex-grow:1; }

h1,h2,h3,h4 {
	color:var(--text-color);
	font-weight:bold;
	margin-bottom:16px;
	font-family:"Oswald", sans-serif;
	text-decoration:none!important;
}
h5,h6 {
	font-weight:bold;
	margin-bottom:16px;
}

a, a:not([href]):not([tabindex]) {
	text-decoration: underline;
	color: var(--bckgrnd-color);
 	cursor: pointer;
}
a:hover {
	text-decoration:none;
	color: var(--dark-text-color)!important;
}
h1 a, h2 a, h3 a, a h1, a h2, a h3, a h4 { text-decoration:none; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover,
a:hover h1, a:hover h2, a:hover h3, a:hover h4 {
	text-decoration:none;
	color: var(--dark-text-color)!important; /* darker */
}

.btn-primary {
	background-color: var(--bckgrnd-color);
	border-color: var(--bckgrnd-color);
}
.btn-primary:disabled, .btn-primary.disabled {
	background-color: var(--dark-text-color); /* main color lighter */
	border-color: var(--dark-text-color);
}
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--dark-text-color); /* main color  darker */;
	border-color: var(--dark-text-color);
}
.custom-control-input:checked~.custom-control-label::before, .custom- {
	background-color: var(--bckgrnd-color);
	border-color: var(--bckgrnd-color);
}
.custom-control-input:not(:disabled):active~.custom-control-label::before {
	background-color: var(--light-text-color); /* main color lighter */
	border-color: var(--light-text-color);
}
.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: var(--bckgrnd-color);
}
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus,
.custom-control-input:focus~.custom-control-label::before,
.btn-primary.focus, .btn-primary:focus,
.form-control:focus, .custom-select:focus {
	box-shadow: 0 0 0 0.2rem rgba(13,64,70, 0.25);
}
.form-control:focus, .custom-select:focus, .custom-select option {
	border-color: #0d4046;
}
.form-check-input {position:static;margin:0;}
.custom-select option:hover, .custom-select option:focus, .custom-select option:active {
	background-color:#0d4046;
}

/* controls font size of welcome questions */
.form-control {font-size:14px;}   


#map .leaflet-control-attribution.leaflet-control {display:none;}
#controls .attribution {
	position:absolute;
	background-color: #f0f0f0;
	bottom:0;right:0;width:100%;
	padding:16px;
	min-height:58px;
	overflow-x:auto;
}
.tdg {
	background: center/contain no-repeat url(../img/toole.svg);
	height:18px;width:50px;
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-tooltip {
	background-color: rgba(0, 0, 0, 0.75);
	/* background-color: rgba(63, 144, 167, 0.85); */
	color: #fff;
}
.leaflet-popup-content-wrapper, .leaflet-tooltip {
	border-radius: 3px;
}
.leaflet-popup-content {
  margin: 8px;
  line-height: initial;
	font-size:12px;
	text-align:center;
}
.leaflet-popup-content p {
	margin: 4px 0;
}
.leaflet-tooltip {
	border: 0px;
	margin: 0;
	padding-bottom: 0;
}
.leaflet-container a.leaflet-popup-close-button { padding:0 }

.nav-link {
	/* height: 50px; */
	border-bottom: 1px solid #ccc;
}

.form-row,input[type="text"].form-control { min-width:175px; }
.form-group {
	margin-top:-4px;
	margin-bottom: 16px;
	text-align:left;
	font-size:14px;
}
.form-control {
	padding: 4px 8px;
	height: 30px;
}
.form-check {margin-bottom:2px;padding-left:4px;}
.form-check-input {margin-top:0;}
label {margin-bottom: 4px;}

.comment-card {
	/* margin:4px 0 0; */
	padding:8px;
	background-color:#6c757d;
	border-radius:4px;
	color:white;
	margin:8px 0;
	text-align:left;
}
.leaflet-popup-content>.comment-card:first-child {
	margin: -16px -16px 4px;
}
.comment-contentbox {
	background-color:rgba(0,0,0,0.5);
	margin-top:4px;
	padding:4px 8px;
	border-radius:4px;
}
.comment-replies {
	max-height:100px;
	overflow-y:auto;
	margin:0 -8px;
	padding: 0 8px;
}
.comment-replies.active {
	max-height:200px;
}
.comment-replies .comment-card:first-child {
	margin-top:0;
}
.comment-replies .comment-card:last-child {
	margin-bottom:0;
}

.tooltip {
	margin-left:4px;
	color:white;
	font-size:12px;
}
.tooltip-inner {
	color:inherit;
	background-color:rgba(0,0,0,0.75);
	max-width:none;
}
.tooltip .arrow::before {
	z-index:1002
}

#draw-tooltip {
	font-size:10px;
	position:fixed;
	z-index:1001;
	color:rgba(255,255,255,0.5);
}

.draw-tool i.fas {
	background-color: white;
	height: 32px;
	width: 32px;
	border-radius: 32px;
	display:table;
	font-size:20px;
}
.draw-tool i.fas::before {
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}

.draw-tool.disabled.focus {
	position:relative;
}
.draw-tool.disabled.focus::after {
	cursor:pointer;
	position: absolute;
  right: 15px;
  top: 50%;
	margin-top:-0.5rem;
	color:white;
	font-weight:bold;
	text-shadow: 2px 2px 0 red, -2px 2px 0 red, -2px -2px 0 red, 2px -2px 0 red, 2px 0px 0 red, -2px 0px 0 red, 0px -2px 0 red, 0px 2px 0 red;
}
.draw-tool:not([lang]).disabled.focus::after {
	content:'Cancel';
}
.draw-tool[lang="en"].disabled.focus::after {
	content:'Cancel';
}
.draw-tool[lang="es"].disabled.focus::after {
	content:'Cancelar';
}
.draw-tool[lang="zh"].disabled.focus::after {
	content:'取消';
}
.draw-tool[lang="km"].disabled.focus::after {
	content:'បោះបង់';
}

.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
	border-right-color: rgba(0, 0, 0, 0.75);
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
	border-left-color: rgba(0, 0, 0, 0.75);
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
	border-top-color: rgba(0, 0, 0, 0.75);
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
	border-bottom-color: rgba(0, 0, 0, 0.75);
}

.walk-uncomf-select {
  border-radius: 4px;
  border: 1px solid rgb(206, 212, 218);
  height:100%;min-height:386px;
}

.walk-uncomf-select .btn {
  width:100%;
  font-size: 14px;
  text-align:left;
  padding-right:30px;
}

#walk-uncomf-selectfrom {
  list-style:none;
}

#walk-uncomf-selectfrom li::before {
  display: block;
  position: absolute;
  right: 28px;
  content: "\279C";
  width: 16px;
  text-align: center;
  margin: 6px;
  color: #1c818d;
}

#walk-uncomf-selected {
  margin:0;
  padding:0;
  counter-reset: n;
  list-style:none;
}
#walk-uncomf-selected li {
}

#walk-uncomf-selected li::before {
  content: counter(n);
  counter-increment: n;
  position: absolute;
  right: 8px;
  display: block;
  height: 16px;
  margin: 8px;
  width: 16px;
  text-align: center;
  line-height: 18px;
  background: #1c818d;
  border-radius: 8px;
  font-size: 10px;
  color:white;
}







.wrap {
	font:12px Arial, san-serif;
  }
  h1.likert-header {
	padding-left:4.25%;
	margin:20px 0 0;
  }
  form .statement {
	display:block;
	font-size: 14px;
	/* font-weight: bold; */
	font-style: oblique;
	padding: 10px 0 0 4.25%;
	margin-bottom:10px;
  }
  form .likert {
	list-style:none;
	width:100%;
	margin:0;
	padding:0 0 15px;
	display:block;
	border-bottom:2px solid #efefef;
  }
  form .likert:last-of-type {border-bottom:0;}
  form .likert:before {
	content: '';
	position:relative;
	top:8px;
	left:9.5%;
	display:block;
	background-color:#efefef;
	height:4px;
	width:82%;
  }
  form .likert li {
	display:inline-block;
	width:15%;
	text-align:center;
	vertical-align: top;
  }
  form .likert li input[type=radio] {
	display:block;
	position:relative;
	top:0;
	left:50%;
	margin-left:-6px;
	
  }
  form .likert li label {width:100%;}
  form .buttons {
	margin:30px 0;
	padding:0 4.25%;
	text-align:right
  } 
  form .buttons button {
	padding: 5px 10px;
	background-color: #67ab49;
	border: 0;
	border-radius: 3px;
  }
  form .buttons .clear {background-color: #e9e9e9;}
  form .buttons .submit {background-color: #67ab49;} 
  form .buttons .clear:hover {background-color: #ccc;}
  form .buttons .submit:hover {background-color: #14892c;}