.flex-grid {

	display: flex;
	flex-direction: column;

	width: 100vw;
	height: calc(100vh - 50px);

	font-family: "Roboto", sans-serif;

	&.include-footer {
		height: -webkit-calc(100vh - 140px);
		height: -moz-calc(100vh - 140px);
		height: calc(100vh - 140px);
	}

	&__header {
		padding: 15px 20px;
		border-bottom: 1px solid #EEEEEE;
		
		h3 {
			font-size: 20px;
			font-weight: 400;
			color: #999999;
			margin: 15px 0 0 0;

			& > i {
				margin-right: 5px;
			}

			button,
			.flex-grid__button {
				-webkit-appearance: none;
				border: 0;
				font-size: 70%;
				font-weight: 700;
				background-color: #337AB7;
				color: #fff;
				border-radius: 4px;
				padding: 7px 10px;
				margin-top: -3px;
				box-shadow: 0px 2px 4px rgba(0,0,0,.1);

				.fa { margin-right: 5px; }

				&:hover { 
					text-decoration: none;
					background-color: darken(#337AB7, 5);
					cursor: pointer; 
				}

				&.grey {
					background-color: #888;
					color: #fff;
					&:hover { background-color: darken(#888, 5); }
				}

				&.transparent {
					background-color: transparent;
					color: #337AB7;
					box-shadow: none;

					&:hover {
						background-color: #337AB7;
						color: #fff;
					}
				}

				&--description {
					@extend .flex-grid__button;
					background-color: transparent;
					color: #999;
					box-shadow: none;

					&:hover {
						background-color: transparent;
						cursor: default;
					}
				}

			}
		}

		@include cuckoo-theme('cyborg') {
			border-bottom: 1px solid #071D25;
		}

		@include cuckoo-theme('night') {
			border-bottom: 1px solid #5E5A62;
		}

	}

	&__body {
		display: flex;
		flex-basis: 100%;
		overflow: auto;

		&.background-grey {
			background-color: #f5f5f5;
		}

		&--center {
			@extend .flex-grid__body;
			justify-content: center;
			overflow-y: auto;
		}

		@include cuckoo-theme('night') {
			background-color: #232323;
		}

		@include cuckoo-theme('cyborg') {
			background-color: $cyborg_background_color;
		}
	}

	&__align-vertical {
		align-self: center;
	}

	&__footer {
		display: flex;
		flex-shrink: 0;
		justify-content: center;
		flex-basis: 50px;
		background-color: #111;
		padding: 15px 20px;

		.logo {
			margin-left: 20px;
			img {
				height: 16px;

				& + a {
					margin-left: 15px;
				}
			}
		}
		.footnote {
			color: #888;

			a {
				margin-left: 20px;
				color: #aaa;
			}
		}

		&.spread-alignment {
			justify-content: space-between;
			padding: 20px 30px 15px;
		}

	}

	&__nav { 
		flex-basis: 350px; 
		flex-shrink: 0;
		background-color: #F5F5F5;
		border-right: 1px solid #CFCFCF;
		overflow-y: auto;
		overflow-x: hidden;

		@include cuckoo-theme('cyborg') {
			background-color: $cyborg_background_color;
			border-color: $cyborg_border_color;
		}

		@include cuckoo-theme('night') {
			background-color: $night_background_color;
			border-color: $night_border_color;
		}

	}

	&__content { 
		flex-basis: 100%; 
		overflow-y: auto;
	}

	&__container {
		display: flex;
		flex-basis: 1180px;
		margin: 15px 0;
	}

	&__column {

		flex-basis: 100%;
		overflow: hidden;

		&.one-third {
			flex-basis: percentage(1/3);
		}
		&.two-third {
			flex-basis: percentage(2/3);
		}

		&--fixed {
			flex-grow: 0;
			flex-shrink: 0;
		}

		&.scrollable {
			overflow-y: auto;
		}

	}

	&__horizontal {
		@extend .flex-grid;
		flex-direction: row;

		.flex-grid__column {
			margin: 0 15px;

			// utilities for fixed-width containers, they won't grow and won't
			// shrink because of their contents, which can be nice sometimes.
			&--xs {
				@extend .flex-grid__column;
				@extend .flex-grid__column--fixed;
				flex-basis: 150px;
			}

			&--sm {
				@extend .flex-grid__column;
				@extend .flex-grid__column--fixed;
				flex-basis: 250px;
			}

			&--md {
				@extend .flex-grid__column;
				@extend .flex-grid__column--fixed;
				flex-basis: 400px;	
			}
		}

		// utility class for 'auto'-ing the height
		&--grow {
			@extend .flex-grid__horizontal;
			height: auto;
		}
	}

	&__fluid {
		// enable equally distributed widths to be aligned perfect
		height: auto;
		width: calc(100% + 30px);
		margin-left: -15px;
	}

}

// another flex utility, this utility 
// quick-flexes a html object, with
// some styles applied to it.
.flex-display {

	display: flex;
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;

	& > * {
		flex-basis: 100%;
	}

	&.divided {

		margin: 30px 0 15px 0;

		& > * {
			flex-basis: 100%;
			padding: 5px 10px;
			border: 1px solid #999;
			border-right-width: 0;
			text-align: center;

			&.highlight-dark {
				font-weight: 700;
				background-color: #999;
				color: #fff;
				flex: 0 0 auto;
			}

			&:last-child {
				border-right-width: 1px;
			}
		}
	}

	&.rounded-off {
		& > *:first-child {
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
		}
		& > *:last-child {
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}
	}

	&.monospaced {
		font-family: monospace;
	}

	@include cuckoo-theme('cyborg') {
		color: $cyborg_secundary_color;
		.highlight-dark { 
			color: $cyborg_primary_color; 
			background-color: $cyborg_secundary_color;
		}

		& > * { border-color: $cyborg_secundary_color; }
	}

}

/*
	Flex utility: flex-distribute
	distributes items in a simple flex-layout container
 */
.flex-distribute {
	display: flex;
	align-items: center;
	justify-content: space-between;
}