.siderbar {
  width: 20%;
  flex-grow: 0;
  position: relative;
  border-radius: 5px;
  background-color:#fff;
  display: flex;
  justify-content: left;
  align-items: left;
  padding: 20px;
  margin-top: 10px;
}
.siderbar-item-list{
  width: 100%;
}
.box-rigth {
  width: 80%;
  flex-grow: 0;
  border-radius: 5px;
  background-color: #fff;
  padding: 20px 20px 10px 20px;
  margin-top: 10px;
}
.box-row {
  /* width: 100%; */
  display: flex; /* 使用 flexbox 布局 */
  flex-wrap: wrap; /* 允许元素换行 */
  justify-content: space-between; /* 使元素在容器内水平分布 */
}
.course-node{
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}
.course-node-left{
  width: 25%;
}
.course-node-right{
  width: 80%; 
  padding: 10px; 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.courseImg {
  width: 100%;
}
.courseImg img {
  border-radius: 2px;
  width: 100%;
  height: auto; /* 保持图片的宽高比 */
}
.course-title{
  font-size: var(--fontSizeL);
}
.activity-des{
  font-size: var(--fontSizeL);
}
.course-row{
  font-size: 12px;
  width: 100%;
}
.course-row-left{
  width: 70%;
}
.course-tag{
  background-color: #e7f1ff;
  padding: 2px 15px;
  border-radius: 20px;
}
.course-row .last-progress-time{
  color: #808080;
}

.bt{
  width: 80px !important;
  border: 0px !important;
  font-size: var(--fontSize) !important;
}



.activity-state{
  padding: 2px 10px;
  border-radius: 15px;
}
.activity-end{
  background-color: #e7f1ff;
}
.activity-inprogress{
  background-color: #ea4335;
  color: #ffffff;
}

.to-border-bottom{
  border-bottom: 0.2px solid #808080;
}
.modal-dialog{
  max-width: 300px !important;
}
.modal-header{
  border-bottom: 0 !important;
}
.modal-footer {
  border-top: 0 !important;
}

#qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0; /* 背景颜色 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  padding: 20px; /* 内边距 */
  margin: 0 20px auto; /* 外边距 */
  max-width: 300px; /* 最大宽度 */
  text-align: center; /* 文本居中对齐 */
}