overview.scss

$boxPadding: 24px;
$boxBorderRadius: 5px;
$boxGapPadding: 10px;

.wrapper {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-auto-rows: 102px;

	> div {
		background: #fff;
		padding: $boxPadding;
		border-radius: $boxBorderRadius;
		box-sizing: border-box;
	}

	.duration,
	.trialCount {
		grid-column: 1 / 5;
		background: #fff;
		padding: $boxPadding;
		border-radius: $boxBorderRadius;
		box-sizing: border-box;
		margin-top: $boxGapPadding;

		/* for alert message tooltip position */
		position: relative;
	}

	.duration {
		grid-row: 3 / 5;
		height: 158px;
	}

	.trialCount {
		grid-row: 5 / 8;
		margin-top: -26px;
		height: 273px;
	}

	.overviewCommand {
		grid-column: 1 / 5;
		grid-row-start: 8;
		margin-top: -50px;
		height: 158px;
		margin-right: $boxGapPadding;
		border-radius: $boxBorderRadius;
	}
}

.overviewBasicInfo {
	grid-column: 1 / 5;
	grid-row: 1 / 3;
	z-index: 2;
}

.overviewBasicInfo,
.duration,
.trialCount {
	margin-right: $boxGapPadding;
}

.basic {
    line-height: 21px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

    p {
        font-size: 14px;
        color: #8f8f8f;

        span {
            color: #484848;
        }
    }

    div {
        font-size: 16px;
        font-weight: 500;
        color: #484848;
    }
    
}

.overviewBestMetric {
	grid-column: 5 / 9;
	grid-row: 1 / 10;
	max-height: 822px;
	overflow: hidden;

	.topTrialTitle {
		width: 72%;
	}

	.active {
		background: #d2d0ce;
	}

	.max {
		margin-left: 7px;
	}

	.mincenter {
		margin: 0 13px 0 $boxGapPadding;
	}

	.chooseEntry {
		margin-right: $boxGapPadding;
		line-height: 30px;
	}
}

.overviewCommand1,
.overviewCommand2 {
	grid-row: 7 / 9;
	height: 144px;
	overflow: hidden;
	margin-top: $boxGapPadding;
}

.overviewChart {
	margin-top: 20px;
}

.defaultMetricContainer {
	position: relative;

	.showMess {
		position: absolute;
		top: 42%;
		left: 48%;
	}
}