nav {
	position: fixed;
	width: var(--nav-width);
	height: 100vh;
	padding: 0 30px 30px 30px;
	box-sizing: border-box;
}

	nav .logo {
		display: flex;
		align-items: center;
		width: auto;
		height: 58px;
		justify-content: center;
		position: relative;
		left: -5px;
	}

		nav .logo img {
			height: 35px;
			width: auto;
		}

		nav .logo span {
			color: var(--color-lightest);
			font-weight: 700;
			margin-left: 5px;
		}

	nav .nav-links {
		margin-top: 22px;
	}

	nav ul {
		list-style: none;
		position: relative;
		margin: 0;
		padding: 0;
		/*transition: all 300ms;*/
	}

		nav ul li {
			position: relative;
			text-align: left;
			display: block;
			margin: 0;
			padding: 10px 0;
			font: var(--nav-font);
			text-decoration: none;
			white-space: nowrap;
			text-transform: var(--nav-text-transform);
			color: var(--nav-link-color);
			cursor: pointer;
		}

			nav ul li a {
				display: block;
				text-decoration: none;
				color: var(--nav-link-color);
			}

			nav ul li:hover,
			nav ul li:hover a {
				color: var(--color-lightest);
			}

			/* Font Awesome's JS kit swaps <i> for <svg>, so match both to keep the
			   leading tab icon's size and spacing consistent. */
			nav ul li i:not(.tab-arrow),
			nav ul li svg:not(.tab-arrow) {
				margin-right: 10px;
				font-size: 1.1rem;
				text-align: center;
				width: 20px;
				position: relative;
				top: 1px;
			}

			nav ul li.active,
			nav ul li.active a {
				color: var(--color-lightest);
				font-weight: 700;
			}

				nav ul li.active i {
					color: var(--color-lightest);
				}

			/* Tab header: icon + text + arrow. The whole row is the click target so
			   any of the three toggles the section. */
			nav ul li .tab-header {
				display: flex;
				align-items: center;
				cursor: pointer;
			}

				nav ul li .tab-header .tab-title {
					flex: 0 1 auto;
				}

				/* Drawn with borders instead of a Font Awesome glyph. The kit is loaded
				   as JS (SVG mode), which never registers the "Font Awesome 6 Pro"
				   @font-face, so a content: "\f107" pseudo-element renders nothing.
				   currentColor keeps it in sync with the hover/active link colors. */
				nav ul li .tab-header .tab-arrow {
					flex: 0 0 auto;
					margin-left: auto;
					width: 10px;
					height: 10px;
					display: block;
					transition: transform 300ms ease;
				}

					nav ul li .tab-header .tab-arrow::before {
						content: "";
						display: block;
						width: 7px;
						height: 7px;
						margin-top: -2px;
						border-right: 2px solid currentColor;
						border-bottom: 2px solid currentColor;
						transform: rotate(45deg);
					}

			nav ul li.expanded .tab-header .tab-arrow {
				transform: rotate(180deg);
			}

			/* Sub-list slides down. max-height animates from 0 to a value that only
			   needs to exceed the tallest section. */
			nav ul li ul {
				max-height: 0;
				background: none;
				padding: 0 15px;
				margin: 0;
				position: static;
				overflow: hidden;
				transition: max-height 300ms ease;
			}

			nav ul li.expanded ul {
				max-height: 600px;
			}

			nav ul li ul li {
				opacity: 0;
				transform: translateY(-6px);
				padding: 0 0 0 8px;
				margin-left: 0;
				transition: opacity 200ms ease, transform 200ms ease;
			}

			nav ul li.expanded ul li {
				opacity: 1;
				transform: translateY(0);
				transition-delay: 80ms;
			}

			nav ul li ul li a {
				color: var(--nav-link-color) !important;
				font-weight: 400 !important;
				padding: 10px;
			}

				nav ul li ul li a:hover {
					color: var(--color-lightest) !important;
					background: rgba(0,0,0,.3);
					border-radius: 15px;
				}

			nav ul li ul li.active a {
				color: var(--color-lightest) !important;
				font-weight: 700 !important;
			}

			nav ul li ul li:first-child {
				margin-top: 15px;
			}

			nav ul li ul li.break {
				border-top: 1px solid var(--border-color-reverse);
				padding-top: 16px;
				margin-top: 12px;
			}

			nav ul li a span.subtext {
				font-size: .7rem;
				line-height: .7rem;
				vertical-align: top;
				margin-left: 6px;
			}

	nav .customer {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: .9rem;
		color: var(--color-lightest);
		padding: 20px;
		background-color: var(--border-color);
	}

		nav .customer .customer-toggle {
			display: block;
			width: 100%;
			border: 0;
			background: none;
			color: var(--color-lightest);
			font-size: .9rem;
			cursor: pointer;
			padding: 0;
		}

			nav .customer .customer-toggle i {
				margin-left: 6px;
				font-size: .75rem;
			}

		nav .customer .instance-picker {
			margin-top: 12px;
			max-height: 240px;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			gap: 4px;
		}

			nav .customer .instance-picker .instance-option {
				display: block;
				width: 100%;
				border: 0;
				border-radius: 4px;
				background-color: rgba(255, 255, 255, .08);
				color: var(--color-lightest);
				font-size: .85rem;
				text-align: center;
				padding: 8px 10px;
				cursor: pointer;
			}

				nav .customer .instance-picker .instance-option:hover:not(:disabled) {
					background-color: rgba(255, 255, 255, .2);
				}

				nav .customer .instance-picker .instance-option.current {
					font-weight: bold;
					cursor: default;
					opacity: .7;
				}

				nav .customer .instance-picker .instance-option:disabled {
					cursor: default;
				}