.schemeButtons{
	margin:auto;
}
.schemeButtons button{
	width: 25%;
	border:0;
	background: #00000042;
}
.schemeButtons button:hover{
	background: #FFFFFF42;
	outline: 2px grey inset;
	outline-offset: -2px;
}

/*style to TRY and get the legend to display under other controls !!FAILS!!!*/
.esri-ui-bottom-right, .esri-expand__content--expanded{
	z-index: 3;
}
.esri-legend__layer-caption{
	/*display:none*/
}
.esri-ui-top-right{
	z-index: 7;	
	margin-top: 60px;
}
.dropdown-menu.show{
	z-index: 4;
}
/*Override style.css ims theme*/
html, body{	    
    font-family: 'Open Sans',sans-serif;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: #585a5e;	
    min-width: 300px !important;
}

.filterControl{
	top:38px;
	position: absolute;;
}
.rendererControlsDiv{
	background: #193846;
    border: 1px black solid;
    border-radius: 20px 20px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    box-shadow: 2px 2px 3px #000000a6;
    color:white;
}
.controls, .esri-legend{
	background-color: #2c2c2ca8;
    outline: 2px #202020bf solid;
    padding-bottom: 8px;    
}
.controls label, .esri-legend, .esri-legend h3{
	color: white !important;
    text-shadow: black 1px 1px 2px, black 2px 2px 2px;
}
.esri-legend__layer .esri-legend__layer-table:first-child{
	display: none;
}
.esri-ui-corner .esri-expand .esri-widget--panel,
.esri-ui-corner .esri-expand .esri_widget--panel{
	width: auto;
}
.legendDiv{
	background-color: #303031;
	background-color: #2c2c2ca8;
	outline: 2px #202020 solid;    
    outline: 2px #202020bf solid;    
    width:250px;
    color:white;
    text-align: center;    
}
.legendDiv .histTitle{	
	color:white;	
	background-color: #161616;
	background-color: #0000008c;
	cursor: pointer;
}
.legendDiv .histSubTitle{	
	padding:5px;	
}
.histogram{	
	min-height:0;
}
.esri-histogram__svg{
	overflow:visible !important;
}
.horizontalLabels{
	color:white;	
	background-color: #161616;
	background-color: #0000008c;
	height: 16px;
}
.esri-slider{
	width: 300px;
	background-color: transparent;
	color: white !important;
}
.esri-slider__content{
	margin:0 !important;
}
.esri-histogram{
	background: transparent;
}
.esri-histogram__label{
	fill:white;
	text-shadow:1px 1px 1px white;
}


/*Container styles*/
#MainContainer{
	color:#f1f1f1;
	text-shadow:0 1px 0 #343a40;
	height: 100%;
	background-color: #585a5e;
}
.controlDiv{
	min-width:240px;
}

.esri-popup__header-title{
	word-break: break-word;
}
/*styles for data selection box*/
.hiddenDiv{
	display: none;
}
.dataControlDiv{
	background-color: #f5f5f5;
	padding:10px;	
}
.buttonDiv{
	padding-bottom: 3px;
	width:100%;
	text-align:center;
}

/*map tab styles*/
/* Style the tab */
.tab {  
  border: 1px solid #5d5d5d;
}

/* Style the tab content */
.tabcontent {  
  display: none;      
  border-top: none;
  position: relative;
}
.tabcontent.active{
	display:block;
	height: 100%;
}
/*different tabcontent display types*/
#MainContainer{
	overflow-y: hidden;
}
#MainContainer.listcontent{
	display: block;
}
#MainContainer.tilecontent{
	display: inline-block;
	display: grid;
	grid-template-columns:repeat(auto-fit,50%);
	width: 100%;
	overflow: visible;
}
.listcontent .tabcontent{
	display:block;	
}
.tilecontent .tabcontent{
	display: inline-block;
	/*width: 50%;		
	height: 100%;*/
}
.tilecontent .toprow,.tilecontent .chartdiv{
	display: none;
}
.chartdiv, .chartButton{
	display: none !important;
}

.tilecontent .akViewDiv{
	width:150px;
	height:125px;
}
.tilecontent .hiViewDiv{
	width:125px;
	height:125px;
}
.tilecontent .topbarDiv{
	width: 50vw;
}
/*items within each map tab MAP, CHART, TABLE*/
.tabcontent .contentitem{
	height:100%;
	display: none;
}
.tilecontent .loadingDiv{
	margin-left: -50px;
    margin-top: -50px;
}
.tabcontent .contentitem.active{
	display: flex;
}
.viewdiv{
	height: 100%;
	min-height:400px;
	padding:0;
}
/*specific styles for divs inside tabcontent*/

.mapitemtab{
	position: absolute;
	left:-65px;
	height: 130px;
}
.mapitemtab button{
	float:none;
	display: block;
}
/*styles for to move expand over button*/
.esri-ui-bottom-left .esri-expand__counent, .esri-ui-bottom-right .esri-expand__content {
	bottom:50px;	
}
.esri-ui-bottom-right .esri-expand__content{	
	right:-10px;
}
.esri-ui-bottom-left .esri-expand__content{	
	right:-10px;
}

/*synchWidget style*/
.ims-icon-synching:before{
	content: "\e61a";
}
.ims-icon-notsynching:before{
	content: "\e647";
}
.histogramLegend{
	padding: 5px;
	width: 260px !important;
	overflow: visible !important;
	display: none;
}
.histogramLegend.hide{
	display: none !important;
}
.histogramLegend .esri-legend__layer-caption{
	display:none;
}
.histogramLegend.hidestdLegend .esri-legend__service{
	display: none;
}
.showhistogramLegend{
    background: transparent;
    outline: none;
    box-shadow: none !important;
    display: block;
    }
.showhistogramLegend .histogram{
	min-height: 250px;	
}
.esri-view-height-xsmall .esri-ui-corner .showhistogramLegend .histogram{
	min-height: 140px;
}
.histogram rect:hover{
	outline: 2px inset #29596f;
	outline: 2px inset #29596f78;    
    opacity: 0.7;
    cursor: pointer;
}
.layerViewEffect rect{	
	opacity: .5;
}
.layerViewEffect rect.highlight{	
	opacity: 1;
	outline: 2px outset #0071ea;
}
.showhistogramLegend.minLegend .histogram{
	min-height: 25px !important;
	height: 25px;
}
/*popup styles*/
.esri-ui div.esri-popup {
	z-index: 6;
}
.CIbox{
	width: 250px;
    background: #233a45;
    height: 25px;
    margin: 20px auto;
    position: relative;
    color: white;
    text-align: right;
    outline: 2px #29596f inset;
    outline-offset: 1px;
}
.CIbox span{
	position: absolute;
    top: 5px;    
    text-align: center;
}
.CIleft{ 	
 	height: 25px;
    position: relative;
    text-align: left;
    width: 50%;
}
.CImiddle{
	width: 40px;
    border-radius: 40px;
    height: 40px;
    background: #ff0000;
    position: absolute;
    top: -7px;
    right: -20px;
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    text-shadow: 2px 2px 1px black;
    /*center overflowing text*/
    display: flex;
    justify-content: center;
}
.CImiddle span{
	top: 10px;
	position: relative;
	display: inherit;
}

.esri-print__container{
	width: 50vw;
    min-width: 250px;
    max-width: 350px;
}

div.esri-attribution__sources.esri-interactive:after{
	content: " For more information see: gis.cancer.gov/canceratlas";
}

@media only screen and (max-width: 637px) {
	#MainContainer.tilecontent{
		display: inline-block;;
	}
	.tilecontent .topbarDiv{
		width: 100vw;
	}

}