* {
	font-family: 'Work Sans', 'Roboto', 'Arial', 'sans-serif';
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	background-color: #111;
}

body, html {
	height: 100%;
	font-family: Arial, sans-serif;
}

.container {
	display: flex;
	height: 100vh;
}

main {
	flex: 1;
	display: flex;
	flex-direction: column;

	.main-container {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		align-self: stretch;

		.top-content {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			align-self: stretch;
			padding: 10px 10px 10px 20px;
			background: transparent;
			border-bottom: $layoutBorder;

			h1 {
				flex: 1;
				color: white;
				font-weight: 600;
				font-size: 24px;
			}
		}

		.alert {

		}

		.bottom-content {
			display: flex;
			flex-direction: row;
			align-self: stretch;
			justify-content: flex-start;
			align-items: flex-start;
			flex: 1;
			overflow-y: auto;
			background: radial-gradient(circle at 0% 53%, rgba($pinkyRed, 0.8) 10%, transparent 45%),
			radial-gradient(circle at 135% 53%, rgba($seaBlue, 0.8) 10%, transparent 95%),
			radial-gradient(circle at 50% 80%, rgba($limeGreen, 0.8) 40%, transparent 95%);

			.page-content {
				flex: 2;
				overflow-y: auto;
				padding: 20px;
				background: rgba($layoutBackground, .9);
				display: flex;
				flex-direction: column;
				align-self: stretch;
			}

			.page-panel {
				flex: 1;
				overflow-y: auto;
				align-self: stretch;
				background: $layoutBackground;
				border-top: none;

				&.left-panel {
					border-right: $layoutBorder;
					border-left: none;
				}

				&.right-panel {
					border-left: $layoutBorder;
					border-right: none;
				}
			}
		}


	}
}