.left-side {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  row-gap: 8px;
  width: 200px;
  border-right: 1px solid #e8e8e8;
}
.left-side .left-side-block {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e8e8e8;
}
.left-side .left-side-block:last-of-type {
  border-bottom: none;
}
.left-side .left-side-block .block-title {
  color: #999;
  font-family: 'Microsoft YaHei';
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.left-side .left-side-block .block-list {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  padding-left: 12px;
  margin-top: 8px;
}
.left-side .left-side-block .block-list .list-item {
  display: flex;
  align-items: center;
  column-gap: 12px;
  height: 44px;
}
.left-side .left-side-block .block-list .list-item:hover {
  background-image: linear-gradient(90deg, rgba(76, 76, 239, 0) 0%, rgba(76, 76, 239, 0.06) 100%);
}
.left-side .left-side-block .block-list .list-item.active {
  border-right: 3px solid #4c4cef;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.81) 100%);
}
.left-side .left-side-block .block-list .list-item.active .list-text {
  color: #4c4cef;
}
.left-side .left-side-block .block-list .list-item.active .circle {
  background-color: #4c4cef;
}
.left-side .left-side-block .block-list .list-item .circle {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #505050;
}
.left-side .left-side-block .block-list .list-item .list-text {
  color: #333;
  font-family: 'Microsoft YaHei';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  /* 228.571% */
}