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

	.master .menu {
		width: 16em;
		background-color: var(--primary);
		transition: width linear 0.2s;
		overflow: hidden;
		
	}

	.master #menuToggle {
		width: 2em;
		margin-left: 0.5em;
		transition: rotate linear 0.2s;
	}

	.master .menu h3 {
		color: var(--primary-light);
		transition: opacity linear 0.2s;
	}

	.master .menu a {
		color: white;
		text-decoration: none;
	}

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

	.master .menu .menuItem {
		border-radius: 0.5em;
		cursor: pointer;
		/*justify-content: start;
		transition: justify-content linear 0.2s;*/
	}

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

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

			.master .menu .menuItem.selected h3 {
				/*color: var(--primary-light);*/
			}

	.master .menuItem img {
		width: 2.4em;
		height: 2.4em;
		transition: all linear 0.2s;
		padding: 0.5em;
	}

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

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

		.master .main .content {
			overflow: auto;
			height: calc(100vh - 4em); /*doesn't work in mobile but can't get a better solution*/
		}
	/***************************/
	/* Menu - Mini */
	/***************************/
	.master.miniMenu .menu {
		width: 4em;
		transition: width linear 0.2s;
	}

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

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

		.master.miniMenu .menu h3 {
			opacity: 0;
			transition: opacity linear 0.2s;
		}

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