.autoflow {
	$headerH: $formInputH;
	$colMargin: $interiorMargin;
	$colW: 225px;
	$valW: 70px;
	$valPad: 2px;
	$rowH: 15px;
	font-size: 0.75rem;
	.l-autoflow-header {
		bottom: auto;
		height: $headerH;
		line-height: $headerH;
		span {
			vertical-align: middle;
		}
		.l-filter {
			margin-left: $interiorMargin;
		}
	}

	.l-autoflow-items {
		//		@include test(green);
		overflow-x: scroll;
		overflow-y: hidden;
		top: $headerH + $interiorMargin * 2;
		white-space: nowrap;
		.l-autoflow-col {
//			@include test();
			@include box-sizing(border-box);
			border-left: 1px solid $colorInteriorBorder;
			display: inline-block;
//			height: 100%;
			padding-left: $colMargin;
			padding-right: $colMargin;
			vertical-align: top;
			width: $colW;
			.l-autoflow-row {
				//				@include test(red);
				@include box-sizing(border-box);
				border-bottom: 1px solid rgba(#fff,0.05);
				display: block;
				height: $rowH;
				line-height: $rowH;
				margin-bottom: 1px; margin-top: 1px;
				position: relative;
				&:first-child {
					border-top: none;
				}
				&:hover {
					background: rgba(#fff, 0.1);
				}
				&.stale {
					color: darken($colorBodyFg, 20%);
				}
				&:not(.stale) {
					.l-autoflow-item.r {
						color: lighten($colorBodyFg, 20%);
					}
				}
				&.alert {
					.l-autoflow-item.r {
						background: $colorFormError;
					}
				}
				&.first-in-group {
					border-top: 1px solid lighten($colorInteriorBorder, 20%);
				}
				.l-autoflow-item {
					display: block;
					&.l {
						//						@include test(orange);
						float: none;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: auto;
					}
					&.r {
						//						@include test(blue);
						@include border-radius($controlCr);
						float: right;
						margin-left: $interiorMargin;
						padding-left: $valPad;
						padding-right: $valPad;
						text-align: right;
					}
				}
			}

			&:first-child {
				border-left: none;
				padding-left: 0;
			}
		}
	}
}