/*
Thin            100     
Extra Light     200
Light           300
Regular         400
Medium          500
Semi-Bold       600
Bold            700
Black           900
*/

body {
	font-family: 'Merriweather', serif;
	/* overflow: scroll; */
	font-weight: 300;
}
header {
	background-color: #188630;
	color:#FFF;
	padding:4px;
	font-weight: 400;
	border-bottom:1px solid #666666;
}
img#cecbtn-userconfig {
	margin: -1px 7px 0px 0px;
    width: 20px;
	float:right;
}
img#satellite-icon {
	margin: -1px 7px 0px 0px;
    width: 20px;
	float:right;
	opacity: .3;
}
img#cecbtn-reload {
	margin: -1px 7px 0px 0px;
    width: 18px;
	float:right;
}
#alerts {
	display:none;
    padding: 20px;
	text-align: center;
}
#userConfig {
	display: block;
    position: absolute;
    z-index: 99;
    background-color: #F3EFF5;
    padding: 10px;
    color: #3A2D31;
	border-bottom: 4px solid #63687A;
	width: 100%;
	top: 28px;
}
#userConfig input {
	width: 30px;
    height: 30px;
	margin: 10px 10px 10px 10px;
	float: left;
}
#userConfig label {
	display: block;
	padding: 15px 0px 0px 0px;
}
#userConfig button {
	margin: 10px 0px;
	height: 20px;
}
#userConfig h3 {
	margin: 4px 0px;
}
#projectStats a {
	display: inline-block;
	padding: 4px 0px;
}

#ctrls {
	left: 6px;
	position: absolute;
	top: 10px;
	font-size:.8em;
	text-align: center;
	color:#FFF;
}
#ctrlsRT {
	right: 6px;
	position: absolute;
	top: 10px;
	font-size:.8em;
	text-align: center;
	color:#FFF;
}
#crosshairs {
	pointer-events: none;
	position: absolute;
	text-align: center;
	top: 0px;
	width:100%;
}
#ctrls > div, #ctrlsRT > div {
	padding:4px 0px;
	margin:8px 0px;

}
.ctrlZoom {
	background-color: #3A2D31;
	width: 22px;
}
#ctrl_ZoomOut {
	position:absolute;
	top:0px;
	left:30px;
}
.ctrlUp {
	background-color: #63687A;
	border-bottom:1px solid #6666666e;
}
.ctrlDwn {
	background-color: #72B01D;
	border-bottom:1px solid #6666666e;
}
#basemapOptsDiv {
	position: absolute;
    top: -4px;
    right: 80px;
	display: block;
	width: min-content;
    text-align: right;
}
.basemapOpt {
	display: inline-block;
    padding: 4px 4px;
    margin: 0px 0px 8px 0px;
    white-space: nowrap;
    width: min-content;
}

#projectsDiv {
	padding:0px 6px;
}
#underMapControls {
	/* overflow-y: auto; */
    height: auto;
    padding: 6px 6px 0px 6px;
    position: sticky;
    top: 0;
    background-color: #fff;
	z-index: 2;
}
#underMapControls > a {
	background-color: #63687A;
	border-bottom:1px solid #6666666e;
	font-size:.8em;
	display:inline-block;
	padding:5px 8px;
	margin:0px 2px 5px 0px;
	text-decoration:none;
	color:#FFF;
}
#horizontalAccuracyFt {
	display:block;
	font-size:.7em;
	padding: 0px 0px 0px 0px;
}
#liveRouteNotes {
	font-size:.8em;
	height:10px;
	padding: 0px 0px 10px 0px;
	text-align: center;
	background-color: #F3EFF5;
	border-top:1px solid #8b8b8b5e;
	border-bottom:1px solid #6666666e;
	position:absolute;
	left:0px;
	bottom:0px;
	width:100%;
}

#buttonBox > span {
	margin:6px 0px;
}
#navigateBox {
	position: relative;
	/* height: 70px; */
}
#navBtnGoStraight {
    /* padding: 6px 39px 6px 38px;
    position: absolute;
	background-color:#188630;
	top: 28px; */
	padding: 6px 39px 6px 38px;
    position: relative;
    background-color: #188630;
    left: 0px;
    top: -4px;
    width: fit-content;
}
#navBtnCancelStraight {
    padding: 8px 33px;
    position: absolute;
	background-color:#C34242;
}
#navBtnGo {
    /* padding: 6px 40px 6px 39px;
    position: absolute;
    background-color: #188630;
    left: 100px;
    top: 28px; */
	padding: 6px 40px 6px 39px;
    position: relative;
    background-color: #188630;
    left: 100px;
    top: -4px;
    width: fit-content;
}
#navBtnCancel {
    padding: 8px 31px;
    position: absolute;
	background-color:#C34242;
	left:127px;
}
#navDestPinSet {
    padding: 6px 24px 6px 23px;
    position: absolute;
    background-color: #188630;
    left: 202px;
	top: 28px;
}
#navDestPinCancel {
    padding: 8px 52px;
    position: absolute;
	background-color:#C34242;
	left:249px;
}
#navDirections {
	line-height: 1.8;
    /* padding: 20px 10px; */
    padding-left: 10px !important;
    font-size: .8em;
}

#navigateBox, #searchBox, #dataformsBox, #featOnOffBox, #featureInfo {
	margin:6px;
}
#buttonBox .cecbtn, #navigateBox .cecbtn, #searchBox, #dataformsBox .cecbtn, #featureInfo .cecbtn {
	margin: 2px 2px 4px 0px;
    display: inline-block;
}
#buttonBox > span > a {
	float:right;
}
#featOnOffBox input {
	width: 30px;
    height: 30px;
	margin: 10px 10px;
	display:none;
}
#featOnOffBox input + img {
	border:1px solid #a1a1a1;
	padding:1px;
	width: 20px;
    height: 20px;
	margin: 10px 6px 0px 6px;
}
#featOnOffBox input[type="checkbox"] + img { opacity: .3; }
#featOnOffBox input[type="checkbox"]:checked + img { opacity: .9; }
/* #featOnOffBox canvas {
	margin: -4px 0px 0px 4px;
}
#buttonBox canvas {
	margin:0px 4px;
} */
div#dataformsBox {
	display: flex;
	align-items: stretch;
	align-content: stretch;
	font-size: .8em;
}
div#dataformsBox div {
	flex: 1 1 auto;
	padding:0px 10px 10px 10px;
}
#dataformsBox div + div {
	border-left:2px solid #ccc;
}
#dataformsBox button {
	margin:10px 0px 0px 0px;
	height: fit-content;
    min-height: 30px;
}
#dataformsBox a {
	text-decoration: none;
	margin: 8px 0px 0px -10px;
    display: inline-block;
	cursor:pointer;
}
#dformDoc {
	position: absolute;
	width: 100%;
	z-index: 95;
	/* height: 95%; */
	overflow: hidden;
}
#dformDoc #dform_header {
	background-color: #fff;
	height: 32px;
	margin:3px;
	padding: 15px 0px 0px 20px;
	position: absolute;
	top:0px;
	width: 93%;
	z-index: 96;
}
#dformDoc #dform_content {
	background-color: #fff;
	border: 3px solid #00C800;
	padding: 30px 20px 20px 20px;
	position: relative;
	height: calc(100% - 100px);
	overflow-y: scroll;
	overflow-x: hidden;
}
#dformDoc #dform_footer {
	background-color: #fff;
	padding: 10px;
	position: relative;
	height: 60px;
	display:flex;
}
#dformDoc #dform_footer div { flex: 1; }
#dformDoc #dform_footer div:nth-child(1) {
	text-align: left;
	padding-left:10px;
}
#dformDoc #dform_footer div:nth-child(2) {
	text-align: center;
}
#dformDoc #dform_footer div:nth-child(3) {
	text-align: right;
	padding-right:10px;
}
#dformDoc table {
	margin:20px 10px 10px 10px;
}
#dformDoc td {
	padding: 0px 10px;
	vertical-align: middle;
}
#dformDoc input {
	min-height: 24px;
	margin: 4px 4px 4px 0px;
	padding:0px 4px;
    /* width: 80%; */
}
#dformDoc select {
	height:24px;
}
#dformDoc textarea {
	width: 50%;
	min-height:50px;
}
#dformDoc input[type=radio],
#dformDoc input[type=checkbox] {
	height:24px;
	width:24px;
	display: table-cell;
    vertical-align: middle;
	margin:6px 4px 8px 16px;
}
#dformDoc input:read-only {
	color:#585858;
	border: 1px solid #ccc;
}
/* #dformDoc input[type=radio] + label,
#dformDoc input[type=checkbox] + label {
	margin:0px 12px 0px 2px;
} */
button[data-type=dform_plus], button[data-type=dform_minus] {
	width: 30px;
}
#dformDoc_close {
	float:right;
	top:20px;
	right:20px;
}
#dformDoc table[data-conditional] {
    display:none;
}
button#dformDoc_close,
button#dformPagePrev,
button#dformPageNext {
	border: 1px solid rgb(150,150,150);
	background-color: #ddd;
}
button#dformPagePrev.dformBtnDisabled,
button#dformPageNext.dformBtnDisabled {
	color: rgb(170,170,170);
	background-color: rgb(240,240,240);
    border: 1px solid rgb(200,200,200);
}
#dformDoc {font-size:14px;font-family:Arial;background-color: #fff;height: calc(100% - 28px);}
#dformDoc table { /* border: 1px solid #fff; */ min-width:520px; border-style: solid; }
#dformDoc th { border: 0px solid #fff; }
/* #dformDoc td { border: 1px solid #eee; } */
#dformDoc p {  margin:0px; }
#dformDoc td { vertical-align: middle; height:32px; }


#dform_content {
	/* display: flex; */
	/* flex-wrap: wrap; */
	/* align-items: flex-start; */
}
#dform_content textarea {
	flex-basis: 100%;
	resize:vertical;
}
#dform_content table {
	border:0px solid #eee;
	margin:10px 5px 10px 5px;
	flex-basis: 100%;
	/* font-size:12px; */
}
#dform_content td {
	vertical-align: middle;
}
#dform_content button {
	height: 30px;
}
#dform_content p {
	margin: 0px;
}
@media screen and (min-width: 1200px) {
	#dform_content table {
		flex-basis: calc(50% - 25px);
		margin:10px 10px 30px 10px;
	}
}
.dform_tab {
	display: inline-block;
    margin: 10px 8px 10px 0px;
    background-color: rgb(99, 104, 122);
    border-bottom: 1px solid #6666666e;
    color: #fff;
    padding: 6px 8px 3px 8px;
    cursor: pointer;
    font-family: 'Merriweather', serif;
    font-size: 13px;
}
.dform_tab.active {
	background-color: rgb(114, 176, 29);
}

#dform_tabs {
    position: sticky;
    top: 0;
    background-color: #fff;
	z-index: 100;
    width: fit-content;
}
div#dform_content div + div {
	margin-top: 20px;
}
div#dform_content div#dform_tabs div {
    margin-top: 0px;
}
div#dform_tabs + p + div {
	margin-top:20px;
}


.togglebox input {
	width: 30px;
    height: 30px;
	margin: 10px 10px;
	display:none;
}
.togglebox input + img {
	border:1px solid #a1a1a1;
	padding:1px;
	width: 20px;
    height: 20px;
	margin: 10px 6px;
}
.togglebox input[type="checkbox"] + img { opacity: .3; }
.togglebox input[type="checkbox"]:checked + img { opacity: .9; }
#overlayBox {
	margin:0px 10px;
}


.cecbtn {
	background-color: #3A2D31;
	border: 0px;
	color:#FFF;
	font-size:.8em;
	font-weight:500;
	padding: 6px;
	text-decoration: none;
	/* text-transform:uppercase; */
}
.cecbtn:hover {
	color: #FFF;
}
.cecbtn-bgroups {
	display: inline-block;
	height: 20px;
    padding: 4px 8px;
    text-decoration: none;
    color: #FFF;
    background-color: #FF6600;
    margin: 10px 0px;
}
.cecbtn-dn { color:#FFF; background-color: rgb(72, 138, 255); }
.cecbtn-up { color:#FFF; background-color: rgb(154, 179, 210); }
.cecbtn-basic {
	font-size: .9em;
	height: 30px;
}
a.cecbtn-extra {
	border-bottom: 4px solid rgb(114, 176, 29) !important;
	height: 12px;
}

button[data-type=buttonsGroupBtn] {
	display: block;
    margin: 4px 10px 6px 10px;
}

table#featInfoTbl {
	width:100%;
}
table#featInfoTbl td {
	vertical-align: top;
	text-align: left;
}
table#featInfoTbl td+td {
	width:100%;
}
#featInfoTbl input:not(input[type=checkbox]), #featInfoTbl textarea, #featInfoTbl select {
	font-family: sans-serif;
	width:95%;
}
#featInfoTbl input[type=checkbox] {
	height:20px;
	width:20px;
}

#featureInfo textarea {
	height: 20px;
}

#featSearchRes h5 {
	margin:20px 0px 0px 0px;
}
#featSearchRes a {
	display:block;
	margin:6px 0px 8px 4px;
	text-decoration:none;
}
.readOnly { color:gray; }


#tableLegend td, .tableLegend td {
	font-size:12px;
	padding: 6px;
}
.tableLegend input, .tableLegendCond input {
	display:none;
}
.tableLegend input[type="checkbox"] + img { opacity: .3; cursor: pointer; }
.tableLegend input[type="checkbox"]:checked + img { opacity: .8; cursor: pointer; }
.tableLegendCond input[type="checkbox"] + img { opacity: .3; cursor: pointer; }
.tableLegendCond input[type="checkbox"]:checked + img { opacity: .8; cursor: pointer; }
.tableLegendCond {
	display: none;
}
.legColBtn {
	float: left;
	min-height: 20px;
	width: 30px;
	padding: 0px 4px 0px 0px;
}
.legColFeat {
	float:left;
	min-height:20px;
	/* width:50px; */
	/* padding: 0px 0px 0px 0px; */
}
.legColLabel {
	float:left;
	/* min-height:20px; */
	/* width:200px; */
	padding: 10px 0px 0px 6px;
}
.lineArrowBtn {
	height: 18px;
	margin: 0px 10px;
	border: 1px solid #ccc;
	padding: 2px;
}
.caretOpener {
	cursor: pointer;
	display: none;
	/* width: 22px;
	height: 20px; */
}
.layerGroup {
	font-weight: bold;
	/* padding: 8px 10px 8px 12px; */
	height:44px;
}
.layerGroupName {
	padding: 10px 0px 0px 12px;
    display: inline-block;
}
.layerGroupSeparator {
	display:block;
	background-color:#CCC;
	clear:left;
	height:2px;
}
.layerGroup input { display: none; }
.layerGroup input[type="checkbox"] + img { opacity: .3; cursor: pointer; }
.layerGroup input[type="checkbox"]:checked + img { opacity: .8; cursor: pointer; }
.layerGroup input + img { 
	position: absolute;
	/* right: 10px;
	width: 18px;
	margin-top: -10px; */
 }


/* WINDOW ORIENTATION CONTROL ATTEMPTS */
/* body{ overflow: hidden; } */
.portrait {
    border: 3px solid blue;
    width: 90vh;
    -webkit-transform:rotate(-90deg);
	/*translateX(10%) translateY(-50%) */
    /* margin: 39px 0px 0px -45px; */
    margin: 0px 0px 0px 0px;
}
.landscape {
    -webkit-transform: rotate(90deg) translateY(-50%);
	/* -webkit-transform-origin: 165px 150px; */
	width: 100vh;
    height: 100vw;
	transform-origin: 0 0;
	transform: rotate(90deg) translateY(-50%);
}

/* PANEL SPLITTING UPGRADE */
.panel-container-vertical {
	/* display: flex;
	flex-direction: column;
	height: calc(100vh - 25px);
	overflow: hidden; */
}
  
#map {
	/* flex: 0 0 auto; */
	/* height: 50vh; */
	width: 100%;
	height: 100%;
	white-space: nowrap;
	/* background: #838383;
	color: white; */
}
.splitter { position:relative; }
.splitter-horizontal {
	/* flex: 0 0 auto; */
	height: 18px;
	cursor: row-resize;
}
div#reCenter {
	position: absolute;
    top: -100px;
    left: 2px;
    background-color: rgba(100,125,255,1);
    padding: 8px 12px;
    color: #FFF;
    border: 1px solid #fff;
    border-radius: 10px;
    font-weight: bold;
    font-size: .8em;
}
  
.panel-bottom {
	/* flex: 1 1 auto;
    overflow-y: auto;
	position: relative; */
}

#layerProgress {
	text-align:left;
	font-size:.8em;
	margin:10px 10px 10px 0px;
}
#layerProgress table, 
#layerProgress th, 
#layerProgress td {
  border: 1px solid #ccc;
  border-collapse: collapse;
  padding:4px 6px;
}
th[colspan="3"]{
	text-align:center;
	background-color:#eee7;
}
#layerProgress th:nth-child(3),
#layerProgress th:nth-child(4),
#layerProgress th:nth-child(5),
#layerProgress td:nth-child(3),
#layerProgress td:nth-child(4),
#layerProgress td:nth-child(5)
{
	text-align:center;
}
#layerProgress th:nth-child(6),
#layerProgress td:nth-child(6)
{
	border-right:1px solid #fff;
}
#layerProgress td:nth-child(6){ padding-left: 10px; }

button {
	color:#000;
	/* height:25px !important; */
	height:30px;
}
select:not([multiple]) {
	color:#000;
	height:24px;
}

#feedbackMsg {
	position: absolute;
	text-align: center;
	top: 40px;
	width: 100%;
	z-index: 99;
	  overflow-y: scroll;
}
#feedbackMsg > div {
	background-color:#ffb633;
	border-radius: 6px;
	border: 2px solid #FFF;
	color:#000;
	margin: 0px auto;
	padding: 6px;
	width: 350px;
	min-width: min-content;
}
#navigationHeadsUpWrap {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	pointer-events: none;
}
#navigationHeadsUp {
	display: flex !important;
	justify-content: space-between;
	align-items: flex-end;
	flex-direction: row;
	position: absolute;
	text-align: center;
	top: -103px;
	z-index: 98;
	font-size: .8em;
	width: 100%;
	height: 100px;
	flex: 0 1 auto;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	pointer-events: none;
}
#navigationHeadsUp > div {
	background-color: rgba(255,182,51,1);
    border-radius: 6px;
    color: #000;
    padding: 10px 10px;
	margin:0px 2px 0px 4px;
    width: 80%;
    text-align: left;
    font-size: 1.3em;
	flex: 0 1 auto;
}
#navigationHeadsUp > div + div {
    background-color: rgba(255,182,51,1);
    border-radius: 6px;
    color: #000;
    width: 20%;
    text-align: center;
    font-size: 1.3em;
	margin:0px 4px 0px 2px;
	height: 55px;
}

img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}

#measureSegControls > input, #measureSegControls > button, #measureSegControlOpts input {
    margin: 4px 0px;
	height: 28px;
	padding: 0px 4px;
}
#measureSegControlOpts { position: relative; }
#measureSegControlOpts input {
	height: 28px;
	width: 28px;
}
#measureSegControlOpts label[for=maintain_bearings] {
	top: 9px;
    position: absolute;
    float: left;
    left: 36px;
}


.toggle {
	--width: 30px;
	--height: calc(var(--width) / 2);
	position: relative;
	display: inline-block;
	width: var(--width);
	height: var(--height);
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
	border-radius: var(--height);
	cursor: pointer;
}
.toggle input {
	display: none;
}
.toggle .slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--height);
	background-color: #ccc;
	transition: all 0.4s ease-in-out;
}
.toggle .slider::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--height));
	height: calc(var(--height));
	border-radius: calc(var(--height) / 2);
	background-color: #fff;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
	transition: all 0.4s ease-in-out;
}
.toggle input:checked+.slider {
	background-color: #2196F3;
}
.toggle input:checked+.slider::before {
	transform: translateX(calc(var(--width) - var(--height)));
}
.toggleText {
	width: max-content;
    display: inline-block;
    margin-left: 40px;
    font-size: .9em;
    color: rgb(100,100,100);
}

#inlineCameraScreen {
    top: 30px;
    position: absolute;
    width: 100%;
    z-index: 99;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	pointer-events: none;

}
#inlineCameraScreen > video {
    display: block;
    max-height: 50vh;
    width: 100vw;
}
#usePhotoFileOpt, #photoUploadProgress {
	margin:4px 0px 10px 30px;
	font-size:.9em;
}

.traceTab {
	background-color: #63687A;
	border-bottom:1px solid #6666666e;
	font-size:1em;
	padding: 10px 9px 3px 11px;
	margin: 1px 0px 0px 4px;
	text-decoration:none;
	color:#FFF;
	width: 42px;
}

/* #preloadTilesPanel {
	display: none;
	position: absolute;
	top: 57%;
	width: 97%;
	z-index: 99;
} */
div#preloadTilesPanel {
	background-color: #fff;
	/* border: 4px solid #00000075; */
	font-size:.8em;
	margin: 0px;
	padding: 0px 0px 0px 5px;
	/* width: 95%; */
	z-index: 99;
	height:100%;
	width:100%;
	overflow: auto;
}
#preloadTilesPanel select,
#preloadTilesPanel button
{
	height: 20px;
}
.is-selected {
	color: #000 !important;
}
#traceBox {
	/* height: 90%; */
    position: relative;
    z-index: 3;
    /* margin-top: -24px; */
    background-color: #fff;
    font-size: 14px;
    /* overflow-x: auto;
    overflow-y: scroll; */
}
/* #underMapControls {
	overflow-y: auto;
    height: auto;
    padding: 6px 6px 0px 6px;
    position: sticky;
    top: 0;
    background-color: #fff;
	z-index: 2;
} */
#traceResultsTable tbody {
	/* display: block; */
	/* height: 200px; */
	overflow: auto;
}
#traceResultsTable thead, 
#traceResultsTable tbody tr {
	/* display: table; */
	width: 100%;
	/* table-layout: fixed; */
}
#traceResultsThead1 {
	background-color: #fff;
	top:37px;
	position:sticky;
}
#traceResultsThead2 {
	background-color: #F3EFF5;
	top:60px;
	position:sticky;
}
#traceResultsTable {
	line-height: 1.2 !important;
}
#btn_traceUpstream, #btn_traceDownstream {
	height:20px;
}
.traceTab, .traceTab:hover {
	color: #FFF;
}
.activeTab {
	background-color: rgb(114, 176, 29) !important;
}
.trace_parentingActive {
	background-color: green;
	border: 2px solid green;
	color: #fff;
}
#traceControls {
	padding: 0px 0px 12px 0px;
    position: sticky;
    top: 0px;
    background-color: #fff;
}
#traceFilters {
    position: sticky;
    top: 30px;
    background-color: #fff;
}
#traceParenting {
    position: sticky;
    top: 30px;
    background-color: #fff;
}
.block1 {
	position: relative;
	height: 50vh;
	/* background-color: #f5f5f5; */
	overflow: hidden;
	margin-bottom:0px !important;
}
.block2 {
	overflow: auto;
	height: min-content;
	/* background-color: #dbdbdb; */
	margin-bottom:0px !important;
}
.block3 {
	overflow: auto;
	height: 200px;
	/* background-color: #b5b5b5; */
	margin-bottom:0px !important;
	position: relative;
}
.dragbar {
	cursor: row-resize;
}