.player-containerChromatic {
	display: inline-block;
	position: relative;
	box-sizing: content-box;
	margin: 0;
	padding: 0;
	border-radius: 2px;
	border-style: none;
	background-color: rgb(136, 136, 136);
	width: 270px;
	height: 34px;
}

.player-containerHarmonica {
	display: inline-block;
	position: relative;
	box-sizing: content-box;
	margin: 0;
	padding: 0;
	border-radius: 2px;
	border-style: none;
	background-color: rgb(136, 136, 136);
	width: 270px;
	height: 34px;
}

.time-counter {
	position: absolute;
	top: 6px;
	font-size: 8px;
	color: #000;
	font-weight: normal;
}

.time-counter.left {
	right: 88px;
}

.time-counter.right {
	right: 8px;
}

.icon {
	display: inline-block;
	position: absolute;
	box-sizing: content-box;
	top: 5px;
	margin: 0;
	padding: 2px;
	border-radius: 0;
	border-style: solid;
	border-width: 1px;
	border-color: rgb(204, 204, 204);
	background-color: rgb(170, 170, 170);
	line-height: 0;
	width: 18px;
	height: 18px;
}

.icon:nth-child(1) {
	left: 4px;
}

.icon:nth-child(2) {
	left: 32px;
}

.icon:nth-child(3) {
	left: 60px;
}

.icon:nth-child(4) {
	left: 88px;
}

.icon:nth-child(5) {
	left: 114px;
}

.icon:nth-child(6) {
	left: 142px;
}

.line {
	display: inline-block;
	position: absolute;
	box-sizing: content-box;
	top: 20px;
	left: 178px;
	width: 80px;
	height: 0;
	padding: 1px;
	border-style: solid;
	border-width: 1px;
	border-radius: 2px;
	border-color: rgb(204, 204, 204);
	background-color: rgb(136, 136, 136);
	cursor: pointer; /* 添加光标样式 */
}

.circle {
	display: inline-block;
	position: absolute;
	box-sizing: content-box;
	width: 9px;
	height: 9px;
	top: -5px; /* 调整圆心位置 */
	left: -5px; /* 调整圆心位置 */
	border-radius: 50%;
	border-style: solid;
	border-width: 1px;
	border-color: rgb(204, 204, 204);
	background-color: rgb(170, 170, 170);
	cursor: pointer; /* 添加光标样式 */
}

.play-icon {
	content: "";
	display: inline-block;
	fill: #555;
	height: 18px;
	width: 18px;
	background-size: cover;
}

.play-icon.selected {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='rgb(204,204,204)'/%3E%3Cpath d='M6 6h12v12H6z'/%3E%3C/svg%3E");
}

.play-icon.unselected {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='rgb(204,204,204)'/%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}

.speed-icon {
	content: "";
	display: inline-block;
	fill: #555;
	height: 18px;
	width: 18px;
	/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='rgb(204, 204, 204)'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23000'%3E½%3C/text%3E%3C/svg%3E"); */
	background-size: cover;
}

.speed-icon.text-half {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='rgb(204, 204, 204)'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23000'%3E½x%3C/text%3E%3C/svg%3E");
}

.speed-icon.text-quarter {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='rgb(204, 204, 204)'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23000'%3E¼x%3C/text%3E%3C/svg%3E");
}

.speed-icon.text-one-eighth {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='rgb(204, 204, 204)'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23000'%3E⅛x%3C/text%3E%3C/svg%3E");
}

.speed-icon.text-one {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='rgb(204, 204, 204)'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23000'%3E1x%3C/text%3E%3C/svg%3E");
}

.speed-icon.text-two {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='rgb(204, 204, 204)'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23000'%3E2x%3C/text%3E%3C/svg%3E");
}

.stop-icon {
	content: "";
	display: inline-block;
	fill: #555;
	height: 18px;
	width: 18px;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='rgb(204,204,204)'/%3E%3Cpath d='M6 6h12v12H6z'/%3E%3C/svg%3E");
	background-size: cover;
}

.pause-icon {
	content: "";
	display: inline-block;
	fill: #555;
	height: 18px;
	width: 18px;
	background-size: cover;
}

.pause-icon.selected {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='rgb(304,304,304)'/%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E");
}

.pause-icon.unselected {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='rgb(204,204,204)'/%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E");
}

.loop-icon {
	content: "";
	display: inline-block;
	fill: #555;
	height: 18px;
	width: 18px;
	background-size: cover;
}

.loop-icon.selected {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='rgb(304,304,304)'/%3E%3Cpath d='M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z'/%3E%3C/svg%3E");
}

.loop-icon.unselected {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='rgb(204,204,204)'/%3E%3Cpath d='M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z'/%3E%3C/svg%3E");
}

.music-icon {
	content: "";
	display: inline-block;
	fill: #555;
	height: 18px;
	width: 18px;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='rgb(204,204,204)'/%3E%3Cpath d='M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z'/%3E%3C/svg%3E");
	background-size: cover;
}

.file-icon {
	content: "";
	display: inline-block;
	fill: #555;
	height: 18px;
	width: 18px;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='rgb(204,204,204)'/%3E%3Cpath d='M10 4H2v16h20V6H12l-2-2z'/%3E%3C/svg%3E");
	background-size: cover;
}