/* biodiversity conservation */
.biod_bw {background: rgb(188, 188, 188) url('../images/ES_Icons/bio.png');}
.biod {background: rgb(46, 174, 74) url('../images/ES_Icons/bio.png');}

/* clean air */
.cair_bw {background: rgb(188, 188, 188) url('../images/ES_Icons/air.png');}
.cair {background: rgb(127, 129, 186) url('../images/ES_Icons/air.png');}

/* clean and plentiful water */
.cpw_bw {background: rgb(188, 188, 188) url('../images/ES_Icons/water.png');}
.cpw {background: rgb(116, 204, 209) url('../images/ES_Icons/water.png');}

/* climate stabilization */
.clim_bw {background: rgb(188, 188, 188) url('../images/ES_Icons/clim.png');}
.clim {background: rgb(249, 159, 31) url('../images/ES_Icons/clim.png');}

/* food, fuel, and materials */
.ffm_bw {background: rgb(188, 188, 188) url('../images/ES_Icons/food.png');}
.ffm {background: rgb(240, 224, 36) url('../images/ES_Icons/food.png');}

/* natural hazard mitigation */
.nhm_bw {background: rgb(188, 188, 188) url('../images/ES_Icons/haz.png');}
.nhm {background: rgb(215, 93, 100) url('../images/ES_Icons/haz.png');}

/* recreation, culture, and aesthetics */
.rca_bw {background: rgb(188, 188, 188) url('../images/ES_Icons/rec.png');}
.rca {background: rgb(199, 112, 180) url('../images/ES_Icons/rec.png');}

/* Scale and data type */
.NATIONAL {background: rgb(186, 207, 225) url('../images/ES_Icons/nat.png');}
.COMMUNITY {background: rgb(186, 207, 225)url('../images/ES_Icons/comm.png');}
.huc12 {background: rgb(186, 207, 225) url('../images/ES_Icons/huc12.png');}
.cbg {background: rgb(186, 207, 225) url('../images/ES_Icons/cbg.png');}
.ctr {background: rgb(186, 207, 225) url('../images/ES_Icons/ctr.png');}
.grid {background: rgb(186, 207, 225) url('../images/ES_Icons/grid.png');}
.plp {background: rgb(186, 207, 225) url('../images/ES_Icons/plp.png');}

.icon_style {
  width: 20px;
  height: 20px;
  float:left;
  margin-right: 5px;
  /*border: 1px solid gray;*/
  border-radius: 15px;
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
}

/* clean air */
#cair2 {background: url('../images/bc_icons.png') -20px -20px;}
#cpw2 {background: url('../images/bc_icons.png') -20px -40px;}
#clim2 {background: url('../images/bc_icons.png') -20px -60px;}
#ffm2 {background: url('../images/bc_icons.png') -20px -80px;}
#nhm2 {background: url('../images/bc_icons.png') -20px -100px;}
#rca2 {background: url('../images/bc_icons.png') -20px -120px;}
#pbs2 {background: url('../images/bc_icons.png') -20px -140px;}
#sup2 {background: url('../images/bc_icons.png') -20px -160px;}
#biod2 {background: url('../images/bc_icons.png') -20px 0px;}
/* ============================================================
  COMMON for toggle
============================================================ */
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input.cmn-toggle-round-flat + label {
  padding: 1px;
  width: 26px;
  height: 13px;
  background-color: #26A146;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  -ms-border-radius: 13px;
  -o-border-radius: 13px;
  border-radius: 13px;
  -webkit-transition: background 0.6s;
  -moz-transition: background 0.6s;
  -o-transition: background 0.6s;
  transition: background 0.6s;
}
input.cmn-toggle-round-flat-grayedout + label {
  padding: 1px;
  width: 26px;
  height: 13px;
  background-color: #e1e1e1;/*#7D7D7D  #FBFBFB*/
  border-color: 
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  -ms-border-radius: 13px;
  -o-border-radius: 13px;
  border-radius: 13px;
  -webkit-transition: background 0.6s;
  -moz-transition: background 0.6s;
  -o-transition: background 0.6s;
  transition: background 0.6s;
}
input.cmn-toggle-round-flat + label:before, input.cmn-toggle-round-flat + label:after {
  display: block;
  position: absolute;
  content: "";
}
input.cmn-toggle-round-flat + label:before {
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background-color: #d8d8d8;
  border: 1px solid #00436f;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  -ms-border-radius: 13px;
  -o-border-radius: 13px;
  border-radius: 13px;
  -webkit-transition: background 0.6s;
  -moz-transition: background 0.6s;
  -o-transition: background 0.6s;
  transition: background 0.6s;
}
input.cmn-toggle-round-flat + label:after {
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 12px;
  background-color: white;
  border: 1px solid #00436f;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  -ms-border-radius: 13px;
  -o-border-radius: 13x;
  border-radius: 13px;
  -webkit-transition: margin 0.4s, background 0.6s;
  -moz-transition: margin 0.4s, background 0.6s;
  -o-transition: margin 0.4s, background 0.6s;
  transition: margin 0.4s, background 0.6s;
}
input.cmn-toggle-round-flat:checked + label:before{
  background-color: #00436f;
}
input.cmn-toggle-round-flat:checked + label:after {
  margin-left: 13px;
}

/*for grayed out*/
input.cmn-toggle-round-flat-grayedout + label:before, input.cmn-toggle-round-flat-grayedout + label:after {
  display: block;
  position: absolute;
  content: "";
}
input.cmn-toggle-round-flat-grayedout + label:before {
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background-color: #eaeaea;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  -ms-border-radius: 13px;
  -o-border-radius: 13px;
  border-radius: 13px;
  -webkit-transition: background 0.6s;
  -moz-transition: background 0.6s;
  -o-transition: background 0.6s;
  transition: background 0.6s;
}
input.cmn-toggle-round-flat-grayedout + label:after {
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 12px;
  background-color: white;
  border: 1px solid #eaeaea;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  -ms-border-radius: 13px;
  -o-border-radius: 13px;
  border-radius: 13px;
  -webkit-transition: margin 0.4s, background 0.6s;
  -moz-transition: margin 0.4s, background 0.6s;
  -o-transition: margin 0.4s, background 0.6s;
  transition: margin 0.4s, background 0.6s;
}
input.chk-toggle {
	display: none;
}

.label-chk-toggle{
    cursor: pointer;
}

input.chk-toggle:checked + .label-chk-toggle{
  font-weight: bold;
  font-family: sans-serif;
}
/*input.cmn-toggle-round-flat-grayedout:checked + label:before{
  background-color: #8ce196;
}
input.cmn-toggle-round-flat-grayedout:checked + label:after {
  margin-left: 11px;
}*/

#navlistSupplyDemand li {
	display: inline-block;
	list-style-type: none;
	padding-right: 36px;
}
/*for collapsible benefit category selection*/
.FAQ {
    vertical-align: bottom;
}
.list {
    /*display:none; */
    height:auto;
    margin:0;
    /*float: left;*/
}
.show {
    display: none;
}
.hide:target + .show {
    display: inline;
}
.hide:target {
    display: none;
}
.hide:target ~ .list {
    display:inline;
}

/*style the (+) and (-) */
.jimu-widget-simplesearchfilter.hide, .jimu-widget-simplesearchfilter.show {
	width: 20px;
	height: 20px;
	border-radius: 20px;
	font-size: 15px;
	color: #fff;
	text-shadow: 0 1px 0 #666;
    text-align: center;
	text-decoration: none;
	box-shadow: 1px 1px 0px #000;
	background: #cccbbb;
	opacity: .95;
	margin-right: 0;
	float: left;
	margin-bottom:5px;
}
.jimu-widget-simplesearchfilter.hide:hover, .jimu-widget-simplesearchfilter.show:hover {
	color: #eee;
	text-shadow: 0 0 1px #666;
	text-decoration: none;
	box-shadow: 0 0 4px #222 inset;
	opacity: 1;
	margin-bottom: 5px;
}


.header {
  text-align: center;
  z-index: 1;
}

a.esIcons {
  text-decoration: none;
}

.topicHeader {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 2px;
  padding-left: 3px;
}

.topicHeaderESB {
  background-color: #adbb9a;
}

.topicHeaderESB:hover {
  background-color: #cdd6c2;
  cursor: pointer;
}
.topicHeaderPSI {
  background-color: #bb9aad;
}

.topicHeaderPSI:hover {
  background-color: #d6c2cd;
  cursor: pointer;
}
.topicHeaderPBS {
  background-color: #9aadbb;
}

.topicHeaderPBS:hover {
  background-color: #c2cdd6;
  cursor: pointer;
}
.topicHeaderBNF {
  background-color: #aeaba2;
}

.topicHeaderBNF:hover {
  background-color: #ceccc7;
  cursor: pointer;
}

.topicTitleGray {
  color: #969696;
}

.checkbox_cell {
  width: 15px;
  height: auto;
  vertical-align: top;
  float: left;
}

.layerDiv {
  padding: 2px 3px 2px 3px;
  border-bottom: 1px solid rgb(200, 200, 200);
} 

.factsheetLink {
  text-decoration: none; 
  background-color: #197ec0; 
  color: #e0e0e0; 
  padding: 4px; 
  border-radius: 4px; 
}

.factsheetLink:hover{
  cursor: pointer;
}
.jimu-widget-filterforselect-move{
  background: url('../images/page.png');
  width: 15px;
  height: 15px;
  bottom: 0px;
  right: 0px;
  border: none;
}
.jimu-widget-filterforselect-move:hover{
  cursor: nw-resize;
}
.jimu-widget-filterforselect-move:hover .jimu-widget-filterforselect-thumb{
	background-image: url(images/page.png);
  background-color: #fff;
}
.jimu-widget-filterforselect-close{
  background: url('../images/close.png');
  width: 15px;
  height: 15px;
  bottom: 0px;
  right: 0px;
  border: none;
}
.jimu-widget-filterforselect-drag{
  height: 19px;
  bottom: 0px;
  left: 0px;
  border: none;
  background-color: #00436F;
  color: white; 
}
#butFilterInSimpleSearch {
	height: 30px;
    width: 30px;
	background: url('../images/filter.png');
	background-color: #eaf2f8;
    vertical-align: middle;
    background-size: 26px 26px;
    display: inline-block;
    margin-left: 18px;
}
.selectableLayersCheck {
    background-color: #00436f; 
    color:white; 
    border: none; 
    display: inline-block; 
    vertical-align:middle;  
    margin:0px;     
    font-family: 'Avenir Light', Verdana, Geneva, sans-serif;
    font-size: 14px;

}
.selectableLayersLabel{
    background-color: #00436f; 
    color:white; 
    border: none; 
    display: inline-block; 
    vertical-align:middle;  
    margin:0px;     
    font-family: 'Avenir Light', Verdana, Geneva, sans-serif;
    font-size: 14px;
    margin-left: 12px;
}
#closeForFilter{
    background-size:15px;
}
.seperator{
	height:2px;
	margin:0px;
}
.demoLink{
    color: #ffff99;
}
.help-btn{
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0 !important;
  background: url(../images/i_icon.png) no-repeat center center;
}