/***************************/
/* Menu */
/***************************/
.master {
	overflow: hidden; /*for scroll in content*/
}

	.master .menu {
		/*flex: 0 0 14em;*/
		flex-shrink: 0;
		width: 14em;
		background-color: var(--secondary-light90);
		transition: width linear 0.2s;
		overflow-x: hidden;
		overflow-y: auto;
		max-height: calc(100vh - 64px);
	}

	.master #menuToggle {
		transition: all linear 0.2s;
		height: 1.6em;
	}

	.master .menu h3,
	.master .menu h4 {
		color: var(--black);
		transition: opacity linear 0.2s;
		/* Keeps heights from jumping around when expand collapse */
		display: flex;
		align-items: center;
		min-height: 3em;
		overflow: hidden;
		word-wrap: break-word;
		font-weight: 600;
	}

	.master .menu .menuItem.selected h3,
	.master .menu .menuItem.selected h4 {
		color: var(--white);
		transition: opacity linear 0.2s;
	}

	/* Restore larger items that have been totally hidden because they have no images */
	.master .menu h2,
	.master .menu h3,
	.master .menu h5 {
		transition: font-size linear 0.2s;
		font-size: initial;
	}

	.master .menu .menuItem.selected img {
		filter: none;
	}

	.master .menu a {
		color: var(--black);
		text-decoration: none;
	}

	.master #logo {
		width: 3em;
		height: auto;
		transition: all linear 0.2s;
		padding: 0.25em;
		border-radius: 0.25em;
		background: var(--secondary-light90);
	}

	.master .menu #logoutText {
		transition: all linear 0.2s;
	}

	.master .menu .menuItem {
		border-radius: 2.5em;
		cursor: pointer;
		background: var(--black10);
		/*justify-content: start;
		transition: justify-content linear 0.2s;*/
	}

		.master .menu .menuItem:hover {
			outline: 2px solid var(--secondary-med);
		}

		.master .menu .menuItem.selected {
			color: var(--white);
			background-color: var(--primary);
		}

			.master .menu .menuItem.selected img {
				filter: invert();
			}

	.master .menuItem img {
		width: 2.4em;
		height: 2.4em;
		transition: all linear 0.2s;
		padding: 0.5em 0em 0.5em 1.0em;
		transform-origin: 12px;
	}

		.master .menuItem img.open {
			transform: rotate(180deg);
			transform-origin: 12px;
		}

	.master .menu .toggleMenu {
		padding: 0.25em 1.0em 0.25em 0.25em;
	}

	.master .menu .menuItemSecondary {
		color: var(--secondary);
		padding-left: 2em;
		line-height: 2em;
		display: none;
		height: auto;
		transition: height linear 0.2s;
	}

		.master .menu .menuItemSecondary.shown {
			display: flex;
			transition: height linear 0.2s;
		}

		.master .menu .menuItemSecondary h5:hover {
			border-left: 3px solid var(--primary-light);
			padding-left: 0.25em;
		}

		.master .menu .menuItemSecondary h5.selected {
			border-left: 4px solid var(--secondary);
			padding-left: 0.5em;
		}

	.master .main {
		overflow: hidden; /*for scroll in content*/
	}

		.master .main .header {
			height: 4em;
		}

		.master .main .content {
			overflow: auto;
			margin-top: 0.5em;
			height: calc(100vh - 4.5em); /*doesn't work in mobile but can't get a better solution*/
		}

			.master .main .content > * {
				padding: 1em; /* Default internal items to padding, override at those elements if you want to fill */
			}
	/***************************/
	/* Menu - Mini */
	/***************************/
	.master.miniMenu .menu {
		/*flex: 5em 5em 5em;*/
		width: 5em;
		transition: width linear 0.2s;
	}

		.master.miniMenu .menu #logo {
			width: 2em;
			height: auto;
			transition: all linear 0.2s;
		}

		.master.miniMenu .menu #logoutText {
			width: 0px;
			opacity: 0;
			transition: all linear 0.2s;
		}

		.master.miniMenu .menu .menuItem img {
			width: 2em;
			height: 2em;
			transition: all linear 0.2s;
			padding: 0.25em;
			margin-left: 0.5em;
		}

		.master.miniMenu .menu h2,
		.master.miniMenu .menu h3,
		.master.miniMenu .menu h4,
		.master.miniMenu .menu h5 {
			opacity: 0;
			transition: all linear 0.2s;
			height: 3em;
			/*white-space:nowrap;*/
		}

		/* Hide larger items by shrinking up (no images, so collapse entirely) */
		.master.miniMenu .menu h2,
		.master.miniMenu .menu h3,
		.master.miniMenu .menu h5 {
			transition: all linear 0.2s;
			font-size: 0px;
		}

	.master.miniMenu #menuToggle {
		rotate: 180deg;
		transition: rotate linear 0.2s;
		height: 1.2em;
	}

	.master.miniMenu .menu .menuItemSecondary.shown {
		height: 0;
		transition: height linear 0.2s;
	}