.course-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  background: #fff8eb;
  width: 340px;
  height: 478px;
  padding: 20px;
  padding: 0;
  cursor: pointer;
  align-items: flex-start;
  background: #ffffff;
  box-shadow: 0px 4px 22px #eceff2;
  color: #979797;
}
.course-card-wrapper img {
  height: 200px;
  width: 300px;
  box-shadow: 0px 4px 22px rgba(0, 0, 0, 0.12);
  border-radius: 12px;
}
.course-card-wrapper .status {
  display: flex;
  align-items: center;
  align-self: flex-start;
  color: #ff5705;
  margin: 13px 0;
  width: 100%;
  justify-content: space-between;
}
.course-card-wrapper .status img {
  height: 18px;
  width: 18px;
  margin-right: 10px;
}
.course-card-wrapper .status[data-finish='true'] {
  color: #44b158;
}
.course-card-wrapper .title {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin-top: 20px;
}
.course-card-wrapper .content {
  min-height: 90px;
  margin-bottom: 20px;
  white-space: pre-line;
}
.course-card-wrapper .enter {
  color: #fff;
  background: #f2994a;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.12);
  border-radius: 20px;
  font-weight: bold;
  height: 30px;
  display: flex;
  align-items: center;
  width: 100px;
  justify-content: center;
}
.course-card-wrapper img {
  width: 100%;
  border-radius: 12px 12px 0 0;
}
.course-card-wrapper .text-wrapper {
  padding: 20px;
  width: 100%;
}
.course-card-wrapper .status-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  border-top: 1px solid #eceff2;
  height: 70px;
  width: 100%;
  align-items: center;
}
.course-card-wrapper .status-wrapper .enter {
  background: #f8d57e;
  border-radius: 10px;
  height: 40px;
}
.course-card-wrapper[data-size='small'] {
  width: 272px;
  height: 316px;
  cursor: unset;
}
.course-card-wrapper[data-size='small'] .title {
  margin-top: 0px;
}
.course-card-wrapper[data-size='small'] .content {
  min-height: unset;
  height: 44px;
  margin-bottom: 0;
  color: #5c5e60;
}
.course-card-wrapper[data-size='small'] .status-wrapper {
  border-top: none;
  padding-top: 0;
}
.course-card-wrapper[data-size='small'] .enter {
  border-radius: 8px;
  color: #1e1f20;
  font-weight: normal;
  height: unset;
  line-height: 32px;
  cursor: pointer;
}

.title-wrapper {
  position: relative;
  background: #fbd05f;
  display: flex;
  color: #2e2e2e;
  align-items: center;
  justify-content: center;
  height: 60px;
  font-size: 22px;
  font-weight: 900;
  background: #ffffff;
  box-shadow: 0px 4px 22px rgba(104, 85, 56, 0.1);
}
.title-wrapper .fish,
.title-wrapper .elites {
  position: absolute;
  width: 120px;
  top: -50px;
  left: 0;
}
.title-wrapper .elites {
  width: 75px;
  left: 20px;
  position: absolute;
}
.title-wrapper .elites-back {
  color: #f4b860;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-wrapper > span {
  position: absolute;
  left: 0;
  display: flex;
}
.title-wrapper .right-actions {
  position: absolute;
  right: 25px;
  top: 15px;
  display: flex;
  align-items: center;
}
.title-wrapper .right-actions .message-img-wrapper {
  margin-right: 10px;
  width: 29px;
  height: 29px;
}
.title-wrapper .fish-message {
  width: 29px;
}

.user-info-wrapper {
  display: flex;
  font-size: 14px;
  color: #4f4f4f;
  align-items: center;
  max-width: 155px;
  cursor: pointer;
}
.user-info-wrapper .user-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-info-wrapper .down-icon {
  margin-left: 10px;
}
.user-info-wrapper img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  position: unset;
}
.user-info-modal .ant-modal-body {
  padding: 50px 25px 0;
}
.user-info-modal .ant-modal-body input,
.user-info-modal .ant-modal-body textarea {
  background: #f1f1f1;
  border-color: transparent;
  border-radius: 15px;
}
.user-info-modal .ant-modal-body .ant-form-item-label > label {
  color: #7d7d7d;
  font-weight: bold;
  padding-right: 20px;
}
.user-info-modal .ant-modal-body .portrait-image {
  height: 70px;
  width: unset;
}
.user-info-modal .ant-modal-body .ant-upload button {
  border: none;
  box-shadow: none;
}
.user-info-modal .ant-modal-footer {
  display: flex;
  justify-content: center;
  border-top: none;
  padding-bottom: 20px;
}
.user-info-modal .ant-modal-footer button {
  background: #f2994a;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.12);
  border-radius: 20px;
  width: 98px;
  height: 30px;
  border: none;
}

.dev-cpp-modal-wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 99999;
  animation: in 0.5s forwards;
}
.dev-cpp-modal-wrapper .dev-cpp-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  min-width: 907px;
  background-color: #fff6e1;
  border-radius: 18px;
}
.dev-cpp-modal-wrapper .dev-cpp-modal .icon {
  flex: 1 1;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.dev-cpp-modal-wrapper .dev-cpp-modal .icon img {
  width: 281px;
  height: 306px;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.dev-cpp-modal-wrapper .dev-cpp-modal .content {
  position: relative;
  padding: 30px;
  border-radius: 18px;
  background-color: #fff;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.dev-cpp-modal-wrapper .dev-cpp-modal .content .close-btn {
  position: absolute;
  top: 28px;
  right: 28px;
  font-size: 16px;
  color: #170f49;
  transition: color 0.1s;
}
.dev-cpp-modal-wrapper .dev-cpp-modal .content .close-btn:hover {
  color: #f4b860;
}
.dev-cpp-modal-wrapper .dev-cpp-modal .content h4 {
  font-size: 24px;
  line-height: 36px;
}
.dev-cpp-modal-wrapper .dev-cpp-modal .content p {
  font-size: 18px;
  line-height: 27px;
}
.dev-cpp-modal-wrapper .dev-cpp-modal .content .link {
  margin-top: 18px;
  margin-bottom: 18px;
  font-size: 14px;
  color: #808080;
}
.dev-cpp-modal-wrapper .dev-cpp-modal .content .link span {
  margin-left: 3px;
  color: #f4b860;
}
.dev-cpp-modal-wrapper .dev-cpp-modal .content .link span:hover {
  text-decoration: underline;
}
.video-title {
  color: #808080;
  font-size: 14px !important;
  line-height: 20px;
  text-align: center;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: default;
}
@keyframes in {
  0% {
    background-color: rgba(0, 0, 0, 0);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.2);
  }
}

.header-right-actions {
  position: absolute;
  right: 25px;
  top: 10px;
  height: 39px;
  display: flex;
  align-items: center;
}

.btn--2_Y_M {
  height: 39px;
  cursor: pointer;
  position: relative;
}
.btn--2_Y_M:hover .menu--2BOLx {
  display: flex;
  opacity: 1;
}
.btn--2_Y_M[data-is-setup='true']::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 29%;
  transform: translateY(100%);
  width: 8px;
  height: 3px;
  background-color: #f8d57e;
}
.menu--2BOLx {
  box-sizing: border-box;
  width: auto;
  height: 104px;
  padding: 4px 0;
  position: absolute;
  right: 0px;
  top: 0px;
  transform: translateY(40%);
  z-index: 999;
  background-color: #fff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  display: none;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transition: opacity 3s ease-in;
}
.menu--2BOLx .menu-item--Ij3P- {
  display: flex;
  align-items: center;
  width: 150px;
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: normal;
}
.menu--2BOLx .menu-item--Ij3P-.chinese {
  width: 100px;
  justify-content: center;
}
.menu--2BOLx .menu-item--Ij3P-.english {
  width: 180px;
  justify-content: flex-start;
}
.menu--2BOLx .menu-item--Ij3P-:hover {
  background-color: #f5f5f5;
}
.menu--2BOLx .active--IiosX,
.menu--2BOLx .active--IiosX:hover {
  background-color: #fdecd0;
}

.language-switcher {
  display: inline-block;
  margin: 0 16px;
  cursor: pointer;
  color: #fff;
  /* adjust based on header color */
  font-size: 14px;
  font-weight: normal;
}
.language-switcher .ant-dropdown-link {
  display: flex;
  align-items: center;
  grid-gap: 4px;
  gap: 4px;
}
.language-switcher-item[selected] {
  color: #fff;
  background-color: #f9d67e;
}

.elites-back {
  height: 30px;
  width: 30px;
  background: #fef2dc;
  border-radius: 6px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elites-back .left-icon {
  position: unset;
  height: 12px;
  width: 8px;
}

.page-home {
  height: 100vh;
  width: 100vw;
  background: #fff;
  box-shadow: 0px 0px 22px rgba(252, 112, 79, 0.3);
}
.page-home .course-wrapper {
  display: flex;
  padding: 40px;
  overflow: auto;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  height: calc(100vh - 60px);
  padding: 20px;
}
.learn-spin-wrapper {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-wrapper {
  height: 100vh !important;
  width: 100vw !important;
  background: #fbfbfd;
  box-shadow: none !important;
}
.head-image .ant-spin {
  color: rgba(0, 0, 0, 0.65);
}
.head-image .ant-spin-blur {
  opacity: 0.2;
}

.page-lesson .page-content-wrapper {
  display: flex;
  height: calc(85vh - 60px);
}
.page-lesson .home-button {
  position: absolute;
  cursor: pointer;
  font-size: 14px;
  left: 150px;
}
.page-lesson .header-operation {
  display: flex;
  position: absolute;
  right: 155px;
}
.page-lesson .header-operation .button {
  font-size: 12px;
  cursor: pointer;
  width: 98px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}
.page-lesson .header-operation .restart {
  border: 1px solid #f2994a;
  color: #f2994a;
  margin-right: 20px;
}
.page-lesson .header-operation .continue {
  background: #f2994a;
  color: #fff;
}
.page-lesson .lesson-block-wrapper {
  display: flex;
  padding: 40px 25px 25px;
  background-color: #fff;
  flex: 1 1;
}
.progress-bar-overlay {
  z-index: 1000 !important;
}
.progress-bar-overlay .ant-popover-content {
  transform: translateX(50%);
}
.progress-bar-overlay .ant-popover-arrow {
  bottom: -4px !important;
}
.progress-bar-overlay .ant-popover-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 12px 12px rgba(44, 37, 67, 0.04);
  border-radius: 4px;
  width: 44px;
  height: 26px;
}
.progress-bar-overlay .ant-popover-inner .ant-popover-inner-content {
  padding: 0;
  color: #595757;
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;
}
.page-lesson .progress-bar-bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 3px;
  background-color: #eef1f6;
  border-radius: 4px;
}
.page-lesson .progress-bar {
  position: absolute;
  height: 3px;
  background-color: #f4b860;
  top: 0;
  border-radius: 4px;
}
.page-lesson .course-finished {
  position: absolute;
  top: -48px;
  right: 0;
}
.page-lesson .lesson-wrapper {
  position: relative;
  height: 70vh;
  width: 61.8vw;
  min-width: 900px;
  max-width: 1200px;
  box-shadow: 0px 4px 22px #eceff2;
  border-radius: 8px;
  margin: 80px auto;
  display: flex;
  align-items: center;
}
.page-lesson .lesson-wrapper .spin-loading-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-lesson .lesson-wrapper .left-wrapper {
  flex: 1 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.page-lesson .lesson-wrapper .left-wrapper .title {
  color: #2c2543;
  font-size: 26px;
  font-weight: bold;
  padding: 39px 25px 0px 25px;
  line-height: 42px;
}
.page-lesson .lesson-wrapper .left-wrapper .intro {
  color: #667180;
  padding: 16px 25px 25px;
  white-space: pre-line;
}
.page-lesson .lesson-wrapper .left-wrapper .study-time {
  padding: 16px 25px 0px 25px;
}
.page-lesson .lesson-wrapper .left-wrapper .study-time span {
  color: #667180;
  font-size: 12px;
  line-height: 16px;
}
.page-lesson .lesson-wrapper .left-wrapper .study-time .time-num {
  font-size: 24px;
  line-height: 32px;
  color: #2c2543;
  margin: 0 4px 0 8px;
}
.page-lesson .lesson-wrapper .left-wrapper img {
  width: 100%;
}
.page-lesson .lesson-wrapper .right-wrapper {
  flex: 2 1;
  height: 100%;
  padding: 39px 25px 35px;
}
.page-lesson .lesson-wrapper .right-wrapper .right-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 15px -4px;
  padding-right: 18px;
}
.page-lesson .lesson-wrapper .right-wrapper .header-status {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.page-lesson .lesson-wrapper .right-wrapper .header-status-item {
  display: flex;
  flex: 1 1;
  margin: 0 4px;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border: 1px solid #f0f4f8;
  box-sizing: border-box;
  border-radius: 30px;
  padding: 8px 16px;
}
.page-lesson .lesson-wrapper .right-wrapper .header-status-item .status-left {
  display: flex;
  align-items: center;
  height: 14px;
}
.page-lesson .lesson-wrapper .right-wrapper .header-status-item img {
  width: 14px;
  margin-right: 8px;
}
.page-lesson .lesson-wrapper .right-wrapper .header-status-item .anticon {
  width: 14px;
  margin-right: 8px;
  color: #f4b860;
}
.page-lesson .lesson-wrapper .right-wrapper .header-status-item .status-text {
  color: #2c2543;
  font-size: 12px;
}
.page-lesson .lesson-wrapper .right-wrapper .header-status-item .status-count {
  font-size: 12px;
  font-weight: bold;
  color: #979797;
}
.page-lesson .lesson-wrapper .right-wrapper .lesson-items {
  box-sizing: border-box;
  height: calc(100% - 52px);
  width: calc(100% + 20px);
  margin-left: -10px;
  padding: 15px 10px 39px;
  overflow: auto;
}

.lesson-page-more-course {
  position: fixed;
  right: -160px;
  transition: right 0.35s ease;
  bottom: 34px;
  border-radius: 43px 0 0 43px;
  display: flex;
  align-items: center;
  padding: 6px;
}
.lesson-page-more-course .icon {
  margin-right: 10px;
  position: relative;
}
.lesson-page-more-course .icon .bg {
  width: 35px;
}
.lesson-page-more-course .icon .mouse {
  position: absolute;
  bottom: -9px;
  right: -1px;
}
.lesson-page-more-course .icon .animate {
  animation: lesson-page-more-course-mouse 14s ease 0s;
}
.lesson-page-more-course .icon .letter-bg {
  width: 40px;
  margin-top: -3px;
  margin-bottom: -6px;
}
.lesson-page-more-course .text {
  transition: opacity 0.35s ease;
  opacity: 0;
  color: #fff;
  margin-right: 10px;
}
.lesson-page-more-course .text .link {
  font-size: 12px;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.lesson-page-more-course .text .desc {
  font-size: 8px;
  margin-left: 6px;
}
.lesson-page-more-course .qr {
  position: relative;
}
.lesson-page-more-course .qr::before {
  content: '';
  background: #fff;
  position: absolute;
  top: 3px;
  left: 0;
  bottom: 3px;
  width: 0.5px;
}
.lesson-page-more-course .qr img {
  margin-left: 6px;
  width: 23px;
  height: 23px;
}
.lesson-page-more-course:hover {
  right: 0;
}
.lesson-page-more-course:hover .text {
  opacity: 1;
}
.lesson-page-more-course .close {
  position: fixed;
  right: 5px;
  bottom: 80px;
  cursor: pointer;
}
@keyframes lesson-page-more-course-mouse {
  0% {
    bottom: -9px;
    right: -1px;
  }
  4% {
    bottom: -15px;
    right: -5px;
  }
  8% {
    bottom: -9px;
    right: -1px;
  }
  12% {
    bottom: -15px;
    right: -5px;
  }
  16% {
    bottom: -9px;
    right: -1px;
  }
  35% {
    bottom: -15px;
    right: -5px;
  }
  35% {
    bottom: -9px;
    right: -1px;
  }
  39% {
    bottom: -15px;
    right: -5px;
  }
  43% {
    bottom: -9px;
    right: -1px;
  }
  47% {
    bottom: -15px;
    right: -5px;
  }
  52% {
    bottom: -9px;
    right: -1px;
  }
  84% {
    bottom: -9px;
    right: -1px;
  }
  88% {
    bottom: -15px;
    right: -5px;
  }
  92% {
    bottom: -9px;
    right: -1px;
  }
  96% {
    bottom: -15px;
    right: -5px;
  }
  100% {
    bottom: -9px;
    right: -1px;
  }
}
.qr-popover .ant-popover-inner {
  background: #35383d;
}
.qr-popover .ant-popover-arrow {
  border-bottom-color: #35383d !important;
  border-right-color: #35383d !important;
}
.qr-popover .ant-popover-inner-content {
  padding: 5px;
}

.page-not-found .not-found-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - 60px);
  width: 100%;
}
.page-not-found .not-found-img {
  height: 224px;
}
.page-not-found .right-wrapper {
  margin-left: 55px;
}
.page-not-found .right-wrapper img {
  width: 186px;
}
.page-not-found .right-wrapper .desc {
  font-size: 16px;
  margin-top: 30px;
  color: #000;
}
.page-not-found .right-wrapper .desc-eng {
  margin-top: 5px;
}
.page-not-found .right-wrapper .button {
  margin-top: 23px;
  width: 64px;
  height: 36px;
  background: #ffc963;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}

.ui-stdin-prompt-uploader > .ant-upload {
  width: 128px;
  height: 128px;
  background: #fafafa;
  text-align: center;
  border: 1px dashed #d9d9d9;
  cursor: pointer;
}
.ui-stdin-prompt-uploader > .ant-upload span.anticon {
  padding-top: 40px;
}

.egg-biubiubiu {
  animation-name: egg-biubiubiu;
  animation-duration: 4s;
  visibility: hidden;
  opacity: 0;
  transform-origin: 40% 50%;
}
.egg-aaa {
  animation-name: egg-aaa;
  animation-duration: 4s;
  visibility: hidden;
  opacity: 0;
}
.egg-sleep {
  animation-name: egg-sleep;
  animation-duration: 4s;
  visibility: hidden;
  opacity: 0;
}
@keyframes egg-aaa {
  0% {
    opacity: 0;
    visibility: visible;
    transform: translateX(0%);
  }
  50% {
    opacity: 1;
    transform: translateX(-60vw);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-120vw);
  }
}
@keyframes egg-sleep {
  0% {
    opacity: 0;
    visibility: visible;
  }
  12.5% {
    opacity: 1;
    visibility: visible;
  }
  87.5% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes egg-biubiubiu {
  0% {
    opacity: 0;
    visibility: visible;
  }
  12.5% {
    opacity: 1;
    transform: rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: rotate(-30deg);
  }
  37.5% {
    opacity: 1;
    transform: rotate(10deg);
  }
  50% {
    opacity: 1;
    transform: rotate(-30deg);
  }
  62.5% {
    opacity: 1;
    transform: rotate(10deg);
  }
  75% {
    opacity: 1;
    transform: rotate(-30deg);
  }
  87.5% {
    opacity: 1;
    transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.page-lesson .lesson-item {
  background: #fbfbfd;
  mix-blend-mode: normal;
  box-shadow: 0px 12px 12px rgba(44, 37, 67, 0.04);
  border-radius: 8px;
  color: #2c2543;
  margin-bottom: 10px;
  position: relative;
}
.page-lesson .lesson-item[data-expand='true'] {
  height: 117px;
}
.page-lesson .lesson-item[data-disable='true'] {
  color: #b5b5b5;
  cursor: not-allowed;
}
.page-lesson .lesson-item[data-disable='true'] .top-wrapper .text {
  color: #b5b5b5;
}
.page-lesson .lesson-item[data-disable='true'] .top-wrapper .status {
  cursor: not-allowed;
}
.page-lesson .lesson-item[data-is-child='true'] {
  margin-left: 25px;
}
.page-lesson .lesson-item[data-is-child='true']::before {
  content: '';
  background: url('https://staticcdn.boyuai.com/materials/2020/08/14/ZNNCuv_N_trnqDqdQDIxc.png!png');
  background-size: 12px 48px;
  width: 12px;
  height: 48px;
  position: absolute;
  top: -10px;
  left: -12px;
}
.page-lesson .lesson-item[data-is-child='deep'] {
  margin-left: 25px;
}
.page-lesson .lesson-item[data-is-child='deep']::before {
  content: '';
  background: url('https://staticcdn.boyuai.com/materials/2020/08/14/tYhLj4O3l-BU-iKEjqZi8.png!png');
  background-size: 12px 95px;
  width: 12px;
  height: 95px;
  position: absolute;
  top: -59px;
  left: -12px;
}
.page-lesson .lesson-item .top-wrapper {
  display: flex;
  justify-content: space-between;
  height: 67px;
  padding: 18px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0px 12px 12px rgba(44, 37, 67, 0.04);
}
.page-lesson .lesson-item .top-wrapper .title {
  color: #2c2543;
  font-weight: bold;
  display: flex;
  align-items: center;
  flex: 1 1;
  min-width: 0;
}
.page-lesson .lesson-item .top-wrapper .status-icon {
  width: 14px;
}
.page-lesson .lesson-item .top-wrapper .status-icon--unavailable {
  color: #a8adb7;
  font-size: 14px;
}
.page-lesson .lesson-item .top-wrapper .text {
  margin-left: 20px;
  min-width: 0;
  font-size: 15px;
  color: #2c2543;
}
.page-lesson .lesson-item .top-wrapper .text a {
  color: #2c2543;
}
.page-lesson .lesson-item .top-wrapper .text .text-title {
  max-width: 100%;
  display: flex;
  align-items: center;
  grid-gap: 5px;
  gap: 5px;
}
.page-lesson .lesson-item .top-wrapper .text .lesson-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.page-lesson .lesson-item .top-wrapper .learning-button {
  box-sizing: border-box;
  min-width: 76px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-gap: 5px;
  gap: 5px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.page-lesson .lesson-item .top-wrapper .learning-button a {
  color: #2c2543;
}
.page-lesson .lesson-item .top-wrapper .learning-button[data-variant='primary'] {
  background: #f8d57e;
  color: #2c2543;
  border-color: #f8d57e;
}
.page-lesson .lesson-item .top-wrapper .learning-button[data-variant='start'] {
  background: #fff;
  color: #f4b860;
  border-color: #f8d57e;
}
.page-lesson .lesson-item .top-wrapper .learning-button[data-variant='secondary'] {
  background: #fff;
  border-color: #d9dde5;
  color: #454b57;
}
.page-lesson .lesson-item .top-wrapper .learning-button[data-variant='disabled'] {
  background: #f5f6f7;
  border-color: #e5e7eb;
  color: #a8adb7;
  cursor: not-allowed;
}
.page-lesson .lesson-item .top-wrapper .learning-button:not([data-variant='disabled']) {
  cursor: pointer;
}
.page-lesson .lesson-item .top-wrapper .report {
  padding: 2px 8px;
  color: #22b2f0;
  border: 1px solid #22b2f0;
  border-radius: 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}
.page-lesson .lesson-item .top-wrapper .status {
  display: flex;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  flex: none;
}
.page-lesson .lesson-item .top-wrapper .status[data-learned='true'] {
  color: #44b158;
}
.page-lesson .lesson-item .top-wrapper .status .expand {
  font-size: 12px;
  color: #f4b860;
  margin-left: 10px;
}
.page-lesson .lesson-item .top-wrapper .expected-study-duration {
  transition: opacity 0.2s ease-in, height 0.2s ease-in;
  height: 0;
  opacity: 0;
  font-size: 14px;
  font-weight: normal;
  color: #909399;
}
.page-lesson .lesson-item .top-wrapper .expected-study-duration span.anticon {
  margin-right: 0.5em;
}
.page-lesson .lesson-item .top-wrapper:hover .expected-study-duration,
.page-lesson .lesson-item .top-wrapper:focus-within .expected-study-duration {
  opacity: 1;
  height: 16px;
}
.page-lesson .lesson-item .top-wrapper:hover .learning-button[data-variant='primary'],
.page-lesson .lesson-item .top-wrapper:focus-within .learning-button[data-variant='primary'] {
  background: #f2c85e;
  border-color: #f2c85e;
  color: #5c3a00;
}
.page-lesson .lesson-item .top-wrapper:hover .learning-button[data-variant='start'],
.page-lesson .lesson-item .top-wrapper:focus-within .learning-button[data-variant='start'] {
  background: #fffaf0;
  border-color: #f4b860;
}
.page-lesson .lesson-item .top-wrapper:hover .learning-button[data-variant='secondary'],
.page-lesson .lesson-item .top-wrapper:focus-within .learning-button[data-variant='secondary'] {
  background: #f7f8fa;
  border-color: #b8bec9;
}
.page-lesson .lesson-item .top-wrapper:hover .lesson-progress-label,
.page-lesson .lesson-item .top-wrapper:focus-within .lesson-progress-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.page-lesson .lesson-item .top-wrapper:hover .lesson-progress,
.page-lesson .lesson-item .top-wrapper:focus-within .lesson-progress {
  transform: translateY(-8px);
}
.page-lesson .lesson-item .top-wrapper .learning-button[data-variant='primary']:active {
  background: #e5aa55;
  border-color: #e5aa55;
  color: #5c3a00;
}
.page-lesson .lesson-item .top-wrapper .learning-button[data-variant='start']:active {
  background: #fff4d6;
  border-color: #e5aa55;
}
.page-lesson .lesson-item .lesson-progress {
  display: flex;
  align-items: center;
  position: relative;
  width: 112px;
  min-width: 112px;
  transition: transform 0.2s ease-in;
}
.page-lesson .lesson-item .lesson-progress-label {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  color: #909399;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-2px);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}
.page-lesson .lesson-item .lesson-progress-meter {
  display: flex;
  align-items: center;
  width: 100%;
  height: 24px;
  box-sizing: border-box;
  grid-gap: 6px;
  gap: 6px;
  padding: 0 8px;
  background: #f7f8fa;
  border-radius: 6px;
}
.page-lesson .lesson-item .lesson-progress-track {
  flex: 1 1;
  height: 4px;
  overflow: hidden;
  background: #eceef2;
  border-radius: 999px;
}
.page-lesson .lesson-item .lesson-progress-bar {
  height: 100%;
  background: #f8d57e;
  border-radius: inherit;
  transition: width 0.2s ease;
}
.page-lesson .lesson-item .lesson-progress-value {
  width: 30px;
  color: #667180;
  font-size: 12px;
  font-weight: 400;
  text-align: right;
}
.page-lesson .lesson-item .lesson-progress-unavailable {
  width: 100%;
  color: #a8adb7;
  font-size: 12px;
  text-align: center;
}
.page-lesson .lesson-item .lesson-files {
  width: 32px;
  flex: none;
}
.page-lesson .lesson-item .lesson-item-content {
  position: relative;
}
.page-lesson .lesson-item .private-message-corner {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 22px solid #f26b4f;
  border-left: 22px solid transparent;
  border-radius: 0 8px 0 0;
  -webkit-filter: drop-shadow(-1px 1px 2px rgba(242, 107, 79, 0.22));
          filter: drop-shadow(-1px 1px 2px rgba(242, 107, 79, 0.22));
}
.page-lesson .lesson-item .private-message-corner::after {
  content: '';
  position: absolute;
  top: -17px;
  right: 4px;
  width: 7px;
  height: 2px;
  background: #fff;
  border-radius: 99px;
  transform: rotate(-45deg);
}
.private-message-tooltip .ant-tooltip-inner {
  min-height: auto;
  padding: 9px 12px;
  color: #5c3a00;
  font-size: 12px;
  line-height: 16px;
  background: #fff9ea;
  border: 1px solid #f8d57e;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(189, 136, 35, 0.18);
}
.private-message-tooltip .ant-tooltip-arrow-content {
  background: #fff9ea;
}
.private-message-tooltip-content {
  display: flex;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  white-space: nowrap;
}
.private-message-tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #d9941f;
  background: #fff0c7;
  border-radius: 50%;
}
.private-message-tooltip-text {
  display: flex;
  flex-direction: column;
  grid-gap: 1px;
  gap: 1px;
}
.private-message-tooltip-text strong {
  color: #5c3a00;
  font-weight: 600;
}
.private-message-tooltip-text span {
  color: #9a7433;
  font-size: 11px;
}

.watermark {
  position: fixed;
  top: -50%;
  left: -10%;
  z-index: 99999;
  width: 200%;
  height: 200%;
  transform: rotate(-20deg);
  pointer-events: none;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.ui-elites-button.ant-btn {
  border-radius: 8px;
  color: #ffc963;
  background-color: #fff;
  border-color: #ffc963;
  font-size: 14px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
.ui-elites-button.ant-btn:hover,
.ui-elites-button.ant-btn:focus {
  color: #ffdb8c;
  background-color: #fff;
  border-color: #ffdb8c;
}
.ui-elites-button.primary {
  border-radius: 8px;
  color: #393f47;
  background-color: #ffc963;
  border-color: #ffc963;
  font-size: 14px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
.ui-elites-button.primary:hover,
.ui-elites-button.primary:focus {
  color: #393f47;
  background-color: #ffdb8c;
  border-color: #ffdb8c;
}
.ui-elites-button.clean {
  border-radius: 8px;
  color: #393f47;
  background-color: #fff;
  border-color: #393f47;
  font-size: 14px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
.ui-elites-button.clean:hover {
  color: #ffc963;
  background-color: #fff;
  border-color: #ffc963;
}
.ui-elites-button.clean:focus {
  color: #ffc963;
  background-color: #fff;
  border-color: #ffc963;
}
.ui-elites-button.border {
  border-radius: 8px;
  color: #393f47;
  background-color: #fff;
  border-color: #ffc963;
  font-size: 14px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
.ui-elites-button.border:hover {
  color: #393f47;
  background-color: #fff;
  border-color: #ffc963;
}
.ui-elites-button.border:focus {
  color: #393f47;
  background-color: #fff;
  border-color: #ffc963;
}
.ui-elites-button.link {
  border: none;
  color: #2e3135;
  background-color: unset;
  border-color: unset;
  font-size: 14px;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.ui-elites-button.link:hover {
  color: #2e3135;
  background-color: unset;
  border-color: unset;
}
.ui-elites-button.link:focus {
  color: #2e3135;
  background-color: unset;
  border-color: unset;
}
.ui-elites-button[data-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.elites-confirm-modal.dark .ant-modal-close {
  color: #fff;
}
.elites-confirm-modal .ant-modal-body .content {
  font-size: 14px;
  color: #000;
  text-align: center;
  margin-top: 44px;
}
.elites-confirm-modal .ant-modal-body .content .text {
  margin-top: 20px;
}
.elites-confirm-modal .ant-modal-body .content.full {
  margin: -24px -24px 0 -24px;
}
.elites-confirm-modal .ant-modal-body .content-middle img {
  width: 156px;
}
.elites-confirm-modal .ant-modal-body .reset-middle img {
  width: 156px;
}
.elites-confirm-modal .ant-modal-body .button-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 32px 32px 24px;
}
.elites-confirm-modal .ant-modal-body .button-wrapper div {
  width: 92px;
  height: 36px;
  background: #ffffff;
  border: 1px solid #f8d57e;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  cursor: pointer;
}
.elites-confirm-modal .ant-modal-body .button-wrapper .right-button {
  background: #f8d57e;
}

.exam-quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 45px;
  padding: 3px 0;
}
.exam-quiz-header .exam-quiz-header-title {
  align-self: flex-end;
  border-bottom: 2px solid #f4b860;
  padding-bottom: 4px;
  position: relative;
  bottom: -5px;
}
.exam-quiz-header .title {
  color: #000000;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
}
.quiz-confirm-modal .ant-modal-body {
  text-align: center;
}
.quiz-confirm-modal img {
  margin-top: 32px;
}
.quiz-confirm-modal p {
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  color: #606266;
  margin: 32px 0;
}
.quiz-confirm-modal .footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}
.quiz-confirm-modal .footer .ant-btn {
  width: 92px;
  margin: 0 12px;
}

.block-code-answer-diff .ant-modal {
  animation-duration: 0s !important;
  width: 100%;
}
.block-code-answer-diff .ant-modal .ant-modal-content {
  margin: auto;
  min-width: 800px;
  max-width: 1200px;
  width: 80%;
}
.block-code-answer-diff .ant-modal .ant-modal-content .ant-modal-body {
  height: 60vh;
  overflow-y: auto;
}
.ant-modal .monaco-diff-editor .editor.original {
  right: 30px !important;
  left: unset !important;
}
.ant-modal .monaco-diff-editor .editor.modified {
  left: 0 !important;
  width: unset !important;
}
.ant-modal .monaco-diff-editor .diffOverview .diffOverviewRuler.original {
  left: 15px !important;
}
.ant-modal .monaco-diff-editor .diffOverview .diffOverviewRuler.modified {
  right: 15px !important;
}

.ui-online-judge-result {
  color: #f4b860;
}
.ui-online-judge-result a {
  color: #f4b860;
}
.ui-online-judge-result[data-color='red'] {
  color: #ff4d4f;
}
.ui-online-judge-result[data-color='red'] a {
  color: #ff4d4f;
}
.ui-online-judge-result[data-color='green'] {
  color: #50a14f;
}
.ui-online-judge-result[data-color='green'] a {
  color: #50a14f;
}
.ui-online-judge-result .result-table {
  color: #999;
  margin-top: 16px;
  border-top: 1px solid #eee;
  padding-top: 16px;
}
.ui-online-judge-result .result-table .table-title {
  margin-bottom: 6px;
}
.ui-online-judge-result .result-table .line {
  display: flex;
  border: 1px solid #efefef;
  border-bottom: none;
}
.ui-online-judge-result .result-table .line:last-child {
  border-bottom: 1px solid #efefef;
}
.ui-online-judge-result .result-table .line .col {
  text-align: center;
  padding: 4px 0px;
  flex: 1 1;
  border-right: 1px solid #efefef;
}
.ui-online-judge-result .result-table .line .col:last-child {
  border-right: none;
}
.ui-online-judge-result .result-table .line .col:first-child {
  max-width: 50px;
}

.ui-stdin {
  flex: 1 1;
}
.ui-stdin .input input {
  background: #f8f8f8;
  border-color: #f8f8f8;
}
.ui-stdin .input .ant-input-group-addon {
  padding: 0;
  border: none;
}
.ui-stdin .input .ant-input-group-addon button {
  position: relative;
  left: 4px;
  width: 100%;
  height: 100%;
}

/* CSS font colors for translated ANSI escape sequences */
/* The color values are a mix of
   http://www.xcolors.net/dl/baskerville-ivorylight and
   http://www.xcolors.net/dl/euphrasia */
.ansi-black-fg {
  color: #3e424d;
}
.ansi-black-bg {
  background-color: #3e424d;
}
.ansi-black-intense-fg {
  color: #282c36;
}
.ansi-black-intense-bg {
  background-color: #282c36;
}
.ansi-red-fg {
  color: #e75c58;
}
.ansi-red-bg {
  background-color: #e75c58;
}
.ansi-red-intense-fg {
  color: #b22b31;
}
.ansi-red-intense-bg {
  background-color: #b22b31;
}
.ansi-green-fg {
  color: #00a250;
}
.ansi-green-bg {
  background-color: #00a250;
}
.ansi-green-intense-fg {
  color: #007427;
}
.ansi-green-intense-bg {
  background-color: #007427;
}
.ansi-yellow-fg {
  color: #ddb62b;
}
.ansi-yellow-bg {
  background-color: #ddb62b;
}
.ansi-yellow-intense-fg {
  color: #b27d12;
}
.ansi-yellow-intense-bg {
  background-color: #b27d12;
}
.ansi-blue-fg {
  color: #208ffb;
}
.ansi-blue-bg {
  background-color: #208ffb;
}
.ansi-blue-intense-fg {
  color: #0065ca;
}
.ansi-blue-intense-bg {
  background-color: #0065ca;
}
.ansi-magenta-fg {
  color: #d160c4;
}
.ansi-magenta-bg {
  background-color: #d160c4;
}
.ansi-magenta-intense-fg {
  color: #a03196;
}
.ansi-magenta-intense-bg {
  background-color: #a03196;
}
.ansi-cyan-fg {
  color: #60c6c8;
}
.ansi-cyan-bg {
  background-color: #60c6c8;
}
.ansi-cyan-intense-fg {
  color: #258f8f;
}
.ansi-cyan-intense-bg {
  background-color: #258f8f;
}
.ansi-white-fg {
  color: #c5c1b4;
}
.ansi-white-bg {
  background-color: #c5c1b4;
}
.ansi-white-intense-fg {
  color: #a1a6b2;
}
.ansi-white-intense-bg {
  background-color: #a1a6b2;
}
.ansi-default-inverse-fg {
  color: #ffffff;
}
.ansi-default-inverse-bg {
  background-color: #000000;
}
.ansi-bold {
  font-weight: bold;
}
.ansi-underline {
  text-decoration: underline;
}

.ui-code-output .jupyter-matplotlib-button {
  position: relative;
}
.ui-code-output .fe-player-tooltip-wrap {
  left: 10px;
  right: auto;
}
@media (min-width: 768px) {
  .ui-code-output .fe-player-tooltip-wrap .tooltip .icon-close:hover {
    color: #f4b860;
  }
}
.ui-code-output .fe-player-tooltip-wrap .tooltip .action {
  color: #f4b860;
}
.ui-code-output .prism-player .prism-progress .prism-progress-played {
  background-color: #f4b860;
}
.ui-code-output .rate-list li.current,
.ui-code-output .quality-list li.current {
  color: #f4b860;
}
.ui-code-output .prism-player .prism-big-play-btn {
  right: 30px !important;
  bottom: 55px !important;
  left: auto !important;
  z-index: 900;
}
.ui-code-output .widget-html-content img {
  max-width: 100%;
  height: auto;
}

.block-output {
  background: rgba(223, 223, 223, 0.2);
  border-radius: 8px;
  padding: 15px;
  display: inline-block;
  min-width: 100%;
}
.step-output-spin .ant-spin-blur::after {
  opacity: 1;
}

.block-code-answer {
  overflow: auto;
  padding: 15px;
}
.block-code-answer[data-disable-copy='true'] pre {
  -webkit-user-select: none !important;
      -ms-user-select: none !important;
          user-select: none !important;
}
.block-code-answer button {
  float: right;
  margin-top: 4px;
  border-radius: 8px;
}
.block-code-answer button.ant-btn {
  color: #fff;
  background-color: #f8d57e;
  border-color: #f8d57e;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
.block-code-answer button.ant-btn:hover,
.block-code-answer button.ant-btn:focus {
  color: #f8d57e;
  background-color: #fff;
  border-color: #f8d57e;
}

.elites-code-result-block-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
.elites-code-result-block-wrapper .elites-code-result-block-content-wrapper {
  height: calc(100% - 80px);
  overflow: auto;
}
.elites-code-result-block-wrapper .elites-code-result-block-content-wrapper .ui-code-output pre {
  margin: 0;
}
.elites-code-result-block-wrapper .elites-code-result-block-header {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  color: #000;
}
.elites-code-result-block-wrapper .elites-code-result-block-header .anticon {
  color: #f4b860;
}
.elites-code-result-block-wrapper .elites-code-result-block-header .ant-breadcrumb .item {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.45);
}
.elites-code-result-block-wrapper .elites-code-result-block-header .ant-breadcrumb .active {
  color: rgba(0, 0, 0, 0.65);
}
.elites-code-result-block-wrapper .elites-code-result-block-content-wrapper {
  overflow: auto;
  margin-top: 10px;
  position: relative;
}
.elites-code-result-block-wrapper .elites-code-result-block-content-wrapper #result-block-content-loading {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column-reverse;
  color: #616161;
  font-size: 14px;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.elites-code-result-block-wrapper .elites-code-result-block-footer {
  border-top: 2px solid #f6f6fc;
  position: absolute;
  bottom: 0;
  height: 48px;
  left: 0;
  right: 0;
  display: flex;
  background: #fff;
  padding: 8px 16px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.elites-code-result-block-wrapper .elites-code-result-block-footer .elites-code-result-block-footer-text {
  margin-top: 0;
  font-size: 14px;
  color: #f4b860;
  display: flex;
  justify-content: space-between;
}
.elites-code-result-block-wrapper .elites-code-result-block-footer .elites-code-result-block-footer-text.correct {
  color: #50a14f;
}
.elites-code-result-block-wrapper .elites-code-result-block-footer .elites-code-result-block-footer-text.wrong {
  color: #ff4d4f;
}
.elites-code-result-block-wrapper .elites-code-result-block-footer .elites-code-result-block-footer-buttons button {
  margin-left: 8px;
  border-radius: 8px;
}
.elites-code-result-block-wrapper .elites-code-result-block-footer .elites-code-result-block-footer-buttons .syntax-error-help {
  padding-left: 10px;
  background: #f8d57e;
  color: #2c2543;
  border: none;
}
.elites-code-result-block-wrapper .elites-code-result-block-footer .elites-code-result-block-footer-buttons .syntax-error-help svg {
  vertical-align: sub;
  margin-right: 8px;
}
.x-ta-feedback .x-ta-feedback-actions {
  color: #8f8f8f;
  font-size: 12px;
  line-height: 16px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.x-ta-feedback .x-ta-feedback-actions svg {
  margin-right: 2px;
}
.x-ta-feedback .x-ta-feedback-actions > div {
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.x-ta-feedback .x-ta-feedback-actions > div:hover {
  color: #2c2543;
}
.x-ta-feedback .x-ta-feedback-actions > div:hover .good-icon path,
.x-ta-feedback .x-ta-feedback-actions > div:hover .bad-icon path {
  stroke: #f4b860;
}
.x-ta-feedback .x-ta-feedback-actions > div:hover .good-icon :first-child,
.x-ta-feedback .x-ta-feedback-actions > div:hover .bad-icon :first-child {
  stroke: unset !important;
}

.ui-split-pane .Pane2 {
  min-width: 0;
  min-height: 0;
}
.ui-split-pane .Resizer {
  background: #000;
  opacity: 0.2;
  z-index: 1;
  box-sizing: border-box;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}
.ui-split-pane .Resizer.vertical {
  cursor: col-resize;
  height: 100%;
  width: 12px;
  position: relative;
  background-color: #f9fafb;
}
.ui-split-pane .Resizer.vertical:hover {
  background-color: #a9a9a9;
}
.ui-split-pane .Resizer.horizontal {
  cursor: row-resize;
  width: 100%;
  height: 12px;
  position: relative;
  background-color: #f9fafb;
}
.ui-split-pane .Resizer.horizontal:hover {
  background-color: #a9a9a9;
}
.ui-split-pane .Resizer.disabled {
  cursor: not-allowed;
}
.ui-split-pane .Resizer.disabled:hover {
  border-color: transparent;
}
.ui-split-pane-quiz .Resizer.horizontal {
  cursor: unset;
}
.ui-split-pane-quiz .Resizer.horizontal:hover {
  background-color: unset;
}

.step-guide-wrapper {
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2000;
}
.step-guide-wrapper .guide-window {
  transform: translateY(0) translateX(0);
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 2333px;
  position: absolute;
  border-radius: 4px;
}
.step-guide-wrapper .guide-window.initialized {
  transition: transform 0.25s ease-in;
}
.step-guide-wrapper .guide-window-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.step-guide-wrapper .info-wrapper {
  position: absolute;
  background: #f8d57e;
  color: #2c2543;
  font-size: 14px;
  line-height: 22px;
  padding: 16px;
  font-weight: 400 !important;
}
.step-guide-wrapper .info-wrapper .bold {
  font-weight: 500 !important;
}
.step-guide-wrapper .info-wrapper:before {
  position: absolute;
  transform: rotate(45deg);
  width: 10px;
  height: 10px;
  background: #f8d57e;
  content: ' ';
}
.step-guide-wrapper .info-wrapper .buttons {
  position: absolute;
  bottom: 12px;
  right: 16px;
}
.step-guide-wrapper .info-wrapper .buttons button {
  border: 0px solid #e6af25;
  border-radius: 20px;
  width: 76px;
  height: 29px;
  padding: 2px 14px;
}
.step-guide-wrapper .info-wrapper .buttons button span {
  display: inline-block;
  color: #2c2543;
  font-weight: 600;
  font-size: 12px;
  line-height: 22px;
}
.step-guide-wrapper .info-wrapper .buttons button.skip {
  padding: 2px 0;
  box-shadow: none;
  background: transparent;
}

.exam-submit-button {
  position: fixed;
  bottom: 9px;
  right: 16px;
}
.exam-submit-modal {
  color: #606266;
}
.exam-submit-modal div {
  margin-top: 4px;
}
.exam-submit-modal div:first-of-type {
  margin-top: 30px;
}
.exam-submit-modal .not-finished-tip {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0.085em;
}

.feedbackTrigger--1ZH66 {
  display: flex;
  align-items: center;
}
.feedbackTrigger--1ZH66 span {
  font-size: 14px;
  color: var(--text-5);
  margin-left: 4px;
}
.feedbackTrigger--1ZH66:hover,
.feedbackTrigger--1ZH66:focus,
.feedbackTrigger--1ZH66:active {
  background: none !important;
}
.warning--2M0h6 {
  font-size: 14px;
  margin-top: -12px;
  margin-bottom: 12px;
  color: #828282;
}
.feedbackTypes--2H5Fo > label {
  display: inline-block;
  width: 50%;
  margin: 0;
  padding: 0;
  line-height: 32px;
}
.feedbackInput--3VK3_ {
  margin: 16px 0 !important;
  width: 100%;
  font-size: 14px !important;
  height: 80px !important;
  padding: 8px !important;
  overflow: auto;
}
.customerService--1drkW {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.customerService--1drkW img {
  width: 250px;
}
.customerService--1drkW p {
  color: var(--text-1);
  font-size: 14px;
  text-align: center;
  line-height: 28px;
  margin-bottom: 0;
}

.drag-box {
  position: fixed;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
  background: #f8f8f8;
  z-index: 999;
  border-radius: 8px;
  color: #2c2543;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.drag-box .title {
  position: relative;
  border-radius: 8px 8px 0 0;
  padding: 6px 21px;
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drag-box.closeable .title {
  padding: 10px;
  justify-content: space-between;
}
.drag-box.closeable .title .close-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 11px;
  cursor: pointer;
}
.drag-box.closeable .title .close-icon svg {
  vertical-align: super;
}
.drag-box .action {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 8px 0;
  cursor: pointer;
}
.drag-box .action:hover {
  background: #f5f5f5;
}
.drag-box .action svg {
  margin-right: 8px;
}
.drag-box .action[data-disable='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.live-private-message-modal .ant-modal-content {
  border-radius: 12px;
}
.live-private-message-modal .ant-modal-body {
  padding: 28px 32px 16px;
}
.live-private-message-modal .ant-modal-footer {
  padding: 12px 32px 24px;
  border-top: 0;
}
.live-private-message-title {
  color: #2c2543;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
}
.live-private-message-title img {
  width: 28px;
  margin-right: 8px;
}
.live-private-message-progress {
  margin-top: 12px;
  color: #909399;
  font-size: 13px;
}
.live-private-message-content {
  max-height: min(52vh, 480px);
  margin-top: 16px;
  overflow-y: auto;
  color: #2c2543;
  font-size: 15px;
  line-height: 1.7;
  word-break: break-word;
}
.live-private-message-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.private-message-history-content {
  height: calc(62vh - 46px);
  min-height: 400px;
  width: 22vw;
  overflow-y: auto;
  -webkit-user-select: text;
      -ms-user-select: text;
          user-select: text;
  background: #f8f8f8;
}
.private-message-history-content .private-message-history-item-box {
  padding: 0 16px 12px;
}
.private-message-history-content .private-message-history-item-box-teacher-name {
  font-size: 12px;
  color: #000;
  margin-right: 6px;
}
.private-message-history-content .private-message-history-item-box-date {
  font-size: 10px;
  color: #c4c4c4;
}
.private-message-history-content .private-message-history-item-box-status {
  margin-left: 4px;
  font-size: 10px;
  color: #f4b860;
}
.private-message-history-content .private-message-history-item-text {
  padding: 8px;
  margin-top: 8px;
  border-radius: 8px;
  background: #fff;
  word-break: break-word;
}
.private-message-history-content .private-message-history-item-text img {
  max-width: 100%;
}
.private-message-history-content .private-message-history-item-text pre {
  overflow-x: auto;
}

.assistant-wrapper {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 50px;
}
.assistant-wrapper .assistant {
  height: 50px;
  width: 32px;
  padding: 13px 3px;
  cursor: pointer;
  color: #2c2543;
  border-left: 1px solid #edebe9;
}
.assistant-wrapper .comment-link {
  cursor: pointer;
  margin-right: 8px;
  color: #2c2543;
  display: flex;
  align-items: center;
}
@keyframes stretch-animation {
  0% {
    transform: scale(1, 1);
  }
  10% {
    transform: scale(1.1, 0.9);
  }
  30% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.05, 0.95);
  }
  100% {
    transform: scale(1, 1);
  }
}
.lesson-comment-reminder.lesson-comment-reminder-enter {
  opacity: 0 !important;
}
.lesson-comment-reminder.lesson-comment-reminder-enter-active {
  opacity: 1 !important;
  animation: stretch-animation 1s ease-out forwards 0.15s !important;
}
.lesson-comment-reminder.lesson-comment-reminder-leave,
.lesson-comment-reminder.lesson-comment-reminder-leave-active {
  display: none;
}
.assistant-tooltip .ant-tooltip-inner {
  padding: 8px 16px;
  background: #2e3135;
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.assistant-tooltip .ant-tooltip-inner .comment-link {
  font-size: 14px;
  line-height: 16px;
  color: #f8d57e;
  font-weight: 600;
}
.assistant-tooltip .ant-tooltip-arrow-content {
  width: 7px;
  height: 7px;
}
.assistant-tooltip .ant-tooltip-arrow-content {
  background: #2e3135;
}
.assistant-menu .ant-dropdown-menu-item > .anticon:first-child {
  font-size: 14px;
}
.assistant-menu .ant-dropdown-menu-item > span > .anticon:first-child {
  font-size: 14px;
}
.customer-service {
  width: 240px;
}
.customer-service .item-wrapper {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}
.customer-service .item-wrapper .avatar {
  height: 10px;
  widows: 9px;
  margin-right: 10px;
}
.customer-service .item-wrapper .desc {
  background: #fff7de;
  border-radius: 8px;
  padding: 10px;
}
.customer-service .item-wrapper .desc img {
  height: 120px;
  width: 120px;
}

.step-bar-lesson-menu {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 50px;
  padding: 15px 20px;
  cursor: pointer;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.step-bar-lesson-menu[data-open='true'] {
  background: #f6f7f8;
}
.menu-drawer {
  width: 52px;
  background: #fff;
  height: calc(100vh - 114px);
}
.menu-drawer[data-menu-visible='false'] {
  overflow: hidden;
}
.menu-drawer[data-menu-visible='false'] .menu-item-list::-webkit-scrollbar-track {
  background-color: #f9fafb;
}
.menu-drawer .menu-header {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #2f3542;
  padding: 19px 17px 15px;
  border-bottom: 2px solid #f7f8f9;
}
.menu-drawer .menu-item-list {
  max-height: calc(100vh - 114px);
  overflow-y: auto;
  overflow-x: hidden;
}
.menu-drawer .menu-item-list .menu-part {
  display: flex;
}
.menu-drawer .menu-item-list .menu-part .menu-step-block {
  background-color: #fff;
  box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.04);
}
.menu-drawer .menu-item-list .menu-part[data-active='true'] .menu-step-block {
  background-color: #fef2dc;
}
.menu-drawer .menu-item-list .menu-part[data-active='true'] .menu-part-title {
  background: linear-gradient(180deg, #fef2dc 0%, #ffecc8 100%);
  color: #f4b860;
}
.menu-drawer .menu-item-list .menu-part[data-active='true'] .menu-part-title[data-has-title='false'] {
  color: rgba(244, 184, 96, 0.2);
}
.menu-drawer .menu-item-list .menu-part[data-active='true'] .menu-item:hover {
  background: #f4b8601a;
}
.menu-drawer .menu-item-list .menu-part .menu-part-title {
  cursor: default;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 10px 8px 10px 0;
  width: 47px;
  border-radius: 0px 12px 12px 0px;
  line-height: 15px;
  background-color: #fafafa;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.04), inset 0px -1px 0px rgba(0, 0, 0, 0.04);
  font-size: 10px;
  color: #969696;
  font-weight: bold;
  letter-spacing: 2px;
  word-wrap: break-word;
  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
          text-orientation: upright;
  overflow: hidden;
  z-index: 3;
}
.menu-drawer .menu-item-list .menu-part .menu-part-title[data-has-title='false'] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 32px;
  color: rgba(44, 37, 67, 0.06);
  padding: 0;
}
.menu-drawer .menu-item-list .menu-part[data-show-part='false'] .menu-part-title {
  display: none;
}
.menu-drawer .menu-item-list::-webkit-scrollbar {
  width: 5px;
  border-radius: 4px;
}
.menu-drawer .menu-item-list::-webkit-scrollbar-track {
  border-radius: 2px;
  background-color: transparent;
}
.menu-drawer .menu-item-list::-webkit-scrollbar-thumb {
  display: none;
  background-color: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  width: 5px;
}
.menu-drawer .menu-item-list:hover::-webkit-scrollbar-thumb {
  display: block;
}
.menu-drawer .menu-item {
  width: 284px;
  display: flex;
  padding: 8px 4px 8px 18px;
  align-items: center;
  color: #2c2543;
  justify-content: space-between;
  font-weight: bold;
}
.menu-drawer .menu-item svg:first-child {
  color: #f4b860;
}
.menu-drawer .menu-item:hover {
  background: #00000008;
}
.menu-drawer .menu-item[data-active='true'] {
  background: #fef2dc;
  position: relative;
  border-left: 10px solid #f4b860;
  padding-left: 8px;
}
.menu-drawer .menu-item[data-disabled='true'] {
  color: rgba(0, 0, 0, 0.4);
  cursor: not-allowed;
}
.menu-drawer .menu-item[data-disabled='true'] svg {
  color: rgba(0, 0, 0, 0.4);
}
.menu-drawer .menu-item .menu-item-status {
  width: 22px;
  height: 22px;
  padding: 3px;
}
.menu-drawer .menu-item .menu-item-text {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 22px;
}
.menu-drawer .menu-item span {
  font-size: 12px;
  margin-right: 4px;
}
.menu-drawer .menu-item svg {
  margin-right: 6px;
}
.lesson-menu-slide {
  z-index: 500;
  position: fixed;
  left: 0 !important;
  top: 62px !important;
  opacity: 1 !important;
}
.lesson-menu-slide .menu-drawer {
  width: 52px;
  transition: width 0.2s ease;
}
.lesson-menu-slide .menu-drawer::after {
  content: '';
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 100%;
  transition: width 0.2s ease;
  z-index: -1;
}
.lesson-menu-slide .menu-item-text {
  opacity: 0;
}
.lesson-menu-slide.lesson-menu-slide-active .menu-item-text {
  opacity: 1;
}
.lesson-menu-slide.lesson-menu-slide-active .menu-drawer {
  background-color: transparent;
  width: 343px;
  position: relative;
}
.lesson-menu-slide.lesson-menu-slide-active .menu-drawer[data-show-part='false'] {
  width: 284px;
}
.lesson-menu-slide.lesson-menu-slide-active .menu-drawer::after {
  width: 284px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
}

.page-elites-step .step-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: #ffffff;
  color: #2c2543;
}
.page-elites-step .step-bar .progress-area {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-elites-step .step-bar .pre-btn {
  cursor: pointer;
  width: 74px;
  text-align: right;
  color: #2c2543;
}
.page-elites-step .step-bar .pre-btn[data-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.5;
}
.page-elites-step .step-bar .index {
  margin: 0 31px;
  opacity: 0.5;
}

.page-elites-step .header {
  background: #fff;
  box-shadow: 0px 4px 22px rgba(104, 85, 56, 0.1);
  position: relative;
  display: flex;
  color: #2e2e2e;
  align-items: center;
  justify-content: center;
  height: 60px;
  font-size: 18px;
  font-weight: 900;
}
.page-elites-step .header .elites-back {
  display: flex;
  position: absolute;
  font-size: 14px;
  left: 20px;
  cursor: pointer;
}
.page-elites-step .header .title {
  cursor: pointer;
}
.page-elites-step .header .title span {
  font-weight: normal;
}
.page-elites-step .header .title .anticon {
  margin-left: 10px;
}
.lesson-dropdown .ant-dropdown-menu {
  max-height: 296px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #35383d;
}
.lesson-dropdown .ant-dropdown-menu .ant-dropdown-menu-item a {
  color: #d0d0d0;
}
.lesson-dropdown .ant-dropdown-menu .ant-dropdown-menu-item a[data-current='true'] {
  color: #f4b860;
}
.lesson-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-active {
  background: #f2994a;
}
.lesson-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-active a {
  color: #fff;
}
.lesson-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-active a[data-current='true'] {
  color: #fff;
}
.lesson-dropdown .ant-dropdown-menu .ant-dropdown-menu-item.ant-dropdown-menu-item-disabled a {
  color: rgba(208, 208, 208, 0.5);
}

.exam-timer {
  position: absolute;
  right: 265px;
  font-weight: bold;
  font-size: 18px;
  height: 60px;
  padding: 14px 0;
  border-bottom: 4px solid #f8d57e;
}
.exam-timer-tooltip .ant-tooltip-arrow-content,
.exam-timer-tooltip .ant-tooltip-inner {
  background-color: #f8d57e;
  color: #000;
  font-size: 12px;
}
.exam-timer-tooltip .ant-tooltip-inner {
  padding: 7px 11px;
  border-radius: 8px;
}
.exam-timer-tooltip .ant-btn {
  padding: 0;
  margin-left: 10px;
  width: 46px;
  height: 20px;
  color: black !important;
  font-size: 12px;
  border-radius: 8px;
  border-color: #f8d57e;
}

.tab-item[data-visible='false'] {
  display: none;
}
.code-block-wrapper {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  margin-left: 20px;
  flex: 1 0 450px;
}
.code-block-wrapper .code-cell {
  position: relative;
}
.code-block-wrapper .block-code {
  position: relative;
}
.code-block-wrapper .mask {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
  display: none;
}
.code-block-wrapper .mask[data-display='true'] {
  display: block;
}
.code-block-wrapper .ui-code-editor {
  font-size: 11px;
}
.code-block-wrapper .ui-code-editor textarea {
  outline: none;
  background: rgba(111, 207, 151, 0.2) !important;
}
.code-block-wrapper .ui-code-editor[data-readonly='true'] textarea {
  background: rgba(220, 220, 220, 0.2) !important;
}
.code-block-wrapper .ui-markdown {
  width: 100%;
  font-size: 12px;
  margin-bottom: 10px;
}
.code-block-wrapper .code-cell {
  margin-bottom: 10px;
}
.code-operation-wrapper {
  display: flex;
  align-items: center;
  flex: 2 1;
  justify-content: flex-end;
}
.code-operation-wrapper span.op-button {
  margin-left: 12px;
}
.code-operation-wrapper button.op-button,
.code-operation-wrapper span.op-button {
  display: flex;
  align-items: center;
  width: 36px;
  border: none;
  color: #2f80ed;
}
.code-operation-wrapper button.op-button .img-container,
.code-operation-wrapper span.op-button .img-container {
  display: flex;
  align-items: center;
  height: 15px;
  width: 25px;
}
.code-operation-wrapper button.op-button.op-button-with-text,
.code-operation-wrapper span.op-button.op-button-with-text {
  width: unset;
}
.code-operation-wrapper button.op-button .op-button-inner,
.code-operation-wrapper span.op-button .op-button-inner {
  display: flex;
  align-items: center;
}
.code-operation-wrapper button.op-button[disabled],
.code-operation-wrapper span.op-button[disabled] {
  color: #c5c5c5;
  background: #fff;
}
.code-operation-wrapper button.op-button[disabled] .img-container img,
.code-operation-wrapper span.op-button[disabled] .img-container img {
  opacity: 0.3;
}
.code-operation-wrapper button.op-button[disabled] .op-button-inner,
.code-operation-wrapper span.op-button[disabled] .op-button-inner {
  opacity: 0.3;
}
.code-operation-wrapper button.op-button[disabled] .op-button-inner .img-container img,
.code-operation-wrapper span.op-button[disabled] .op-button-inner .img-container img {
  opacity: 1;
}
.code-operation-wrapper .op-button-spliter {
  height: 14px;
  border-right: 1px solid #cecece;
  padding-left: 12px;
}
.code-operation-wrapper .anticon-loading {
  margin-right: 3px;
}
.code-panel-tip {
  position: relative;
  z-index: 1000;
  max-width: 300px;
  margin-bottom: 16px;
}
.code-panel-tip .rc-notification-notice-content {
  background-color: rgba(0, 0, 0, 0.65);
  padding: 10px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 12px;
  line-height: 18px;
}
.code-panel-tip .rc-notification-notice-content .anticon {
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.code-panel-tip .rc-notification-notice-content .anticon svg {
  font-size: 12px;
}
.code-panel-tip-fade-enter {
  opacity: 0 !important;
}
.code-panel-tip-fade-enter-active {
  opacity: 1 !important;
  transition: 0.1s ease-in;
}
.code-panel-tip-fade-leave {
  opacity: 1 !important;
}
.code-panel-tip-fade-leave-active {
  opacity: 0 !important;
  transition: 0.1s ease-out;
}
.code-panel-tip .stdin-tip,
.code-panel-tip .oj-input-tip {
  display: flex;
  justify-content: center;
  align-items: center;
}
.code-panel-tip .stdin-tip img,
.code-panel-tip .oj-input-tip img {
  margin-right: 8px;
  height: 17px;
  width: 17px;
}
.code-panel-tip .stdin-tip .bold,
.code-panel-tip .oj-input-tip .bold {
  font-weight: 500;
}
.code-panel-tip .timeout-tip {
  display: flex;
  justify-content: center;
  align-items: center;
}
.code-panel-tip .timeout-tip img {
  margin-right: 8px;
}
.code-panel-tip .timeout-tip .bold {
  font-weight: 500;
}
.code-spinner {
  height: 100%;
}
.code-spinner .ant-spin-container {
  height: 100%;
}

.boyu-oj-message-notice {
  padding: 6px 0 !important;
}
.boyu-oj-message-notice .ant-message-notice-content {
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid #ebe7de;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 7px 18px rgba(75, 62, 34, 0.1), 0 2px 5px rgba(75, 62, 34, 0.05) !important;
}
.boyu-oj-message-notice .ant-message-custom-content.ant-message-loading {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 8px 11px 8px 9px;
}
.boyu-oj-message-notice .boyu-oj-message-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  object-fit: contain;
}
.boyu-oj-message-notice .boyu-oj-message-content {
  display: flex;
  flex: 1 1;
  align-items: center;
  min-width: 0;
}
.boyu-oj-message-notice .boyu-oj-message-copy {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}
.boyu-oj-message-notice .boyu-oj-message-title {
  display: inline-flex;
  align-items: center;
  grid-gap: 5px;
  gap: 5px;
  color: #45351a;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
.boyu-oj-message-notice .boyu-oj-message-title-result {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  vertical-align: middle;
}
.boyu-oj-message-notice .boyu-oj-message-subtitle {
  margin-top: 1px;
  color: #8d7848;
  font-size: 11px;
  line-height: 15px;
}
.boyu-oj-message-notice .boyu-oj-message-meter {
  display: flex;
  grid-gap: 4px;
  gap: 4px;
  align-items: center;
  width: 28px;
  margin-left: 8px;
}
.boyu-oj-message-notice .boyu-oj-message-meter i {
  width: 4px;
  border-radius: 99px;
  background: #f3c643;
  animation: boyu-oj-message-wave 1s ease-in-out infinite;
}
.boyu-oj-message-notice .boyu-oj-message-meter i:nth-child(1) {
  height: 7px;
}
.boyu-oj-message-notice .boyu-oj-message-meter i:nth-child(2) {
  height: 13px;
  animation-delay: 0.14s;
}
.boyu-oj-message-notice .boyu-oj-message-meter i:nth-child(3) {
  height: 9px;
  animation-delay: 0.28s;
}
@keyframes boyu-oj-message-wave {
  50% {
    opacity: 0.58;
    transform: translateY(-3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .boyu-oj-message-notice * {
    animation: none !important;
  }
}
.ui-jupyter-mini-loading {
  margin-right: 16px;
  color: rgba(44, 37, 67, 0.5);
  cursor: default;
  display: flex;
  flex: 2 1;
  flex-direction: row-reverse;
  align-items: center;
  position: relative;
}
.ui-jupyter-mini-loading .fade-block {
  position: absolute;
  right: 0;
  opacity: 0;
  transition: all 0.5s;
  display: inline-flex;
  align-items: center;
}
.ui-jupyter-mini-loading .fade-block[data-visible='true'] {
  opacity: 1;
}
.ui-jupyter-mini-loading .anticon,
.ui-jupyter-mini-loading .input-dot {
  margin-right: 8px;
}
.ui-jupyter-mini-loading .input-dot {
  display: inline-block;
  background: #f8d57e;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.jupyter-loading-timeout {
  font-weight: 500;
}
.jupyter-loading-timeout span {
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}
.jupyter-loading-timeout img {
  width: 15px;
  margin-right: 8px;
  margin-bottom: 3px;
}
.jupyter-loading-timeout-overlay {
  -webkit-filter: drop-shadow(0px 0px 2px #c4c4c4);
          filter: drop-shadow(0px 0px 2px #c4c4c4);
}
.jupyter-loading-timeout-overlay .ant-popover-inner {
  border-radius: 8px;
}
.cpp-runner-error-tooltip .ant-tooltip-inner {
  width: 170px;
  padding: 6px 12px;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
}

.ui-code-editor {
  position: relative;
}
.ui-code-editor .decorationsOverviewRuler {
  display: none;
}
.ui-code-editor[data-readonly='true'] .monaco-editor,
.ui-code-editor[data-readonly='true'] .monaco-editor-background,
.ui-code-editor[data-readonly='true'] .monaco-editor .inputarea.ime-input {
  background-color: #f1f1f1;
}
.ui-code-editor[data-readonly='true'] .monaco-editor .margin {
  background-color: #f1f1f1;
}
.ui-code-editor[data-readonly='true'] > div {
  background: #f1f1f1;
}
.ui-code-editor > div {
  font-family: 'Fira code', 'Fira Mono', monospace;
  font-size: 12px;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #d9d9d9;
}
.ui-code-editor .bby-error-lines {
  background: rgba(255, 0, 0, 0.1);
}
.ui-code-editor .todo-highlight {
  color: #fff;
  background: #ffbd2a;
}
.ui-code-editor .blank-code {
  visibility: hidden;
}
.ui-code-editor .blank-input {
  color: #000;
  border: 1px solid;
  padding: 0 1px;
  border-radius: 3px;
}
.ui-code-editor .blank-input:focus {
  outline: none;
}
.ui-code-editor-blank .monaco-editor .cursors-layer > .cursor {
  display: none !important;
}

.readonly-code-guide {
  position: absolute;
  top: 0;
  right: 2%;
  background: transparent !important;
  border: none !important;
  z-index: 100;
}
.readonly-code-guide img {
  width: 200px;
}
.readonly-code-guide span {
  color: #fff;
  cursor: pointer;
  position: absolute;
  top: 35px;
  right: 10px;
}

.block-quiz {
  height: 100%;
}
.block-quiz .ui-quiz {
  display: flex;
  flex-direction: column;
  padding: 0 0 20px 0;
}
.block-quiz .ui-quiz .ui-quiz-question-select .radio-box .option > span:first-of-type {
  margin-top: 2px;
}
.block-quiz .ui-quiz .question-header,
.block-quiz .ui-quiz .ui-quiz-question-title {
  font-size: 16px;
}
.block-quiz .ui-quiz .ant-btn-primary {
  align-self: flex-end;
  font-size: 14px;
  border-radius: 8px;
  margin-right: 20px;
  color: #393f47;
  background-color: #ffc963;
  border-color: #ffc963;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
.block-quiz .ui-quiz .ant-btn-primary:hover {
  color: #393f47;
  background-color: #ffdb8c;
  border-color: #ffdb8c;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-select .radio-box {
  margin-top: unset;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-select .radio-box .option {
  margin: 10px 0;
  padding-top: 3px;
  padding-left: 8px;
  padding-bottom: 3px;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-select .radio-box .option > span {
  padding-top: unset;
  margin-bottom: unset;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-select .ant-radio-wrapper {
  white-space: unset;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-select .ant-radio-wrapper .ant-radio .ant-radio-inner::after {
  background-color: #f8d57e;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-select .ant-radio-wrapper .ant-radio-checked::after {
  border: 1px solid #f8d57e;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-select .ant-radio-wrapper .ant-radio-checked .ant-radio-inner {
  box-shadow: none;
  border-color: #f8d57e;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-select .ant-radio-wrapper .ant-radio-wrapper:hover .ant-radio,
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-select .ant-radio-wrapper .ant-radio:hover .ant-radio-inner,
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-select .ant-radio-wrapper .ant-radio-input:focus + .ant-radio-inner {
  border-color: #f8d57e;
  box-shadow: none;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-select .right-answer {
  background: #fff;
  border: 1px solid #44b158;
  border-radius: 8px;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-select .wrong-answer {
  background: #fff;
  border: 1px solid #f5222d;
  border-radius: 8px;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-select .ui-markdown {
  font-size: 16px;
  margin-bottom: unset;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-select .markdown-body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  font-size: 16px;
  word-wrap: break-word;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-fill .fill-content .fill-input .ant-input {
  border-radius: 8px;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-fill .fill-content .fill-input .ant-input:hover,
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-fill .fill-content .fill-input .ant-input:focus {
  border-color: #f8d57e;
  box-shadow: unset;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-fill .fill-content .fill-input .ant-input.wrong-answer:hover,
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-fill .fill-content .fill-input .ant-input.wrong-answer:focus {
  border-color: #f5222d;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-fill .fill-content .fill-input .right-answer {
  color: #b9661d;
  background: #f6ffed;
  border: 1px solid #f8d57e;
  border-radius: 8px;
  display: inline-block;
  line-height: 28px;
  padding: 0 10px;
  margin-right: 5px;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-fill .ui-markdown {
  font-size: 16px;
  padding-bottom: unset;
}
.block-quiz .ui-quiz .ui-quiz-question .ui-quiz-question-fill .markdown-body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  font-size: 16px;
  word-wrap: break-word;
}
.block-quiz .ui-quiz .ui-quiz-question .ant-collapse {
  background-color: #fef2dc;
  border-radius: 8px;
  border: 1px solid #f8d57e;
}
.block-quiz .ui-quiz .ui-quiz-question .ant-collapse > .ant-collapse-item {
  border-bottom: unset;
}
.block-quiz .ui-quiz .ui-quiz-question .ant-collapse > .ant-collapse-item > .ant-collapse-header {
  padding: 8px 16px 8px 40px;
  line-height: 16px;
  font-size: 16px;
}
.block-quiz .ui-quiz .ui-quiz-question .ant-collapse > .ant-collapse-item > .ant-collapse-header i {
  font-size: 16px;
  color: #b9661d;
}
.block-quiz .ui-quiz .ui-quiz-question .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
  padding: 6px 0 0;
}
.block-quiz .ui-quiz .ui-quiz-question .ant-collapse > .ant-collapse-item > .ant-collapse-content {
  background-color: unset;
  border: unset;
}
.block-quiz .ui-quiz .ui-quiz-question .ant-collapse > .ant-collapse-item > .ant-collapse-content .markdown-body {
  font-size: 14px;
  color: #b9661d;
}

.ui-static-input .samples-select {
  display: flex;
  margin-top: 12px;
}
.ui-static-input .samples-select .anticon-clear {
  width: 16px;
  height: 16px;
  color: #2c2543;
}
.ui-static-input .samples-select .ant-btn-link {
  font-size: 12px;
  line-height: 18px;
  color: #2c2543;
  padding: 0;
  margin-left: 8px;
}
.ui-static-input .blocks {
  display: flex;
  padding-top: 12px;
}
.ui-static-input .blocks .input-block {
  flex: 1 1;
  background: #fafafa;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
}
.ui-static-input .blocks .input-block:first-child {
  margin-right: 12px;
}
.ui-static-input .blocks .input-block .title {
  margin-bottom: 8px;
}
.ui-static-input .blocks .input-block .title img {
  margin-right: 6px;
}
.ui-static-input .blocks .input-block .input-textarea {
  background: none;
  font-size: 14px;
}

.elites-upload-file-quesitons-wrapper {
  margin-bottom: 80px;
}
.upload-file-box {
  width: 100px;
  height: 100px;
  margin-bottom: 6px;
  border-radius: 8px;
  border: 1px solid #ebebeb;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload-file-box:hover {
  background-color: #ebebeb;
}
.upload-file-list-wrapper .upload-file-list {
  display: flex;
  flex-wrap: wrap;
}
.upload-file-list-wrapper .upload-file-list .file-box {
  position: relative;
  width: 100px;
  height: 100px;
  margin-right: 14px;
  margin-bottom: 6px;
  border-radius: 8px;
  border: 1px solid #ebebeb;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.upload-file-list-wrapper .upload-file-list .file-box .delete-icon {
  position: absolute;
  top: 0;
  right: 0;
}
.upload-file-list-wrapper .upload-file-list .file-box .delete-icon:hover {
  cursor: pointer;
  -webkit-filter: grayscale(0.5);
          filter: grayscale(0.5);
}
.upload-file-list-wrapper .upload-file-list .file-box img {
  width: 100%;
}
.upload-file-list-wrapper .upload-file-list .file-box .basic-file-box {
  width: 100%;
  height: 100%;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.upload-file-list-wrapper .upload-file-list .file-box .basic-file-box .file-icon {
  margin-bottom: 10px;
}
.upload-file-list-wrapper .upload-file-list .file-box .basic-file-box .file-name {
  text-align: center;
  width: 100%;
  word-break: break-all;
  font-size: 14px;
  line-height: 18px;
  color: #2c2543;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.elites-upload-file-question {
  padding: 8px 0 21px 0;
  margin-left: 18px;
  margin-bottom: -6px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  color: #24292e;
}
.elites-upload-file-question:first-child {
  padding-top: 0;
}
.elites-upload-file-quesitons-wrapper .ant-btn-primary {
  font-size: 14px;
  border-radius: 8px;
  margin-right: 20px;
  color: #393f47;
  background-color: #ffc963;
  border-color: #ffc963;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
  float: right;
  margin-top: 40px;
}
.elites-upload-file-quesitons-wrapper .ant-btn-primary:hover {
  color: #393f47;
  background-color: #ffdb8c;
  border-color: #ffdb8c;
}
.elites-upload-file-quesitons-wrapper .ant-btn-primary:focus {
  color: #393f47;
  background-color: #ffdb8c;
  border-color: #ffdb8c;
}

.elites-quiz-result-block-wrapper {
  width: 100%;
}
.elites-quiz-result-block-wrapper .quiz-result-wrapper {
  font-size: 14px;
  height: 32px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.elites-quiz-result-block-wrapper .quiz-result-wrapper .quiz-result {
  float: left;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.elites-quiz-result-block-wrapper .quiz-result-wrapper .quiz-result .quiz-result-accuracy {
  color: #f8d57e;
}
.elites-quiz-result-block-wrapper .quiz-result-wrapper .quiz-result .quiz-result-time {
  color: #a3a3a3;
}
.elites-quiz-result-block-wrapper .quiz-result-wrapper .quiz-result div {
  max-height: 32px;
  overflow: hidden;
  margin: 0 6px;
}

.chat-content {
  max-height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 350px;
  padding: 0 8px;
}
.chat-content .chat-box {
  display: flex;
}
.chat-content .chat-box .content {
  background-color: #eeeeee7e;
  max-width: 80%;
  padding: 8px;
  border-radius: 6px;
  position: relative;
  margin-bottom: 8px;
}
.chat-content .chat-box .content::after {
  content: '';
  height: 0;
  width: 0;
  border: 8px solid transparent;
  border-right-color: #eeeeee7e;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
}
.chat-content .ai {
  margin-left: 8px;
}
.chat-content .user {
  flex-direction: row-reverse;
  margin-right: 8px;
}
.chat-content .user .content {
  background-color: #f7cb73;
}
.chat-content .user .content::after {
  right: 0;
  left: auto;
  transform: translate(100%, -50%);
  border-left-color: #f7cb73;
  border-right-color: transparent;
}
.ant-btn.codemate-assistant {
  position: fixed;
  right: 20px;
  bottom: 60px;
  z-index: 99;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  padding: 0;
}
.ant-btn.codemate-send-btn {
  background-color: #f8d57e;
  border: none;
  outline: none;
  color: #000;
}
.ant-btn.codemate-send-btn:hover,
.ant-btn.codemate-send-btn:focus {
  background-color: #f7cb73;
  color: #000;
}

.teacher-tool-box {
  position: fixed;
  right: 24px;
  bottom: 30vh;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
  background: #fff;
  text-align: center;
  z-index: 899;
  border-radius: 8px;
  color: #2c2543;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.teacher-tool-box .title {
  border-radius: 8px 8px 0 0;
  background: #f8d57e;
  padding: 6px 21px;
  cursor: move;
}
.teacher-tool-box .action {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 8px 0;
  cursor: pointer;
}
.teacher-tool-box .action:hover {
  background: #f5f5f5;
}
.teacher-tool-box .action svg {
  margin-right: 8px;
}
.teacher-tool-box .action[data-disable='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.block-desc .finish-button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 30px;
  border-top: 1px solid #c9c9c9;
  padding-top: 15px;
  padding-bottom: 20px;
}
.block-desc .finish-button .finish-button-text {
  color: #50a14f;
  margin-left: 5px;
  margin-right: 10px;
}
.block-desc .desc-mask {
  position: relative;
  max-height: calc(100vh - 220px);
  overflow: hidden;
}
.block-desc .desc-mask .mask-bg img {
  width: 100%;
  height: auto;
}
.block-desc .desc-mask .mask-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.block-desc .desc-mask .mask-content .top-space {
  flex: 1 1;
}
.block-desc .desc-mask .mask-content .bottom-space {
  flex: 2 1;
}
.block-desc .desc-mask .mask-content .button {
  margin-top: 30px;
}


.ui-netless-whiteboard {
  background: white;
  width: 100%;
  height: 100vh;
  position: relative;
}
.ui-netless-whiteboard .container {
  width: 100%;
  height: 100%;
}
.ui-netless-whiteboard .appliance-bar {
  position: absolute;
  left: 16px;
  top: 100px;
  background: #eee;
  border-radius: 8px;
  padding: 8px;
}
.ui-netless-whiteboard .appliance-bar > ul {
  margin: 0;
  padding: 0;
}
.ui-netless-whiteboard .appliance-bar > ul > li {
  list-style: none;
  width: 40px;
  height: 24px;
  background-color: white;
  margin-bottom: 8px;
  text-align: center;
  cursor: pointer;
}
.ui-netless-whiteboard .appliance-bar > ul > li:last-child {
  margin-bottom: 0;
}

.ppt-pager {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 600px;
  display: flex;
}

.step-agora-live-container {
  position: fixed;
  top: 60px;
  left: 0px;
  width: 100vw;
  height: calc(100vh - 110px);
  z-index: 999;
  overflow: hidden;
}
.step-agora-live-container .step-agora-live {
  width: 100vw;
  height: calc(100vh - 120px);
  border: none;
  background: black;
}
.step-agora-live-container .ui-netless-whiteboard {
  height: calc(100vh - 110px);
}
.step-agora-live-container .step-agora-live-switch {
  position: fixed;
  left: 0;
  top: calc(50vh - 40px);
  width: 80px;
  height: 80px;
  z-index: 999;
  background: #fef7dc;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
  border-radius: 0px 8px 8px 0px;
  transform: translateX(-65px);
  transition: transform 0.1s ease;
  cursor: pointer;
}
.step-agora-live-container .step-agora-live-switch img {
  width: 40px;
  height: 60px;
  margin: 10px 20px;
}
.step-agora-live-container .step-agora-live-switch[data-visible='true'] {
  transform: translateX(0);
}
.step-agora-live-container .step-agora-live-switch:hover {
  transform: translateX(0);
}
.step-agora-live-container .step-agora-live-switch::after {
  content: '';
  width: 3px;
  height: 62px;
  background: #f8d57e;
  border-radius: 5px;
  position: absolute;
  right: 6px;
  top: 9px;
}

.step-guide-wrapper[data-step='step-left-pane'] .info-wrapper {
  top: calc(50% - 104px / 2);
  left: calc(100% + 16px);
  width: 267px;
  height: 104px;
}
.step-guide-wrapper[data-step='step-left-pane'] .info-wrapper:before {
  top: calc(104px / 2 - 10px);
  left: -5px;
}
.step-guide-wrapper[data-step='step-right-pane'] .info-wrapper {
  top: calc(50% - 104px / 2);
  right: calc(100% + 16px);
  width: 267px;
  height: 104px;
}
.step-guide-wrapper[data-step='step-right-pane'] .info-wrapper:before {
  top: calc(104px / 2 - 10px);
  right: -5px;
}
.step-guide-wrapper[data-step='step-drag-bar'] .gif {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 120px;
}
.step-guide-wrapper[data-step='step-drag-bar'] .drag-bar-bottom {
  position: absolute;
  bottom: -28px;
  left: -16px;
  height: 12px;
  width: calc(50vw - 12px);
  background: white;
}
.step-guide-wrapper[data-step='step-drag-bar'] .info-wrapper {
  width: 330px;
  height: 120px;
  padding-left: 136px;
  left: calc(12px + 16px);
  bottom: calc(96px + 50px - 24px);
}
.step-guide-wrapper[data-step='step-drag-bar'] .info-wrapper:before {
  display: none;
}
.step-guide-wrapper[data-step='step-input-tab'] .guide-window {
  height: 34px !important;
  width: 86px !important;
  border-radius: 20px;
}
.step-guide-wrapper[data-step='step-input-tab'] .info-wrapper {
  width: 267px;
  height: 128px;
  top: 46px;
}
.step-guide-wrapper[data-step='step-input-tab'] .info-wrapper:before {
  top: -3px;
  left: 38px;
}
.step-guide-wrapper[data-step='dry-run-code'] .guide-window {
  height: 34px !important;
  width: 34px !important;
  border-radius: 100%;
}
.step-guide-wrapper[data-step='dry-run-code'] .gif {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 120px;
}
.step-guide-wrapper[data-step='dry-run-code'] .info-wrapper {
  width: 330px;
  height: 120px;
  padding-left: 136px;
  top: 46px;
  left: calc(-120px - 32px);
}
.step-guide-wrapper[data-step='dry-run-code'] .info-wrapper:before {
  top: -3px;
  left: calc(120px + 32px + 13px);
}
.step-guide-wrapper[data-step='exe-code'] .guide-window {
  border-radius: 20px;
}
.step-guide-wrapper[data-step='exe-code'] .gif {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 120px;
}
.step-guide-wrapper[data-step='exe-code'] .info-wrapper {
  width: 330px;
  height: 120px;
  padding-left: calc(120px + 16px);
  padding-right: 12px;
  top: 46px;
  right: 0;
}
.step-guide-wrapper[data-step='exe-code'] .info-wrapper:before {
  top: -3px;
  right: calc(87px / 2);
}
.step-guide-wrapper[data-step='result-block-footer'] .guide-window {
  border-radius: 4px;
}
.step-guide-wrapper[data-step='result-block-footer'] .info-wrapper {
  width: 267px;
  height: 104px;
  bottom: 58px;
}
.step-guide-wrapper[data-step='result-block-footer'] .info-wrapper:before {
  left: 48px;
  bottom: -3px;
}

#step-right-pane.exam-quiz .code-wrapper {
  box-shadow: none;
}
#step-right-pane.exam-quiz .ui-quiz {
  padding: 70px 26px 0;
}
#step-right-pane.exam-quiz .ui-quiz > h3 {
  display: none;
}
#step-right-pane.exam-quiz .ui-quiz > .ant-btn-primary {
  display: none;
}
#step-right-pane.exam-quiz .ui-quiz,
#step-right-pane.exam-quiz .exam-quiz-header {
  width: 100%;
  margin: auto;
}
#step-right-pane.exam-quiz .exam-quiz-header-wrapper {
  position: fixed;
  right: 16px;
  z-index: 3;
  background: white;
  border-bottom: 2px solid #f6f6fc;
}
#step-right-pane.exam-quiz .elites-block-wrapper {
  padding: 0;
}
#step-right-pane.exam-quiz .block-code {
  margin-top: 0;
  padding-top: 0;
}

#step-right-pane.quiz-no-answer .anticon.wrong,
#step-right-pane.quiz-no-answer .anticon.right {
  display: none;
}
#step-right-pane.quiz-no-answer .option.wrong-answer,
#step-right-pane.quiz-no-answer .option.right-answer {
  border: none;
}
#step-right-pane.quiz-no-answer .ant-input.wrong-answer {
  background: unset;
  border-color: #d9d9d9;
}
#step-right-pane.quiz-no-answer .fill-input pre.right-answer {
  display: none;
}
#step-right-pane.quiz-no-answer .fill-input .right-answer {
  background: unset;
  border-color: #d9d9d9;
  color: black;
}
#step-right-pane.quiz-no-answer .ui-quiz-question-title > .anticon {
  display: none;
}

.step-outer-live-container {
  position: fixed;
  top: 60px;
  left: 0px;
  width: 100vw;
  height: calc(100vh - 110px);
  z-index: 999;
  overflow: hidden;
}
.step-outer-live-container .step-video-live {
  width: 100vw;
  height: calc(100vh);
  border: none;
  margin-top: -85px;
}
.step-outer-live-container .step-video-live-switch {
  position: fixed;
  left: 0;
  top: calc(50vh - 40px);
  width: 80px;
  height: 80px;
  z-index: 999;
  background: #fef7dc;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
  border-radius: 0px 8px 8px 0px;
  transform: translateX(-65px);
  transition: transform 0.1s ease;
  cursor: pointer;
}
.step-outer-live-container .step-video-live-switch img {
  width: 40px;
  height: 60px;
  margin: 10px 20px;
}
.step-outer-live-container .step-video-live-switch[data-visible='true'] {
  transform: translateX(0);
}
.step-outer-live-container .step-video-live-switch:hover {
  transform: translateX(0);
}
.step-outer-live-container .step-video-live-switch::after {
  content: '';
  width: 3px;
  height: 62px;
  background: #f8d57e;
  border-radius: 5px;
  position: absolute;
  right: 6px;
  top: 9px;
}

.lesson-report-modal .ant-modal-content {
  border-radius: 12px;
}
.lesson-report-modal .ant-modal-content .ant-modal-body {
  margin: unset;
  padding: unset;
}
.lesson-report-modal .ant-spin-nested-loading {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: hidden;
}

.page-step {
  background-color: #fff;
  height: 90vh !important;
}
.page-step .step-content-wrapper {
  padding: 30px;
  height: calc(85vh - 60px);
}
.page-step .step-content-wrapper .operation-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-step .step-content-wrapper .lesson-block-wrapper {
  display: flex;
  padding: 25px 0 0;
  height: 100%;
}
.page-step .step-content-wrapper .lesson-block-wrapper .intro-block-wrapper {
  width: 260px;
  background: #f3f4f6;
  flex: 1 0 auto;
}
.page-step .step-content-wrapper .lesson-block-wrapper .intro-block-wrapper .ui-markdown {
  width: 100%;
  font-size: 12px;
  padding: 10px;
}
.page-step .step-content-wrapper .block-title .change-extend {
  margin: 0;
}
.info-modal .qr-wrapper {
  width: 150px;
  margin-top: 20px;
}
.page-elites-step {
  position: relative;
}
.page-elites-step .step-content-wrapper {
  display: flex;
  background: #f9fafb;
  padding: 3px;
  height: calc(100vh - 110px);
  padding-left: 62px;
}
.page-elites-step .step-content-wrapper .operation-wrapper {
  width: 100%;
  position: relative;
}
.page-elites-step .elites-block-wrapper {
  background: #ffffff;
  box-shadow: 0px 4px 22px #eceff2;
  padding: 16px;
  flex-shrink: 0;
}
.page-elites-step .elites-block-wrapper .desc-header {
  border-bottom: 3px solid #f6f6fc;
  margin-bottom: 20px;
  height: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 2;
}
.page-elites-step .elites-block-wrapper .desc-header .tab {
  width: 100%;
  display: flex;
}
.page-elites-step .elites-block-wrapper .desc-header .tab .tab-item {
  padding-bottom: 8px;
  margin-right: 24px;
  min-width: 28px;
  cursor: pointer;
  transition: 0.1s color linear;
}
.page-elites-step .elites-block-wrapper .desc-header .tab .tab-item[data-disabled='true'] {
  color: #999;
  cursor: not-allowed;
}
.page-elites-step .elites-block-wrapper .desc-header .tab .tab-item[data-active='true'] {
  color: #000;
  border-bottom: 3px solid #f8d57e;
}
.page-elites-step .elites-block-wrapper .desc-header .tab .tab-item.tab-item-wide {
  min-width: 56px;
}
.page-elites-step .elites-block-wrapper .desc-answer-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.page-elites-step .lesson-one-panel-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  position: relative;
  overflow: auto;
}
.page-elites-step .lesson-wrapper {
  flex: 1 1;
  height: 100%;
  position: relative;
  padding: 16px 16px 16px 20px;
  overflow: auto;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.page-elites-step .lesson-wrapper .ui-markdown.markdown-body.learn pre {
  -webkit-user-select: text;
      -ms-user-select: text;
          user-select: text;
}
.page-elites-step .lesson-wrapper .ui-markdown.markdown-body.learn div[data-user-select='false'] pre {
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.page-elites-step .lesson-wrapper .block-desc .ui-markdown video {
  margin-bottom: 20px;
}
.page-elites-step .lesson-wrapper .block-desc .output-cell {
  margin-bottom: 20px;
}
.page-elites-step .lesson-wrapper .step-title {
  height: 30px;
  color: #f4b860;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.page-elites-step .lesson-wrapper .text-bar {
  position: absolute;
  color: #c2c6cc;
  left: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 20px;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.page-elites-step .lesson-wrapper .text-bar .switch-to {
  cursor: pointer;
  color: #c2c6cc;
  margin-top: 15px;
}
.page-elites-step .lesson-wrapper .text-bar .switch-to:hover,
.page-elites-step .lesson-wrapper .text-bar .switch-to[data-current='true'] {
  color: #f2994a;
}
.page-elites-step .right-wrapper {
  flex: 1 1;
  height: calc(100vh - 116px);
  display: flex;
  flex-direction: column;
  position: relative;
}
.page-elites-step .right-wrapper .code-wrapper {
  padding-top: 46px;
  flex: auto;
  overflow: hidden;
  position: relative;
  height: 100%;
}
.page-elites-step .right-wrapper .code-wrapper[data-is-quiz='true'] {
  margin-bottom: 0;
  padding-bottom: 0;
}
.page-elites-step .right-wrapper .code-wrapper .code-header {
  background-color: #fff;
  border-bottom: 3px solid #f6f6fc;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  position: absolute;
  top: 0;
  left: 0;
  padding: 16px;
  padding-top: 22px;
  padding-right: 0;
  right: 16px;
  z-index: 2;
}
.page-elites-step .right-wrapper .code-wrapper .code-header .tab {
  display: flex;
  align-items: center;
}
.page-elites-step .right-wrapper .code-wrapper .code-header .tab .tab-item {
  padding-bottom: 8px;
  margin-right: 24px;
  min-width: 28px;
  cursor: pointer;
}
.page-elites-step .right-wrapper .code-wrapper .code-header .tab .tab-item[data-active='true'] {
  border-bottom: 3px solid #f8d57e;
}
.page-elites-step .right-wrapper .code-wrapper .code-header .tab .tab-item.tab-item-wide {
  min-width: 56px;
}
.page-elites-step .right-wrapper .code-wrapper .tab-block {
  height: 0px;
  overflow: hidden;
}
.page-elites-step .right-wrapper .code-wrapper .tab-block[data-visible='true'] {
  height: inherit;
}
.page-elites-step .right-wrapper .code-wrapper .tab-block[data-disabled='true'] {
  height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.page-elites-step .right-wrapper .code-wrapper .tab-block[data-disabled='true'] img {
  margin-bottom: 16px;
}
.page-elites-step .right-wrapper .code-wrapper .tab-block[data-disabled='true'] span {
  color: #838383;
  font-size: 16px;
  line-height: 24px;
}
.page-elites-step .right-wrapper .code-wrapper .block-code {
  height: 100%;
  overflow: auto;
  padding-top: 20px;
}
.page-elites-step .right-wrapper .code-wrapper .ant-tabs-tab {
  padding: 0 16px 10px;
  color: #2c2543;
}
.page-elites-step .right-wrapper .code-wrapper .ant-tabs-tab:hover {
  color: #2c2543;
}
.page-elites-step .right-wrapper .code-wrapper .ant-tabs-ink-bar {
  background-color: #f8d57e;
}
.page-elites-step .right-wrapper .code-wrapper .code-operation-wrapper {
  display: flex;
  padding-bottom: 10px;
  color: #2c2543;
}
.page-elites-step .right-wrapper .code-wrapper .code-operation-wrapper button {
  color: #2c2543;
  box-shadow: none;
}
.page-elites-step .right-wrapper .code-wrapper .code-operation-wrapper .operation {
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 2;
  margin-left: 20px;
  padding: 0;
}
.page-elites-step .right-wrapper .code-wrapper .code-operation-wrapper .operation[disabled] {
  color: #c5c5c5;
}
.page-elites-step .right-wrapper .code-wrapper .code-operation-wrapper img {
  height: 15px;
}
.page-elites-step .right-wrapper .result-wrapper .result-header {
  border-bottom: 2px solid #f6f6fc;
  height: 30px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  color: #000;
}
.page-elites-step .right-wrapper .result-wrapper .result-header .anticon {
  color: #f4b860;
}
.page-elites-step .right-wrapper .result-wrapper .result-content-wrapper {
  padding-top: 20px;
}
.page-elites-step .exam-prepare-wrapper {
  background-color: #fff;
  padding: 60px;
  margin: auto;
  height: calc(100% - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
}
.page-elites-step .exam-prepare-wrapper .exam-prepare-title {
  color: #000000;
  font-size: 24px;
  line-height: 36px;
}
.page-elites-step .exam-prepare-wrapper .exam-prepare-desc {
  padding-top: 25px;
  margin: 30px 0;
  box-shadow: 0px 12px 12px rgba(44, 37, 67, 0.04);
  border-radius: 8px;
  width: 369px;
  word-break: break-all;
  white-space: break-spaces;
  color: #000000;
  font-size: 14px;
  line-height: 18px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.page-elites-step .exam-prepare-wrapper .exam-prepare-desc .exam-col {
  width: 33.33%;
}
.page-elites-step .exam-prepare-wrapper .exam-prepare-desc .table-head {
  color: #667180;
}
.page-elites-step .exam-prepare-wrapper .exam-prepare-desc .table-head,
.page-elites-step .exam-prepare-wrapper .exam-prepare-desc span {
  display: block;
  text-align: center;
  margin-bottom: 20px;
}
.page-elites-step .exam-prepare-wrapper .exam-prepare-notice {
  width: 369px;
  margin-bottom: 60px;
}
.page-elites-step .exam-prepare-wrapper .exam-prepare-notice .notice-title {
  width: 369px;
  line-height: 22px;
  color: #667180;
  text-align: center;
  margin-bottom: 4px;
}
.page-elites-step .exam-prepare-wrapper .exam-prepare-notice .ui-markdown {
  color: #667180;
  font-size: 12px;
  line-height: 22px;
  white-space: nowrap;
  overflow-x: visible;
}
.page-elites-step .exam-prepare-wrapper .exam-prepare-btns {
  display: flex;
  align-items: center;
}
.page-elites-step .exam-prepare-wrapper .ui-elites-button {
  border-radius: 4px;
  width: 92px;
}
.page-elites-step .exam-prepare-wrapper .ui-elites-button.primary {
  border-radius: 4px;
  margin-left: 24px;
}
.page-elites-step .error-explain-feedback {
  border: 1px solid #f2994a;
  background-color: #f2984a20;
  border-radius: 16px;
  margin: 32px 16px;
  padding: 16px;
}

.exam-submitted-wrapper {
  height: calc(100vh - 60px);
  background-image: url(https://staticcdn.boyuai.com/materials/2020/12/16/PWWnxPJh25zc9le2ExlGF.png!png);
  background-size: cover;
  display: flow-root;
}
.exam-submitted-wrapper-box {
  width: 550px;
  height: 500px;
  margin: 54px auto;
  padding: 63px 78px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.exam-submitted-wrapper-box img {
  width: 234px;
}
.exam-submitted-wrapper-title {
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-bottom: 35px;
}
.exam-submitted-wrapper-title span {
  margin-left: 16px;
}

.no-access-wrapper--1ksNG {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 48px;
  background: #fff;
  padding-bottom: 32px;
}
.no-access-img--2Z8CV {
  width: 248px;
  height: 177px;
}
.right-wrapper--NaeBb {
  margin-left: 55px;
}
.right-wrapper--NaeBb .desc--Y6Cid {
  font-size: 16px;
  margin-top: 30px;
  color: #000;
  font-weight: bold;
  margin-bottom: 60px;
}
.right-wrapper--NaeBb .button--3o5Bj {
  border: 1px solid #f8d57e;
  box-sizing: border-box;
  border-radius: 8px;
  color: #000;
  padding: 6px 20px;
  display: inline-block;
  cursor: pointer;
  margin-right: 16px;
}
.right-wrapper--NaeBb .button--3o5Bj.primary--3Fygq {
  background: #f8d57e;
}
.featured-courses-wrapper--1v0CD {
  background: #fbfbfd;
  padding-bottom: 50px;
}
.featured-courses-wrapper--1v0CD .featured-courses-title--1gP8K {
  font-size: 18px;
  font-weight: bold;
  margin: 32px auto 4px auto;
  max-width: 576px;
}
.featured-courses-wrapper--1v0CD .featured-courses--25KOb {
  display: flex;
  justify-content: center;
  width: 100%;
}

.page--b1ObR {
  width: 100%;
  background: white;
  min-height: 100vh;
}
.page--b1ObR .page-content--4he9y {
  display: flex;
  padding: 64px 48px;
  height: calc(100vh - 60px);
}
.avatar--8M1Zv {
  width: 117px;
  height: 117px;
  border-radius: 50%;
}
.avatar--8M1Zv.sm--3KWDi {
  width: 86px;
  height: 86px;
}
.left-wrapper--vLy-9 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.left-wrapper--vLy-9 .ant-menu {
  background-color: transparent;
}
.left-wrapper--vLy-9 .ant-menu-item {
  margin: 0 !important;
  font-weight: bold;
  font-size: 14px;
  line-height: 19px;
  color: #363636;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent !important;
}
.left-wrapper--vLy-9 .ant-menu-item::before {
  position: absolute;
  left: 0;
  content: ' ';
  width: 10px;
  height: 100%;
  background: #fbd686;
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}
.left-wrapper--vLy-9 .ant-menu-item:hover,
.left-wrapper--vLy-9 .ant-menu-item-active {
  color: #363636 !important;
}
.left-wrapper--vLy-9 .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: #fef2dc !important;
  position: relative;
}
.left-wrapper--vLy-9 .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected::before {
  opacity: 1;
}
.left-wrapper--vLy-9 .name--31AEl {
  margin-top: 17px;
  max-width: 241px;
  font-size: 24px;
  line-height: 28px;
  color: #1d1e1e;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.left-wrapper--vLy-9 .divider--1Y5qU {
  width: 220px;
  height: 0px;
  border: 1px solid #8a8a8a;
  margin-top: 17px;
}
.menu-wrapper--22RSs {
  width: 245px;
  flex: 1 1;
  background: #fafafa;
  margin-top: 22px;
  position: relative;
}
.menu-wrapper--22RSs .illustration--B-Lk_ {
  position: absolute;
  bottom: -30px;
  left: 45px;
}
.panel--33azu {
  flex: 1 1;
  background: #ffffff;
  box-shadow: 0px 4px 22px #eceff2;
  border-radius: 14px;
  margin-left: 48px;
  padding: 60px 0;
  overflow: scroll;
}
.panel--33azu .divider--1Y5qU {
  border-top: 1px solid #dbdbdb;
  margin: 24px 0;
}
.panel--33azu .row--2RnWj {
  display: flex;
  align-items: flex-start;
  padding: 0 48px;
  margin-bottom: 48px;
  position: relative;
}
.panel--33azu .row--2RnWj::after {
  position: absolute;
  content: '';
  bottom: -24px;
  left: 16px;
  width: calc(100% - 32px);
  height: 0;
  border: 1px solid #eceff2;
}
.panel--33azu .row--2RnWj:last-child {
  margin-bottom: 0;
}
.panel--33azu .row--2RnWj:last-child::after {
  display: none;
}
.panel--33azu .row--2RnWj.no-border--3tK3k {
  margin-bottom: 32px;
}
.panel--33azu .row--2RnWj.no-border--3tK3k::after {
  display: none;
}
.panel--33azu .row--2RnWj .label--38cWR {
  display: inline-block;
  width: 27%;
  font-size: 14px;
  line-height: 32px;
  color: #000000;
  font-weight: bold;
}
.panel--33azu .row--2RnWj .content--1f-Z1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 73%;
  font-size: 14px;
  line-height: 32px;
  color: #595959;
}
.panel--33azu .row--2RnWj .content--1f-Z1.no-space--2rxzr {
  justify-content: flex-start;
}
.panel--33azu .row--2RnWj .content--1f-Z1.align-center--37Rwb {
  align-items: center;
}
.panel--33azu .row--2RnWj .content--1f-Z1 .content-helper--3sJlb {
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 14px;
  line-height: 30px;
  height: 30px;
}
.panel--33azu .row--2RnWj .content--1f-Z1 .content-helper-status--17dM4 {
  color: #bcbcbc;
}
.panel--33azu .row--2RnWj .content--1f-Z1 .content-helper-text--2Wh2q {
  font-size: 12px;
  line-height: 22px;
  color: #909399;
}
.panel--33azu .row--2RnWj .content--1f-Z1 .form-btn--27uIo {
  width: 296px;
  height: 36px;
}
.panel--33azu .row--2RnWj .content--1f-Z1 .ant-input,
.panel--33azu .row--2RnWj .content--1f-Z1 .ant-input-affix-wrapper {
  width: 296px;
  height: 36px;
}
.panel--33azu .row--2RnWj .content--1f-Z1 .ant-input-affix-wrapper .ant-input {
  width: unset;
  height: unset;
  margin-bottom: unset;
}
.panel--33azu .row--2RnWj .content--1f-Z1 .antd-country-phone-input input {
  width: inherit !important;
}
.panel--33azu .row--2RnWj .content--1f-Z1 .antd-country-phone-input .ant-select-selector {
  border: none;
  position: relative;
  top: 1px;
}
.panel--33azu .row--2RnWj .content--1f-Z1 .ant-input-affix-wrapper:not(.antd-country-phone-input) {
  display: flex;
  justify-content: space-between;
}
.panel--33azu .row--2RnWj .content--1f-Z1 .ant-input-affix-wrapper:not(.antd-country-phone-input)::before {
  display: none;
}
.panel--33azu .row--2RnWj .content--1f-Z1 .ant-form-item {
  margin-bottom: 8px;
}
.panel--33azu .row--2RnWj .content--1f-Z1 .ant-row {
  display: inline-block;
}
.panel--33azu .row--2RnWj .content--1f-Z1 .no-explain--3mrrL .ant-form-item-explain {
  display: none;
}
.panel--33azu .row--2RnWj .content--1f-Z1 .no-explain--3mrrL .ant-form-item-extra {
  margin: 12px 0;
  font-size: 12px;
  line-height: 22px;
  color: #909399;
}
.panel--33azu .row--2RnWj .content--1f-Z1 .no-explain--3mrrL .ant-form-item-extra .error--3UyYe {
  color: #f5222d;
}
.button--1GsKN {
  width: 82px !important;
  height: 29px !important;
  border-radius: 10px !important;
  box-shadow: 0px 4px 15px #eceff2 !important;
  padding: 0 15px !important;
  font-size: 14px !important;
  line-height: 19px !important;
}
.button--1GsKN.ant-btn-primary {
  border-color: #f8d57e !important;
  background: #f8d57e !important;
}
.school-list--3RhhD {
  margin: -8px -20px;
  display: flex;
  flex-wrap: wrap;
}
.school-list--3RhhD .school-item--2v8Tj {
  margin: 8px 20px;
  min-width: 129px;
  max-width: 229px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 76px;
  display: inline-block;
  border: 1px solid #dcdada;
  border-radius: 10px;
}
.school-list--3RhhD .school-item--2v8Tj .school--3efxb {
  width: 229px;
  height: 100%;
  padding: 6px 16px;
  display: flex;
  align-items: center;
}
.school-list--3RhhD .school-item--2v8Tj .school--3efxb img {
  margin-right: 8px;
}
.school-list--3RhhD .school-item--2v8Tj .school--3efxb div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 18px;
  color: #595959;
  margin: 4px 0;
}
.school-list--3RhhD .school-item--2v8Tj .school-adder--hcQ10 {
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  width: 129px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.school-list--3RhhD .school-item--2v8Tj .school-adder--hcQ10 span {
  margin-top: 6px;
  font-size: 14px;
  line-height: 14px;
  color: #8a8a8a;
}
.school-adder-modal--6cY9W .ant-modal-header {
  padding-top: 25px;
  border: none;
  font-size: 14px;
  line-height: 19px;
  text-align: center;
  letter-spacing: 0.1em;
  color: #000000;
}
.school-adder-modal--6cY9W .form--1BHCf {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.school-adder-modal--6cY9W .form--1BHCf .ant-form-item-label {
  width: 68px;
  text-align: left;
}
.school-adder-modal--6cY9W .form--1BHCf .ant-form-item {
  width: 360px;
}
.school-adder-modal--6cY9W .ant-modal-header {
  border-radius: 14px 14px 0 0;
}
.school-adder-modal--6cY9W .ant-modal-content {
  border-radius: 14px;
}

.ui-button--2K8p8.ant-btn-primary--2WL0m {
  background-color: #ffc963;
  border-color: #ffc963;
  color: #2e3135;
}
.ui-button--2K8p8.ant-btn-primary--2WL0m:hover {
  background-color: #ffdb8c;
  border-color: #ffdb8c;
  color: #2e3135;
}
.ui-modal--2SbOs {
  text-align: center;
}
.ui-modal--2SbOs .head-image--8H9k1 {
  padding: 32px 0 32px;
}
.ui-modal--2SbOs .text--1IoaM {
  margin-bottom: 32px;
}
.ui-modal--2SbOs button {
  margin-bottom: 16px;
}
.badge-acquire-msg--emBEB {
  cursor: pointer;
  padding: 24px 24px 16px 20px;
  background: linear-gradient(180deg, #fffefd 50%, #f1dfc3 172.54%);
  box-shadow: 0px 6px 30px rgba(204, 204, 204, 0.441761), inset 0px -3px 8px rgba(255, 255, 255, 0.818482), inset 0px -6px 15px #ffffff;
  border-radius: 12px;
  overflow: visible !important;
}
.badge-acquire-msg--emBEB .ant-notification-notice-close {
  top: 10px;
  right: 10px;
  line-height: 16px;
}
.badge-acquire-msg--emBEB .ant-notification-notice-icon {
  margin-left: 0;
}
.badge-acquire-msg--emBEB .ant-notification-notice-message {
  color: #2d3556;
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  padding-left: calc(24px - 5.6px);
}
.badge-acquire-msg--emBEB .ant-notification-notice-description {
  padding-left: calc(24px - 5.6px);
  color: #818189;
  font-size: 12px;
  line-height: 16px;
}
.badge-acquire-msg--emBEB .ant-notification-notice-description .ant-typography {
  margin-bottom: 0;
}
.badge-acquire-msg--emBEB .badge-img--1790g {
  margin-top: -5.6px;
  margin-left: -5.6px;
  width: 61.6px;
  height: 61.6px;
}
.badge-acquire-msg--emBEB > svg {
  width: 80px !important;
  height: 101px !important;
  position: absolute;
  top: -32px;
  left: 5px;
}

#x-ta-wrapper {
  position: fixed;
  bottom: 62px;
  right: 40px;
  z-index: 9999;
}
#x-ta-wrapper .x-ta-img {
  width: 62px;
  position: absolute;
  z-index: 1011;
  bottom: 0;
  right: 0;
}
#x-ta-wrapper .x-ta-animation-enter {
  animation-name: bounceInUp;
  animation-duration: 1.5s;
}
#x-ta-wrapper .x-ta-animation-enter-done {
  animation: upAndDown 1.5s infinite alternate;
}
#x-ta-wrapper .x-ta-animation-exit {
  animation-name: bounceOutDown;
  animation-duration: 1.5s;
}
#x-ta-wrapper .ant-notification {
  position: absolute !important;
  right: 24px !important;
}
.x-ta-notification {
  width: -webkit-max-content !important;
  width: -moz-max-content !important;
  width: max-content !important;
  padding: 8px 12px 12px !important;
  background: #fcfcfc !important;
  -webkit-backdrop-filter: blur(24px) !important;
          backdrop-filter: blur(24px) !important;
  border-radius: 12px !important;
}
.x-ta-notification .ant-notification-notice-close {
  top: 8px;
  right: 12px;
  line-height: 24px;
}
.x-ta-notification .ant-notification-notice-close .ant-notification-close-x {
  vertical-align: text-top;
}
.x-ta-notification .ant-notification-notice-message {
  color: #eba73b;
  font-weight: 600;
  font-size: 13px;
  padding-right: 16px !important;
}
.x-ta-notification .ant-notification-notice-description {
  font-size: 12px;
  line-height: 16px;
}
@keyframes upAndDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}
@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  75% {
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }
  90% {
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}

.ui-button--LOE2S.ant-btn-primary--IzrGy {
  background-color: #ffc963;
  border-color: #ffc963;
  color: #2e3135;
}
.ui-button--LOE2S.ant-btn-primary--IzrGy:hover {
  background-color: #ffdb8c;
  border-color: #ffdb8c;
  color: #2e3135;
}
.ui-modal--UoIIo {
  text-align: center;
}
.ui-modal--UoIIo .head-image--q5M1- {
  padding: 32px 0 32px;
}
.ui-modal--UoIIo .text--o4RnJ {
  margin-bottom: 32px;
}
.ui-modal--UoIIo button {
  margin-bottom: 16px;
}
@font-face {
  font-family: 'yuwei';
  src: url(https://staticcdn.boyuai.com/materials/2021/03/19/yuwei.woff) format('woff'), url(https://staticcdn.boyuai.com/materials/2021/03/19/yuwei.ttf) format('truetype');
}
.page--xGZjn {
  display: flex;
  height: calc(100vh - 60px);
  padding-top: 41px;
  justify-content: center;
}
.title-wrapper--1cUkC {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 16px;
}
.title-wrapper--1cUkC .title--3fGHz {
  padding-left: 32px;
  font-size: 28px;
  line-height: 38px;
  color: #000000;
}
.filter-wrapper--lUTcp {
  padding-right: 32px;
}
.filter-wrapper--lUTcp .filter--2YRZz {
  font-size: 18px;
  line-height: 25px;
  color: #bfbfbf;
  cursor: pointer;
}
.filter-wrapper--lUTcp .filter--2YRZz.active--3LOww {
  color: #000000;
}
.achieved--2yK04 {
  display: inline-block;
  height: 100%;
  min-width: 300px;
}
@media (min-width: 1440px) {
  .achieved--2yK04 {
    min-width: 700px;
  }
}
.divider--1RxlA {
  height: 592px;
  max-height: calc(100vh - 170px);
  margin-top: 70px;
}
.not-achieved--QTDC6 {
  display: inline-block;
}
.badge--mTUXr {
  width: 144px;
  height: 184px;
  padding: 32px 12px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 12px;
  background: linear-gradient(179.5deg, #fffefd 61.64%, #afafaf 188.74%);
  box-shadow: 0px 6px 30px rgba(204, 204, 204, 0.441761), inset 0px -3px 8px rgba(255, 255, 255, 0.818482), inset 0px -6px 15px #ffffff;
  cursor: pointer;
}
.badge--mTUXr img {
  width: 61.6px;
  height: 61.6px;
  margin-top: -5.6px;
  margin-bottom: calc(10px - 5.6px);
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}
.badge--mTUXr .title--3fGHz {
  font-weight: 500;
  font-size: 14px;
  line-height: 30px;
  color: #878787;
  margin-bottom: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.badge--mTUXr .title--3fGHz .acquire-count--147hf {
  font-family: yuwei;
  font-size: 35px;
  -webkit-filter: drop-shadow(2px 2px 4px rgba(191, 153, 18, 0.25));
          filter: drop-shadow(2px 2px 4px rgba(191, 153, 18, 0.25));
  background: linear-gradient(180deg, #f57600 0%, rgba(243, 93, 93, 0.97) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin-left: 2px;
}
.badge--mTUXr .desc--13paO {
  font-size: 10px;
  line-height: 16px;
  color: #b4b4b4;
  margin-bottom: 0;
  text-align: center;
}
.badge--mTUXr.active--3LOww {
  background: linear-gradient(180.92deg, #fffefd 63.04%, #f1dfc3 165.31%);
}
.badge--mTUXr.active--3LOww img {
  -webkit-filter: unset;
          filter: unset;
}
.badge--mTUXr.active--3LOww .title--3fGHz {
  color: #2d3556;
}
.badge--mTUXr.active--3LOww .desc--13paO {
  color: #818189;
}
@media (min-width: 1920px) {
  .badge--mTUXr {
    width: 216px;
    height: 296px;
    padding: 62px 12px 43px;
  }
  .badge--mTUXr img {
    width: 72.6px;
    height: 72.6px;
    margin-top: -6.6px;
    margin-bottom: calc(28px - 6.6px);
  }
  .badge--mTUXr .title--3fGHz {
    font-size: 18px;
    line-height: 50px;
    margin-bottom: 8px;
  }
  .badge--mTUXr .title--3fGHz .acquire-count--147hf {
    font-size: 55px;
  }
  .badge--mTUXr .desc--13paO {
    font-size: 12px;
  }
}
.scroll-area--bZTvY {
  padding-top: 16px;
  padding-right: 16px;
  padding-left: 16px;
  padding-bottom: 16px;
  height: calc(100vh - 156px);
  overflow-y: scroll;
  display: grid;
  grid-row-gap: 20px;
  row-gap: 20px;
  grid-column-gap: 18px;
  -webkit-column-gap: 18px;
          column-gap: 18px;
  grid-template-columns: auto auto;
  grid-template-rows: 184px 184px;
}
.scroll-area--bZTvY.active--3LOww {
  grid-template-columns: 144px 144px;
}
.scroll-area--bZTvY:last-child {
  margin-bottom: 16px;
}
@media (min-width: 1440px) {
  .scroll-area--bZTvY {
    padding-left: 32px;
    padding-right: 32px;
  }
  .scroll-area--bZTvY.active--3LOww {
    grid-template-columns: 144px 144px 144px 144px;
  }
}
@media (min-width: 1920px) {
  .scroll-area--bZTvY {
    grid-template-rows: 296px 296px;
  }
  .scroll-area--bZTvY.active--3LOww {
    grid-template-columns: 216px 216px 216px 216px;
  }
}
.timeline--do9Q2 {
  width: 300px;
  padding-top: 16px;
  padding-left: 16px;
  height: calc(100vh - 156px);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1441px) {
  .timeline--do9Q2 {
    width: 360px;
    padding-top: 16px;
    padding-left: 32px;
  }
}
.timeline-year--28k8t {
  color: #ffb800;
  padding-left: 14px;
  font-size: 22px;
  line-height: 22px;
  font-weight: bold;
  margin-bottom: 14px;
}
.timeline-placeholder--3C5Nl {
  border-left: 1px solid #ffb800;
  width: 270px;
  flex-grow: 0;
  height: inherit;
}
.timeline-item--7aYsN {
  width: 270px;
  border-left: 1px solid #ffb800;
}
@media (min-width: 1441px) {
  .timeline-item--7aYsN {
    width: 290px;
  }
}
.timeline-item-title--2vXwu {
  color: #ffb800;
  padding-left: 14px;
  position: relative;
  font-size: 18px;
  top: -10px;
}
.timeline-item-title--2vXwu span {
  margin-left: 8px;
  font-size: 10px;
  color: #8a8a8a;
}
.timeline-item-title--2vXwu::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 9px;
  border: 1px solid #ffb800;
  position: absolute;
  background: #fff;
  left: -5px;
  top: 9px;
}
.timeline-item-body--1aMK5 {
  margin-top: -10px;
  padding-bottom: 16px;
  margin-left: 18px;
}
.timeline-item-badge--k7yrD {
  display: flex;
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  height: 77px;
  align-items: center;
  margin: 8px;
}
.timeline-item-badge--k7yrD img {
  width: 60px;
  height: 60px;
}
.timeline-item-badge--k7yrD div {
  display: flex;
  flex-direction: column;
}
.timeline-item-badge--k7yrD h4 {
  font-size: 16px;
  font-weight: 500;
  color: #2d3556;
  margin: 0;
}
.timeline-item-badge--k7yrD span {
  font-size: 12px;
  color: #818189;
  margin-right: 5px;
}
.badge-modal--2AhKe {
  padding-bottom: 0;
  width: 662px !important;
}
.badge-modal--2AhKe .ant-modal-content {
  border-radius: 12px;
}
.badge-modal--2AhKe .ant-modal-content .ant-modal-body {
  position: relative;
  padding: 44px 16px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #fffefd 50%, #f1dfc3 172.54%);
  box-shadow: 0px 6px 30px rgba(204, 204, 204, 0.441761), inset 0px -3px 8px rgba(255, 255, 255, 0.818482), inset 0px -6px 15px #ffffff;
}
.badge-modal--2AhKe .ant-modal-close-x {
  line-height: 48px;
  width: 48px;
  height: 48px;
}
.badge-modal--2AhKe .badge-detail--265HQ {
  display: flex;
  justify-content: flex-start;
  margin-left: calc(81px - 16px - 10.8px);
}
.badge-modal--2AhKe .badge-detail--265HQ .badge-detail-left--2bwtq {
  margin-right: calc(53px - 10.8px);
}
.badge-modal--2AhKe .badge-detail--265HQ .img--rqg38 {
  width: 118.8px;
  height: 118.8px;
  margin-top: -10.8px;
  margin-bottom: calc(16px - 10.8px);
}
.badge-modal--2AhKe .badge-detail--265HQ .title--3fGHz {
  text-align: center;
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  color: #2d3556;
  margin-bottom: 16px;
}
.badge-modal--2AhKe .badge-detail--265HQ .desc--13paO {
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  color: #818189;
  margin-bottom: 0;
}
.badge-modal--2AhKe .badge-detail--265HQ .rule-title--22xTC {
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  color: #2d3556;
}
.badge-modal--2AhKe .badge-detail--265HQ .rule-desc--1WYLu {
  margin-top: 11px;
  font-size: 14px;
  line-height: 22px;
  color: #818189;
  white-space: pre-wrap;
  margin-right: 30px;
}
.badge-modal--2AhKe .buttons--IF9a1 {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  bottom: 44px;
  right: 16px;
}
.badge-modal--2AhKe .buttons--IF9a1 button {
  margin-left: 27px;
  width: 113px;
  height: 35px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 22px;
}
.badge-modal--2AhKe .buttons--IF9a1 .default {
  background-color: #e4e4e4;
  border-color: #e4e4e4;
  color: #000000;
  border: none;
}
.no-achievements--1JeMO,
.all-achieved--1PeY5 {
  margin-top: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.no-achievements--1JeMO .tip--YWWAJ,
.all-achieved--1PeY5 .tip--YWWAJ {
  color: #000000;
  font-size: 18px;
  line-height: 25px;
  text-align: center;
}
@media (min-width: 1920px) {
  .no-achievements--1JeMO,
  .all-achieved--1PeY5 {
    margin-top: 180px;
  }
}
.no-achievements--1JeMO img {
  width: 248px;
  height: 248px;
  margin-bottom: 56px;
}
.all-achieved--1PeY5 img {
  width: 305px;
  height: 219px;
  margin-bottom: 56px;
}
.new-msg-modal--P_rGL .ant-modal-content {
  background-color: transparent;
  box-shadow: none;
}
.new-msg-modal--P_rGL .ant-modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.new-msg-modal--P_rGL .ant-modal-body .header--1l5DD {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 276px;
  height: 53px;
}
@media (min-width: 1920px) {
  .new-msg-modal--P_rGL .ant-modal-body .header--1l5DD {
    width: 404px;
    height: 86px;
  }
}
@keyframes spin--2aOkp {
  100% {
    transform: rotate(360deg);
  }
}
.new-msg-modal--P_rGL .ant-modal-body .bg--1CHSg {
  position: absolute;
  top: -64px;
  animation: spin--2aOkp 99s linear infinite;
}
@media (min-width: 1920px) {
  .new-msg-modal--P_rGL .ant-modal-body .bg--1CHSg {
    width: 704px;
    height: 704px;
  }
}
.new-msg-modal--P_rGL .ant-modal-body .bg--1CHSg ~ svg {
  position: absolute;
  margin-top: 110px;
}
@media (min-width: 1920px) {
  .new-msg-modal--P_rGL .ant-modal-body .bg--1CHSg ~ svg {
    margin-top: 170px;
  }
}
@keyframes bounceIn--3xR_m {
  0% {
    opacity: 0;
    transform: scale(1.2) translate3d(0, 0, 0);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.4);
  }
  80% {
    opacity: 1;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1.5) translate3d(0, 0, 0);
  }
}
.new-msg-modal--P_rGL .badge--mTUXr {
  margin-top: 110px;
  animation-duration: 500ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-name: bounceIn--3xR_m;
}
@media (min-width: 1920px) {
  .new-msg-modal--P_rGL .badge--mTUXr {
    margin-top: 170px;
  }
}
.new-msg-modal--P_rGL .badge--mTUXr .primary {
  position: absolute;
  bottom: -37px;
  width: 96px;
  height: 32px;
  transform: scale(0.66);
  transform-origin: bottom;
}

.badge-level {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 56px;
}
.badge-detail-arrow {
  width: 20px;
  height: 30px;
  content: '';
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
          clip-path: polygon(0 0, 100% 50%, 0 100%);
  background-image: linear-gradient(270deg, #ffb864 1.48%, #ffec86 98.48%);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), inset -3px 0px 4px rgba(255, 255, 255, 0.4);
  cursor: pointer;
}
.badge-detail-arrow[data-disable='true'] {
  background: #818189;
  cursor: default;
}
.badge-level > .ant-carousel .slick-next,
.badge-level > .ant-carousel .slick-next:focus,
.badge-level > .ant-carousel .slick-next:hover,
.badge-level > .ant-carousel .slick-prev,
.badge-level > .ant-carousel .slick-prev:hover,
.badge-level > .ant-carousel .slick-prev:focus {
  width: 20px;
  height: 30px;
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
          clip-path: polygon(0 0, 100% 50%, 0 100%);
  background-image: linear-gradient(270deg, #ffb864 1.48%, #ffec86 98.48%);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), inset -3px 0px 4px rgba(255, 255, 255, 0.4);
}
.badge-level > .ant-carousel .slick-prev {
  transform: rotate(-180deg);
}
.badge-level > .ant-carousel .slick-disabled {
  visibility: hidden;
}
.badge-detail-arrow.pre {
  transform: rotate(-180deg);
}
.badge-level-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.badge-level-item img {
  width: 65px;
  height: 65px;
}
.badge-level-item.lock .badge-level-item-img {
  position: relative;
  -webkit-filter: grayscale(5);
          filter: grayscale(5);
  display: block;
}
.badge-level-item.lock .badge-level-item-img:after {
  content: url('https://staticcdn.boyuai.com/materials/2021/03/29/9iYhY98Jw7dr1aUujNTUE.png!png');
  width: 16px;
  height: 16px;
  position: absolute;
  right: 3px;
  top: 2px;
  display: block;
}
.badge-level-item .badge-level-item-name {
  color: #2d3556;
  font-weight: 500;
  margin: 8px 0px 12px;
}
.badge-level-item .badge-level-item-number {
  color: #f4b860;
  font-weight: 500;
}
.badge-level-item .badge-level-item-desc,
.badge-level-item .badge-level-item-acquire-date {
  font-size: 12px;
  color: #818189;
  margin-bottom: 8px;
  max-width: 180px;
}
.badge-level-item .badge-level-item-acquire-date {
  display: flex;
  align-items: center;
}
.badge-level-item .badge-level-item-acquire-date img {
  width: 12px;
  height: 12px;
  display: inline-block !important;
  margin-right: 4px;
}
.badge-level-code-bar {
  margin-bottom: 44px;
}
.badge-level-code-bar span {
  position: absolute;
  right: 18px;
  color: #818189;
  font-size: 14px;
  bottom: 24px;
}
.badge-level-code-bar .badge-level-code-bar-bg {
  position: absolute;
  width: 662px;
  left: 0;
  bottom: 0;
  background: #e7e7e7;
  height: 14px;
}
.badge-level-code-bar .badge-level-code-bar-active {
  background: #f4b860;
  height: 14px;
}

.teacher-messages-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #f7f8fa;
}
.teacher-messages-page .title-wrapper {
  position: relative;
  z-index: 2;
  flex: none;
}
.teacher-messages-loading {
  display: flex;
  flex: 1 1;
  align-items: center;
  justify-content: center;
}
.teacher-messages-scroll {
  flex: 1 1;
  width: 100%;
  overflow-y: auto;
}
.teacher-messages-content {
  width: 900px;
  margin: 0 auto;
  padding: 42px 0 64px;
}
.teacher-messages-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 22px;
}
.teacher-messages-heading h1 {
  margin: 0;
  color: #2c2543;
  font-size: 26px;
  line-height: 36px;
}
.teacher-messages-heading p {
  margin: 6px 0 0;
  color: #7c8390;
  font-size: 14px;
}
.teacher-messages-count {
  flex: none;
  color: #7c8390;
  font-size: 13px;
}
.teacher-messages-empty {
  display: flex;
  min-height: 280px;
  padding: 36px 24px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #edf0f3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(36, 45, 61, 0.05);
  text-align: center;
}
.teacher-messages-empty h2 {
  margin: 14px 0 4px;
  color: #454b57;
  font-size: 16px;
  font-weight: 600;
}
.teacher-messages-empty p {
  margin: 0;
  color: #8a919d;
  font-size: 13px;
}
.teacher-messages-empty-icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #fff4d6;
  color: #d9941f;
  font-size: 26px;
}
.teacher-messages-list {
  display: flex;
  flex-direction: column;
  grid-gap: 12px;
  gap: 12px;
}
.teacher-message-card {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #edf0f3;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(44, 37, 67, 0.04);
}
.teacher-message-card[data-unread='true'] {
  border-color: #f8d57e;
  box-shadow: 0 8px 20px rgba(206, 155, 55, 0.1);
}
.teacher-message-card-header,
.teacher-message-source,
.teacher-message-context,
.teacher-message-actions {
  display: flex;
  align-items: center;
}
.teacher-message-card-header {
  justify-content: space-between;
  grid-gap: 16px;
  gap: 16px;
}
.teacher-message-source {
  min-width: 0;
  grid-gap: 10px;
  gap: 10px;
}
.teacher-message-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #d9941f;
  background: #fff4d6;
  border-radius: 8px;
}
.teacher-message-context {
  min-width: 0;
  grid-gap: 6px;
  gap: 6px;
  color: #454b57;
  font-size: 13px;
  font-weight: 500;
}
.teacher-message-context .teacher-message-course-link,
.teacher-message-context .teacher-message-lesson-link,
.teacher-message-context span:not(.teacher-message-separator) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teacher-message-course-link,
.teacher-message-lesson-link {
  color: #454b57;
}
.teacher-message-course-link:hover,
.teacher-message-lesson-link:hover,
.teacher-message-course-link:focus,
.teacher-message-lesson-link:focus {
  color: #d9941f;
}
.teacher-message-separator,
.teacher-message-source time {
  color: #9aa1ad;
}
.teacher-message-source time {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}
.teacher-message-unread {
  flex: none;
  padding: 2px 7px;
  color: #bd5d48;
  font-size: 11px;
  line-height: 18px;
  background: #fff1ed;
  border-radius: 999px;
}
.teacher-message-body {
  margin: 14px 0 0 40px;
  color: #343a46;
  font-size: 14px;
  line-height: 1.7;
}
.teacher-message-body img {
  max-width: 100%;
}
.teacher-message-body pre {
  overflow: auto;
}
.teacher-message-actions {
  justify-content: flex-end;
  margin-top: 16px;
}
.teacher-message-actions .ant-btn-primary {
  height: 28px;
  padding: 0 12px;
  color: #5c3a00;
  background: #f8d57e;
  border-color: #f8d57e;
  border-radius: 6px;
}
.teacher-message-actions .ant-btn-primary:hover,
.teacher-message-actions .ant-btn-primary:focus {
  color: #5c3a00;
  background: #f2c85e;
  border-color: #f2c85e;
}
@media (max-width: 640px) {
  .teacher-messages-content {
    width: calc(100% - 32px);
    padding-top: 28px;
  }
  .teacher-messages-heading {
    align-items: flex-start;
    flex-direction: column;
    grid-gap: 6px;
    gap: 6px;
  }
  .teacher-message-card {
    padding: 16px;
  }
  .teacher-message-body {
    margin-left: 0;
  }
}

.page-agora-live {
  width: 100%;
  height: 100vh;
}
.page-agora-live .preview-area .camera-preview {
  margin: 100px auto 0;
  width: 450px;
  height: 250px;
  background: #dee0e3;
  border-radius: 8px;
  overflow: hidden;
}
.page-agora-live .preview-area .control-bar {
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-agora-live .preview-area .control-bar .video-switch {
  display: flex;
  align-items: center;
}
.page-agora-live .preview-area .control-bar .video-switch > div {
  margin-left: 8px;
}
.page-agora-live .preview-area .control-bar .audio-switch {
  display: flex;
  align-items: center;
  margin-left: 16px;
  margin-right: 16px;
}
.page-agora-live .preview-area .control-bar .audio-switch > div {
  margin-left: 8px;
}
.page-agora-live .main-area {
  width: 100%;
  height: 100%;
  background: #fff;
}
.page-agora-live .main-area .camera-main {
  height: calc(100vh - 60px);
  background: #dee0e3;
}
.page-agora-live .main-area .ui-netless-whiteboard {
  height: calc(100vh - 60px);
}
.page-agora-live .main-area .control-bar {
  width: 100%;
  height: 60px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 8px;
}
.page-agora-live .main-area .control-bar .video-switch {
  margin-right: 16px;
}
.page-agora-live .main-area .control-bar .audio-switch {
  margin-right: 16px;
}
.page-agora-live .main-area .control-bar .whiteboard {
  margin-left: 16px;
}
.page-agora-live .main-area .control-bar .space {
  flex: 1 1;
}
.agora-live-screen-share-preview .ant-tabs {
  width: 100%;
}
.agora-live-screen-share-preview .ant-tabs .tablist {
  margin: 0 auto;
}
.agora-live-screen-share-preview .displays {
  display: flex;
  flex-wrap: wrap;
}
.agora-live-screen-share-preview .displays .display-preview {
  border: 2px solid white;
  cursor: pointer;
  margin: 10px;
}
.agora-live-screen-share-preview .displays .display-preview img {
  width: 300px;
  height: auto;
}
.agora-live-screen-share-preview .displays .display-preview:hover {
  border: 2px solid red;
}
.agora-live-screen-share-preview .windows {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
.agora-live-screen-share-preview .windows .window-preview {
  cursor: pointer;
  margin: 10px;
}
.agora-live-screen-share-preview .windows .window-preview img {
  border: 2px solid white;
  width: 300px;
  height: auto;
}
.agora-live-screen-share-preview .windows .window-preview:hover img {
  border: 2px solid red;
}
.agora-live-screen-share-preview .windows .window-preview .window-title {
  margin-top: 8px;
  text-align: center;
}


.card-wrapper {
  position: fixed;
  padding: 40px 0;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  min-width: 310px;
  max-width: 400px;
  background-color: #fff;
  box-shadow: 0px 4px 22px rgba(104, 85, 56, 0.1);
  text-align: center;
  box-sizing: border-box;
  border-radius: 5px;
}
.card-wrapper h1 {
  font-size: 20px;
  margin-bottom: 30px;
}
.card-wrapper p,
.card-wrapper a {
  display: block;
  font-size: 16px;
  margin-bottom: 8px;
}
.card-wrapper img {
  width: 150px;
  margin-top: 20px;
}

.ide-wrapper {
  background-color: #f5f5f5;
  height: 100vh;
  padding-top: 63px;
  margin-top: -63px;
  width: 100%;
}
.ide-wrapper .title-wrapper {
  position: fixed;
  z-index: 999;
  width: 100%;
}
.ide-wrapper .editor {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background-color: #fff;
}
.ide-wrapper .code-block {
  width: 100%;
  background-color: #fff;
  padding: 16px;
  box-sizing: border-box;
}
.ide-wrapper .code-block .code-operation-bar {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-family: 'AlibabaPuHuiTi-2';
  border-bottom: 3px solid #f6f6fc;
  margin-bottom: 10px;
}
.ide-wrapper .code-block .tab-name {
  display: flex;
  align-items: baseline;
}
.ide-wrapper .code-block .tab-name .tip {
  color: #999;
  font-size: 12px;
  margin-left: 12px;
}
.ide-wrapper .code-block .tab-name .title {
  position: relative;
  line-height: 32px;
}
.ide-wrapper .code-block .tab-name .title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 3px;
  background-color: #f8d57e;
}
.ide-wrapper .move-bar {
  width: 100%;
  height: 8px;
  cursor: row-resize;
  background-color: #f9fafb;
  opacity: 0.2;
}
.ide-wrapper .move-bar:hover {
  background-color: #a9a9a9;
}
.ide-wrapper .result-block {
  background-color: #fff;
  display: flex;
}
.ide-wrapper .result-block .split {
  width: 8px;
  background-color: #f9fafb;
}
.ide-wrapper .result-block .input-block,
.ide-wrapper .result-block .output-block {
  width: calc(50% - 4px);
}
.ide-wrapper .result-block .input-block .result-block-tab-name,
.ide-wrapper .result-block .output-block .result-block-tab-name {
  padding: 6px 16px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 26px;
}
.ide-wrapper .result-block .input-block .editor-wrapper,
.ide-wrapper .result-block .output-block .editor-wrapper {
  padding: 0 16px 16px;
}
.ide-wrapper .result-block .input-block .editor-wrapper[data-readonly='true'] .editor > div,
.ide-wrapper .result-block .output-block .editor-wrapper[data-readonly='true'] .editor > div,
.ide-wrapper .result-block .input-block .editor-wrapper[data-readonly='true'] .monaco-editor-background,
.ide-wrapper .result-block .output-block .editor-wrapper[data-readonly='true'] .monaco-editor-background,
.ide-wrapper .result-block .input-block .editor-wrapper[data-readonly='true'] .margin-view-overlays,
.ide-wrapper .result-block .output-block .editor-wrapper[data-readonly='true'] .margin-view-overlays {
  background: #f1f1f1;
}
.ide-wrapper .decorationsOverviewRuler {
  display: none;
}
.ide-wrapper .opertions {
  display: flex;
}
.ide-wrapper .opertions button.op-button,
.ide-wrapper .opertions span.op-button {
  margin-left: 6px;
  justify-content: center;
  box-shadow: none;
  display: flex;
  align-items: center;
  width: 36px;
  border: none;
  color: #2f80ed;
}
.ide-wrapper .opertions button.op-button button,
.ide-wrapper .opertions span.op-button button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
}
.ide-wrapper .opertions button.op-button .img-container,
.ide-wrapper .opertions span.op-button .img-container {
  display: flex;
  align-items: center;
  height: 15px;
  width: 25px;
}
.ide-wrapper .opertions button.op-button.op-button-with-text,
.ide-wrapper .opertions span.op-button.op-button-with-text {
  width: unset;
}
.ide-wrapper .opertions button.op-button .op-button-inner,
.ide-wrapper .opertions span.op-button .op-button-inner {
  display: flex;
  align-items: center;
}
.ide-wrapper .opertions button.op-button[disabled],
.ide-wrapper .opertions span.op-button[disabled] {
  width: 32px;
  color: #c5c5c5;
  background: #fff;
}
.ide-wrapper .opertions button.op-button[disabled] .img-container img,
.ide-wrapper .opertions span.op-button[disabled] .img-container img {
  opacity: 0.3;
}
.ide-wrapper .opertions button.op-button[disabled] .op-button-inner,
.ide-wrapper .opertions span.op-button[disabled] .op-button-inner {
  opacity: 0.3;
}
.ide-wrapper .opertions button.op-button[disabled] .op-button-inner .img-container img,
.ide-wrapper .opertions span.op-button[disabled] .op-button-inner .img-container img {
  opacity: 1;
}
.ide-wrapper .split-pane {
  padding-top: 63px;
}
.ide-wrapper .Resizer {
  background: #f5f5f5;
  height: 8px;
  z-index: 1;
  box-sizing: border-box;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}
.ide-wrapper .Resizer:hover {
  transition: all 0.5s ease;
}
.ide-wrapper .Resizer.horizontal {
  cursor: row-resize;
  width: 100%;
}
.ide-wrapper .Resizer.horizontal:hover {
  background: #dddddd;
}

.ai-exam-page.page-wrapper {
  width: 100vw;
  height: 100%;
}
.ai-exam-page.page-wrapper .exam-intro-wrapper .exam-intro-card {
  min-width: 650px;
  width: 80vw;
  margin: 80px auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
}
.ai-exam-detail-page .iframe {
  width: 98%;
  height: calc(100vh - 70px);
}
.ai-exam-list-page .ai-exam-list-wrapper {
  width: 680px;
  box-sizing: border-box;
  margin: 120px auto;
  background-color: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.ai-exam-list-page .ai-exam-list-wrapper .ai-exam-list-question-list {
  margin: 0 auto;
}
.ai-exam-list-page .ai-exam-list-wrapper .op {
  padding-top: 12px;
  display: flex;
  justify-content: center;
}
.ai-exam-list-page .ai-exam-list-wrapper .op button {
  width: 120px;
}

.custom-menu .ant-menu-item-selected {
  background-color: #fef2dc !important;
  color: #f4b860 !important;
}
.custom-menu .ant-menu-item-selected::after {
  border-right: 3px solid #f4b860 !important;
}
.ant-layout-sider-children {
  overflow-x: hidden !important;
}

.app {
  min-width: 100vw;
  min-height: 100vh;
  background-color: #fff6ed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.app .page-wrapper {
  box-shadow: 0px 0px 22px rgba(252, 112, 79, 0.3);
  height: 85vh;
  width: 95vw;
}
.app .app-header {
  color: blue;
}
.app .jupyer-kernel-selector > div {
  margin: 10px 0;
  display: flex;
  align-items: center;
}
.app-mobile-tip {
  height: 100vh;
  width: 100vw;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.app-mobile-tip img {
  width: 300px;
  margin-top: -100px;
}
.app-mobile-tip .mobile-tip-link {
  color: #32aaf7;
  font-size: 18px;
}
.app-portrait-tip {
  background: linear-gradient(30deg, #000000 0%, #5e5e5e 100%);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.prism-player .prism-thumbnail {
  width: auto;
  height: auto;
}

.ui-button.ant-btn-primary {
  background-color: #ffc963;
  border-color: #ffc963;
  color: #2e3135;
}
.ui-button.ant-btn-primary:hover {
  background-color: #ffdb8c;
  border-color: #ffdb8c;
  color: #2e3135;
}
.ui-modal {
  text-align: center;
}
.ui-modal .head-image {
  padding: 32px 0 32px;
}
.ui-modal .text {
  margin-bottom: 32px;
}
.ui-modal button {
  margin-bottom: 16px;
}

.ui-status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #262626;
  color: #fff;
  display: flex;
  font-size: 12px;
  padding: 2px 0;
}
.ui-status-bar .status-bar-item {
  padding: 0 5px;
}
.ui-status-bar .status-bar-item.clickable {
  cursor: pointer;
}
.ui-status-bar .status-bar-item.clickable:hover {
  background: #444;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}


/*# sourceMappingURL=main.2a785953.chunk.css.map*/