/*
	Grid system
	========================================
*/

/* Fixed grid system */
.row {
	margin-left: calc(var(--grid-gutter-width) * -1);
	zoom: 1;
}

.row:before,
.row:after {
	display: table;
	content: "";
	line-height: 0;
}

.row:after {
	clear: both;
}

[class*="span"] {
	float: left;
	min-height: 1px;
	margin-left: var(--grid-gutter-width);
}

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
	width: calc((var(--grid-columns) * var(--grid-column-width)) + (var(--grid-gutter-width) * (var(--grid-columns) - 1)));
}

/* Generate .spanX classes */
.span1 { width: var(--grid-column-width); }
.span2 { width: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width)); }
.span3 { width: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 2); }
.span4 { width: calc(var(--grid-column-width) * 4 + var(--grid-gutter-width) * 3); }
.span5 { width: calc(var(--grid-column-width) * 5 + var(--grid-gutter-width) * 4); }
.span6 { width: calc(var(--grid-column-width) * 6 + var(--grid-gutter-width) * 5); }
.span7 { width: calc(var(--grid-column-width) * 7 + var(--grid-gutter-width) * 6); }
.span8 { width: calc(var(--grid-column-width) * 8 + var(--grid-gutter-width) * 7); }
.span9 { width: calc(var(--grid-column-width) * 9 + var(--grid-gutter-width) * 8); }
.span10 { width: calc(var(--grid-column-width) * 10 + var(--grid-gutter-width) * 9); }
.span11 { width: calc(var(--grid-column-width) * 11 + var(--grid-gutter-width) * 10); }
.span12 { width: calc(var(--grid-column-width) * 12 + var(--grid-gutter-width) * 11); }

/* Generate .offsetX classes */
.offset1 { margin-left: calc(var(--grid-column-width) + var(--grid-gutter-width) * 2); }
.offset2 { margin-left: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width) * 3); }
.offset3 { margin-left: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 4); }
.offset4 { margin-left: calc(var(--grid-column-width) * 4 + var(--grid-gutter-width) * 5); }
.offset5 { margin-left: calc(var(--grid-column-width) * 5 + var(--grid-gutter-width) * 6); }
.offset6 { margin-left: calc(var(--grid-column-width) * 6 + var(--grid-gutter-width) * 7); }
.offset7 { margin-left: calc(var(--grid-column-width) * 7 + var(--grid-gutter-width) * 8); }
.offset8 { margin-left: calc(var(--grid-column-width) * 8 + var(--grid-gutter-width) * 9); }
.offset9 { margin-left: calc(var(--grid-column-width) * 9 + var(--grid-gutter-width) * 10); }
.offset10 { margin-left: calc(var(--grid-column-width) * 10 + var(--grid-gutter-width) * 11); }
.offset11 { margin-left: calc(var(--grid-column-width) * 11 + var(--grid-gutter-width) * 12); }

/* Fluid grid system */
.row-fluid {
	width: 100%;
	zoom: 1;
}

.row-fluid:before,
.row-fluid:after {
	display: table;
	content: "";
	line-height: 0;
}

.row-fluid:after {
	clear: both;
}

.row-fluid [class*="span"] {
	display: block;
	width: 100%;
	min-height: calc(var(--base-line-height) + 10px);
	box-sizing: border-box;
	float: left;
	margin-left: var(--fluid-grid-gutter-width);
	margin-left: calc(var(--fluid-grid-gutter-width) - 0.5%);
}

.row-fluid [class*="span"]:first-child {
	margin-left: 0;
}

/* Space grid-sized controls properly if multiple per line */
.row-fluid .controls-row [class*="span"] + [class*="span"] {
	margin-left: var(--fluid-grid-gutter-width);
}

/* Generate .spanX classes for fluid grid */
.row-fluid .span1 { width: var(--fluid-grid-column-width); }
.row-fluid .span2 { width: calc(var(--fluid-grid-column-width) * 2 + var(--fluid-grid-gutter-width)); }
.row-fluid .span3 { width: calc(var(--fluid-grid-column-width) * 3 + var(--fluid-grid-gutter-width) * 2); }
.row-fluid .span4 { width: calc(var(--fluid-grid-column-width) * 4 + var(--fluid-grid-gutter-width) * 3); }
.row-fluid .span5 { width: calc(var(--fluid-grid-column-width) * 5 + var(--fluid-grid-gutter-width) * 4); }
.row-fluid .span6 { width: calc(var(--fluid-grid-column-width) * 6 + var(--fluid-grid-gutter-width) * 5); }
.row-fluid .span7 { width: calc(var(--fluid-grid-column-width) * 7 + var(--fluid-grid-gutter-width) * 6); }
.row-fluid .span8 { width: calc(var(--fluid-grid-column-width) * 8 + var(--fluid-grid-gutter-width) * 7); }
.row-fluid .span9 { width: calc(var(--fluid-grid-column-width) * 9 + var(--fluid-grid-gutter-width) * 8); }
.row-fluid .span10 { width: calc(var(--fluid-grid-column-width) * 10 + var(--fluid-grid-gutter-width) * 9); }
.row-fluid .span11 { width: calc(var(--fluid-grid-column-width) * 11 + var(--fluid-grid-gutter-width) * 10); }
.row-fluid .span12 { width: 100%; }

/* Generate .offsetX classes for fluid grid */
.row-fluid .offset1 { margin-left: calc(var(--fluid-grid-column-width) + var(--fluid-grid-gutter-width) * 2); }
.row-fluid .offset1:first-child { margin-left: calc(var(--fluid-grid-column-width) + var(--fluid-grid-gutter-width)); }
.row-fluid .offset2 { margin-left: calc(var(--fluid-grid-column-width) * 2 + var(--fluid-grid-gutter-width) * 3); }
.row-fluid .offset2:first-child { margin-left: calc(var(--fluid-grid-column-width) * 2 + var(--fluid-grid-gutter-width)); }
.row-fluid .offset3 { margin-left: calc(var(--fluid-grid-column-width) * 3 + var(--fluid-grid-gutter-width) * 4); }
.row-fluid .offset3:first-child { margin-left: calc(var(--fluid-grid-column-width) * 3 + var(--fluid-grid-gutter-width)); }
.row-fluid .offset4 { margin-left: calc(var(--fluid-grid-column-width) * 4 + var(--fluid-grid-gutter-width) * 5); }
.row-fluid .offset4:first-child { margin-left: calc(var(--fluid-grid-column-width) * 4 + var(--fluid-grid-gutter-width)); }
.row-fluid .offset5 { margin-left: calc(var(--fluid-grid-column-width) * 5 + var(--fluid-grid-gutter-width) * 6); }
.row-fluid .offset5:first-child { margin-left: calc(var(--fluid-grid-column-width) * 5 + var(--fluid-grid-gutter-width)); }
.row-fluid .offset6 { margin-left: calc(var(--fluid-grid-column-width) * 6 + var(--fluid-grid-gutter-width) * 7); }
.row-fluid .offset6:first-child { margin-left: calc(var(--fluid-grid-column-width) * 6 + var(--fluid-grid-gutter-width)); }
.row-fluid .offset7 { margin-left: calc(var(--fluid-grid-column-width) * 7 + var(--fluid-grid-gutter-width) * 8); }
.row-fluid .offset7:first-child { margin-left: calc(var(--fluid-grid-column-width) * 7 + var(--fluid-grid-gutter-width)); }
.row-fluid .offset8 { margin-left: calc(var(--fluid-grid-column-width) * 8 + var(--fluid-grid-gutter-width) * 9); }
.row-fluid .offset8:first-child { margin-left: calc(var(--fluid-grid-column-width) * 8 + var(--fluid-grid-gutter-width)); }
.row-fluid .offset9 { margin-left: calc(var(--fluid-grid-column-width) * 9 + var(--fluid-grid-gutter-width) * 10); }
.row-fluid .offset9:first-child { margin-left: calc(var(--fluid-grid-column-width) * 9 + var(--fluid-grid-gutter-width)); }
.row-fluid .offset10 { margin-left: calc(var(--fluid-grid-column-width) * 10 + var(--fluid-grid-gutter-width) * 11); }
.row-fluid .offset10:first-child { margin-left: calc(var(--fluid-grid-column-width) * 10 + var(--fluid-grid-gutter-width)); }
.row-fluid .offset11 { margin-left: calc(var(--fluid-grid-column-width) * 11 + var(--fluid-grid-gutter-width) * 12); }
.row-fluid .offset11:first-child { margin-left: calc(var(--fluid-grid-column-width) * 11 + var(--fluid-grid-gutter-width)); }

/* Input grid sizing */
input.span1, textarea.span1, .uneditable-input.span1 { width: calc(var(--grid-column-width) - 14px); }
input.span2, textarea.span2, .uneditable-input.span2 { width: calc((var(--grid-column-width) * 2) + var(--grid-gutter-width) - 14px); }
input.span3, textarea.span3, .uneditable-input.span3 { width: calc((var(--grid-column-width) * 3) + (var(--grid-gutter-width) * 2) - 14px); }
input.span4, textarea.span4, .uneditable-input.span4 { width: calc((var(--grid-column-width) * 4) + (var(--grid-gutter-width) * 3) - 14px); }
input.span5, textarea.span5, .uneditable-input.span5 { width: calc((var(--grid-column-width) * 5) + (var(--grid-gutter-width) * 4) - 14px); }
input.span6, textarea.span6, .uneditable-input.span6 { width: calc((var(--grid-column-width) * 6) + (var(--grid-gutter-width) * 5) - 14px); }
input.span7, textarea.span7, .uneditable-input.span7 { width: calc((var(--grid-column-width) * 7) + (var(--grid-gutter-width) * 6) - 14px); }
input.span8, textarea.span8, .uneditable-input.span8 { width: calc((var(--grid-column-width) * 8) + (var(--grid-gutter-width) * 7) - 14px); }
input.span9, textarea.span9, .uneditable-input.span9 { width: calc((var(--grid-column-width) * 9) + (var(--grid-gutter-width) * 8) - 14px); }
input.span10, textarea.span10, .uneditable-input.span10 { width: calc((var(--grid-column-width) * 10) + (var(--grid-gutter-width) * 9) - 14px); }
input.span11, textarea.span11, .uneditable-input.span11 { width: calc((var(--grid-column-width) * 11) + (var(--grid-gutter-width) * 10) - 14px); }
input.span12, textarea.span12, .uneditable-input.span12 { width: calc((var(--grid-column-width) * 12) + (var(--grid-gutter-width) * 11) - 14px); }

input,
textarea,
.uneditable-input {
	margin-left: 0;
}

/* Space grid-sized controls properly if multiple per line */
.controls-row [class*="span"] + [class*="span"] {
	margin-left: var(--grid-gutter-width);
}

/* Reset utility classes due to specificity */
[class*="span"].hide,
.row-fluid [class*="span"].hide {
	display: none;
}

[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
	float: right;
}