:root{
  --container-bg-color:#f3b6d3; /* 主体背景色 */
  --header-bg-color:rgb(228, 226, 226); /* 头部背景色 */
  --selectedWeek-bg-color:rgb(143, 220, 254); /* 头部背景色 */
  --body-text-color:rgb(0,0,0);/*  主体文字颜色*/
  --leftBanner-bg-color:rgb(233, 230, 230);/* 左边时间框背景颜色 */
  --leftTime-text-color:rgb(149, 149, 149);/* 左边时间字体颜色 */
  --lessonBox-bg-color:rgb(62, 58, 58);/* 课表框背景颜色 */
  --lessonBox-border-color:rgb(216, 215, 215);/* 课表框流苏颜色（上面小矩形） */
  --lessonBox-text-color:rgb(255,255,255);/* 课表框字体颜色 */
  /* px */
  --leftBanner-width:50px;
  --leftBox-height:80px;
}

html,body,div{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

html,body{
  color: var(--body-text-color);
}

p{
  margin: 0;
  padding: 0;
}

#lessonContainer{
  background-color: var(--container-bg-color);
  width: 100vw;
  /* height: 90vh; */
  position: relative;
  overflow: auto;
}

#header{
  position: fixed;
  top: 0;
  left: 0;
  flex-direction: row;
  width: 100%;
  height: 60px;
  background-color: var(--header-bg-color);
  box-shadow: 0px 1px 10px 1px rgba(0,0,0,0.2);
  z-index: 1;
}

#header .week{
  width: 20%;
  padding: 5px 0;
}

.today{
  /* color: red; */
  background-color: var(--selectedWeek-bg-color);
  border-radius: 12px;
}

#header .month{
  min-width: var(--leftBanner-width);
  /* background-color: red; */
  
}

#bottomContainer{
  width: 100%;
  margin-top: 52px;
  /* position: absolute;
  top: 60px;
  left: 0; */
  /* background-color: red; */
  flex-direction: row;
  justify-content: start;
  align-items: start;
}

#leftBanner{
  /* position: absolute;
  left: 0;
  top: 0; */
  width: var(--leftBanner-width);
  background-color: var(--leftBanner-bg-color);
    /* overflow: auto; */
}

#leftBanner .leftBox{
  width: 100px;
  height: var(--leftBox-height);
  /* border: 1px solid red; */
  /* padding: 5px 2px; */
}

#leftBanner .title{
  font-weight: 700;
  font-size: 1.5rem;
}

#leftBanner .miniText{
  width: var(--leftBanner-width);
  color: var(--leftTime-text-color);
  word-break:break-all;
}

/* #canvasLesson{
  width: 100%;
  height: 660px;
  background-color: red;
} */

#rightLesson{
  width: 100%;
  height: calc(var(--leftBox-height) * 11);
  /* background-color: red; */
  position: relative;
}

.lessonBox{
  box-sizing:border-box;
  background-color: var(--lessonBox-bg-color);
  border-top: 8px solid var(--lessonBox-border-color);
  border-radius: 5px;
  color: var(--lessonBox-text-color);
  position: absolute;
  text-align: center;
  padding: 0 2px;
  /* top: 0; */
}