form.quixote div.grid {
	float: left;
	box-sizing: border-box;
	padding-right: 1em;
	clear: none;
}

@each $i in 1, 2, 3, 4, 6, 12 {
	@for $j from 1 through $i {
		div.cell.grid-#{$j}-#{$i},
		div.dataview div.grid-#{$j}-#{$i},
		form.quixote div.grid-#{$j}-#{$i} {
			clear: none;
			&.newline {
				clear: both;
			}
		}
		div.grid-#{$j}-#{$i} {
			float: left;
			box-sizing: border-box;
			padding-right: 1em;
			width: (100*$j/$i+0%);
			@media screen and (max-width: $mobile-limit) {
				@if $i == 4 and $j <= 2 { width: 50%; }
				@else if $i == 4 and $j >  2 { width: 100%; }
				@else if $i == 6 and $j <= 2 { width: (100/3+0%); }
				@else if $i == 6 and $j == 3 { width: 50%; }
				@else if $i == 6 and $j <= 5 { width: (200/3+0%); }
				@else if $i == 6 and $j == 6 { width: 100%; }
				@else if $i == 12 and $j <= 4 { width: (100/3+0%); }
				@else if $i == 12 and $j <= 7 { width: 50%; }
				@else if $i == 12 and $j <= 11 { width: (200/3+0%); }
				@else if $i == 12 and $j == 12 { width: 100%; }
			}
			@media screen and (max-width: $very-small-limit) {
				width: 100%;
			}
			textarea, select, input[type=text], input[type=password], input[type=email] {
				width: 100%;
			}
		}
		form div.grid-#{$j}-#{$i} + h3,
		form div.grid-#{$j}-#{$i} + h4,
		form div.grid-#{$j}-#{$i} + p,
		form div.grid-#{$j}-#{$i} + div {
			clear: both;
		}
	}
}

form div[class*=grid-] span.select2-selection,
form div[class*=grid-] div.select2-container {
	width: 100% !important;
}