.snapcast {

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

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

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

		&.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;
		}
	}

	.groups {
		padding-top: 10px;
		
		.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: -3.2rem;

							.icon {
								padding-right: 0;
							}
						}
					}

					& > .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;
							}
						}
					}
				}
			}
		}
	}
}