/* Menus: various kinds of menu used in the interface */
/* ======================================================== */
/* BASIC MENU */
.ipsMenu {
	background: rgb( var(--theme-area_background_reset) );
	box-shadow: var(--popup--boxShadow);
	border: var(--popup--border);
	background-clip: padding-box;
	border-radius: var(--popup--radius);
	z-index: 10000;
	position: absolute;
}	
	
	.ipsMenu .ipsMenu_item:first-child a,
	.ipsMenu .ipsMenu_item:first-child > span {
		border-top-left-radius: var(--popup--boxShadow);
		border-top-right-radius: var(--popup--boxShadow);	
	}

	.ipsMenu .ipsMenu_item:last-child a,
	.ipsMenu .ipsMenu_item:last-child > span {
		border-bottom-left-radius: var(--popup--boxShadow);
		border-bottom-right-radius: var(--popup--boxShadow);
	}

	ul.ipsMenu, .ipsMenu > ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	
	.ipsJS_none .ipsMenu:target {
		display: block !important; /* Allows menus to work with JS disabled, by showing them when the anchor is visited */
	}

	.ipsMenu_innerContent {
		max-height: 350px;
		overflow: auto;
	}

		.ipsMenu_innerContent .ipsDataList {
			position: static;
		}
		
	.ipsMenu.ipsLoading {
		min-height: 100px;
	}

/* ======================================================== */
/* WIDTHS */
.ipsMenu_auto {
	min-width: 200px;
	max-width: 500px;
}

.ipsMenu_veryNarrow {
	width: 140px;
}

.ipsMenu_narrow {
	width: 200px;
}

.ipsMenu_normal {
	width: 300px;
}

.ipsMenu_wide {
	width: 450px;
}

/* ======================================================== */
/* MENU ITEMS */
.ipsMenu_item {
	text-align: left;
	line-height: 1.4;
}
html[dir="rtl"] .ipsMenu_item {
	text-align: right;
}

	.ipsMenu_item > a:not( .ipsMenu_itemInline ),
	.ipsMenu_item > span:not( .ipsMenu_itemInline ) {
		display: block;
		padding: 11px 20px;
		color: rgb( var(--theme-text_color) );
		white-space: nowrap;
		overflow: hidden;
    	text-overflow: ellipsis;
	}

ul:not( .ipsMenu_keyNav ) .ipsMenu_item:not( .ipsMenu_itemClicked ):not( .ipsMenu_itemDisabled ) a:not( .ipsMenu_itemInline ):hover, .ipsMenu_item[data-selected] a, .ipsMenu_item[data-selected] span, .ipsMenu_item.ipsMenu_hover {
	background-color: rgba( var(--theme-text_color), 0.05 );
}

.ipsMenu_item.ipsType_negative a {
	color: var(--negative-dark);
}

.ipsMenu_itemDisabled > a,
.ipsMenu_itemDisabled > span {
	color: rgba( var(--theme-text_color), 0.6 );
	font-style: italic;
	cursor: default;
	pointer-events: none;
}

.ipsMenu_sep {
	border-top: 1px solid rgba( var(--theme-text_color), 0.1 );
	margin: 4px;
}

	.ipsMenu_sep hr { 
		display: none; 
	}

.ipsMenu_subItems > a,
.ipsMenu_subItems > span {
	position: relative;
}
html[dir="ltr"] .ipsMenu_subItems > a,
html[dir="ltr"] .ipsMenu_subItems > span {
	padding-right: 25px;
}
html[dir="rtl"] .ipsMenu_subItems > a,
html[dir="rtl"] .ipsMenu_subItems > span {
	padding-left: 25px;
}

	.ipsMenu_subItems > a:after {
		font-family: "FontAwesome";
		position: absolute;
		top: 9px;
	}
	html[dir="ltr"] .ipsMenu_subItems > a:after,
	html[dir="ltr"] .ipsMenu_subItems > span:after {
		content: '\f0da';
		right: 9px;
	}
	html[dir="rtl"] .ipsMenu_subItems > a:after,
	html[dir="rtl"] .ipsMenu_subItems > span:after {
		content: '\f0d9';
		left: 9px;
	}

	.ipsMenu_subItems .ipsMenu {
		position: absolute;
	}
	
/* ======================================================== */
/* MENU STEMS (the arrow that points to the target */
.ipsMenu:not( .ipsMenu_noStem ):after,
.ipsMenu:not( .ipsMenu_noStem ):before {
	content: '';
	display: none;
	position: absolute;
	width: 0;
	height: 0;
	border: 1em solid transparent;
	font-size: 8px;
}

.ipsMenu:not( .ipsMenu_noStem ):after {
	z-index: 200;
}

.ipsMenu:not( .ipsMenu_noStem ):before {
	z-index: 100;
}

.ipsMenu_topLeft:after, .ipsMenu_topRight:after, .ipsMenu_topCenter:after,
.ipsMenu_bottomLeft:after, .ipsMenu_bottomRight:after, .ipsMenu_bottomCenter:after,
.ipsMenu_topLeft:before, .ipsMenu_topRight:before, .ipsMenu_topCenter:before,
.ipsMenu_bottomLeft:before, .ipsMenu_bottomRight:before, .ipsMenu_bottomCenter:before {
	/* try and make sure the stem doesn't receive any focus */
	pointer-events: none;
	display: block !important;
}

.ipsMenu.ipsMenu_topLeft, .ipsMenu.ipsMenu_topRight, .ipsMenu.ipsMenu_topCenter {
	margin-top: -10px;
}
.ipsMenu.ipsMenu_bottomLeft, .ipsMenu.ipsMenu_bottomRight, .ipsMenu.ipsMenu_bottomCenter {
	margin-top: 10px;
}

.ipsMenu.ipsMenu_topLeft:before,
.ipsMenu.ipsMenu_topLeft:after {
	border-top-color: rgb( var(--theme-area_background_reset) );
	left: 10px;
	top: 100%;
}

.ipsMenu.ipsMenu_topRight:before,
.ipsMenu.ipsMenu_topRight:after {
	border-top-color: rgb( var(--theme-area_background_reset) );
	right: 10px;
	top: 100%;
}

.ipsMenu.ipsMenu_topCenter:before,
.ipsMenu.ipsMenu_topCenter:after {
	border-top-color: rgb( var(--theme-area_background_reset) );
	left: 50%;
	margin-left: -1em;
	top: 100%;
}

	.ipsMenu.ipsMenu_topLeft:before,
	.ipsMenu.ipsMenu_topCenter:before,
	.ipsMenu.ipsMenu_topRight:before {
		border-top-color: inherit;
		margin-top: 1px;
	}

.ipsMenu.ipsMenu_bottomRight:before,
.ipsMenu.ipsMenu_bottomRight:after {
	border-bottom-color: rgb( var(--theme-area_background_reset) );
	right: 10px;
	bottom: 100%;
}

.ipsMenu.ipsMenu_bottomLeft:before,
.ipsMenu.ipsMenu_bottomLeft:after {
	border-bottom-color: rgb( var(--theme-area_background_reset) );
	left: 10px;
	bottom: 100%;
}

.ipsMenu.ipsMenu_bottomCenter:before,
.ipsMenu.ipsMenu_bottomCenter:after {
	border-bottom-color: rgb( var(--theme-area_background_reset) );
	left: 50%;
	margin-left: -1em;
	bottom: 100%;
}

	.ipsMenu.ipsMenu_bottomLeft:before,
	.ipsMenu.ipsMenu_bottomCenter:before,
	.ipsMenu.ipsMenu_bottomRight:before {
		border-bottom-color: inherit;
		margin-bottom: 1px;
	}

/* ======================================================== */
/* OTHER MENU */
.ipsMenu_title {
	background: rgba( var(--theme-text_color), 0.04 );
	padding: 11px 20px;
	font-size: {fontsize="x_small"};
	font-weight: bold;
	text-transform: uppercase;
	color: rgb( var(--theme-text_dark) );
}

.ipsMenu_headerBar, .ipsMenu_footerBar {
	padding: var(--sp-4) var(--sp-5);
	line-height: 24px;
}

	.ipsMenu_headerBar {
		border-bottom: 1px solid rgba( var(--theme-text_color), 0.15 );
		border-radius: var(--popup--radius) var(--popup--radius) 0px 0px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

		.ipsMenu_headerBar .ipsType_sectionHead {
			/* flip the order of the title in headerbar to avoid template update */
			order: -1;
		}

	.ipsMenu_footerBar {
		border-top: 1px solid rgba( var(--theme-text_color), 0.15 );
		border-radius: 0px 0px var(--popup--radius) var(--popup--radius);
	}

/* Counts for menu items */
.ipsMenu_itemCount, .ipsSideMenu_itemCount {
	line-height: 18px;
	padding: 0 5px;
	background: rgb( var(--theme-area_background_light) );
	color: rgb( var(--theme-text_color) );
	font-size: {fontsize="10"};
	font-weight: bold;
	border-radius: 2px;
}
html[dir="ltr"] .ipsMenu_itemCount, html[dir="ltr"] .ipsSideMenu_itemCount {
	float: right;
	margin-right: -5px;
	margin-left: 5px;
}
html[dir="rtl"] .ipsMenu_itemCount, html[dir="rtl"] .ipsSideMenu_itemCount {
	float: left;
	margin-left: -5px;
	margin-right: 5px;
}
	
	.ipsMenu_item:not( .ipsMenu_itemClicked ) a:hover .ipsMenu_itemCount,
	.ipsMenu_item:not( .ipsMenu_itemClicked ) button:hover .ipsMenu_itemCount {
		background: rgb( var(--theme-area_background_light) );
	}

	.ipsSideMenu_itemActive .ipsSideMenu_itemCount {
		background: rgba( var(--theme-text_color), 0.2 );
		color: rgb( var(--theme-text_color) );
	}

		.ipsSideMenu_itemActive .ipsSideMenu_itemCount.ipsSideMenu_clearCount {
			background: transparent;
		}

/* Selectable items for menus */
html[dir="ltr"] .ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) a,
html[dir="ltr"] .ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) > span,
html[dir="ltr"] .ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) button {
	padding-left: 30px;
}
html[dir="rtl"] .ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) a,
html[dir="rtl"] .ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) > span,
html[dir="rtl"] .ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) button {
	padding-right: 30px;
}

	.ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) a:before,
	.ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) > span:before,
	.ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) button:before {
		content: '\f10c';
		font-size: 14px;
		position: absolute;
		font-family: 'FontAwesome';
		padding-left: 10px;
		color: rgba( var(--theme-text_color), 0.1 );
	}
	
	html[dir="ltr"] .ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) a:before,
	html[dir="ltr"] .ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) > span:before,
	html[dir="ltr"] .ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) button:before {
		left: 0;
		padding-left: 10px;
	}

	html[dir="rtl"] .ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) a:before,
	html[dir="rtl"] .ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) > span:before,
	html[dir="rtl"] .ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) button:before {
		right: 0;
		padding-right: 10px;
	}

	.ipsMenu_selectable .ipsMenu_item.ipsMenu_itemChecked a,
	.ipsMenu_selectable .ipsMenu_item.ipsMenu_itemChecked > span,
	.ipsMenu_selectable .ipsMenu_item.ipsMenu_itemChecked button {
		font-weight: bold;
	}

		.ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ).ipsMenu_itemChecked a:before,
		.ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ).ipsMenu_itemChecked > span:before,
		.ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ).ipsMenu_itemChecked button:before {
			content: '\f00c';
			color: inherit;
		}

	.ipsMenu_selectable button {
		width: 100%;
	}

	html[dir="ltr"] .ipsMenu_selectable button:not( .ipsButton_fullWidth ) {
		text-align: left;
	}
	html[dir="rtl"] .ipsMenu_selectable button:not( .ipsButton_fullWidth ) {
		text-align: right;
	}

	.ipsMenu_selectable .ipsMenu_item:not( [data-noselect] ) input[type="radio"],
	.ipsMenu_selectable .ipsMenu_item:not( [data-noselect] ) input[type="checkbox"] {
		display: none;
	}

/* Selectable check all/check none */
.ipsMenu_selectable .ipsMenu_item a[data-role="selectAll"] {
	margin-right: 15px;
}

/* ======================================================== */
/* AUTOCOMPLETE MENUS */
.ipsAutocompleteMenu {
	background: rgb( var(--theme-area_background_reset) );
	box-shadow: var(--popup--boxShadow);
	border-radius: 3px;
	/*width: 300px;*/
	z-index: 10000;
	position: absolute;
}

	.ipsAutocompleteMenu_itemWrapper {
		max-height: 200px;
		overflow: auto;
	}

	.ipsAutocompleteMenu_item {
		padding: 8px;
	}

		.ipsAutocompleteMenu_item[data-selected] {
			background: rgb( var(--theme-selected) );
			cursor: pointer;
		}

/* ======================================================== */
/* SIDE MENUS */
.ipsSideMenu_mainTitle {
	display: none;
	margin: 0;
}

.ipsSideMenu_title,
.ipsSideMenu_subTitle {
	text-transform: uppercase;
	font-weight: bold;
	margin: 0;
	padding: 8px 10px 4px;
	color: rgb( var(--theme-text_dark) );
	font-size: inherit;
}

	.ipsSideMenu_titleExtra {
		text-transform: none;
		font-weight: normal;
		font-size: {fontsize="x_small"};
	}

.ipsSideMenu_subTitle {
	margin: 5px 0 0;
	padding: 8px 10px;
	font-size: {fontsize="small"};
}
	.ipsSideMenu_subTitle:not(:first-child) {
		margin: 25px 0 0;
	}

.ipsSideMenu_item {}

	.ipsSideMenu_item a, 
	a.ipsSideMenu_item,
	span.ipsSideMenu_item {
		display: block;
		padding: 8px 10px;
		position: relative;
		margin-bottom: 2px;
		color: inherit;
		cursor: pointer;
		border-radius: 5px;
	}
	
		.ipsSideMenu_item .fa:first-child {
			width: 30px;
			text-align: center;
			font-size: 16px;
			vertical-align: middle;
		}

		.ipsSideMenu_small .ipsSideMenu_item {
			padding: 5px 10px;
		}

		.ipsSideMenu_item:not( .ipsSideMenu_itemActive ) a:hover, 
		a.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover,
		span.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover {
			background: rgba( var(--theme-area_background), 0.5 );
		}

		.ipsSideMenu_item .ipsBadge {
			position: relative;
		}

		html[dir="ltr"] .ipsSideMenu_withChecks .ipsSideMenu_item a,
		html[dir="ltr"] .ipsSideMenu_withChecks a.ipsSideMenu_item,
		html[dir="ltr"] .ipsSideMenu_withChecks span.ipsSideMenu_item,
		html[dir="ltr"] .ipsSideMenu_withRadios .ipsSideMenu_item a,
		html[dir="ltr"] .ipsSideMenu_withRadios a.ipsSideMenu_item,
		html[dir="ltr"] .ipsSideMenu_withRadios span.ipsSideMenu_item {
			padding-left: 28px;
		}

		html[dir="rtl"] .ipsSideMenu_withChecks .ipsSideMenu_item a,
		html[dir="rtl"] .ipsSideMenu_withChecks a.ipsSideMenu_item,
		html[dir="rtl"] .ipsSideMenu_withChecks span.ipsSideMenu_item,
		html[dir="rtl"] .ipsSideMenu_withRadios .ipsSideMenu_item a,
		html[dir="rtl"] .ipsSideMenu_withRadios a.ipsSideMenu_item,
		html[dir="rtl"] .ipsSideMenu_withRadios span.ipsSideMenu_item {
			padding-right: 28px;
		}

		.ipsJS_has .ipsSideMenu_withChecks .ipsSideMenu_item > input[type="checkbox"],
		.ipsJS_has .ipsSideMenu_withRadios .ipsSideMenu_item > input[type="radio"] {
			display: none;
		}

		.ipsSideMenu_withChecks .ipsSideMenu_item a:after, 
		.ipsSideMenu_withChecks a.ipsSideMenu_item:after,
		.ipsSideMenu_withChecks span.ipsSideMenu_item:after,
		.ipsSideMenu_withRadios .ipsSideMenu_item a:after, 
		.ipsSideMenu_withRadios a.ipsSideMenu_item:after,
		.ipsSideMenu_withRadios span.ipsSideMenu_item:after {
			content: '\f10c';
			font-family: 'FontAwesome';
			width: 20px;
			height: 20px;
			position: absolute;
			top: 50%;
			margin-top: -10px;
			color: rgba( var(--theme-text_color), 0.2 );
		}
		html[dir="ltr"] .ipsSideMenu_withChecks .ipsSideMenu_item a:after,
		html[dir="ltr"] .ipsSideMenu_withChecks a.ipsSideMenu_item:after,
		html[dir="ltr"] .ipsSideMenu_withChecks span.ipsSideMenu_item:after,
		html[dir="ltr"] .ipsSideMenu_withRadios .ipsSideMenu_item a:after,
		html[dir="ltr"] .ipsSideMenu_withRadios a.ipsSideMenu_item:after,
		html[dir="ltr"] .ipsSideMenu_withRadios span.ipsSideMenu_item:after {
			left: 8px;
		}
		html[dir="rtl"] .ipsSideMenu_withChecks .ipsSideMenu_item a:after,
		html[dir="rtl"] .ipsSideMenu_withChecks a.ipsSideMenu_item:after,
		html[dir="rtl"] .ipsSideMenu_withChecks span.ipsSideMenu_item:after,
		html[dir="rtl"] .ipsSideMenu_withRadios .ipsSideMenu_item a:after,
		html[dir="rtl"] .ipsSideMenu_withRadios a.ipsSideMenu_item:after,
		html[dir="rtl"] .ipsSideMenu_withRadios span.ipsSideMenu_item:after {
			right: 8px;
		}

			.ipsSideMenu_withChecks .ipsSideMenu_item a:after, 
			.ipsSideMenu_withChecks a.ipsSideMenu_item:after,
			.ipsSideMenu_withChecks span.ipsSideMenu_item:after {
				content: '\f096';
				font-family: 'FontAwesome';
			}

.ipsSideMenu_list {
	margin: 0 0 5px 0;
	padding: 0;
	list-style: none;
}

.ipsSideMenu_list + .ipsSideMenu_title {
	margin-top: 20px;
	padding-top: 25px;
	border-top: 1px solid rgba( var(--theme-text_color), 0.2 );
}

.ipsSideMenu_itemActive a, 
a.ipsSideMenu_itemActive,
span.ipsSideMenu_itemActive,
.ipsSideMenu_withChecks .ipsSideMenu_item > input[type="checkbox"]:checked ~ a,
.ipsSideMenu_withChecks .ipsSideMenu_item > input[type="checkbox"]:checked ~ span,
.ipsSideMenu_withRadios .ipsSideMenu_item > input[type="radio"]:checked ~ a,
.ipsSideMenu_withRadios .ipsSideMenu_item > input[type="radio"]:checked ~ span {
	background: rgb( var(--theme-area_background_dark) );
	color: #fff;
}

	.ipsSideMenu_withChecks .ipsSideMenu_itemActive a:after, 
	.ipsSideMenu_withChecks a.ipsSideMenu_itemActive:after,
	.ipsSideMenu_withChecks span.ipsSideMenu_itemActive:after,
	.ipsSideMenu_withRadios .ipsSideMenu_itemActive a:after, 
	.ipsSideMenu_withRadios a.ipsSideMenu_itemActive:after,
	.ipsSideMenu_withRadios span.ipsSideMenu_itemActive:after,
	.ipsSideMenu_withChecks .ipsSideMenu_item > input[type="checkbox"]:checked ~ a:after,
	.ipsSideMenu_withChecks .ipsSideMenu_item > input[type="checkbox"]:checked ~ span:not(.ipsSideMenu_noCheck):after,
	.ipsSideMenu_withRadios .ipsSideMenu_item > input[type="radio"]:checked ~ a:after,
	.ipsSideMenu_withRadios .ipsSideMenu_item > input[type="radio"]:checked ~ span:not(.ipsSideMenu_noCheck):after {
		content: '\f00c';
		font-family: 'FontAwesome';
		color: inherit;
	}

.ipsSideMenu_itemDisabled a, 
a.ipsSideMenu_itemDisabled,
span.ipsSideMenu_itemDisabled {
	opacity: 0.45;
	color: rgba( var(--theme-text_color), 0.6 );
	cursor: default;
}

/* Sub lists */
html[dir="ltr"] .ipsSideMenu_item + .ipsSideMenu_list {
	margin: 0 0 10px 15px;
	border-left: 1px solid rgba( var(--theme-text_color), 0.3 );
}
html[dir="rtl"] .ipsSideMenu_item + .ipsSideMenu_list {
	margin: 0 15px 10px 0;
	border-right: 1px solid rgba( var(--theme-text_color), 0.3 );
}

	.ipsSideMenu_item + .ipsSideMenu_list .ipsSideMenu_item {
		padding: 1px 10px;
		margin: 0;
		font-size: {fontsize="x_small"};

	}