body > header{
	position: absolute;
	display: none;
	width: 100%;
}
body.showheader > header{
	display: block;	
    z-index: 1000;
}
.showheader #Application{
	padding-top: 15.7rem;
}
.grayRibbon{
	margin:0 !important;
}
.grayRibbon a.title, .grayRibbon a.title:visited, .grayRibbon a.title:hover{
	color:#212529 !important;
	text-decoration: none;
}

#Application{
	height: 100%;	
}
/*previous lines responsible for show/hide of NCI header div*/
/*@media (max-width: 952px){
	.showheader #Application {padding-top: 13.9rem;}
}*/
/* Fixes padding issue when mobile buttons appear at 800px */
@media only screen and (max-width:800px) and (min-width: 576px) {
	#dataDownloadPageButton	{display:none}
	.showheader #Application {padding-top: 16.3rem}
}
@media only screen and (max-width: 438px){
	.grayRibbon {display:none}
	.showheader #Application {padding-top: 179px;}
}
@media only screen and (max-width: 370px){
	.showheader #Application {padding-top: 13.3rem;}
}
/*style.css reduces grey header at 637*/
@media only screen and (max-width: 637px){
	.grayRibbon {display:none}
	.showheader #Application {padding-top: 12.4rem;
	}
	#MultiMapTab{display: none;}
}


/*Style for application top menu and title bar*/
.esri-ui-inner-container{
	overflow: visible;
}
.topbarDiv{	
	height:66px;
	background-color:#29596f;	
	border-bottom:1px black solid;	
	z-index: 4;	
	-webkit-transition: all .25s ease-in-out;
   -moz-transition: all .25s ease-in-out;
   -o-transition: all .25s ease-in-out;
   -ms-transition: all .25s ease-in-out;
   transition: all .25s ease-in-out;
   display: flex !important;
    justify-content: flex-start;
    align-items: center;
    width: 100vw;
    position: initial;
    margin-top: -15px !important;
    margin-left: -15px !important;
}
.esri-ui{
	/*override the ESRUI position to put the geo dropdown over the multiple maps tab*/
	position: initial !important;

	-webkit-transition: top .75s ease-in-out;
   -moz-transition: top .75s ease-in-out;
   -o-transition: top .75s ease-in-out;
   -ms-transition: top .75s ease-in-out;
   transition: top .75s ease-in-out;
}
.titlediv{
	font-size: 29.4px;	
	font-size: 2.1em;
	font-weight: 300;
	white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
	box-sizing:border-box;
	color:rgb(255, 255, 255);
	cursor:default;
	display:block;
	font-size:24px;
	font-weight:300;
	letter-spacing:normal;	
	margin-left:14px;
	min-height: 20px;
	opacity:1;
	overflow-x:hidden;
	overflow-y:hidden;
	
	text-overflow:ellipsis;
	text-size-adjust:100%;
	transition: all .2s ease-out;
	transition-delay:0s;
	transition-duration:1s;
	transition-property:opacity;
	transition-timing-function:linear;
	white-space:nowrap;
	cursor: pointer;
	line-height: 23px;
}
.tilecontent .titlediv{
	text-overflow: unset;
    overflow: visible;
    white-space: inherit;
    line-height: 18px;
    background: #29596f;
    max-height: 65px;    
    overflow: hidden;
    text-align: center;    
    font-size: 22px;
    margin:0;
    padding-top:2px;
}
.titlediv span{	
	padding: 0 5px;
	vertical-align: middle;
}
.tilecontent .titlediv span{
	padding: 0;
}
.titlediv:hover{	
	overflow: visible;
    text-overflow: unset;
    white-space: inherit;    
    line-height: 23px;
}
.titlediv:hover span{	
	background: #29596f;	
	/*white-space: nowrap;*/
}
@media only screen and (max-width: 900px){
.titlediv:hover ~ div{
		display: none;
	}
}
.arrow::before,.arrow::after{
	content:'';
	border-right: 2px solid;
	display: block;
	height: 11px;
	margin-top:-8px;
	position: absolute;
	-moz-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	left:10px;
	top: 20px;
	/*top: 50%;*/
	width: 0;	
}
.arrow::after{
	margin-top: -1px;
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);

}
.geoControlDiv, .yearControlDiv{
	padding-left: 0;
	max-width: 240px !important;
}
.geoControlDiv button, .yearControlDiv button{
	/*color:white;
	background-color: #29596f;*/

	color: #193846;
    background-color: #dddddd;
    border: 2px #29596fa6 inset;
    font-weight: bold;
    text-shadow: 1px 1px 1px #00000047;
}
.geoControlDiv label, .yearControlDiv label{
	display: none;
	margin:0;
	font-size: 13px;
	color: #29596f;
	z-index: 4;
	position: relative;
	top:-5px;	
	background: white;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}
.geoControlDiv .dropdown, .yearControlDiv .dropdown{
	/* label offset margin-top:-15px;
	margin-left:15px;*/
}
.endBarDiv{
	/*spacer div in top bar to make space for themultiple map controlbutton*/
	max-width: 55px;
	display: none;
}
/*Style for the map selection control bar and buttons*/
#MultiMapControlDiv{
	position: absolute;	
	right:5px;
	z-index: 10;		
	width: 45px;
	height: 45px;
	outline: black 1px outset;
	background: linear-gradient(transparent, #193745);
	-webkit-transition: all .25s ease-in-out;
   -moz-transition: all .25s ease-in-out;
   -o-transition: all .25s ease-in-out;
   -ms-transition: all .25s ease-in-out;
   transition: all .25s ease-in-out;
}
#MultiMapControlDiv:hover{
	background: linear-gradient(#193745,transparent);
	outline: black 2px inset;
	outline-offset: -2px;
	cursor: pointer;
}

#MultiMapControlDiv:before{
	color: white;
    content: '\2807';
    font-size: 42px;
    top: 23px;
    left: 11px;
    position: absolute;
    line-height: 0;
    text-shadow: 1px 1px 2px black;
}
.MMdropdown {
  position: relative;
  display: inline-block;
}

.MMdropdown-content {
	margin-top: 13px;
	right:0;
	color:white;
	/*opacity:0;
	visibility: hidden;*/
	display: none;
	position: absolute;
	background-color: #8a8a8a;
	background-color: #1e4150eb;
    outline: 2px #38383875 outset;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);	
	z-index: 1;
	-webkit-transition: all .75s ease-in-out;
	-moz-transition: all .75s ease-in-out;
	-o-transition: all .75s ease-in-out;
	-ms-transition: all .75s ease-in-out;
	transition: all .75s ease-in-out;
}
.MMdropdown-content.show{
	display:block;
}
.MMdropdown:hover .MMdropdown-content {
  /*opacity:1;
  visibility: visible;*/
}
.MMdropdown-content div{
	cursor: pointer;
    text-align: left;    

    padding: 0.5em 1em;
    display: block;
    border-bottom: 1px solid #85b4ca;
    background-color: #29596f;
    color: #ffffff;
    text-decoration: none;
}
.MMdropdown-content div:hover{
	background-color: #2d4956;
    color: #ffffff;
    outline: 2px outset #96969630;
    outline-offset: -2px;
    background: radial-gradient(#294451, #1d282d);
}

@media (max-width: 952px) {
	.dropdown-content{bottom: -7.29rem;}
	.showheader #MultiMapControlDiv {top: 14.8rem;}
}
.tablinks.hide, .tabcontent.hide{
	display: none !important;
}
.tablinks, .tablinksadd, .tablinkstile{
	position: relative;
	z-index: 2;
	transition-duration: .3s;
}
.tablinksadd{
	border-top: 4px white double;
}
.tablinks.active{
	background-color: #2d4956;
    background: linear-gradient(#2d4956,#18333f);
    border-left: 10px #28a745 solid;
    z-index: 1;    
}
.tablinks:after{
	content: "\e65f";
	font-family: "CalciteWebCoreIcons" !important;
	padding: 0 10px;
	position: absolute;
	right:5px;
}
.tablinks.active:after{
	right:40px;
}
.tablinksadd:after{
	content: "\e63d";
	font-family: "CalciteWebCoreIcons"  !important;
	padding: 0 10px;
	position: absolute;
	right:5px;
}
.tablinkstile:after{
	content: "\e634";
	font-family: "CalciteWebCoreIcons"  !important;
	padding: 0 10px;
	position: absolute;
	right: 5px !important;
}
#mapTabButtons div.buttonContainer{
	padding: 0;
	position: relative;
}
.buttonContainer div.removebutton{
	display: none;
	opacity: 0;
	position: absolute;
    z-index: 1;
    top: 2px;
    right: 2px;

    border-radius: 5px;
    width: 34px;
    height: 34px;

    background-color: #770404;
    background: linear-gradient(180deg, #770404, #5d0404, #400101);
    border: 2px #0000007d solid;
    box-shadow: inset 0 -1em 2em rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.45), 0 5px 10px rgba(0,0,0,.7);

    transition: .5s all ease-out;
    font-family: "CalciteWebCoreIcons"  !important;
}
.tablinks.active + div.removebutton{
	display: block;
	opacity: 1;
}
div.removebutton a{
	position: absolute;
    top: 6px;
    left: 9px;
}
.buttonContainer div.removebutton:hover{
	outline: transparent;    
    background: #dc3545;
    border: 2px #770404 solid;
}
.buttonContainer div.removebutton:after {
    
	font-family: "CalciteWebCoreIcons"  !important;	
	position: absolute;
	right: 9px;	    
    top: 7px;
}
.buttonContainer:hover .tablinks:not(.active){
	margin-left: -44px;
    transition-delay: .7s;
    transition-property: margin;
    transition-duration: .3s;
    width: 160px;

}
.buttonContainer:hover .tablinks:not(.active):after{
	/*margin-right:-35px !important;
	transition-property: margin;
    transition-duration: .5s;
    transition-delay: 1s;
    z-index: 1;*/
}
.buttonContainer:hover .tablinks:not(.active) + div.removebutton {
    display: block;
    opacity: 1;
    transition-delay: .6s;
    transition-property: opacity;
    transition-duration: .25s;
}
#MultiMapTab > a:after{
	padding: 0 5px;
	content: "\e642";
	font-family: "CalciteWebCoreIcons"  !important;	
}
#showheadertab a:before{
	padding: 0 5px;
	content: "\e615";
	font-family: "CalciteWebCoreIcons"  !important;	
}
.showheader #showheadertab a:before{
	padding: 0 5px;
	content: "\e614";
	font-family: "CalciteWebCoreIcons"  !important;	
}

/*common styles for show/hide header tabs*/
.headertabs{
    position: absolute;    
    z-index: 6;
    overflow: visible;        
    line-height: 1.2em;
    text-shadow: 1px 1px 2px black;
    border-radius: 20px;
    transition: bottom .6s ease, top .6s ease, opacity .3s ease-in .2s, height .5s ease .5s;
    display: inline-flex;
    /*position over map*/    
    right: 70px;
    top: 65px;
}
.headertabs.center{
	right: 50%;    
    transform: translateX(50%);
    z-index: 6;
}
.headertabs.hide{
	display: none;
}
.headertabs > div{
	background: #193846;
    border: 1px black solid;
    border-radius: 0 0 20px 20px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    box-shadow: 2px 2px 3px #000000a6;
}
.headertabs > div:hover{	
   	background: #294451;
    background: radial-gradient(#294451, #1d282d);
}
.headertabs > div a{
	color:white;
}
.headertabs > div a:hover{
	text-decoration: none;
}
.appInner{
	position: relative;
	height: 100%;	
	overflow: auto;
}