/***********************************************************************
 * This is for getting debugging to work with the template.
 * I didn't make this template, It's a bootstrap default template
 * that I just tweaked.  It uses fixed positioning for the left navbar
 * and I need to move the debug code at the top otherwise it renders
 * behind the left nav
 ***********************************************************************/

@media (min-width: 768px) {
	pre.cake-error, div.cake-error, div.cake-debug-output.cake-debug { margin-left:25%; }
}

@media (min-width: 992px) {
	pre.cake-error, div.cake-error, div.cake-debug-output.cake-debug { margin-left:17%; }
}

@media (min-width: 1400px) {
	.popover { max-width: 600px; width: 600px; }
}

/* BEGIN SIDEBAR MENU */
	#sidebarMenu {
		position: fixed;
		top: 0;
		padding:60px 0px;
		z-index:100;
		height:auto;
		box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
		background-color:#00594f !important;
		padding-left: 30px;
	}

	#sidebarMenu .menu-item {
		display: inline-flex;
		align-items: center;
		text-align: left;
		color:#fff;
		width:100%;
		border-radius: 0;
	}

	#sidebarMenu .menu-item:not(.nohover):hover,
	#sidebarMenu .menu-item:focus {
		background-color: #4a8075;
		color: #fff;
	}

	#sidebarMenu .menu-item.active { font-weight:bold; }
	#sidebarMenu li:not(.has-children) .menu-item { padding-left:40px; }
	#sidebarMenu li.has-children .menu-item { padding-left:20px; }
	#sidebarMenu li.child .menu-item { padding-left: 50px; }
	#sidebarMenu .nohover:hover {cursor: default; }

	#sidebarMenu .menu-item-expand-icon {
		width: 1.25em;
		line-height: 0;
		content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
		transition: transform .35s ease;
		transform-origin: .5em 50%;
		filter: brightness(0) invert(1);
	}
	
	#sidebarMenu .menu-item:hover .menu-item-expand-icon { filter: brightness(0) invert(1); }
	#sidebarMenu .menu-item[aria-expanded="true"] .menu-item-expand-icon { transform: rotate(90deg); }
	

	@media (min-width: 768px) {
		#sidebarMenu {
			height: 100%;
			padding:75px 0px;
			background-color: #f8f9fa !important;
			box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
		}
		#sidebarMenu .menu-item-expand-icon {
			filter: initial;
			position:absolute;
			right:10px;
		}
		#sidebarMenu .menu-item {
			color:initial;
			padding-left:10%;
		}
		#sidebarMenu .menu-item:focus {
			background-color: initial;
			color: initial;
		}
		#sidebarMenu li:not(.has-children) .menu-item,
		#sidebarMenu li.has-children .menu-item { padding-left:10%; }
		#sidebarMenu li.child .menu-item { padding-left: 30px; }
	}
	
	@media (min-width: 992px) {
		#sidebarMenu li.child .menu-item { padding-left: 35px; }
	}

	@media (min-width: 1200px) {
		#sidebarMenu li.child .menu-item { padding-left: 40px; }
	}

	@media (min-width: 1400px) {
		#sidebarMenu { padding-top:80px; }
		#sidebarMenu li.child .menu-item { padding-left: 50px; }
	}

	@media (min-width: 1800px) {
		#sidebarMenu { padding-top:80px; }
		#sidebarMenu li.child .menu-item { padding-left: 55px; }
	}
	

/* END SIDEBAR MENU */

/* BEGIN HEADER & FOOTER */
	/* 
		#wsu-brand-logo - the WSU shield logo in the header
		div.app-title - the name of the application in the header
		div.navbar.fixed-bottom - footer
		.header-text - applied to any text in the header that should mimic the bootstrap "display-*" class but have a responsive size
		#header-user-name - the name of the logged in user in the header
	 */
	header { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1); }
	#wsu-brand-logo { width:2.5rem; }
	div.app-title { font-size:1.5rem; }
	div.navbar.fixed-bottom { height: 3vh }

	.header-text {
		font-weight: 300;
		line-height: 1.2;
	}

	@media (min-width: 768px) {
		#wsu-brand-logo { width:7vh; }
		div.app-title { font-size:4vh; }
	}

	@media (min-width: 992px) {
		#wsu-brand-logo { width:50px; }
		div.app-title { font-size:30px; }
		#header-user-name { font-size: 18px; }
	}

	@media (min-width: 1200px) {
		#wsu-brand-logo { width:55px; }
		div.app-title { font-size:32px; }
		#header-user-name { font-size: 20px; }
		
	}

	@media (min-width: 1400px) {
		#wsu-brand-logo { width:65px; }
		div.app-title { font-size:36px; }
	}
/* END HEADER & FOOTER */