#samp-ctrl {
	display: flex;
	padding: dist(-2);

	flex-direction: row;
	@include media($phone) {
		flex-direction: column;
	}

	justify-content: center;
	align-items: stretch;

	> div {
		margin: dist(-2) dist(-1);
	}

	label {
		line-height: 1.8;
		font-weight: bold;
	}

	input,select {
		width: 6em;

		@include media($phone) {
			width: 100%;
		}
	}

	// -- spectrogram --

	#tile-cfg input {
		width: 3em;
	}

	#interval {
		width: 4.5em;
	}
}

.Box.chartbox {
	display: flex;
	flex-direction: row;

	@include media($phone) {
		flex-direction: column;
	}

	.stats {
		flex: 0 1;
		position: relative;

		@include media($phone) {
			table {
				margin: 0 auto;
			} // center the table

			td,th {
				width: 50%;
			}
		}

		th,td {
			@include nowrap;
		}

		th sub { font-weight: normal;}

		td {
			min-width: 100px;
		}

		td:after {
			font-size: 90%;
			padding-left: .5em;
		}

		//#stat-count
		#stat-f-s:after {content: "Hz"}
		#stat-i-peak:after {content: "mA"}
		#stat-i-rms:after {content: "mA"}

		padding-bottom: 50px;

		// auto reload box
		.ar {
			position: absolute;
			bottom:dist(-2);
			width:100%;
			text-align: center;

			input[type=number] {
				width: 4em;
			}

			input[type=button] {
				margin-left: dist(-2);
			}
		}
	}
}