.site-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	min-height: 0;
	min-width: 0;
	max-width: 100vw;
}

.nav-container {
	position: relative;
	background: var(--nav-background-color);
	min-width: 0;
}

.content-container {
	position: relative;
	height: 100%;
	min-width: 0;
	max-width: 100%;
}

	.content-container .content {
		padding: 20px 2vw 80px 2vw;
		position: relative;
		max-width: 100%;
		min-width: 0;
	}

.content-container .crumbs {
	display: flex;
	align-items: center;
	padding: 20px 2vw;
}

	.content-container .crumbs .crumb {
		font-size: 1rem;
		line-height: 1rem;
		margin-right: 12px;
		text-decoration: none;
		color: var(--sub-text-color);
	}

		.content-container .crumbs .crumb::after {
			content: "\f054";
			margin-left: 8px;
			font-family: var(--font-icon);
			font-weight: 300;
		}

		.content-container .crumbs .crumb:last-child::after {
			content: "";
			margin-left: 0;
		}

	.content-container .crumbs i {
		margin-right: 5px;
	}

	.content-container .crumbs h1 {
		color: var(--text-color);
		font-size: 1rem;
		line-height: 1rem;
		font-weight: 700;
		letter-spacing: normal;
		margin: 0;
	}

.content-container .list-control-buttons {
	float: right;
	padding: 20px 2.5vw;
}

.content-container .footer-container {
	position: absolute;
	bottom: 0;
	padding: 20px;
	font-size: .85rem;
	line-height: .85rem;
	color: var(--sub-text-color);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	width: 100%;
	left: 0;
	margin-top: 20px;
}

	.content-container .footer-container .account {
		text-align: left;
	}

	.content-container .footer-container .copyright {
		text-align: right;
	}

		.content-container .footer-container .copyright a {
			color: var(--sub-text-color);
		}

.white-out-status {
	position: absolute;
	top: 50vh;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 102;
}

	.white-out-status::after {
		display: none;
		position: absolute;
		top: calc(50% - 20px);
		left: calc(50% - 20px - 50px);
		content: " ";
		height: 40px;
		width: 40px;
		border: 4px solid var(--border-color);
		border-top: 4px solid var(--color-2);
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	.white-out-status .status-message {
		display: none;
		position: absolute;
		top: calc(50% - 6px);
		left: calc(50% - 15px);
		font-size: 1.4rem;
		line-height: 1.4rem;
		letter-spacing: -1px;
		font-weight: 600;
		color: var(--color-1);
	}

	.white-out-status .olive-loading {
		display: none;
		background: url('/images/olive.png');
		background-repeat: no-repeat;
		background-size: 26px 30px;
		background-position: center center;
		position: absolute;
		top: calc(50% - 12px);
		left: calc(50% - 9px - 50px);
		content: " ";
		height: 30px;
		width: 26px;
		animation: throb 1s ease-in-out infinite;
	}

		.white-out-status.active,
		.white-out-status.active::after,
		.white-out-status .status-message.active,
		.white-out-status .olive-loading.active {
			display: block;
		}

.side-container {
	position: fixed;
	top: 0;
	right: -33vw;
	max-width: 33vw;
	min-width: 0;
	height: 100%;
	box-shadow: var(--shadow-very-far);
	padding: 25px 30px;
	background: var(--color-lightest);
	z-index: 200;
	visibility: hidden;
	opacity: 0;
	transition: 500ms ease-in-out;
}

	.side-container.active {
		right: 0;
		visibility: visible;
		opacity: 1;
		min-width: 33vw;
	}

	.side-container .close {
		width: 40px;
		height: 40px;
		top: 15px;
		left: -40px;
		background: var(--color-darkest) !important;
		color: var(--color-lightest) !important;
		border-radius: 0 !important;
		border-top-left-radius: var(--button-radius) !important;
		border-bottom-left-radius: var(--button-radius) !important;
	}

		.side-container .close::before {
			font-size: 1.4rem !important;
		}