.shadow-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 15;
}
.recharge-btn {
  font-family: 'Open Sans';
  font-style: normal;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  background: #FF8A35;
  border-radius: 5px;
  cursor:pointer;
  padding: 6px 20px;
}
.shadow-contentBody {
  position: relative;
  width: 600px;
  height: 280px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
}
.shodow-contentBg {
  background: #FFFFFF;
  position: relative;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 40px;
  padding-top: 20px;
}
.shadow-contentTitle {
  font-size: 20px;
  font-weight: 600;
}
.shadow-contentTitle2 {
  font-size: 16px;
}
.shadow-contentBtn {
  color: #FFFFFF;
  font-size: 14px;
  background: #FF8A35;
  cursor: pointer;
  padding: 6px 24px;
  border-radius: 5px;
}
.shadow-contentHeader {
  background: #ffffff;
  position: relative;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.popTitle-edit {
  font-size: 16px;
}
.popTitle-editText {
  display: flex;
  font-size: 14px;
  align-items: center;
  gap: 12px;
}
.popBooking {
  width: 1023px;
  min-width: 900px;
  height: 650px;
  background: #ffffff;
  position: relative;
  padding: 20px 32px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
}
.popBooking-1 {
  width: 1023px;
  min-width: 900px;
  background: #ffffff;
  position: relative;
  padding: 20px 32px;
  display: flex;
  flex-direction: column;
}
.popBooking-frame {
  width: 442px;
  background: #ffffff;
  padding: 32px;
  border-radius: 0.78vw;
}

.courseTime {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  gap: 18px;
  overflow-y: auto;
}

.userHead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.52vw;
}
.userHead-item {
  display: flex;
  align-items: center;
  gap: 0.78vw;
}
.user-img {
  width: 35px;
  height: 35px;
  background-image: url(https://cdn.maolingo.cn/_next/static/media/popup-2.34542466.png);
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
}
.user-name {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
}
.user-text {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
}

.userInfo {
  display: flex;
  justify-content: space-between;
}
.userInfo-left {
  display: flex;
  gap: 12px;
}
.userInfo-title {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-size: 14px
}
.user-textspan {
  text-decoration-line: underline;
  cursor: pointer;
}

.user-line {
  height: 1px;
  background: var(--color-gray-100);
}
.userInfo-text {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
}
.course-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.userInfo-right {
  display: flex;
  height: 47px;
  align-items: center;
  justify-content: space-between;
  background: #E9F1ED;
  border: 1px solid #2E8B57;
  border-radius: 5px;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
  padding: 0 20px;
  gap:4px;
  color: #2E8B57;
}
.userInfo-rightIcon {
  width: 24px;
  height: 24px;
  background: url(https://cdn.maolingo.cn/_next/static/media/popup-4.882016be.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 30px;
}

.courseColor-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
}
.course-bg {
  background-repeat: no-repeat;
  background-size: contain;
}
.courseTime-colorBody {
  display: flex;
  align-items: center;
  gap: 1.3vw;
}
.courseWeek-btn {
  width: 10.83vw;
  height: 2.24vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0c5fbb;
  border-radius: 0.52vw;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-size: 0.83vw;
  color: #ffffff;
  padding: 0 0.78vw;
  cursor: pointer;
}
.courseWeek-icon {
  width: 41px;
  height: 41px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: contain;
}
.table-time {
  width: 5.1vw;
  height: 2.34vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 0.05vw solid var(--color-gray-300);
  border-top: none;
  color: #000000;
  background: #ffffff;
  font-family: "Open Sans";
  font-weight: 600;
  font-size: 0.73vw;
}
.time-table {
  width: 6.67vw;
  text-align: center;
  border-bottom: 0.05vw solid #ffffff;
  border-right: 0.05vw solid #ffffff;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
}

.popup-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-footerbtnCard {
  display: flex;
  gap: 10px;
}

.popup-footerbtn {
  text-align: center;
  cursor: pointer;
  color: #ffffff;
  border-radius: 5px;
  font-size: 12px;
  background: #ff8a35;
  padding: 6px 20px;
}
.popupFalse {
  background: #ff4438;
}
.popupTrue {
  background: #20c889;
}
.choose-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* height: 32px; */
}
.choose-title {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  color: var(--color-gray-600);
}
.choose-titleBack {
  font-weight: 500;
  text-decoration-line:underline;
}

.choose-body {
  height: 400px;
  width: 100%;
  border: 1px solid var(--color-gray-200);
  margin-top: -19px;
  border-radius: 5px 0 5px 5px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.choose-bodyCont {
  display: flex;
  scrollbar-width: thin;
  /* scrollbar-color: transparent transparent; */
  overflow: auto;
}
.course-Popcard {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.course-item {
  box-sizing: border-box;
  width: 215px;
  border: 1px solid var(--color-gray-300);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  cursor: pointer;
  padding: 40px 0;
}
.course-itemActive {
  border: 0.05vw solid #ff8a35;
}
.course-itemColor {
  width: 124px;
  height: 124px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  margin-top: 10px;
  background-repeat: no-repeat;
  background-size: contain;
}

.course-itemText {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  margin: 10px;
  color: var(--color-gray-600);
}
.lesson-head {
  padding: 30px 30px;
  background: #0c5fbb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  /* overflow: hidden; */
}
.lesson-headLeft {
  display: flex;
  align-items: center;
  gap: 1.04vw;
}
.lesson-leftColor {
  width: 54px;
  height: 54px;
  border-radius: 0.26vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.lesson-headRight {
  display: flex;
  align-items: center;
  gap: 1.04vw;
  flex-shrink: 0;
}
.lesson-leftText {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  flex-shrink: 0;
}
.lesson-leftText-title {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
}
.lesson-rightBtn {
  padding: 10px 40px;
  background: #ffffff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  color: #0c5fbb;
}
.lesson-rightIconT {
  width: 19px;
  height:17px;
  background-image: url(https://cdn.maolingo.cn/_next/static/media/basic-18.ebc482f5.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.lesson-rightIconF {
  width: 19px;
  height: 75px;
  background-image: url(https://cdn.maolingo.cn/_next/static/media/basic-17.b0259297.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.lesson-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  .lesson-body {
  height: 430px;
  overflow: auto;
  scrollbar-width: thin;
  /* scrollbar-color: transparent transparent; */
  position: relative;
}
.lessonAttend-body {
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.lessonAttend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  /* height: 50px; */
  background: #0c5fbb;
}
.lessonAttend-headText {
  font-weight: 600;
  color: #fff;
}
.lessonAttend-headBtnA {
  display: flex;
  gap: 10px;
  align-items: center;
}
.lessonAttend-headBtn {
  color: #FFFFFF;
  cursor: pointer;
  background: #20C889;
  padding: 4px 14px;
  border-radius: 5px;
}
.lessonAttend-changeText {
  margin: 0 auto;
  margin-top: 10px;
  padding: 4px 12px;
  background: #20C889;
  color: #FFFFFF;
  border-radius: 5px;
  cursor: pointer;
}
.lessonAttend-trackerCard {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
}
.way-container {
  border: 0.05vw solid var(--color-gray-300);
  border-radius: 0.26vw;
  margin-top: -0.78vw;
  display: flex;
  justify-content: space-between;
  padding: 1.56vw;
}
.way-left {
  display: flex;
  flex-direction: column;
  gap: 0.78vw;
}
.way-itemImg {
  width: 1.88vw;
  height: 1.88vw;
  background-repeat: no-repeat;
  background-size: contain;
}
.way-item {
  display: flex;
  align-items: center;
  gap: 0.63vw;
  width: 14.11vw;
  height: 3.44vw;
  background: var(--color-gray-100);
  border-radius: 0.26vw;
  padding-left: 2.71vw;
  cursor: pointer;
}
.way-itemText {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-size: 0.83vw;
}
.way-itemActive {
  background: #ff8a35;
  color: #ffffff;
}
.way-right {
  width: 23.7vw;
  display: flex;
  flex-direction: column;
  gap: 0.78vw;
}
.way-input {
  box-sizing: border-box;
  width: 23.65vw;
  height: 2.71vw;
  background: var(--color-gray-50);
  border: 0.05vw solid var(--color-gray-300);
  outline: none;
  resize: none;
  padding: 0 0.78vw;
}
.way-title {
  height: 0.83vw;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-size: 0.94vw;
  display: flex;
  align-items: center;
  color: var(--color-gray-700);
}
.way-tip {
  height: 2.71vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.way-text {
  width: 14.53vw;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 0.73vw;
  line-height: 0.83vw;
  color: var(--color-gray-400);
}
.way-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 8.39vw;
  height: 2.71vw;
  background: #ff8a35;
  border-radius: 0.26vw;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-size: 0.94vw;
  color: #ffffff;
  cursor: pointer;
}
.detail-container {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.detail-title {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  color: var(--color-gray-600);
}
.detail-text {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  margin: 8px 0 30px;
}
.detail-content {
  box-sizing: border-box;
  width: 70%;
  border: 1px solid var(--color-gray-300);
  border-radius: 5px;
}
.detail-item {
  border-bottom: 1px solid var(--color-gray-300);
  padding: 17px 20px;
  display: flex;
  align-items: center;
}
.detail-itemImgIcon {
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}
.detail-itemTitle {
  width: 92px;
  margin-right: 16px;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
  color: var(--color-gray-600);
}
.detail-itemText {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: var(--color-gray-600);
  margin-left: 15px;
}
.detail-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 12px;
  gap: 8px;
}
.detail-rightText {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
}
.detail-rightBtn {
  box-sizing: border-box;
  padding: 6px 12px;
  background: #ffede1;
  border: 1px solid #ff8a35;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  gap: 6px;
}
.detail-rightIcon {
  width: 1.25vw;
  height: 1.25vw;
  background-image: url(https://cdn.maolingo.cn/_next/static/media/popup-4.882016be.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.detail-footer {
  width: 100%;
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.detail-footerBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 100px;
  height: 32px; */
  padding: 10px 40px;
  border-radius: 5px;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
}
.frame-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33px;
}
.frame-img {
  height: 80px;
  width: 80px;
  background: url(https://cdn.maolingo.cn/_next/static/media/popup-10.0a21a407.png);
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
}
.frame-title {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  color: #FF8A35;
}
.frame-text {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: var(--color-gray-600);
}
.frame-btn {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #0C5FBB;
  background-color: #0C5FBB;
  border-radius: 5px;
  padding: 10px 40px;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}
.courseContent-list {
  background:#fff;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-gray-200);
}
.courseContent-listHead {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
}
.courseWeek-btn2 {
  width: 10.83vw;
  height: 2.6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ff8a35;
  border-radius: 0.52vw;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-size: 0.94vw;
  color: #ffffff;
  padding: 0 0.94vw 0 1.04vw;
  cursor: pointer;
}
.courseWeek-icon2 {
  width: 28px;
  height: 28px;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
}
.courseWeek-week {
  height: 82px;
  flex: 1;
  display: flex;
  /* gap: 26px; */
  gap: 0 1px;
  align-items: center;
  justify-content: space-between;
  margin-left: 1px;
}
.courseWeek-table {
  display: flex;
  /* gap: 26px; */
  /* padding-right: 88px; */
  /* border-top: 1px solid var(--color-gray-200)B2; */
  margin-top: 1px;
}
.calendar2 {
  /* height: 552px; */
  /* overflow: auto; */
  background: var(--color-gray-200);
  padding: 1px;
}
.table-utc2 {
  /* width: 130.94px; */
  /* height: 85.06px; */
  width: 166px;
  height: 82px;
  background: #fff;
  font-family: "Open Sans";
  font-style: normal;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 14.02px;
  color: #0c5fbb;
  /* margin: 0 30px; */
  border-radius: 5px;
  background-color: #fff;
}
.table-week-head2 {
  /* background: #dbe7f5; */
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-bottom: 32px; */
  height: 82px;
}
.table-week2 {
  background:#fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  /* color: #002E61; */
  border-left: none;
  border-radius: 5px;
  background-color: #fff;
}
.table-time2 {
  width: 166px;
  height: 82px;
  background: #ffffff;
  font-size: 16px;
  color: var(--color-gray-400);
  font-family: "Open Sans";
  font-weight: 600;
  display:flex;
  align-items: center;
  justify-content: center;
  /* border-top: none;
  color: #000000;
  font-size: 14px; */
}
.time-table2 {
  width: 100%;
  /* width: 177.02px; */
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background-color: #fff;
}

.card-body {
  width: 100%;
  height: 100%;
  /* height: 4.64vw; */
  padding: 4px 0;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.card-bodyColor1 {
  background: #20c889;
  border: 1px solid #189667;
}
.card-bodyColor2 {
  background: #2b76ce;
  border: 1px solid #0c5fbb;
}
.card-bodyColor3 {
  border: 1px solid #bf6828;
}
.card-bodyText {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 116px;
}
.card-bodyTime {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
}
.card-bodyBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}

.detailLesson-img {
  width: 3.28vw;
  height: 3.28vw;
  background-repeat: no-repeat;
  background-size: cover;
}
.cutting-shadow {
  height: 430px;
  align-items: unset;
}
.cutting-body {
  display: flex;
  justify-content: center;
}
.cuttingBody-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.cuttingBody-rightImg {
  width: 120px;
  height: 120px;
}
.cuttingBody-btnCard {
  display: flex;
  justify-content: center;
}
.cuttingBody-btn {
  width: 130px;
  padding: 8px 20px;
}
.shodow-attentTitle {
  /* font-weight: 600; */
  font-size: 16px;
}
.shodow-attentTips {
  font-size: 20px;
  font-weight: 600;
}
.shodow-attentBtnCard {
  display: flex;
  gap: 20px;
}
.shodow-btn {
  padding: 4px 12px;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #FFFFFF;
  border-radius: 5px;
  cursor: pointer;
}
.shodow-cancel {
  background: #FF4438;
}
.shodow-proceed {
  background: #20C889;
}
.shodow-check {
  background: #20C889;
  width: 150px;
  align-items: center;
  display: flex;
  height: 40px;
  justify-content: center;
  pointer-events: auto;
}
.shodow-checking {
  background: #b1abab;
  width: 150px;
  align-items: center;
  display: flex;
  height: 40px;
  justify-content: center;
  pointer-events: none;
}
.shadow-check-content {
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.shadow-check-btnNode {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shadow-check-img {
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: cover;
}