/* 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: #CC7B29; */
	--bckgrnd-color:#ECEDED;
	--special-text-color: #14375A;
	--light-text-color: #979798;
	--dark-text-color: #2F2F2F;
	--button-color: #14375A;
	--active-button-color: #396AA2;
}

/* 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: 'Franklin Gothic', 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: 90vw;
}

/* 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-tabs .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 */



/* 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/updated_txdot-logo2.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 143px;
	height: 63px;
	min-width: 143px;
}

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

#clientlogo3 {
	background-image: url(../img/updated_txdot-logo2.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: 1;
	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;
}

.legend-item.active .legend-text .legendtextspan {
	opacity:1;
}

.legend-item .legend-text .legendtextspan {
	opacity:0.6;
}

/* .legend-item.active .legend-text .tooltiptext {
	opacity:1;
	background-color: rgba(0, 0, 0, 1);
} */

/* .legend-text:hover {
	opacity:0.6 !important;
} */

h1,
h2,
h3,
h4 {
	color: var(--special-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(--special-text-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(--active-button-color);
	/* main color  darker */
	;
	border-color: var(--active-button-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);
	/* 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;
}


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

.welcomePaneStyle {
	min-width: min(300px);
	width: 600px;
	max-width: 1000px;
	/* 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;
}

.finishPageStyle {
	width: 100px;
	overflow-y: auto;
}

.finishingSurveyStyle {
	max-width: max(500px, 70vw);
	overflow-y: auto;
	background-color: white;
	border-radius: 4px;
}

.loader_background:active {
	position: fixed;
	width: 100%;
	/* Full width (cover the whole page) */
	height: 100%;
	/* Full height (cover the whole page) */
	background-color: rgba(0, 0, 0, 0.8);
	/* Black background with opacity */
	z-index: 20000;
	/* Specify a stack order in case you're using a different order for other elements */
}

.spinner-border {
	display: inline-block;
	width: 5rem;
	height: 5rem;
	vertical-align: text-bottom;
	border: 0.45em solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	-webkit-animation: spinner-border .75s linear infinite;
	animation: spinner-border 1.75s linear infinite;
}

.departure {
	background-color: white;
	max-width: max(500px, 70vw);
	border-radius: 4px;
}

.black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1001;
	-moz-opacity: 0.8;
	opacity: .80;
	filter: alpha(opacity=80);
}

.white_content {
	display: flex;
	flex-direction: column;
	display: none;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 16px;
	/* border: 16px solid orange; */
	background-color: white;
	z-index: 1002;
	overflow: auto;
	border-radius: 6px;
	font-size: 16px;
}

#x {
	position: relative;
	float: right;
	background: white;
	color: black;
	font-weight: bold;
	top: -10px;
	right: -10px;
	border: none;
}

.tab-link {
	text-decoration: none !important;
	height: 100%;
}

.tab-label {
	height: 100%;
}

.nav-input {
	position: absolute;
	visibility: hidden;
}

/* min-height: 100%; */

.map-next-button {
	background-color: var(--button-color);
}

.demo-submit-button {
	background-color: var(--button-color);
}



.legendTooltip {
	/* position: relative;
	display: inline-block; */
}

.legendTooltip .tooltiptext {
	visibility: hidden;
	/* width: 120px; */
	background-color: #323232;
	color: white;
	text-align: left;
	border-radius: 6px;
	border:5px;
	margin:2px;
	padding: 8px;
	position: absolute;
	z-index: 1;
	line-height:20px;
}

.legendTooltip:hover .tooltiptext {
	visibility: visible;
	/* opacity: 1 !important;
	filter: alpha(opacity=100); */
}




.tabletooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
  }
  
  .tabletooltip .tooltiptext {
	visibility: hidden;
	width: 20vw;
	background-color: #323232;
	color: white;
	text-align: left;
	border-radius: 6px;
	border:5px;
	margin:2px;
	padding: 8px;
	position: absolute;
	z-index: 1;
	line-height:20px;
  }
  
  /* .tabletooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
  } */
  
  .tabletooltip:hover .tooltiptext {
	visibility: visible;
	/* opacity: 1; */
  }