/* main styles ///////////////////////////////////////////////////////////////////*/

html, body{
	height:100%; padding:0; margin:0; font-family: colfax, -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Arial, sans-serif;
}

/* bring in fonts ///////////////////////////////////////////////////////////////////*/
/*@font-face {
    font-family: "Lato-Regular";
    src: url(fonts/Lato-Regular.woff);
}
@font-face {
    font-family: "Lato-Light";
    src: url(fonts/Lato-Light.woff);
}
@font-face {
    font-family: "Lato-Bold";
    src: url(fonts/Lato-Bold.woff);
}*/
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
.button.disabled, .button:disabled {
    opacity: .5; 
    cursor: not-allowed;
}
.button-primary.disabled, .button-primary:disabled {
    opacity: .5;
}
/* main div with left/app div and right/map div ///////////////////////////////////////////////////////////////////*/
#cd_wrap{
	display:flex; flex-grow: 1; position: relative; height:100%; width:100%; color:#3C454A; font-size:12px; font-family: colfax, -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Arial, sans-serif; overflow-x: hidden;
}
#cd_left{
	flex:0 0 350px; padding:8px 0px 8px 8px; box-shadow: 0px 0px 16px 0px rgba(51, 51, 51, 0.42); z-index:10; 
	overflow-y:auto; background:#f3f3f3; 
}
.goBackText{
	margin-bottom: 39px;
}
.goBackText a{
	position: absolute; right: 320px;  padding: 12px; border-radius: 20px; margin-bottom: 39px; text-decoration: none;
}
.goBackText a:hover{
	/*background: rgba(255,255,255,0.4);*/ /*color: orange;*/ cursor: pointer; background: rgba(255,255,255,0.2);
}
.welcomeWrapper{
	position: absolute; top: 0px; left: 0px; z-index: 1100; height: 100%; width: 100%; background-color: rgba(255,255,255,0.4);
}
.welcomePara{
	text-align: left;
	width:50%;
	font-size:14pt;
	margin:auto;
	position: absolute;
	top: 15%;
	margin-left: 26%;
	padding:20px;
	background:#648CA4;
	/*background:lightblue;*/
	/*background:rgba(100, 140, 164, 0.5);*/
	
	border-radius:25px;
	box-shadow: 
    inset 0 3px 2px rgba(255,255,255,0.22), 
    inset 0 -3px 2px rgba(0,0,0,0.17), 
    inset 0 20px 10px rgba(255,255,255,0.12), 
    0 0 4px 1px rgba(0,0,0,0.1), 
    0 3px 2px rgba(0,0,0,0.2);
	color: black;
	text-decoration: none;
	/*text-shadow: 0 1px rgba(96, 58, 20,1);*/
	border: 1px solid #324617;
}
.disclosureWrapper{
	text-align: left; font-size: 14px; max-height: 400px; height: 400px; overflow: auto;
}
#welhide{
	color: black;
	text-decoration: none;
	text-shadow: 0 1px rgba(96, 58, 20,1);
}
#welhide:hover {
	color:orange;
	text-decoration: none;
	/*text-shadow: 0 1px rgba(236, 239, 222,.8);*/
}
.reportDisclaimerWtapper{
	display: flex; margin-top: 10px; position: relative;
}
.reportDisclaimerWtapper a{
	text-decoration: none; font-size: 14px;
}
.welcomePara a{
	text-decoration: none;
}
a:visited{
  color:blue;
}
.mapWrapper{
	width: 100%;
}
#map{
	height:100%; width:100%; background: #bbb; background: -webkit-radial-gradient(#fff, #bbb); 
    background: -moz-radial-gradient(#fff, #bbb); background: radial-gradient(#fff, #bbb); 
}
.blueFont{
	color: #2f6384; font-weight: 700; font-size: 14px; line-height: 20px;
}
.mainContentWrapper{
	margin-top: 10px;
}
/* overwite some esri styles */
.dijitSelect, .dijitSelect *, .dijitButtonNode, .dijitButtonNode * {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background-color: #0096d6;
    color: white;
    padding: 2px;
    border-color: #0084bd;
    /*box-shadow: 0 1px 1px rgba(16,22,26,.2);*/
    background-clip: padding-box;
    border-radius: 3px;

 }
 .dijitArrowButtonChar {
 	display: block !important;
 }
 .esriPrint{
 	padding: 0px;
 }
 .dijitReset{
 	line-height: 15px;
 }
 .dijitArrowButtonInner{
 	display: none;
 }
 .dijitMenuTable tbody{
 	background-color: #e8e8e8; border: solid grey 1px; 
 }
 .dijitMenuTable tbody .dijitMenuItemLabel{
 	padding: 5px;
 }
/*#dijit_form_ComboButton_1_arrow !important{
	display: none;
}*/
/* header styles /////////////////////////////////////////////////////////////////////////////////*/

.mainHeaderWrapper{
	 background:#648CA4; color: white; display: flex; height: 71px; align-items: center; min-height: 75px;
}
.logoWrapper{
	padding: 5px; width: 100px; padding-left: 5px;
}
.titleWrapper{
	font-size: 16px; font-size: 20px;
}
.searchWrapper{
	   background-color: grey; margin-left: auto; margin-right: 8px;
}
/*#search {
    display: block; position: absolute; z-index: 2000; width: 300px;
 }*/
.headers{
 	color: #101d28; font-size: 16px; font-weight: 900; margin-top: 10px; margin-bottom: 5px; width: 100%;
 }
 /* map styles ////////////////////////////////////////////////////////////////////////////////*/
.esriSimpleSliderTL{
 	right: 20px !important;
}
#BasemapToggle{
 	position: absolute; top: 2.5%; z-index: 1000; left: 379px;
}
.viewMapWrapper{
	display: none; position: absolute; width: 100%; background-color: #e8e8e8; box-shadow: 0 -1px 1px rgba(16,22,26,0.2);
    border-top: 1px solid #ddd; bottom: 75px; left: 0px; height: 46px; text-align: center; z-index: 1000;
}
.viewAppWrapper{
	display: none; position: absolute; width: 100%; background-color: #e8e8e8; box-shadow: 0 -1px 1px rgba(16,22,26,0.2);
    border-top: 1px solid #ddd; bottom: 75px; left: 0px; height: 46px; text-align: center; z-index: 1000;
}
/* legend styling /////////////////////////////////////////////////////////////////////////////////*/
.legendDivWrapper{
	position: absolute; bottom: 93px; right: 20px; z-index: 1000; border: 1px solid #ddd; border-radius: 6px; background-color: #f3f3f3;
	 overflow: auto; box-shadow: 0 2px 2px rgba(16,22,26,.5); max-height: 50%;width: 280px;
}
.legendPopupHeader{
	background-color: #e5e3e3; padding: 6px; font-weight: bold; border-bottom: solid 1px darkgray;
	position: absolute; width: 94.5%; z-index: 1000; width: 268px;
}
.dummyLegendHeader{
	position: absolute; bottom: 93px; right: 20px; z-index: 1000; background-color: #e5e3e3; padding: 6px; 
	font-weight: bold; border-bottom: solid 1px darkgray; border-radius: 6px; box-shadow: 0 2px 2px rgba(16,22,26,.5); width: 150px;
	display: none;
}
.legendDiv{
	padding-top: 30px;
}
.esriLegendServiceLabel{
	display: none;
}
/* wrapper div for flexbox rows ///////////////////////////////////////////////////////////////////*/
.flex-wrap{
	display:flex; flex-direction:row; 
}
/*  popup styling ////////////////////////////////////////////////////////////////////////////////*/
.popupWrapper{
	position: absolute; z-index: 1000; left: 500px; top: 500px; color: #3C454A; background-color: #f3f3f3; display: none; margin-bottom: 25px;
}
.bottomPopupWrapper{
	position: absolute; z-index: 1000; left: 380px; bottom: 93px; background-color: white; 
	color: black; box-shadow: 0 2px 2px rgba(16,22,26,.5); border: 1px solid #ddd; border-radius: 6px;
	font-size:12px; font-family:"Open Sans"; background-color: #f3f3f3; max-width: 400px;
}
.popupHeader{
	background-color: #e5e3e3; padding: 6px; font-weight: bold; border-bottom: solid 1px darkgray;
}
.popupHeaderClose{
	position: absolute; font-size: 16px; margin-left: -4.5px; margin-top: -2px
}
.popupHeaderCloseWrapper{
	height: 20px; width: 20px; /*background-color: darkgrey;*/ position: absolute;border-radius: 10px; text-align: center; right: 3px; top: 4px;
}
.popupHeaderCloseWrapper:hover{
	cursor: pointer; background-color: darkgrey; 
}
.popupMinWrapper{
	position: absolute; right: 24px; font-size: 12px; top: 4px; text-align: center; width: 20px; height: 20px; border-radius: 10px; 
}
.popupMinWrapper:hover{
	cursor: pointer; background-color: darkgrey;
}
.popupMinLeg{
	right: 15px;
}
.popupMin{
	position: absolute; top: 3px; right: 4px;
}
.popupItems{
	padding:3px;
}
.popupItems span{
	color: black; font-weight: 100;
}
.popupItems2 span{
	color: black; font-weight: 100;
}
.popupItemsWrapper{
	padding: 5px;
}
/*.popupHeaderClose:hover{
	cursor: pointer; background-color: blue; border-radius: 20px;
}*/


/* styling for the hamburger menu toolbox ////////////////////////////////////////////////////////*/
.hamburgerTools{
	height: 35px; width: 35px; background-color:#e8e8e8; margin-left: -45px; border-radius: 6px; border: 1px solid #ddd; box-shadow: 0 1px 1px rgba(16,22,26,.2);
}
.hamburgerTools:hover{
	background-color: #f3f3f3; cursor: pointer;
}
.hud-hamburger{
	width: 20px; margin: 4px; height: 3px; background-color: #2F6384;
}
.dropdownMenu{
	position: absolute; z-index: 1000; list-style:  none; background-color: #f3f3f3; left: 243px; top: 200px; border-radius: 6px; 
	border: 1px solid #ddd; box-shadow: 0 1px 1px rgba(16,22,26,.2); display: none;
}
.dropdownMenu div{
	list-style: none; padding: 5px; 
} 
.toolWrapper div:hover{
	background-color: #e8e8e8; cursor: pointer;
}
.createMapWrapper{
	position: absolute; bottom: 130px; height: 45px; background-color:#e8e8e8;box-shadow: 0 -1px 1px rgba(16,22,26,0.2);
	border-top: 1px solid #ddd; width: 358px; left:0px; z-index: 1000;

}
.mapInfoWrapper{
	display: none; position: absolute; width: 358px; bottom: 0px; height: 100px; background-color: #e8e8e8; border-top: 1px solid #ddd; box-shadow: 0 -1px 1px rgba(16,22,26,0.2);
}
.mapFormWrapper{
	position: absolute; bottom: 7px; width: 212px; margin-left: 15px;
}
.mapClose{
	position: absolute; height: 20px; width: 20px; font-size: 14px; top: 5px; right: 20px; text-align: center;
	font-weight: bold; color: black;
}
.mapClose:hover{
	cursor: pointer; background-color: darkgrey; border-radius: 100px;
}
/* styling for checkbox section /////////////////////////////////////////////////////////*/

.cbWrapper{
	margin-left: 8px;
}
.cbHeader{
	color: #101d28; font-size: 13px; font-weight: 900; margin: 10px 4px 5px -4px; padding-left: 4px; border-radius: 4px; padding: 2px; display: flex;
}
.cbHeader:hover{
	background-color: #e5e3e3; cursor: pointer;
}
.cbHeader h3{
	margin: 0px; font-size: 13px; color: #101d28; font-weight: 900;
}
.cbHeader span{
	color: #f3f3f3; margin-left: auto; margin-right: 3px; font-size: 12px; font-weight: 600;
}
.cb_wrapper_indent{
	margin-left: 15px;
}
.cb_wrapper_indent .form-component{
	padding: 0px; margin-right: 2px; margin-bottom: 4px;
}
.addOwnProject{
	margin-left: 15px; margin-top: 10px;
}

/* styling for the form that allows a user to submit a new project */
.addNewContentWrapper{
	display: none;
}
.backToMain{
	display: flex; align-items: center;
}
.backToMainWrapper{
	margin-left: 35px;
}
.formItems{
	width: 80%;
}
.formTitle{
	font-weight: bold; margin-top: 11px; margin-bottom: -14px;
}
.submitText{
	display: none; margin-top: 10px;
}
/* styling for opacity wrapper*/

.opacityWrapper{
	width: 358px;
	height: 54px;
	position: absolute;
	left: 0px;

	background-color:#e8e8e8;
	box-shadow: 0 -1px 1px rgba(16,22,26,0.2);
	border-top: 1px solid #ddd;
	display: flex;
	z-index: 1000;
	bottom: 75px;
}

.opacitySliderLabels{
	display: flex; margin-left: 4px; margin-top: 6px;
}
.sliderLabels{
	padding: 14px;
}
/* */

/* chosen */
.chosen-wrap .chosen-container-single .chosen-single{
 	padding:6px 0 0 10px; height:28px; border:1px solid #A7ACAF; border-radius:0px; background:#fff; background-clip:padding-box;
 	color:#3C454A; text-decoration:none; white-space:nowrap; line-height:1.2; text-align:left; box-shadow:none; font-family:"Lato-Light";
}
.chosen-wrap .chosen-container-single .chosen-single div b{
 	margin-top:2px
}
.chosen-wrap .chosen-container-single .chosen-single abbr{
 	top:10px;right:20px
}
.chosen-wrap .chosen-container-single span{
 	color:#3C454A; margin-right:0; font-size:14px; font-family:"Lato-Regular";
}
.chosen-container .chosen-default span{
	font-family: "Lato-Light" !important;
}
.chosen-container .chosen-results li.active-result {
	font-family: "Lato-Light";
}

/* media queries //////////////////////////////////////////////////////////////////////////////////////// */ 
/* drop the map for anything less than 500px wide/portrait view */
@media only screen and (max-device-width:600px) and (orientation: portrait){
	#cd_wrap{
		background:#f7f7f7;
	}
	#cd_left{
		box-shadow:none; 
	}
	#cd_map{
		display:none; 
	}
	/* width of three large attribute divs */
	.att-div-wrap{
		margin-right:4px;
	}
	.att-div{
		padding:5px 5px 12px 5px; 
	}
}
@media only screen and (max-device-width:420px) and (orientation: portrait), only screen and (max-device-width:740px) and (orientation: landscape){
	/* left div width */
	#cd_left{
		flex:0 0 400px;
	}
}	
@media only screen and (max-device-width:375px) and (orientation: portrait), only screen and (max-device-width:650px) and (orientation: landscape){
	/* left div width */
	#cd_left{
		flex:0 0 367px;
	}

}
@media only screen and (max-device-width:360px) and (orientation: portrait), only screen and (max-device-width:580px) and (orientation: landscape){
	/* left div width */
	#cd_left{
		flex:0 0 350px;
	}
	
}		
@media only screen and (max-device-width:320px) and (orientation: portrait), only screen and (max-device-width:580px) and (orientation: landscape){
	/* left div width */
	#cd_left{
		flex:0 0 312px;
	}
}	

/* style guide css //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Styles in this file are intended to be copied into one of the frameworks main.css file */

/* Overrides the imported jQuery-UI classes for the accordion - .accord is
   added to isolate jquery-ui.css  class overrides to only those elements 
   within divs of class accord */
/* Overrides to the imported chosen.css classes - .chosen-wrap is added to isolate
   chosen.css class overrides to only those elements within divs of class chosen-wrap */
.chosen-wrap .chosen-container-single .chosen-single {
	padding: 6px 0 0 10px;
	height: 33px;
	border: 1px solid #ddd;
	border-radius: 3px;
	background: #fff;
	background-clip: padding-box;a
	box-shadow: 0 1px 1px rgba(16,22,26,.2);
	color: #5d6165;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.5;
	text-align: left;
}
.chosen-wrap .chosen-container-single .chosen-single div b{
	margin-top: 4px;
}
.chosen-wrap .chosen-container-single .chosen-single abbr {
	top: 10px;
	right: 20px;
}
.chosen-wrap .chosen-container-single span{
	color:#222;
	margin-right: 0;
}
.chosen-wrap .chosen-container-multi .chosen-choices {
	border: 1px solid #ddd;
	border-radius: 3px;
	background-image: none;
	cursor: pointer;
	box-shadow: 0 1px 1px rgba(16,22,26,.2);
}
.chosen-wrap .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
	height: 33px;
	color: #222;
	font-size: 100%;
	cursor:pointer;
}
.chosen-wrap .chosen-container-multi .chosen-choices li.search-choice {
	border: 1px solid #ddd;
	border-radius: 3px;
	background-color: #fdfdfd;
	background-image: none;
	box-shadow: 0 1px 1px rgba(16,22,26,.2);
	color: #222;
	line-height: 1.7;
}
.chosen-wrap .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
	top:9px;	
}	
/* width of slider bar*/
.slider{
	font-size: 1.1em !important;
}
/* jQuery-UI overrides for the slider */
.ui-widget .ui-widget{
	font-size:1.1em;
}
.slider-container .ui-state-default, .slider-container .ui-widget-content .ui-state-default, .slider-container .ui-widget-header .ui-state-default{
	cursor:pointer;
}
.slider-container .ui-slider .ui-slider-handle:focus { 
	outline: none; 
}
.range-slider .ui-widget-header{
	background:#e8f5fe;
}
.slider-container {
	margin: 17px 0 13px;
}	
.range-slider {
	margin: 10px 0 20px;
}

/* Toggle Button Styling - all based on the parent divs toggle-btn class - no external 
   library styles are used */
.toggle-btn {
	padding-left:5px;
	margin-bottom:10px;
	display:flex;
}
.toggle-btn input {
  display: none;
}
.toggle-btn label {
	padding:5px; 
	box-shadow: 0 1px 1px rgba(16,22,26,.2);
	background-clip: padding-box; 
	background-color:#fff; 
	text-align:center;
	border: 1px solid #DDD;  
	margin:5px 5px 5px -6px;
	flex:1; 
  	transition:all 0.1s ease-in-out;
	cursor: pointer;
	color:#222;
}
.toggle-btn label:hover{
	background-color:#f3f3f3;
}
.toggle-btn input:checked + label {
	color:#FFF;
	font-weight:bold;
	background-color:#0096D6;
	text-shadow:0 1px 1px rgba(0,0,0,0.5);
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.35), 0 1px rgba(255, 255, 255, 0.1); 
}
.toggle-btn input:checked + label:hover {
	cursor:default;
}
.toggle-btn label:first-of-type {
  border-radius: 3px 0 0 3px;
}
.toggle-btn label:last-of-type {
  border-radius: 0 3px 3px 0;
}
.form-component {
    position: relative;
    margin-right: 5px;
    margin-bottom: 10px;
    display: inline-block;
    cursor: pointer;
}
.form-component input[type=checkbox]:checked~.check, .form-component input[type=radio]:checked~.check {
    background: #0096d6;
    background: linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0)) 0 no-repeat,50% no-repeat #0096d6;
    border-color: rgba(16,22,26,.1) rgba(16,22,26,.1) rgba(16,22,26,.3);
}
.form-component input[type=checkbox]~.check, .form-component input[type=radio]~.check {
    border-radius: 3px;
    width: 12px;
    height: 12px;
    background: linear-gradient(180deg,#fff,hsla(0,0%,100%,0)) 0 no-repeat,50% no-repeat #f5f8fa;
    border: 1px solid;
    border-color: rgba(16,22,26,.1) rgba(16,22,26,.1) rgba(16,22,26,.17);
    box-shadow: 0 1px 1px rgba(16,22,26,.1);
    cursor: pointer;
    width: 14px;
    height: 14px;
    margin-right: 2px;
    display: inline-block;
    position: relative;
    top: 3px;
}
.form-component input[type=checkbox]:checked, .form-component input[type=radio]:checked {
    display: none;
}
.form-component input[type=checkbox], .form-component input[type=radio] {
    display: none;
}
.form-component input[type=checkbox]:checked~.check:after, .form-component input[type=radio]:checked~.check:after {
    display: inline-block;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
}
*, :after, :before {
    box-sizing: inherit;
}
.slider-container .ui-state-default, .slider-container .ui-widget-content .ui-state-default, .slider-container .ui-widget-header .ui-state-default {
    border-radius: 100%!important;
    box-shadow: 0 1px 1px rgba(16,22,26,.1)!important;
    background: linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0)) 0 no-repeat,50% no-repeat #0096d6!important;
    border-color: rgba(16,22,26,.1) rgba(16,22,26,.1) rgba(16,22,26,.3)!important;
    width: 17px!important;
    height: 17px!important;
}
/* Blue font */
.blueFont{
	color:#2F6384;
	font-weight:600;
	line-height: 20px;
	font-size: 14px;
} 
.button {
    display: inline-block;
    -webkit-appearance: none;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    overflow: visible;
    font-size: 13px;
    line-height: 1;
    padding: 6px 14px;
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #ddd;
    color: #222;
   }
.override .button-primary {
    background-color: #0096D6;
}
.button:not(.button-link) {
    box-shadow: 0 1px 1px rgba(16,22,26,.2);
    background-clip: padding-box;
}
.sidebar-content .button {
    margin-bottom: 1rem;
}
.button-primary {
    color: #fff;
    background-color: #0096d6;
    border-color: #0084bd;
}
/* at media query  ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 800px) {
    .searchWrapper{
    	display: none;
    }
}
@media only screen and (max-width: 1100px) {
    .goBackText{
    	display: none;
    }
}
@media only screen and (max-width: 500px) {
    .welcomePara{
    	width: 58%; margin-left: 15%;
    }
    .mapWrapper{
    	display: none;
    }
    .basemapWrapper{
    	display: none;
    }
    .legendDivWrapper{
    	display: none;
    }
      .mapInfoWrapper{
    	width: 100%
    }
    .opacityWrapper, .createMapWrapper{
    	display: none;
    }
    .viewMapWrapper{
    	display: block;
    }
    .viewAppWrapper{

    }
    .dummyLegendHeader, #popupHeaderTitle{
    	display: none; position: relative;
    }
}


