/* Reset margins and paddings, and hide default scrollbars */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: "Arial", Gadget, sans-serif;
	font-size: 1em;
	/* Disabe focus */
	outline: none
}

/* Overall app container fills the viewport */
.app-container {
	display: flex;


/*	height: 100%;
*/

	margin-top: 116px;
	padding-bottom: 120px;
}

/* Desktop sidebar menu */
.desktop-menu {
	width: 248px;
	position: fixed;
	top: 100px; /* shifted down to appear below the header */
	bottom: 0;
	left: 0;
	overflow-y: auto;
	scrollbar-width: none;
}

/* Mobile bottom navigation */
/* Default: hidden on desktop */
.mobile-menu {
	height: 116px;
	width: 100%;

/*	background-color: #ffffff;
*/
	position: fixed;
	bottom: 0;
	left: 0;
	display: none;
	overflow-x: auto;
	overflow-y:clip;
}

/* Content area */
.content {
	flex: 1;
	overflow-y: auto;
	
	padding-left: 0px;
	padding-right: 0px;


	margin-bottom: 60px; /* reserve space for mobile nav */
	-ms-overflow-style: none; /* IE 10+ */
	scrollbar-width: none; /* Firefox */
	/*	background-color: lightsteelblue;
*/
}

	.content::-webkit-scrollbar {
		display: none; /* Chrome, Safari, Opera */
	}

/* General menu list styles */
.desktop-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Menu item styles */
/*.sidebar ul li,
	.mobile-menu ul li {
		padding: 10px;
	}*/

/* NavLink styling */
/*.nav-link {
	text-decoration: none;
	color: #333;
}*/

/* Desktop menu: icon left, text right */

.desktop-nav-link {
	text-decoration: none;
	color: #333;
	padding: 10px;
}

	/*.desktop-nav-link.active {
		background-color: lightsteelblue;*/ /* Highlight background color */
		/*border-color: lightsteelblue;
	}*/

.desktop-menu ul {
	text-align: center;
	position: relative;
}

	.desktop-menu ul a {
		display: flex;
		align-items: center;

/*		border-radius: 8px;
		border-width: 2px;
		border-color: lightgrey;
		border-style: solid;
*/
		margin-bottom: 5px;
	}

		.desktop-menu ul a i {
			font-size: 20px;
			margin-right: 10px;
		}





/* Mobile menu: icon on top, text below */
/* Use fixed width for each menu item */


	.mobile-menu ul {
		display: flex;
		height: 100%;
	}

		.mobile-menu ul li {
			width: 100px; /* Fixed width */
			text-align: center;
			position: relative;

/*			border-width: 1px;
			border-color: lightgrey;
			border-style: solid;
*/
			margin: 5px;
			height: 60px;
			min-width: 100px;
		}

		.mobile-menu ul a {
			text-align: center;
			position: relative;

/*			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;
*/
/*			border-width: 1px;
			border-color: lightgrey;
			border-style: solid;
*/
			margin-right: 5px;
			height: 60px;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 5px;
		}

			.mobile-menu ul a i {
				font-size: 20px;
				margin-bottom: 5px;
			}

		/* MORE dropdown styles */
		.mobile-menu ul li.more .dropdown {
			position: absolute;
			bottom: 60px; /* height of nav */
			left: 0;
			background-color: #fff;
			list-style: none;
			padding: 0;
			margin: 0;
			width: 150px;
			z-index: 1000;
		}

			.mobile-menu ul li.more .dropdown li {
				padding: 10px;
				text-align: left;
			}

				.mobile-menu ul li.more .dropdown li a {
					flex-direction: row;
					justify-content: flex-start;
				}

					.mobile-menu ul li.more .dropdown li a i {
						margin-right: 10px;
						margin-bottom: 0;
					}






/* Responsive styles */

/* Mobile devices (max-width: 768px) */
@media (max-width: 768px) {
	.app-container {
		flex-direction: column;
	}
	/* Hide the desktop sidebar on mobile */
	.desktop-menu {
		display: none;
	}
	/* Show the mobile bottom navigation on mobile */
	.mobile-menu {
		display: block;
	}

	.content {
		/* Margin for the HEADER */
		/* Margin for the FOOTER */
		margin-bottom: 0px;
		padding-top: 0px;
		/*		
*/
	}
}

/* Desktop devices (min-width: 769px) */
@media (min-width: 769px) {
	/* Reserve space for the desktop sidebar */
	.content {
		margin-left: 246px;
		margin-bottom: 0px;
/*		padding :16px;
*/	}
	/* Hide the mobile bottom navigation on desktop */
	.mobile-menu {
		display: none;
	}
}



/* New header section */
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px; /* Adjust as needed */

/*	display: flex;
*/

	z-index: 1100;
}


/* Prevent the desktop menu items from scolling left/right */
.desktop-menu {
	overflow-x: hidden;
	white-space: nowrap;
}

/* Prevent the mobile menu items showing the scroll bar */
.mobile-menu {
	scrollbar-width: none;
	}

	/* Desktop Tab Outline */
	.desktop-menu ul a {
		border-width: 0px;
	}

	/* Mobile Tab Outline */
	.mobile-menu ul a {
		border-width: 0px; 
	}

	/* Tab Widths */
	.mobile-menu ul a {
		width: 80px;
		min-width: 80px;
	}

.mobile-nav-link {
	text-decoration: none;
	color: #333;
	min-width: 80px;
}

	/* Highlight background color  */	
	.mobile-nav-link.active {

/*		background-color: lightsteelblue; */		
/*		border-color: lightsteelblue;
*/		
color:red;
	}


/*.content {
	padding-top: 0px;
}
*/
.mud-button-root:disabled {
	background-color:lightgray !important;
	color:darkgray !important;
}