/* .long-long {
    background: url('../../../../assets/long-long.png') no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
} */

.long-middle {
	background: url('../../../assets/long-middle.png') no-repeat;
	background-size: 100% 100%;
	background-position: 0 0;
}

.long-short {
	background: url('../../../assets/long-short.png') no-repeat;
	background-size: 100% 100%;
	background-position: 0 0;
}

.middle-long {
	background: url('../../../assets/middle-middle.png') no-repeat;
	background-size: 100% 100%;
	background-position: 0 0;
}

.middle-full {
	background: url('../../../assets/middle-long.png') no-repeat;
	background-size: 100% 100%;
	background-position: 0 0;
}

.middle-middle {
	background: url('../../../assets/middle-middle-2.png') no-repeat;
	background-size: 100% 100%;
	background-position: 0 0;
}

.middle-short {
	/* background: url('../../../assets/middle-short.png') no-repeat; */
	/* background: url('../../../assets/energy.png') no-repeat; */
	background: url('../../../assets/bg-bottom-item.png') no-repeat;
	background-size: 100% 100%;
	background-position: 0 0;
}

/*
 * more...
 */

.graphBase {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* justify-content: flex-end;
    align-items: center; */
	position: relative;
	padding: 24px;
}

.graphBaseTitle {
	display: flex;
	align-items: center;
}

.graphBaseTitle > img {
	width: 24px;
}

.graphBaseTitle > h2 {
	font-family: '微软雅黑', 'Microsoft YaHei UI', -apple-system,
		BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
		'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
	margin: 0;
	margin-left: 6px;
	font-size: 22px;
	color: #fff;
	letter-spacing: 2px;
	font-weight: 500;
}

.graphBaseContent {
	height: 1px;
	flex: 1;
	/* background: #fff3; */
}

.graphBaseDesc {
	margin-left: 8px;
	/* position: absolute;
	top: 25px;
	left: 150px; */
	font-size: 19px;
	color: #76fff9;
}

.graphBaseSwitch {
	position: absolute;
	top: 30px;
	left: 258px;
	display: flex;
	align-items: center;
}

.graphBaseDate {
	position: absolute;
	right: 0;
	top: 24px;
	color: #fff;
	margin-right: 24px;
}

.radioGroup {
	user-select: none;
}

.radioGroup * {
	border: none !important;
	border-radius: 6px !important;
}

.radioGroup *:focus-within {
	box-shadow: none !important;
}

.radioGroup *::before {
	width: 0 !important;
}

.switchLabel {
	color: white;
	margin-left: 6px;
}

.legend {
	position: absolute;
	top: 30px;
	left: 360px;
	color: #fff;
	display: flex;
	align-items: center;
}

.legendItem {
	display: flex;
	align-items: center;
	margin-left: 8px;
}

.lengedItemPrefix {
	width: 12px;
	height: 12px;
	border-radius: 2px;
    margin-right: 4px;
}