filter {
	>.collection {
		overflow: visible;

		>.collection-item {
			display: flex;
			// align-items: baseline; // this does not work in IE11
			padding-top: 0;
			padding-bottom: 0;

			&:hover {
				background-color: #f2f2f2;
			}

			>.label {
				margin-top: 5px;
			}

			>.operator {
				width: 80px;
				margin-left: 10px;
				margin-right: 10px;

				.input-field {
					margin-top: 0;
					margin-bottom: 0;
				}
			}

			>.value {
				flex: 2;

				compose {
					// in IE11 these elements are not vertically aligned without these properties
					display: block;

					md-input {
						display: block;
					}
				}

				.input-field {
					margin-top: 0;
					margin-bottom: 0;
				}

				// adjust checkbox filter vertical position
				md-checkbox {
					label {
						span::before {
							margin-top: 10px;
						}
					}
				}
			}

			>.remove {
				align-self: center;
				margin-left: 10px;
			}
		}
	}
}