/* =========== menu css ========== */
	
	/*
		wspr.rocks colors
			#EFEFEF  almost white, eg Watts and Hours labels on map sliders
			#C0C0C0  menu head background light grey-white
			#808080  background grey of night and auto map buttons
			#696969  menu body background dark warm grey
			#282828  very dark warm grey (Chrome search field)
			#E8CD7D  goldish search button
			#B0FE8A  light green nav bar tabs
	*/
	
	.flex_container {
		display: flex;
		flex: 1 1 auto;   /* auto-expand to fill available space */
		flex-wrap: nowrap;
		justify-content: flex-start; /* align items to the left */
		gap: 1px;  /* Adds space between the items. */
		width: calc(100% - 6px); /* make room for margin */
		margin-right: 2px;       /* real margin */
		margin-left: 4px;       /* real margin */
		max-width: none;  /* no centering, no max-width */
	}
	
	.slider_selector{
		color:#E8CD7D;
	}
	
	.slider_selector:hover{
		background-color:#C0C0C0;
		color:black;
	}
	
	.slider_padding_div{
		height:9px;
	}
	
	/* outer container */
	.new_menu_holder {
		min-width:8.4rem; 
		max-width:14rem;
		height:fit-content;
		cursor:default;
		font-family: sans-serif;
		font-size: var(--onetworem);
	}
	
	/* head div */
	.new_menu_head {
		color: black;
		overflow: hidden; /* Hides any text that overflows the min-width */
		cursor: pointer;
		white-space:nowrap;
		text-align:center;
	}
	
	.new_menu_head:empty::before {
		content: attr(data-placeholder);
		color: dimgrey;
	}
	
	.new_menu_head:hover {
		background-color: #E8CD7D;
	}
	
	/* the body */
	.new_menu_body{
		position: absolute; /* take it out of flow */
		margin-top:2px;  /* body must be hard up against head to prevent retraction when leaving head:hover */
		margin-left:2px;
		padding-top:4px;  /* good to have visual gap between head and body */
		padding-bottom:0.5rem;
		width:fit-content;
		height:fit-content;
		border:1px solid silver;
		display:none;
		/* show a little body below the last option */
		background-color: #696969;
	}
	
	/* the div/options list */
	.new_menu_option {
		height: var(--onetworem);
		margin-top:0px;
		white-space:nowrap;
		background-color: #696969;
		color: #EFEFEF;
		padding: 0.4rem 1rem 0.4rem 1rem; /* top, right, bottom, left */
	}
	
	/* hover over each option */
	.new_menu_option:hover {
		color:black;
		background-color:#EFEFEF;
	}
	
	.option_spacer{
		border-top: 1px solid #C0C0C0;
		opacity:0.5;
		margin-top:6px;
		margin-bottom:5px;
	}
	
	.new_menu_delete {
		float:right;
		color:red;
		padding-left:2rem;
		padding-right:0.5rem;
	}
	
	.new_menu_delete:empty::before {
		content: "x";
	}
	
	
/* customisation classes override when placed last in the HTML class list */

.prefs_inline{
	display:inline-block;
	margin-left:1rem;
}

.triangle_down {
	display:inline-block;
	width: 0;
	height: 0;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 8px solid grey; /* height */
}

.triangle_down_gold {
	display:inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 9px solid #E8CD7D; /* height */
}

/* common style for all vanilla menu heads, eg rocks search panel */
.rocks_search_menu_head { /* menu head style */
	font-size: 1.2rem;
	padding: 0.3rem 0.8rem 0.3rem 0.8rem; /* top, right, bottom, left */
	background-color: #C0C0C0;
	text-align: center;
	vertical-align: middle;
}

.save_callsign{
	padding-left:1rem;
	padding-bottom:3px;
	/* color:#C0C0C0; */
	color:#E8CD7D;
}

.save_callsign:hover{
	color:lime;
}

/* Customisation for single menus */

.prefs_menu_holder{
	min-width:14rem;
}

.savedsearch_menu{
	margin-top:3px;
	font-size:1.2rem;
	margin-left:1rem;
	height:fit-content;
	color: #E8CD7D;
	user-select:none;
	cursor:default;
}

.search_menu_option {
	height: var(--oneonerem);
	margin-top:0px;
	white-space:nowrap;
	background-color: #696969;
	color: #EFEFEF;
	padding: 0.4rem 1rem 0.4rem 1rem; /* top, right, bottom, left */
}

/* hover over each option */
.search_menu_option:hover {
	color:black;
	background-color:#EFEFEF;
}

/* mobile devices */
@media (pointer: coarse) {
	
	.flex_container {
		padding-top:1.5rem;
	}
	
	.slider_padding_div{
		height:5px;
	}
	
	.prefs_menu_holder{ /* the width of the menu heads in the prefs panel */
		min-width:13.5rem;
	}
	
	.rocks_search_menu_head {
		font-size: 1.4rem;
		padding: 0.3rem 0px 0.3rem 0px; /* top, right, bottom, left */
		overflow:hidden;
	}
	
	
}

	
/* =========== end vanilla menus  ======== */