/*CSS for the Animated Historical Cancer Atlas
this app features a map created by esri js api and uses a time slider to visualize data over years
legend and histogram widgets are employed in a custom layout for sidebar and bottom bar placement
the app uses datatables to expose the underlying data in text format
*/

body.geospatial{
	/*needs this to avoid double vertical scroll*/
	overflow-x: initial
}
.hidden{
	display:none;
}	
    
	/*Page main container properties*/
    html,
    body {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;		
		min-width:375px;
    }	
    #viewDiv {
		position: absolute;
        right: 0;
        left: 0;
        top: 75px;
        bottom: 0;		
    }
	#tableDiv{
		font-size:1rem;		
		padding: .4rem;
	}
	#mapTitleContainer{
		color: white;
		font-size: 2em;
		position: absolute;
		top: 0;
		left: 50%;
		text-align: center;
		background: #0000005c;
		border-radius: 0 0 5px 5px;
		transform: translate(-50%, 0);
		padding: 0 15px 5px 15px;    
		font-family: 'Merriweather';
		text-shadow: 1px -1px 0 BLACK, -1px -1px 0 BLACK, -1px 1px 0 BLACK, 1px 1px 0 BLACK, 0 0 4px BLACK, 0 0 4px BLACK, 1px 0 4px BLACK;
		transition: font-size 2s;
	}	
	#InfoContainer{
        padding: 10px;
        text-align: center; 
	display:flex;	
		flex-wrap:wrap;
		align-items: center;
		justify-content: center;		
    }
	/*hide legend when inside map view*/
	#LegendContainer{
		display:none;
	}
	#SideBottom-Bar #LegendContainer{
		display:block;
	}
	/*bottombar legend & Histogram default small width display*/
	#SideBottom-Bar{
		display: flex;
		align-items: center;
		justify-content: space-evenly;		
		position:relative;
		background:white;
		flex-direction: column;
	}
	.clickable{
		cursor:pointer;
		text-decoration:underline;
		font-weight:bold;
		color:rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
	}
		
	#cancerSelectDiv{
		border: 3px #5c5c5e solid;
		border-radius: 5px;
		font-weight: bold;
		margin: 7px 0;
	}		
	#cancerSelect{
		width: 100%;
		max-width: 400px;
	}
	#animateSpeedDiv{
		margin-top:10px;
		margin-bottom:17px;
	}
	#animateSpeedContainer{
	  width:200px;
	  height: auto;	  
	  padding: 10px;
      text-align: center;   
	}
	#speedlabels{
		display: inline-flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;		
	}
	#speedlabels div{
		margin: 0;
	}
	#playControlContainer{		
		color:white;		
		background: #0000005c;
		text-align: center;
		outline: 2px white solid;
		cursor: pointer;
		border-radius: 5px;
		width: 90px;
		padding-bottom: 10px;
	}
	#playControlContainer:hover, #playControlContainer:focus{
		outline: 2px #028cd1 solid;
	}	
	#iteratebutton{
		color:white;
	}
	#iteratebuttonLabel{
		margin:auto;	
		padding: 5px;
		display:block;
	}
	
	/*save map image widget properties*/
	#mapImageReplace{
		position: absolute;
	}
	#previewArea{    
		background: white;
		position: absolute;    
		max-height: 39rem;
		overflow: auto;
		min-height: 200px;
		z-index: 999;
		padding: 20px;
	}	
	#saveMapCancel{    
		position: absolute;
		top:20px;
		right:20px;
	}
	#saveMapPreview{
		max-width: 300px;
		box-shadow: 2px 2px 4px #000000a3, -1px -1px 4px #9f9f9f94;
		margin-top: 6px;    
	}	
	#saveMapPreview:hover, #saveMapPreview:focus{
		border: 2px #4186b8 dashed;
	}
	
	/*play pause button creation*/
	.play {
		border: 0;
		background: transparent;
		box-sizing: border-box;
		width: 0;
		height: 40px;
		border-color: transparent transparent transparent white;
		transition: 100ms all ease;
		cursor: pointer;
		border-style: solid;
		border-width: 20px 0 20px 35px;
		margin-right:-10px;
	}
	.play.pause {
		border-style: double;
		border-width: 0px 0 0px 30px;
	}
	.play:hover, .play:focus{
		border-color: transparent transparent transparent #028cd1;
	}	
	
	/*Toggle and Datatable button style customization*/
	button.dockToggle {
		display:none;
		position: absolute;
		bottom: 1px;
		right: 1px;
		border: white  1px solid;
		background: white;
		color:#5c5c5e;    
		border-radius: 5px;
	}
	button.dockToggle:hover{
		color: #29596f;    
		background: #dddddd;
		border: #5f5e5e 1px solid;
	}
	button.dockToggle svg{
		transform:rotate(180deg);	
	}
	#TableLayout button.dockToggle{
		bottom:unset;
		top:19px;
		z-index:20;	
	}
	div.dt-buttons>.dt-button, div.dt-buttons>div.dt-button-split .dt-button, #dt-search-0{
		border: #5c5c5e 3px solid;
		background: white;
		color: #5c5c5e;
		border-radius: 5px;
		font-weight: bold;
	}
	div.dt-buttons>.dt-button:hover, div.dt-buttons>.dt-button:focus, #dt-search-0:focus{
		color:#29596f;
		border: #29596f 3px solid !important;
		background:#dddddd !important;
	}  
	/*Time slider customization*/
    #sliderContainer {
        position: absolute;
        top: 0;
        height: 75px;
        width: 100%;
        text-align: center;
    }
	#sliderDiv {
        height: 75px;
    }
	.esri-slider--horizontal .esri-slider__track{
		height:15px;
	}	
	#sliderDiv.playing .esri-slider__track{
		background: #028cd1;
	}
	#sliderDiv.playing .esri-slider__segment-0{
		background: #00000059;		
	}
	.esri-slider__thumb{
	   height:28px;
	}
	.esri-slider__thumb:hover{
		height:32px;
	}
	/*Histogram overrides*/
	.labels {
        padding: 5px;
    }
	.esri-histogram__label::before{
		content:"Med"
	}
	.esri-histogram__average-symbol{
		/*display:none;*/
	}
	#histogramChart{
		min-height:150px;		
		background:url('/i/loading.gif') no-repeat center;		
	}
	.esri-histogram__content{
		background:white;
	}
	.popupyear{
		color:#006cad;
	}
	
	/*ESRI legend and popup customization*/
	/*popup flickers on year change if height not set*/
	.esri-features__container.esri-features__content-container{
		min-height: 275px;
	}
	.esri-legend__service{
		background: white;
	}
	.esri-popup__main-container{
		max-height: 400px !important;
	}
	.esri-feature__content-element{
		margin-bottom:0;
	}
	.esri-feature-media__item-navigation{
		justify-content:center;
	}	
	.esri-expand__popover-content .esri-widget--panel{
		width:auto;
	}
	.esri-legend__service h3{
		max-width: 200px;
		text-align: center;
		padding: 10px;
		font-size: 1rem;
	}
	.esri-legend__layer-table--size-ramp .esri-legend__layer-row{
		display:flex;
		justify-content: flex-start;
		padding-left: 20px;
	}
	.esri-legend__layer-cell--info
	{
		font-size:1rem;
	}
	.esri-feature-media__chart.esri-feature-media__chart--rendered{
		height:120px !important;
	}
	.esri-legend__layer-caption{
		display:none;
	}
	.esri-widget__heading.esri-features__heading{
		padding:0;
	}
	.esri-widget h2{
		padding:0;
	}
	#MapWindow{
		min-height:500px;
	}
	#areaInfo{
		flex: 0 1 100%;
	}
	
	
	/*styles to move sidebottom bar or datatable horizontal on larger screens*/
@media screen and (min-width: 1267px) {
	/*table stlyes*/
	#LayoutDiv.landscape{
		display: flex;
		flex-wrap: wrap;
	}
	#LayoutDiv.landscape #MapLayout{
		width:60%;
		margin-right:5px;
	}
	#LayoutDiv.landscape #TableLayout{
		width:38%;
		margin-left:5px;
	}	
	button.dockToggle{
		display:block;
	}
	#LayoutDiv:not(.landscape) div.dt-layout-end{
		margin-right:60px;
	}
	#LayoutDiv.landscape #TableLayout button.dockToggle{
	bottom:1px;
	top:unset;
	right:unset;
	left:1px;
	z-index:20;	
	}	
	/*sidebar styles when applied*/
	#SideBottom-Bar button{
		display:block;
	}	
	#MapLayout.sidebar{
		display:flex;
		background:#979797;
	}
	#MapLayout.sidebar button.dockToggle svg, #LayoutDiv.landscape button.dockToggle svg{
		transform:rotate(270deg);
	}
	#MapLayout.sidebar #MapWindow{
		width:100%
	}
	#MapLayout.sidebar #SideBottom-Bar{
		max-width:20%;
		min-width:200px;
	}
	#LayoutDiv.landscape #MapLayout.sidebar #cancerSelect{
		max-width:192px;
	}
	/*bottombar legend default normal width display*/
	#InfoContainer{
		display: flex;   
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;	
		width:100%;
	}
	
	#HistogramContainer{
		max-width: 900px;		
		width:65%;
	}
	#MapLayout.sidebar #HistogramContainer{
		width:100%;
	}
	.esri-legend__layer-table--size-ramp .esri-legend__layer-row{	
		justify-content: center;
		display:flex
		padding-left:0;
	}
	.esri-legend__service h3{
		max-width:unset;
	}
	#MapLayout:not(.sidebar) #histogram {
		height:228px;
	}
	#MapWindow{
		min-height:776px;
	}

}/*end wide screen sidebar layout*/
	
/*max widget width in fullscreen mode*/
	.esri-expand__content-container #InfoContainer{
		max-width:350px;
	}
	.esri-expand__content-container .esri-legend{
		max-width:225px;
	}
	
/*Larger max-width than default Template container for wide screens*/
@media screen and (min-width: 1567px) {
	#MapWindow{
		min-height:733px;
	}
	.map-container{
		width: 95%;
		max-width: 1400px;
		max-width: 85em;
	}
}
@media screen and (min-width: 2067px) {
	#MapWindow{
		min-height:715px;
	}
	.map-container{
		width: 95%;
		max-width: 1600px;
		max-width: 100em;
	}
}

/*smaller title text for small screens*/
@media screen and (max-width: 900px) {	
	#mapTitleContainer{
		font-size:1.7em;
	}
}
@media screen and (max-width: 800px) {	
	#mapTitleContainer{
		font-size:1.6em;
	}
}
@media screen and (max-width: 726px) {	
	#mapTitleContainer{
		font-size:1.4em;
	}
}
@media screen and (max-width: 645px) {	
	#mapTitleContainer{
		font-size:1.3em;
	}
}
@media screen and (max-width: 430px) {	
	#mapTitleContainer{
		font-size:1.1em;
	}
}