$pageMargin: 24px;

.expBackground {
	background: #f2f2f2;
	height: 100%;

	.content {
		/* TODO: here is 32 rather than $pageMargin is because experiment page `content` position */
		margin-top: 32px;
		margin-bottom: $pageMargin;
		background: #fff;
	}
}

.experimentList {
	padding: $pageMargin 42px;

	.ms-DetailsRow {
		&:hover, &:focus {
			background: #F3F2F1 !important;
		}
	}

	.box {
		margin-top: 20px;

		.search {
			width: 90%;

			&-input {
				width: 330px;
			}
		}

		.filter {
			width: 10%;
			text-align: right;

			&-button-open {
				background: #f3f2f1;
			}
		}
	}

	.filter-condition {
		margin-top: 26px;
		.reset {
			width: 80px;
			position: relative;
			top: 29px;
		}

		&-status {
			width: 194px;
		}
		&-platform {
			width: 150px;
		}
	}

	.hidden {
		display: none;
	}

	.margin {
		margin-left: 10px;
	}

	.idColor {
		color: #615f5d !important;
	}

	.toAnotherExp {
		color: #0071bc !important;
	}

	.ms-DetailsRow:focus {
		background: #e1dfdd;
	}
}

.gray-port {
	color: #bebebe;
}
