/* 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: #414042;
	--link-color: #414042;
	--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; */
}

/* controls font size of welcome questions */
/* I think this is outdated - HK 20220609 */
/* .form-control {font-size:14px;}   */

#sidebarDiv,
#sidebarDiv * {
	transition: all 0.2s;
}

i.fas {
	transition: 0s !important;
}

#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;
}

/* set initial landing page width here */
#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 */

#welcomePane {
	min-width: 400px;
	max-width: 600px;
	background-color: white;
}

/* could combine the client logo styling into a class but separate by id preserves flexibility since the styling generally needs to be different between the welcome pages and the map */
#clientlogo1 {
	background-image: url(../img/voidcity_of_niles.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 143px;
	height: 63px;
	min-width: 143px;
}

#clientlogo2 {
	background-image: url(../img/voidcity_of_niles.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 143px;
	height: 143px;
}

#wrapper1 {
	height: 100%;
	min-height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
	min-width: 100%;
}

#surveyPane {
	background-color: white !important;
	margin-top: -16px;
	margin-bottom: -16px;
	padding-top: 16px;
	padding-bottom: 16px;
}

#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(--link-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(--button-color);
	border-color: var(--button-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;
}




#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: 18px;
}

.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: 18px;
	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;
}


.welcomePaneStyle {
	min-width: min(500px);
	max-width: max(80vw);
	background-color: white;
}


#ieWarning a {
	display: inline-block;
	color: black !important;
	margin: 0px 8px 8px;
	vertical-align: top;
}

#ieWarning a:hover {
	display: inline-block;
	color: black !important;
}

#ieWarning .browserlogo {
	height: 100px;
	width: 100px;
	color: black;
	text-decoration: none;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
}

#ieWarning {
	text-align: center;
	margin: 16px auto;
	width: 300px;
	z-index: 10000;
	position: absolute;
}





.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:11px;
	left:9.5%;
	display:block;
	background-color:#efefef;
	height:4px;
	width:78%;
  }
  /* width below is the value to change in order to respace the radio buttons if there are not 6 options. 
  19.5% works well for 5 options */
  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;} 



  /* some rank survey question stuff here */
.priorityrank1-select {
	border-radius: 4px;
	border: 1px solid rgb(206, 212, 218);
	height:300px;
}
.priorityrank1-select .btn {
	width:100%;
	font-size: 14px;
	text-align:left;
}
#priorityrank1-selectfrom {
	list-style:none;
}
#priorityrank1-selectfrom li::before {
	display: block;
	position: absolute;
	right: 28px;
	content: "\279C";
	width: 16px;
	text-align: center;
	margin: 6px;
	color: var(--light-text-color);
}
#priorityrank1-selected {
	margin:0;
	padding:0;
	counter-reset: n;
	list-style:none;
}
#priorityrank1-selected li {
}
#priorityrank1-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: var(--light-text-color);
	border-radius: 8px;
	font-size: 10px;
	color:white;
}