#loginModal{
  position: absolute;
  margin-left: 20%;
  margin-left: 20%;
  z-index: 999;
}
.act_img{
  width: 160px;height: auto;
}
.quiz_pic{
  width: 800px;height: auto;
}
.audit_result{
  margin-left: 5px;
}
.margin_1{
  margin-top:1rem;
}
.margin_2{
  margin-top:2rem;
}
.margin_half{
  margin-top:0.5rem;
}
.left_little{
  margin-left:1rem;
}
.left_1{
  margin-left:0.3rem;
}
.left_half{
  margin-left:0.2rem;
}
.left_1_half{
  margin-left:1.1rem;
}
.left_2{
  margin-left:4rem;
}
.left_3{
  margin-left:6rem;
}
.left_4{
  margin-left:10rem;
}
.left_5{
  margin-left:14rem;
}
.right_little{
  margin-right:0.2rem;
}

.right_half{
  margin-right:0.5rem;
}

.right_1{
  margin-right:1rem;
}

.right_2{
  margin-right:2rem;
}
.right_3{
  margin-right:2rem;
}
.hide{
  display: none;
}
.float_right_btn{
  float: right;
  margin-right: 0.5rem;
  margin-top: 0.2rem;
}
.right_position{
  float: right;
  margin-right: 0.5rem;
}
.table_select{
  width: 8%;
  min-width: 100px;
  margin-left: 0.5%;
  /*margin-top: 5px;*/
}
.hide_column{
  display: none;
}
.photo{
  width: 50px;
  height: auto;
}


.even{
  background-color: #EFEFEF;
}

#ebook_cover{
  width: 12rem;
  height: auto;
}
#ebook_assess{
  text-indent: 2rem;
  margin-top: 2rem;
}

.wr_score{
  cursor: pointer;
   display:inline;
  line-height: 25px;

}
.pop_box{
  width: 1000px;
  height:600px;
  margin-top: 10%;
}
#login_in{
  cursor: pointer;
}
.login_out{
  cursor: pointer;
}

.big_modal{
  width: 1500px;
  height: auto;
  margin-left: -100px;
}

.big_modal{
  width: 1500px;
  height: auto;
  margin-left: -300px;
}

.edit_modal{
  width: 1200px;
  height: auto;
  margin-left: -420px;
}

@media (min-width: 576px) {
  .edit_modal{
    width: 450px;
    margin-left: 50px;
    }
  .classify_modal{
    width: 460px;
    margin-left: 40px;
  }
}

@media (min-width: 768px) {
  .edit_modal{
    width: 550px;
    margin-left: 80px;
  }
  .classify_modal{
    width: 560px;
    margin-left: 70px;
  }
}

@media (min-width: 992px) {
  .edit_modal{
    width: 660px;
    margin-left: 20px;
    margin-top: 60px;
  }

  .classify_modal{
    width: 670px;
    margin-left: 10px;
    margin-top: 60px;
  }
}

@media (min-width: 1200px) {
  .edit_modal{
    width: 1000px;
    margin-left: -150px;
    margin-top: 110px;
  }
  .classify_modal{
    width: 1010px;
    margin-left: -160px;
    margin-top: 110px;
  }
  .big_modal{
    width: 1600px;
    height: auto;
    margin-left: -420px;
  }

}





.question_box_choice{
  padding: 0.5rem 1.2rem 0.5rem 2.5rem;
}
.radio_text{
  cursor: pointer;
}
.user_name{
  cursor: pointer;
}

#drop_area {
  border: 1px dashed #333333;
  margin: 15px;
  background-color: #f8f8f8;
  width: 150px;
  height: 150px;
  vertical-align: middle;
  horiz-align: center;
  border-radius: 5px;
}
#up_area {
  height: 30px;
  margin: auto;
  width: 120px;
  margin-top: 40px;
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
}
#progressNumber {
  margin-top: 11px;
  background-image: url(../img/upload.gif);
  background-repeat: no-repeat;
  width: 128px;
  height: 128px;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
  line-height: 128px;
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
  display: none;
}
#file_action {
  margin: 7px;
  width: 175px;
  background: #eeeeee;
  height: auto;
  display: none;
  padding-top: 8px;
}

.small_img{
  width: 100px;
  height: 100px;
}
.btn{
  cursor: pointer;
}
.fa-trash{
  cursor: pointer;
}
.del_wr{
  cursor: pointer;
  text-decoration:underline;
}
.green_font{
  color: #28a745;
}
.red_font{
  color: #ff0040;
}
.blue_font{
  color: #0B61A4;
}
.cursor{
  cursor: pointer;
}
.del_audit_word{
  cursor: pointer;
  text-decoration:underline;
}

#myModal{
  z-index: 9999;
}
#modal_top{
  z-index: 9998;
}
.saving{
  width: 100%;
  height: 200px;
  background-image: url("../img/upload.gif");
  background-repeat:no-repeat;
  text-align: center;
  padding-top: 150px;
  background-position: top;
}
.gif_img{
  width: 100px;
  height: auto;
}
.check_img{
  margin-left: 15px;
  margin-right: 15px;
}
.ebook_img{
  cursor: pointer;
}
.v_ebook_img{
  cursor: pointer;
  width: 150px;
  height: 210px;
  margin-left: 1rem;
  border: 1px dashed #333333;
}
.h_ebook_img{
  width: 40px;
  height:auto;
  margin-left: 20px;
}

.classify_label{
  background: #eeeeee;
  padding: 1px 5px;
  font-size: 12px
}
.ebook_name{
  cursor: pointer;
}

.down_ebook{
  cursor: pointer;
}

#school_img{
  height: 50px;
  width:auto;
  margin-left: 20px;
}

#save_class_info{
  margin-left: 300px;
}

.class_info{
  cursor: pointer;
  width: 40px;
  text-align: center;
}

.loading{
  width: 100%;
  height: 200px;
  background-image: url("../img/upload.gif");
  background-repeat:no-repeat;
  text-align: center;
  padding-top: 150px;
  background-position: top;
}
.app_logo{
  width: 100px;
  height: 100px;
  border-radius: 15px;
   cursor: pointer;
}
.play_rec{
  cursor: pointer;
  text-decoration-line: underline;
}

.school_info{
  cursor: pointer;
  text-decoration-line: underline;
}

.revenue_info{
  cursor: pointer;
  text-decoration-line: underline;
}
.under_line{
  text-decoration-line: underline;
}
a under_line{
  text-decoration-line: underline;
}

.kid_detail{
  cursor: pointer;
  text-decoration-line: underline;
}
.teacher_detail{
  cursor: pointer;
  text-decoration-line: underline;
}
.master_detail{
  cursor: pointer;
  text-decoration-line: underline;
}

.out_trade_no{
  cursor: pointer;
  text-decoration-line: underline;
}
.res_name{
  cursor: pointer;
  text-decoration-line: underline;
}

.ebook_name{
  cursor: pointer;
  text-decoration-line: underline;
}
.underline{
  text-decoration-line: underline;
}
.bottom_1{
  margin-bottom: 1rem;
}
.base_task_info{
  display: none;
}
/* 遮罩层样式 */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

/* 放大图片样式 */
.enlarged-img {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
}

/* 关闭按钮样式 */
.close-btn {
  position: absolute;
  top: 50px;
  right: 50px;
  color: #fff;
  cursor: pointer;
  font-size: 40px;
}

.form-inline-left {
  display: flex;
  flex-wrap: wrap;
}
.form-inline-left label {
  width: calc(16.6667% - 10px); /* 100% / 6 = 16.6667% - 10px (间距) */
  margin-bottom: 10px; /* 控制标签之间的垂直间距 */
}
.form-inline-left input[type="checkbox"] {
  margin-right: 5px; /* 控制复选框和标签之间的水平间距 */
}


a {
  text-decoration: none !important;
}

.quiz_stat_chart .title .tabs a {
  border-right: 1px solid #e2e2e2;
  color: #777;
  float: left;
  font-size: 14px;
  line-height: 30px;
  padding: 0 20px;
  position: relative;
}

.quiz_stat_chart .tabs {
  display: inline-block;
  vertical-align: middle;
}

.quiz_stat_chart .tabs a.current {
  background: #3389d4;
  border-color: #3389d4;
  color: #fff;
  cursor: default;
  margin: -1px 0;
  padding: 1px 20px;
}


.card {
  /*width: 95% !important;*/
}

.general-stat {
  display: flex;
  justify-content: space-between;
  --n: 6;
}

.general-stat .general-reading-item {
  border-right: 1px solid #cddbd0;
  /*border: 1px solid #cddbd0;*/
  /*padding: 30px 30px 0px 30px;*/
  width: calc(calc((100 / var(--n)) * 1%) - 20px);
}

.general-stat .general-reading-item .label {
  font-size: 12px;
}

.general-stat .general-reading-item .item-num {
  font-size: 30px;
  font-weight: bold;
  color: #333;
}

.general-stat .general-reading-item .last_quiz_num {
  font-size: 12px;
  line-height: 18px;
  margin-top: 2px;
  white-space: nowrap
}

.general-stat .general-reading-item .icon-down {
  color: #7dbe56;
  margin-left: 5px;
  margin-right: 5px;
}

.general-stat .general-reading-item .fa-arrow-down {
  color: #e25959;
}


.general-stat .general-reading-item:nth-last-child(1) {
  border-right: unset;
}

.index-ct .index-block {
  border-radius: 12px;
  padding: 0.5em;
}

.index-ct .index-btn {
  text-align: center;
  background: #a0f1e9;
  border-radius: 60px;
  display: inline-block;
  padding: 0.8em;
  border: 1px solid #ccc;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-shadow: 0px 4px 4px rgb(0 0 0/9%);
}

.index-ct .index-value {
  color: #f56174;
  font-size: 24px;
}

.index-ct .index-title {
  color: #6c757d;
  font-size: 13px;
  min-width: 60px;
}

.index-ct .index-btn-bg {
  position: absolute;
  top: 0%;
  left: -50%;
  width: 200%;
  height: 100%;
  background: #fafffe;
  z-index: -1;
  border-radius: 50%;
}

.quiz_ebook {
  min-width: 120px !important;
}
.archive_img{
  width: 60px;
  height: 60px;
}
.position_box{
  margin-left: 5px;
  margin-top: 2px;
  border-bottom: 1px dashed gray;
  cursor: pointer;
  z-index: 999;
}

.scroll_box_all  {
  height:700px;
  overflow-y: auto;
  overflow-x: auto;
}
.scroll_box_y {
  height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
}
.no_scroll{
  overflow: hidden;
}
.archive_column {
  float: left;
}
.archive_column .card {
  margin-bottom: 10px;
}
.border_left_1{
  border-left: 0.25rem solid #4e73df !important;
}
.border_left_2{
  border-left: 0.25rem solid #ee9900 !important;
}
.border_left_3{
  border-left: 0.25rem solid #0DD93C !important;
}

.border_left_4{
  border-left: 0.25rem solid #a3b6ee !important;
}

.border_left_5{
  border-left: 0.25rem solid #b3e19d !important;
}

.border_left_6{
  border-left: 0.25rem solid #c3a700 !important;
}

.border_left_7{
  border-left: 0.25rem solid #dd4b39 !important;
}

.border_left_8{
  border-left: 0.25rem solid #0C9721 !important;
}

.border_left_9{
  border-left: 0.25rem solid #e83e8c !important;
}

.border_left_9{
  border-left: 0.25rem solid #fcd971 !important;
}
.col-xl-99{
  max-width: 20%;
  flex: 0 0 20%;
  position: relative;
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}
.out_box{
  border: 1px dashed gray;
  height:420px
}
.card-body-1{
  flex: 1 1 auto;
  padding: 0.5rem;
}
.align_center{
  text-align: center;
}
.w_p_4{
  width: 4%;
}
.w_p_5{
  width: 5%;
}
.w_p_6{
  width: 6%;
}
.w_p_7{
  width: 7%;
}
.w_p_8{
  width: 8%;
}
.w_p_10{
  width: 10%;
}
.w_p_12{
  width: 12%;
}
.w_p_13{
  width: 13%;
}
.w_p_15{
  width: 15%;
}
.w_p_16{
  width: 16%;
}
.w_p_18{
  width: 18%;
}
.w_p_20{
  width: 20%;
}
.w_p_22{
  width: 22%;
}
.w_p_25{
  width: 25%;
}
.w_p_30{
  width: 30%;
}
.w_p_60{
  width: 60%;
}
.w_p_80{
  width: 80%;
}
.w_p_100{
  width: 100%;
}

.dot_line{
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px; /* 间距根据实际需求进行调整 */
  margin-left: 5px;
  position: relative;
  border: 1px dotted #999;
}
.left_p_2{
  margin-left: 45%;
}
.h6{
  font-size: 1rem;
}
.hide_div{
  display: none;
}
.font_12{
  font-size: 12px;
}
.font_20{
  font-size: 20px;
}
.black{
  color: black;
}
.align_left{
  text-align: left;
}
.print_label{
  background-color: #0BB20C;
  color: white;
}
#preview p {
  display: block; /* 设置为块级元素 */
  margin: 10px auto; /* 设置上下外边距使它们上下居中 */
  max-width: 120px; /* 添加一个最大宽度以防止元素过宽 */
  text-align: center; /* 居中显示文本 */
}
.popup {
  position: absolute;
  top:0;
  left:0;
  display: none;
  background: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  z-index: 9999;
  width: 480px;
}

.popup ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.popup ul li {
  clear: both;
  padding: 1px;
  cursor: pointer;
}

.popup ul li:hover {
  background: #e6e6e6;
  height: 25px;
}
.popup ul li dl{
  float: left;
  height: 20px;
}

@media (max-width: 996px) {
  .h4,h4 {
    font-size: 20px;
  }
}
#table_title{
  width: 200px;
  padding-top: 8px;
}
.h-320{
  height: 320px;
}
.pad_2{
  padding-left: 2rem;
}

#school_icon{
  width: 32px;
  height:32px;
}

.image-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 9999; /* 确保弹出层位于其他内容之上 */
  max-width: 90%; /* 最大宽度 */
  max-height: 90%; /* 最大高度 */
  width: 1380px;
  height:650px;
  overflow: auto; /* 如果内容过多，添加滚动条 */
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.selectable-image {
  width: 250px; /* 图像宽度 */
  height: 250px; /* 图像高度 */
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease-in-out;
}

.selectable-image.selected {
  border-color: green; /* 选中时的边框颜色 */
  border-width: 4px;
}

.close-button{
  float:right;
  margin-top: 10px;
  padding: 8px 16px;
  background-color:green;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
}


.cancel-button {
  float:left;
  margin-top: 10px;
  padding: 8px 16px;
  background-color: red;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
}

.row-inline {
  display: inline-block;
  width: 100px;
  margin-right: 10px;
}
.word-group {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.word-group label {
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}
.sentence-option {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.sentence-option input[type="text"] {
  flex: 1;
  padding: 5px;
  margin-left: 10px;
  color: #555555;
}
.sentence_label{
  margin-left: 30%;
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
}

.selectable-small-image {
  border: 4px solid transparent;
  transition: border-color 0.3s;
}

.selectable-small-image.selected {
  border: 4px solid green;
}

#files_table {
  margin-top: 10px;
  height: 500px;
  width: 99%; /* 表格宽度最大化 */
  border-collapse: collapse; /* 避免边框重叠 */
  overflow-y: auto; /* 超出高度时显示滚动条 */
}

#files_table thead, #files_table tbody {
  display: table; /* 恢复表格布局 */
  width: 100%;
  table-layout: fixed; /* 表格固定布局，确保列宽一致 */
}

#files_table th, #files_table td {
  padding: 8px; /* 单元格内边距 */
  border: 1px solid #ddd; /* 添加边框 */
  white-space: nowrap; /* 防止内容换行 */
  text-align: left; /* 内容左对齐 */
}

/* 分别为每个列设置固定宽度，确保整行填满表格宽度 */
#files_table th:nth-child(1),
#files_table td:nth-child(1) {
  width: 10%; /* 第1列宽度 */
}

#files_table th:nth-child(2),
#files_table td:nth-child(2) {
  width: 10%; /* 第2列宽度 */
}

#files_table th:nth-child(3),
#files_table td:nth-child(3) {
  width: 25%; /* 第3列宽度 */
}

#files_table th:nth-child(4),
#files_table td:nth-child(4) {
  width: 15%; /* 第4列宽度 */
}

#files_table th:nth-child(5),
#files_table td:nth-child(5) {
  width: 25%; /* 第5列宽度 */
}

#files_table th:nth-child(6),
#files_table td:nth-child(6) {
  width:15%; /* 第5列宽度 */
}

.typewriter {
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid;
  animation: blink-caret 0.7s step-end infinite;
  font-size: 14px; /* 你可以调整字体大小 */
  color: green;
}

@keyframes blink-caret {
  from { border-color: transparent; }
  to { border-color: black; }
}

#slider {
  width: 200px;
  margin-left: 20px;
  margin-right: 10px;
}
.ui-slider-range {
  background: blue; /* 滑动条的填充部分变为蓝色 */
}
.ui-slider-handle {
  background: blue; /* 滑块变为蓝色 */
  border-color: blue;
}

#preview ul {
  list-style-type: none;  /* 去掉默认的点 */
  padding-left: 0;        /* 去掉左侧默认的内边距 */
  margin-left: 0;         /* 去掉左侧默认的外边距 */
}
.wrap_input {
  width: 100%;
  height: 80px;
  white-space: pre-wrap; /* 保持换行和空格 */
  overflow-wrap: break-word; /* 强制在单词边界断行 */
  font-family: Arial, sans-serif; /* 使用常见字体 */
  font-size: 16px; /* 设置字体大小 */
  padding: 5px; /* 内边距 */
  box-sizing: border-box; /* 包括内边距和边框在内的总宽度和高度 */
}

.icon-button {
  width: 40px;             /* Adjust to make it circular */
  height: 40px;
  border-radius: 50%;      /* Round shape */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 18px;         /* Adjust icon size */
}

.icon-button i {
  color: white;            /* Icon color */
}


#sketch_large_image_container {
  position: fixed;
  top: 50%;
  left: 84%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  display: none; /* Initially hidden */
  background: rgba(255, 255, 255, 0.8); /* Optional: darken the background */
  padding: 10px;
}

#sketch_large_image {
  height: auto;
  width: 500px;
}


#large_image_container {
  position: fixed;
  top: 50%;
  left: 15%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  display: none; /* Initially hidden */
  background: rgba(255, 255, 255, 0.8); /* Optional: darken the background */
  padding: 10px;
}

#large_image {
  height: auto;
  width: 500px;
}
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  background-color: rgba(128, 128, 128, 0.5); /* 半透明灰色背景 */
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;        /* 垂直居中 */
  justify-content: center;     /* 水平居中 */
  transform: translateY(-10px); /* 向上移动 5px */
  border-radius: 50%;          /* 圆形按钮 */
  z-index: 100000;             /* 确保关闭按钮在最上层 */
}

.selected-row {
  background-color: #add8e6 !important; /* 确保选中行显示蓝色背景 */
}

.sortable-placeholder {
  background-color: rgba(0, 0, 0, 0.1);
  height: 40px; /* 适应行高 */
  border: 2px dashed #ccc;
}

.drag-handle {
  cursor: grab;
}
.drag-handle:active {
  cursor: grabbing;
}

.width_30{
  justify-content:center;
  text-align: center;
  width: 20px;
}
.width_30{
  width: 30px;
  text-align: center;
  word-break: break-all;
}
.width_40{
  width: 40px;
  text-align: center;
  word-break: break-all;
}
.width_50{
  width: 50px;
  text-align: center;
  word-break: break-all;
}
.width_60{
  width: 60px;
  text-align: center;
  word-break: break-all;
}
.width_80{
  width: 80px;
  text-align: center;
  word-break: break-all;
}
.width_80_left{
  width: 80px;
  text-align: left;
  word-break: break-all;
}
.width_100_left{
  width: 100px;
  text-align: left;
  word-break: break-all;
}
.width_160_left{
  width: 160px;
  text-align: left;
  word-break: break-all;
}
.width_500_left{
  width: 500px;
  text-align: left;
  word-break: break-all;
}
.break-line {
  margin-top:2px;
  margin-bottom: 1px;
  padding: 0;
  white-space: pre-line;
}
.width_100{
  width: 100px;
  text-align: center;
}
.width_120{
  width: 120px;
  text-align: center;
}
.width_120_left{
  width: 120px;
  text-align: left;
}
.width_140{
  width: 140px;
  text-align: center;
}
.width_141{
  width: 140px;
  text-align: left;
}

.width_160{
  width: 160px;
  text-align: left;
}

.width_180{
  width: 180px;
  text-align: left;
}

.width_200{
  width: 200px;
  text-align: center;
  justify-content:center;
}

.width_200_left{
  justify-content:left;
  width: 300px;
  text-align: left;
}
.width_240{
  width: 240px;
  text-align: left;
}

.width_250{
  width: 250px;
  text-align: center;
}
.width_250_left{
  width: 250px;
  text-align: left;
  justify-content:left;
}


.width_300{
  width: 300px;
  text-align: center;
}

.width_300_left{
  justify-content:left;
  width: 300px;
  text-align: left;
}

.width_350_left{
  justify-content:left;
  width: 350px;
  text-align: left;
}
.width_350{
  width: 400px;
  text-align: center;
}

.width_400{
  width: 400px;
  text-align: center;
}

.width_400_left{
  width: 400px;
  text-align: left;
}

.width_500{
  width: 500px;
  text-align: left;
}

.width_600{
  width: 600px;
  text-align: left;
}
.width_650{
  width: 650px;
  text-align: left;
}