#main_menu {
	position: inherit;
}
.navbar {
	border-bottom: 1px solid gray;
	box-shadow: 0px 0px 3px 2px lightgray;
	font-size: 11pt;
	padding: 0px 25px;
}


@media(max-width:1400px) {
	.navbar {
		margin-bottom: 4px;
	}
}


@media(max-width:1400px) {
	#main_menu:not(.navbar) ul li a {
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media(max-width:1279px) {
	#main_menu:not(.navbar) ul li a {
		padding-left: 4px;
		padding-right: 4px;
	}
}


/* ---- Tightening steps ------------------------------------------------------
   menu.js tries these in order before giving up and showing the burger, so the
   bar keeps as many items visible as will actually fit. */
#main_menu.navbar.is-tight .navbar-nav > li > a {
	padding-left: 8px;
	padding-right: 8px;
}

#main_menu.navbar.is-tighter .navbar-nav > li > a {
	padding-left: 4px;
	padding-right: 4px;
}

#main_menu.navbar.is-tighter #main_menu_edit_profile a table tbody tr td:last-of-type {
	max-width: 16ex;
	overflow-x: hidden;
	text-overflow: ellipsis;
}


/* ---- One-line guarantee ---------------------------------------------------
   Above the burger breakpoint the bar is a single no-wrap flex row: the two
   <ul>s keep their natural width (flex: 0 0 auto), so when they stop fitting
   they overflow instead of dropping onto a second line. static/js/shared/menu.js
   measures that overflow and switches the bar to .is-collapsed (the burger).
   It has to be measured rather than pinned to a width, because the item list is
   built per role in pages/shared/header.php -- a teacher needs far more room
   than a student, so no fixed breakpoint is right for everyone. */
@media(min-width:768px) {
	#main_menu.navbar:not(.is-collapsed) {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	#main_menu.navbar:not(.is-collapsed):before,
	#main_menu.navbar:not(.is-collapsed):after,
	#main_menu.navbar:not(.is-collapsed) .navbar-collapse:before,
	#main_menu.navbar:not(.is-collapsed) .navbar-collapse:after {
		display: none;
	}

	#main_menu.navbar:not(.is-collapsed) .navbar-header {
		flex: 0 0 auto;
	}

	#main_menu.navbar:not(.is-collapsed) .navbar-collapse {
		display: flex !important;
		flex: 1 1 auto;
		flex-wrap: nowrap;
		align-items: center;
		min-width: 0;
	}

	#main_menu.navbar:not(.is-collapsed) .navbar-nav {
		display: flex;
		flex: 0 0 auto;
		flex-wrap: nowrap;
		float: none;
	}

	#main_menu.navbar:not(.is-collapsed) .navbar-nav > li {
		float: none;
		white-space: nowrap;
	}

	#main_menu.navbar:not(.is-collapsed) .navbar-right {
		float: none !important;
		margin-left: auto;
	}

	/* The sidebar drawer only exists below 768px (panel.css), so its toggle must
	   stay hidden here even when the navbar itself is forced into the burger. */
	#main_menu.navbar #left_bar_button {
		display: none;
	}
}


/* ---- Burger presentation ---------------------------------------------------
   Applied by menu.js at any width where the row no longer fits. Below 768px
   Bootstrap's own rules already do this, so the media query further down stays
   as the no-JS fallback. */
#main_menu.navbar.is-collapsed .navbar-toggle {
	display: block;
}

/* Bootstrap floats the header left above 768px, which would shrink-wrap it and
   park the burger next to the logo instead of at the far end of the bar. */
#main_menu.navbar.is-collapsed .navbar-header {
	float: none;
}

#main_menu.navbar.is-collapsed .navbar-collapse {
	clear: both;
	max-height: none;
	padding-left: 0;
	padding-right: 0;
	border-top: 1px solid #e7e7e7;
	/* Safety net: nothing inside the dropdown -- an unbreakable email, a long
	   item title -- should ever be able to push the page into a horizontal
	   scrollbar. If something doesn't fit, clip it rather than leak it out. */
	overflow-x: hidden;
}

#main_menu.navbar.is-collapsed .navbar-collapse.collapse:not(.in) {
	display: none !important;
}

#main_menu.navbar.is-collapsed .navbar-nav {
	float: none;
	/* Bootstrap's default -15px counteracts a 15px .navbar-collapse padding
	   that we zero out above -- kept, it would push the ul 15px past the
	   collapse box on each side for no reason. */
	margin: 7.5px 0;
	width: 100%;
	box-sizing: border-box;
}

#main_menu.navbar.is-collapsed .navbar-nav > li {
	float: none;
}

#main_menu.navbar.is-collapsed .navbar-nav > li > a {
	padding: 10px 15px;
	box-sizing: border-box;
	max-width: 100%;
}

#main_menu.navbar.is-collapsed .navbar-right {
	float: none !important;
	margin-right: 0;
}

#main_menu.navbar.is-collapsed #main_menu_edit_profile a {
	padding: 5px 15px;
}

#main_menu.navbar.is-collapsed #main_menu_edit_profile a table {
	/* table-layout:auto (the default) lets a table grow past width:100% to fit
	   an unbreakable cell content -- an email address is exactly that. Fixed
	   layout makes 100% a hard cap regardless of content. */
	table-layout: fixed;
}

#main_menu.navbar.is-collapsed #main_menu_edit_profile a table td {
	word-break: break-word;
}

#main_menu.navbar.is-collapsed #main_menu_edit_profile a table tbody tr td:last-of-type {
	max-width: none;
}


/* Mobile: the navbar collapses into a burger (Bootstrap .navbar-toggle +
   .navbar-collapse). Every selector is keyed on `#main_menu.navbar` because the
   CMS pages reuse id="main_menu" for a different, non-.navbar menu block.
   #main_menu is position:inherit, i.e. it scrolls with the page, so the open menu
   expands in flow instead of scrolling inside itself. */
@media(max-width:767px) {
	#main_menu.navbar {
		padding: 0px 10px;
	}

	#main_menu.navbar .navbar-collapse {
		max-height: none;
		padding-left: 0;
		padding-right: 0;
		overflow-x: hidden;
	}

	#main_menu.navbar .navbar-toggle {
		margin-right: 0;
	}

	/* Sits left of the burger (both float right); keep them apart. */
	#main_menu.navbar #left_bar_button {
		margin-right: 8px;
	}

	/* Match the burger's box exactly (3 icon-bars = 14px) so the two buttons are
	   the same height and neither makes the bar taller than the logo. */
	#main_menu.navbar #left_bar_button .fa {
		display: block;
		font-size: 14px;
		line-height: 14px;
	}

	#main_menu.navbar .navbar-brand {
		padding-left: 0;
	}

	#main_menu.navbar .navbar-nav {
		margin: 0;
		width: 100%;
		box-sizing: border-box;
	}

	#main_menu.navbar ul li a {
		padding-left: 15px;
		padding-right: 15px;
		box-sizing: border-box;
		max-width: 100%;
	}

	/* The nick/login item is a <table>; let it use the full row on mobile. */
	#main_menu.navbar #main_menu_edit_profile a {
		padding: 5px 15px;
	}

	#main_menu.navbar #main_menu_edit_profile a table {
		table-layout: fixed;
	}

	#main_menu.navbar #main_menu_edit_profile a table td {
		word-break: break-word;
	}

	#main_menu.navbar #main_menu_edit_profile a table tbody tr td:last-of-type {
		max-width: none;
	}
}


.logo-mini {
	height: 25px;
	margin-top: -3px;
}

#main_menu_edit_profile td.glyphicon-user {
	padding-top: 8px;
}

#main_menu_edit_profile td hr {
	margin-bottom: -15px;
}

#main_menu_edit_profile a {
	padding: 0px 15px;
}
.notify_box{
	position: absolute;
	height: 0vw;
	min-width: 300px;
	left: -200px;
	opacity: 0;
	z-index: 10;
	background-color:rgb(156, 156, 156);
	overflow: auto;
	padding: 10px;
	font-family: Arial, Helvetica, sans-serif;
	border-radius: 5px;
	padding-right: 20px;
}
.notify_item{
	display: flex;
	cursor: pointer;
	padding: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
	background-color:rgb(206, 222, 189);
	border-radius: 10px;
}
.notify_item:hover{
	background-color: #eee;
}
#notify_icon{
	cursor: pointer;
}