/* see index.html for html and body */
	
	::placeholder {
		color: var(--dash_placeholder);
	}
	
	/* =====  start interface ===== */	
	
	.unselectable {
	   user-select: none;
	}
	
	/* .dash{ } */
	
	#dash_container{
		background-color: var(--dash_bg);
		color: var(--dash_txt);
		min-height:10rem;
		white-space:nowrap;
	}
	
	#subdash_container{
		padding-top:0.2rem;
		padding-bottom:0.2rem;
		line-height:2rem;
		padding-left: 1rem;
		background-color: white;
	}
	
	#search_link{ margin-left:1rem;  color: var(--codared); cursor: pointer;}  /* advanced search codared */
	
	#search_link:hover { color:black; }
	
	.holder{ display:none; } /* class is used as query selector */
	
	#map_div{ height: 100%; }
	
	/* notification */
	#notice{
		/* font-size:1rem; */
		color:white;
		background-color:#5C5D5F;
		border: 1px solid silver;
		border-radius:10px;
		padding-right:0.5rem;   /* top | right | bottom | left */
		text-align: left;
		width:auto;
		max-width:400px;
		position:absolute;
		top: 25%;
		left: 15%;
	}


/*======= end global ======= */
	
	.pField{  /* style div as a text input */
		display:inline-block;
		min-width:6.5rem;
		text-align:center;
		/* https://developer.mozilla.org/en-US/docs/Web/CSS/appearance */
		background-color: var(--dash_obj_fill);
		color: var(--dash_txt);
		border: var(--dash_obj_border);
		cursor: text;
		border-radius: 0.3rem; /*.4*/
		margin-right:0.4rem;
		margin-top: 0.5rem;
		padding: 0.2rem 0.3rem;    /* top right bottom left */
	}
	
	.pField:hover{
		background-color:grey;
	}
	
	.selectall {
	   -moz-user-select: -moz-all;
	   -khtml-user-select: all;
	   -webkit-user-select: text;  /* essential for ios all browsers otherwise field does not react to touch */
	   -ms-user-select: all;
	   user-select: all;
	}


/* ======   extras  */
	
	#landing_pad{
		margin-left:2rem;
		margin-right:1rem;
		margin-top:0rem;
	}
	
	.hamburger{
		font-size:1.6rem;
		color: var(--hamburger_color);
		cursor:default;
		margin-left:1rem;
	}
		
	.hamburger:hover{
		color: var(--hamburger_sel);;
		cursor:default;
	}
	
	.dialog{
		position: absolute;
		top: 130px;
		left: 220px;
		width: 300px;
		height: 80px;
		background-color:white;
		border: 1px solid #73AD21;
	}

	

/* =====  the top user control panel ===== */

	
	.inset_panel{
		margin-top:0rem;
		padding:1rem;
		padding_top:0rem;
	}
	
	.adv_add{
		cursor: default;
		color: black;
	}
	
	.adv_add:hover{
		color:green;
	}
	
	#user_options{
		/* width:100vw; */
		margin:0.5rem;
		padding:0.5rem;
		color: var(--user_opts_txt);
		background-color: var(--user_opts_bg);
	}
	
	#user_options_closer{
		cursor:pointer;
		color: var(--hamburger_sel);
	}

/* =====  drop down callsign lists ===== */

[contenteditable] { /* required for caret to appear in Safari mobile */
	-webkit-user-select: text;
	user-select: text;
}
	
/* add the data-placeholder wvalue as a hint only if we are empty */
[contenteditable]:empty:before {
	content: attr(data-placeholder);
	color: var(--dash_placeholder);
}

.pMenu{
	display:inline-block;
	min-width:6rem;
	text-align:center;
	background-color: var(--dash_obj_fill);
	color: var(--dash_obj_txt);
	border: var(--dash_obj_border);

	border-radius: 0.3rem;
	margin-right:0.5rem;
	padding:0.25rem;
	padding-left:0.5rem;
	padding-right:0.5rem;
}

.pMenu:hover{
	background-color:grey;
}

.menubody{
	position:absolute;
	width:auto;
	border:0.1rem solid silver;
	background-color:white;
}

.menuitem{
	cursor:default;
	background-clip: border-box;  /* so that the hover extends to the edge of the menubody container */
	padding: 0.1rem 1rem 0.1rem 0.6rem;   /* top right bottom left */
	margin: 0.1rem 0rem 0.1rem 0rem;
}

.menuitem:hover{  /* works on non-rx tx drop down menus */
	background-color:#e4e4e4;
	color:black;
}

.closeX{
	background-color:white;
}

.closeX:hover{
	background-color:#e4e4e4;
}

/* style div as a check box */
.pBox{
	display:inline-block;
	width:1rem;
	height:1rem;
	background-color: var(--dash_bg);
	border:var(--dash_obj_border);
	border-radius: 0.2rem;
	padding: 0.2rem 0.2rem;  /* top right bottom left */
	vertical-align:middle;
	margin-right:0.4rem;
	margin-bottom:0.2rem;

	background-image: none;
	background-size: 0.7rem;
	background-repeat: no-repeat;
	background-position: center;
}

.pLabel{
	display: inline-block;
}

.pButton{  /* search button */
	cursor:default;
	display:inline-block;
	background-color: var(--dash_srch_bg);
	color: var(--dash_srch_colour);
	border: var(--dash_srch_border);
	/* box-shadow: 0.1rem 0.1rem 0.1rem 0 lightgray; */
	border-radius: 0.5rem;
	padding: 0.3rem 0.8rem 0.3rem 0.8rem;  /* top right bottom left */
	vertical-align:middle;
	margin-right:0.5rem;
}

#freeform_query_input{
	color:green;
	border:1px solid #497DBB; 
	display:block;
	margin-top:0.3rem;
	margin-bottom:0.8rem;
	width:70rem;
	padding-left:0.5rem;
}
	

/* =====  drop down callsign lists ===== */

	.menu_table{
		padding: 0.2rem;
		background-color: dimgrey;
		color:white;
		border: 0.1rem solid silver;
		cursor: default;
	}
	
	.menu_table td:nth-child(2){  /* rx and tx drop downs */
		color: var(--dash_srch_colour);  /* was red */
	}
	
	.menu_table td:hover{
		background-color:#efefef;
		color:black;
	}

/* =====  the spots table ===== */

	#table_comment{ /* div above table instead the table caption */
		font-size:smaller;
		background-color:white;
		text-align:left;
		margin-left:2rem;
	}

	#marker_spots{ /* used by map.js for marker spots display */
		overflow-x: auto; margin-left:0.5rem; padding-bottom:0.5rem;
	}

	/* https://stackoverflow.com/questions/21168521/table-fixed-header-and-scrollable-body */
	.table_div{
		overflow-y: auto;
		max-height: 90vh;
	}
	
	.table_div thead th {
		background-color:white;
		position: -webkit-sticky;
		position: sticky;
		top: -5px;  /* removes 5px of the thead */
	}

	.default_table{  /*assigned by table-object*/
		display:block;
		white-space: nowrap;
		width: 100%;
		border-collapse: separate;
		border-spacing: 1.5rem .02rem;  /* horizontal vertical */
	}
	
	.table_head{ }

	.table_body{ background-color:white; }
		
	.spots_table_row:hover{ outline: 1px solid brown; }
	
	.spots_header_cell{
		width:auto;
		color: var(--codadarkgreen);
		padding-top:0.5rem;
		padding-bottom:0.5rem;
		cursor:pointer;
		text-align:left;
	}
	
	.spots_header_cell:hover{ background-color:#e7e7e7; }
	
	.spots_table_cells{ padding-left:0; white-space: nowrap; }

	.cCall{padding-left:0;} /* used as id for search inside table */
	

/* =====  map elements ===== */	

	.marker_spot_label:first-child{
		background-color: #9d9d9d;
		color:white;
		font-family:verdana, tahoma, sans-serif;
		font-weight:bold;
		text-align:center;
	}
	
	.long_path_link{ color:#b96400; padding-bottom:0.2rem; }
	
	.long_path_link:hover{ color:blue; }
	
	.thin_hr{ padding: 0; border: 0; height: 0; border-top: 0.1rem solid rgba(0, 0, 0, 0.1); }
	
	

/* =====  custom map controls ===== */	
	
	#customMapControls{

	}
	
	#night_button{
		color: white;
		background-color: grey;
	}
	
	.slider{
		vertical-align: middle; width:20rem;
	}


/* =====  the map legend ===== */

	#legend_button{
		min-width:6rem;
		margin-left:0.3rem;
		background-color:grey;
		border: none;
	}

	#spot_legend{
		font-size:0.8em;
		background-color:gainsboro;
		text-align: left;
		width:auto;
		position:absolute;
		bottom:1rem; left:1rem;
	}
	
	.legend_body{
		 display:block; border-top:0.1rem solid silver; padding:0.5rem; padding-top:0.3rem; cursor:default;
	}
	
	.legend_line_col1{
		width:6.5rem; display:inline-block; text-align:left; padding-left:0.3rem; 
	}
	
	.legend_line_col3{
		width:auto; margin-left:0.1rem; display:inline-block; text-align:right; padding-right:0.5rem;
	}
	
	.legend_line_call{
		min-width:5.5rem;
		/* border-right: 1px black solid;  testing width */
		margin-left:0.5rem;
		display:inline-block;
		white-space: nowrap;
		cursor:pointer;
	}
	
	.legend_line_call:hover{
		background-color:white;
	}
	
	.legend_footer{
		background-color:#dcdcdc;
		text-align:center;
		padding:0.5rem;
		color:red;
		cursor: pointer;
	}
	
	#band_count_rollover:hover{
		background-color: white;
	}


/* =====  charts =====  */	

	.chart_div{
		width:100%; height:auto; margin-top:1rem;
	}
	
	.chart_link{
		color:green; cursor:pointer;
	}
	
	.chart_link:hover{
		color:orange;
	}
	
	.vbars_div{
		width:calc(50vw - 0.5rem); white-space: nowrap;
	}
	
	.vbar{    /* distribution vertical bar chart */
		display:inline-block;
		height:10px;  /*2rem */
		/* width:0.36rem; */
		width:1%;
		background-color:silver; /* #c7e0b7; */
		opacity: 1;
	}
	
	.vbar:hover{
		opacity: 0.4;
	}
	
	/* compass */
	
	#svg{
		max-width:85rem;
		max-height:85rem;
	}
	
	.call_text{
		text-transform: uppercase;
		fill: #5E5BFF;
		font-size: 1.5rem;
		font-weight: bold;
		font-family: Helvetica,Verdana,sans-serif;
	}
	
	.bearing_text{
		fill: silver;
		stroke: none;
		font-size: 1.5rem;
		font-family: Helvetica,Verdana,sans-serif;
	}
	
	.rings_text{
		fill: grey;
		stroke: none;
		font-size: 1rem;
		font-family: Helvetica,sans-serif,Verdana;
	}
	
	.outer_focus:hover{
		opacity:0.2;
	}
	
	.dot_grad{
		
	}


/* ===== navigation tabs ===== */

	.tab {
		cursor:default;
		display:inline-block;
		width:6rem;
		font-size:1.2rem;  /* must specify a size becuse the div container is set to zero to get rid of white space */
		border-right:1px solid #777A7F;
		text-align:center;
		vertical-align: top;
		color: var(--tab_colour);
	}
	
	.tab:hover{
		color: var(--tab_sel);
	}
	
/* ====== faq page ===== */

	.infoSections{
		font-weight:bold;
	}

	.infoHead{
		color: var(--codabrightblue);
		cursor:default;
		margin-top:0.7rem;
		margin-bottom:0.4rem;
	}
	
	.infoHead:hover{
		color: var(--codared);
	}
		
	.infoPara{
		color: black;
		margin-left:1rem;
		line-height:150%;
		margin-bottom:2rem;
	}
	
/* ====== stats ===== */

	#stats_button{
		width:8rem;
		color:grey;
	}

	.spotLineTitle{
		display: inline-block;
		margin-top:1rem;
		color:brown;
	}

	.spotLine{
		display: inline-block;
		font-size:smaller;
		margin-left: 2rem;
		margin-top:0.4rem;
		color:dimgrey;
		cursor:default;
	}
	
	.spotLine:hover{
		color:blue;
	}
	
	.spotDetailTD{
		color: #4D9084;  /* see greencolour variable in stat.js */
		text-align:right;
		padding-right:1rem;
	}
	
	 /* callsign */
	#stats_user_table tr td:nth-child(2) { 
    	width: 11rem;
    	text-align: center;
    	color:black;
    	cursor:pointer;
	}
	
	#stats_user_table tr td:nth-child(2):hover{
		color:red;
	}
	
	   /* radio button */
	#stats_user_table tr td:nth-child(1) {
		width: 10rem;
    	text-align: center;
	}

/* ====== mxtra infowin  ===== */

	.xtra{
		color:brown; cursor:default;
	}
	
	.xtra:hover{
		color:green;
	}