$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;
        }

        &-date {
            width: 162px;
        }
    }

    .hidden {
        display: none;
    }

    .margin {
        margin-left: 10px;
    }

    .idColor {
        color: #615f5d;
    }

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

.gray-port {
    color: #bebebe;
}