/* table css */

.tr_element{ display:table-row; }
.td_element{ display:table-cell; }


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

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

.menu_table td:hover{
	background-color:#efefef;
	color:black;
}
	
	/* see index.html for html and body */
	
	/* css-minify -f jj.css */
	
	
	/* 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%;
	}
	
	#notice_two{
		/* 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:600px;
		position:absolute;
		top: 20%;
		left: 10%;
	}
	
/* ====  prefs and contents === */

	.sub_search { /* used for prefs and saved searches */
		margin-top:1rem;
		padding-bottom:2rem;
		padding-left:2rem;
		border-top:1px solid #7B7C7F;
		width:fit-content;
		min-width:440px;
		height:auto;
		overflow-y: scroll;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none;  /* IE 10+ */
		background-color: var(--dashbg);
	}
		
	.sub_search::-webkit-scrollbar { /* WebKit */
		width: 0;
	}

	#prefs_div{}
	#prefs_table_top{ color:silver; display:table; }
	#prefs_table_top .td_element { padding-left:1rem; padding-right:1rem; }
	#prefs_table_top label{ color:var(--tabsel); }
	#prefs_table_bottom{ color: silver; }
	#prefs_table_bottom label{ color:var(--tabsel); }
	
	#spark_table{ color:silver; display:table; }
	#spark_table .td_element { padding-left:1rem; padding-right:1rem; }
	#spark_table label{ color:var(--tabsel); }
	
	.prefbutton{ /* matches searchbutton in index.html but with smaller font */
		cursor: default;
		display:inline-block;
		min-width:10rem;
		text-align:center;
		border: 1px solid var(--cntrlbdr);
		background-color: var(--cntrlfill);
		color: var(--cntrltxt);
		border: 1px solid var(--cntrlbdr);
		cursor: default;
		border-radius: 0.3rem; /*.4*/
		margin-right:0.5rem;
		margin-top: 0.5rem;
		padding: 0.2rem 0.3rem;    /* top right bottom left */
		transition: 0.2s;
		font-size:1.1rem;
	}
	
	
	.prefbutton:hover{
		background-color: var(--cntrlhvr);
	}
	
	.pref_menu{
		width:15rem;
		border:none;
		background-color: var(--cntrlfill);
		color: #E8CD7D;
		text-align:left;
	}

/* ---- SparkSDR ---- */
	
	.sparkinput{
		/* note the placeholder above sets that colour */
		margin-left:1px;
		margin-right:2px;
		cursor: text;
		border:0px solid black;
		border-radius:0px;
		padding-left: 1px; padding-right:1px;
		padding-bottom:2px; padding-top:3px;
		text-align:center;
		background-color: silver;
		font-size:1rem;
	}
	
	.sparkinput:hover{
		background-color: #E8CD7D;
	}
	
	.sparkbutton{ /* matches searchbutton in index.html but with smaller font */
		cursor: default;
		display:inline-block;
		min-width:6rem;
		text-align:center;
		border: 1px solid var(--cntrlbdr);
		background-color: var(--cntrlfill);
		color: var(--cntrltxt);
		border: 1px solid var(--cntrlbdr);
		cursor: default;
		border-radius: 0.3rem; /*.4*/
		margin-right:0.5rem;
		margin-top: 0.5rem;
		padding: 0.2rem 0.3rem;    /* top right bottom left */
		transition: 0.2s;
		font-size:1rem;
	}
	
	.sparkbutton:hover{
		background-color: var(--cntrlhvr);
	}
	
	
	
/* =====  the spots table ===== */

	#table_dash{ /* also in mobile below */
		padding-top:1rem;
		padding-left:1.5rem;
		font-size:1.1rem;
	}

	#table_container{
		overflow-y: auto;
		max-height: 90vh;
	}
	
	#spot_table_comments{ /* td click info eg. countries */
		width:100%;
		padding-left: 2rem;
		color: teal;
		background-color:white;
		font-size: 1.1rem;
	}
	
	.spot_table{
		margin-top:0.3rem;
		white-space: nowrap;
		border-collapse: collapse;
		/* border-spacing: 1.5rem .02rem; */
		cursor: default;
		font-family: fira_monoregular;
	}
	
	.spot_table thead th{
		background-color:white;
		position: sticky; /* make the table heads sticky */
		top: 0px; /* table head will be placed from the top of the table and sticks to it */
	}
	
	.spot_table th {
		color: #964B57; /* original var( --tblcolth ); 964B57  962D3D  #960118 */
		text-align:center;
	}
	
	.spot_table th:hover {
		cursor: default;
		color:black;
	}
	
	.spot_table tr:hover {
		background-color:#F2F2F2;
	}
	
	.spot_table th:nth-child(10), th:nth-child(11), th:nth-child(13), th:nth-child(14){ /* km, az, kpw, Q */
		text-align:right;
	}
	
	.spots_table body{
		overflow-y: scroll;
	}
	
	.spot_table td{
		padding-left:1.5rem;
	}
	
	.spot_table td:nth-child(10), td:nth-child(11), td:nth-child(13), td:nth-child(14){
		text-align: right;
	}
	
	.spot_context_menuitem{
		padding-left:0.5rem;
		cursor:pointer;
	}
	
	.spot_context_menuitem:hover{
		color: black;
		background-color:silver;
	}

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

#map_div{
	width:1000px;
	height:800px;
}

.xtra{
	user-select: none;
	font-size:1.1rem;
	color:#4D4D4D;
}

.xtra:hover{
	text-decoration:underline;
	text-decoration-color:#960018;
}

.mapmenuitem{ /* table drop down menu */
	position:relative;
	z-index:auto;
	color:#4D4D4D;
	user-select: none;
}

.mapmenuitem:hover{
	text-decoration:underline;
	text-decoration-color:#960018;
}

.band_count_rollover{
	display:inline-block;
	text-align:center;
	padding-left:1.5rem;
	padding-right:1.5rem;
}

.band_count_rollover:hover{
	background-color: white;
}

/* ======= wspr marker dots and calls ====== */

.hidden_tr{ /* hides qrz etc */
	display:none;
}

.hidden_tr:hover{ /* hides qrz etc */
	color: #960018;
}

.marker_link{
	text-underline-offset:2px;
	padding-bottom:0px;
	color: grey;
	text-decoration: underline;
}

.marker_link:hover{
	/* text-decoration-color: #960018; */
	color: teal;
}

.marker_menu_close{
	color:#FFF500;
}

.marker_menu_close:hover{
	color:dimgrey;
}

.dot{
	height: 6px;
	width: 6px;
	border-radius: 50%;
	border:1px solid;
}

.dotgreen{
	height: 11px;
	width: 11px;
	border-radius: 50%;
	border:1px solid;
	border-color:black;
	background-color: lime; 
}

.dotred{
	height: 8px;
	width: 8px;
	border-radius: 50%;
	border:1px solid;
	border-color:black;
	background-color: red; 
}

[data-drxtx="r"] { border-color: white; background-color: #009AFF; }
[data-drxtx="t"] { border-color:black; background-color: white; } /* #FF5400 #FFF500 */
[data-drxtx="b"] { border-color:white; background-color: #E50225; }

/*
.box{
	width:fit-content;
	border: 1px solid silver;
	padding:2px;
	padding-left:3px;
	padding-right:3px;
	margin-top:1rem;
} */

.visible{ display:none; }

	.floater{ /* tracks the mouse during lineovers */
		display:none;
		position:absolute;
		width:fit-content;
		background-color:white;
		cursor:default;
		font-size:1rem;
		border-radius:4px;
		opacity:0.9;
		padding-left:0.5rem; padding-right:0.5rem;
	}

	#hours_slider_label{
		color: var(--offwhite);
		padding-right:1rem;
		margin-top:0.6rem;
		display:inline-block;
		cursor:pointer;
	}
	
	#hours_slider_subtab_container:hover{
		color:var(--tab_sel);
	}
/*
	.marker_spot_label:first-child{
		background-color: #9d9d9d;
		color:white;
		font-family:verdana, tahoma, sans-serif;
		font-weight:bold;
		text-align:center;
	}
*/	
	#marker_spots{ /* used by map.js for marker spots display */
		overflow-x: auto; margin-left:0.5rem; padding-bottom:0.5rem;
	}
/*
	.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); }
	
	.mini_search_button{
		display:inline-block;
		text-align:center;
		border:1px solid silver;
		padding:0.2rem;
		width:5rem;
		border-radius:3px;
		font-size:1rem;
		margin-left:0.5rem;
		margin-top:1rem;
		color:yellow;
	}
	
	.menu_hr{
		background-color:#959595; border:none; height:1px; padding:0;
	}

/* =====  custom map controls ===== */	

	.marker_menu{
		background-color: #DFDFDF;
		padding:0.3rem;
	}
	
	.marker_info{
		margin-top: 2px;
		padding-left:0.3rem; padding-right:0.3rem; 
		color:black;  /*  #CC0000 B10000 */
	}
	
	.marker_info:hover{
		color:white;
		background-color:grey;
	}
	
	/*
	#customMapControls{

	}*/
	
	.night_button{
		color: white;
		background-color: grey;
	}
	
	.slider{
		vertical-align: middle; width:20rem;
	}
	
	.chart_legends_holder{
		color:#323232;
		/* background-color:pink; */
	}
	
	.chart_legend_body{ /* each chart legend body/table div */
		display: inline-block;
		margin:0.5rem;
		border: 1px solid silver;
		border-radius: 4px;
		padding:2px;
		cursor:default;
		vertical-align:top;
		background-color: #F1F1F1;
	}

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

	#chart_container{
		width:100VW;
		height:100VH;
		margin-top:1rem;
		overflow: scroll;
	}
	
	/*  wspr audio passband chart */
	.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;
	}
	
	.vblock{
		text-align:top;
		border-top:1px solid white;
		border-left:1px solid white;
		background-color:#d8d000;
		cursor:default;
	}
	
	.vblock:hover{
		background-color:lime;
	}
	
	/* 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{
		
	}
	
	
/* ====== faq page ===== */

	.infoSections{
		font-weight:bold;
	}

	.infoHead{
		color: black;
		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;
		border-left: 3px solid silver;
		padding-left: 1rem;
	}
	
/* ====== stats ===== */

	#livestats{
		width:100%;
		height:100vh;
		border-style: none;
	}
	
	/* =====  sql extras  */
	
	.small_button{
		margin-top:0.7rem;
		border:1px solid silver;
		border-radius:4px;
		background-color:transparent;
		width:8rem;
		font-size:1rem;
		display:block;
		color: white;
		cursor: default;
	}
	
	.small_button:hover{
		color:#F0CF84;
	}

	
	/* ========== qedit & dialog ======== */
	/* height: var(--dialog-height); */
	
	#query_textarea{
		display:inline-block;
		color:#033778;
		border:1px solid #497DBB;
		border-radius:4px;
		border-color:silver;
		margin-top:0.7rem;
		margin-bottom:0.8rem;
		margin-left:1rem;
		padding-left:0.5rem;
		font-size:1rem;
		tab-size:4;
		-moz-tab-size:4;
	}
	
	#dialog{
		position: absolute;
		overflow: auto;
		resize: both;
		min-width: 280px;
		min-height: 100px;
		background-color:white;
		border: 1px solid #73AD21;
		padding-bottom:1rem;
	}
	
	#dialog_header{
		background-color:#e3e3e3; 
		border-bottom:1px solid silver; 
		height:1.5em;
		vertical-align:top; 
		cursor:move;
		padding-left:0.5rem;
	}
	
	#dialog_content{
		padding: 0.5rem;
	}
	
	#dialog_closebox{
		display:inline-block;
		cursor:default;
		float:right; 
		margin-right:0.5em; 
		vertical-align:top;
		color:blue;
	}
	
	.dialog_buttons{
		font-size:smaller;
		cursor:pointer;
		color:#987208;
	}
	
	.dialog_buttons:hover{
		color:blue;
	}
	
	.kill{
		float:right;
		color:red; 
		cursor:default;
	}
	
	.kill:hover{
		color:blue;
	}
		
	.qryname{
		color:#4377B8;
		cursor:default;
	}
	
	.qryname:hover {
		color:blue;
	}
	
	.demo_menu_line{
		cursor:default;
		color:grey;
		margin-top:0.5rem;
		border-bottom:1px solid silver;
	}