Iris/src/scss/components/_snapcast.scss

.snapcast {

	button {
		margin-bottom: 0;
	}
					
	.volume-control {

		.mute-control {
			display: inline-block;
			float: left;
			padding: 0 10px;
			border: 0;
		}

		.slider-wrapper {
			margin-left: 25px;
		}

		&.muted {
			.slider .progress {
				background: $mid_grey;
			}
		}
		
		&.group-volume-control {
			padding: 10px 0 5px;
			display: block;
			width: 100%;
			box-sizing: border-box;
		}

		&.client-volume-control {
			padding-top: 4px;
			width: 80%;
			padding-right: 10px;
			display: inline-block;
			vertical-align: middle;
			box-sizing: border-box;
		}
	}

	.group {
		padding-top: 10px;
		border-top: 1px solid $grey;

		&:not(:last-child){
			padding-bottom: 20px;
		}

		.clients {
			padding: 0 10px;

			.client {
				@include clearfix();
				border: 0;
				padding: 0;
				clear: both;

				&:not(:first-child){
					padding-top: 8px;
				}

				& > .name {
					width: 40%;
					padding-bottom: 4px;
					position: relative;
					display: block;
					box-sizing: border-box;
					border: 0;

					input {
						width: 100%;
						padding-right: 30px;
					}

					.group-dropdown-field {
						float: right;
						margin-bottom: -4rem;
					}
				}

				& > .volume {
					width: 28%;
					padding-left: 2%;
				}

				& > .latency {
					width: 28%;
					padding-left: 2%;
				}

				& > .volume,
				& > .latency {
					input {
						width: 20%;
					}
				}

				.latency-control {
					display: inline-block;
					vertical-align: middle;
					padding-top: 4px;
					width: 80%;
					padding-right: 10px;
					box-sizing: border-box;

					.zero {
						position: absolute;
						top: -4px;
						left: 50%;
						bottom: 0;
						width: 1px;
						background: $grey;
						z-index: 1;
					}

					.progress.positive {
						border-top-left-radius: 0;
						border-bottom-left-radius: 0;
					}

					.progress.negative {
						border-top-right-radius: 0;
						border-bottom-right-radius: 0;
					}
				}

				@include responsive($bp_medium){
					padding-left: 0 !important;
					padding-right: 0 !important;
					padding-top: 0 !important;

					.col {
						@include clearfix();
						clear: both;
						display: block !important;
						float: none !important;
						width: auto !important;
						padding: 0;

						&.volume,
						&.latency {
							padding-top: 5px;
						}
					}
				}
			}
		}
	}
}