/* ! Root-class-name */
/*单行超出*/
.single-nowrap {
    /*让长段文本不换行*/
    white-space: nowrap;
    /*设置文本超出元素宽度部分隐藏*/
    overflow-x: hidden;
    /*设置文本超出部分用省略号显示*/
    text-overflow: ellipsis;
}

/* ? start:Utils */
.leave {
    margin-left: 6px;
}

.light {
    color: #fff;
}

/* ? end:Utils */

#New-Stu-Manage {
    box-sizing: border-box;
    width: 100%;
    /* height: 100vh; */
    display: flex;
    flex-direction: column;
}

/* ? start:标题 */
.main-title-box {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    background-color: #fff;
}

.main-title-box .title {
    width: 1200px;
    height: 60px;
    line-height: 60px;
    font-size: 24px;
    color: #333333;
}

/* ? end:标题 */

/* ? start:内容 */
.layout-box {
    width: 100%;
    flex: 1;
    position: relative;
    margin-top: 12px;
    display: flex;
    justify-content: start;
    margin-bottom: 12px;
    gap: 20px;
}

.layout-box .left-nav {
    flex-shrink: 0;
    width: 340px;
    min-height: 100%;
    background-color: #fff;
    overflow: hidden;
    transition: all 0.36s;
}

.layout-box .left-nav.hide {
    width: 0;
}

.layout-box .left-nav .top-box {
    box-sizing: border-box;
    width: 100%;
    min-height: 120px;
    max-height: max-content;
    padding: 24px;
    padding-top: 17px;
}

.layout-box .left-nav .top-box .title-box {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.layout-box .left-nav .top-box .title-box span {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
}

.layout-box .left-nav .top-box .title-box img {
    display: block;
    width: 12px;
    height: 6px;
}

.layout-box .left-nav .top-box .mode-button {
    width: 100%;
    height: 42px;
    margin-bottom: 16px;
    font-size: 16px;
    color: #fff;
    display: flex;
    border-radius: 4px;
    align-items: start;
    overflow: hidden;
}

.layout-box .left-nav .top-box .mode-button .group-mode {
    width: 84px;
    height: 42px;
    background-color: #54a4ff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.26s;
    /* flex-shrink: 0; */
}

.layout-box .left-nav .top-box .mode-button .browse-mode {
    width: 84px;
    height: 42px;
    background-color: #31c192;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.26s;
    /* flex-shrink: 0; */
}

.layout-box .left-nav .top-box .mode-button .group-mode.active + .browse-mode,
.layout-box .left-nav .top-box .mode-button .browse-mode.active + .group-mode {
    flex: 1;
}

.layout-box .left-nav .top-box .mode-button .group-mode:hover,
.layout-box .left-nav .top-box .mode-button .group-mode.active,
.layout-box .left-nav .top-box .mode-button .browse-mode:hover,
.layout-box .left-nav .top-box .mode-button .browse-mode.active {
    width: 198px;
}

.layout-box .left-nav .top-box .mode-button .mode-fill {
    width: 10px;
    height: 42px;
    background: linear-gradient(-76.8deg, #31c192, #31c192 50%, #54a4ff 50%, #54a4ff 100%);
    flex-shrink: 0;
}

.layout-box .left-nav .top-box .title-button {
    width: 100%;
    height: 42px;
    font-size: 16px;
    color: #fff;
}

.layout-box .left-nav .group-box {
    box-sizing: border-box;
    width: 100%;
}

.nav-group-item {
    box-sizing: border-box;
    width: 100%;
}

.nav-group-title {
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    padding: 0 16px 0 24px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.26s;
}

.nav-group-title::before {
    content: '';
    display: block;
    position: absolute;
    width: 4px;
    height: 0;
    left: 0;
    background-color: transparent;
    transition: all 0.26s;
}

.nav-group-item.full .nav-group-title::before {
    height: 100%;
    background-color: #54a4ff;
}

.nav-group-title:hover {
    background-color: rgba(84, 164, 255, 0.1);
}

.nav-group-title .left-info img {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    transform: rotate(-90deg);
    transition: all 0.26s;
}

.nav-group-item.full .nav-group-title .left-info img {
    transform: rotate(0deg);
}

.nav-group-title .left-info span:nth-of-type(1) {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
}

.nav-group-title .left-info span:nth-of-type(2) {
    font-size: 16px;
    color: #999999;
}

.nav-group-title .right-utils {
    display: flex;
    gap: 10px;
}

.nav-group-title .right-utils img,
.nav-group-title .right-utils i {
    display: inline-block;
    width: 20px;
    height: 20px;
    color: var(--color-base-secondary);
}

.nav-group-content-box {
    width: 100%;
    overflow: hidden;
    transition: all 0.26s;
}

.nav-group-item.folding .nav-group-content-box {
    max-height: 0;
}

.nav-group-item.full .nav-group-content-box {
    max-height: 100px;
    overflow-y: scroll;
}

.nav-group-item.full .nav-group-content-box::-webkit-scrollbar {
    display: none;
}

.nav-group-content-box-item {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    padding: 0 16px 0 24px;
    display: flex;
    justify-content: start;
    align-items: center;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.26s;
}

.nav-group-content-box-item:hover {
    background-color: rgba(84, 164, 255, 0.1);
}

/* .nav-group-content-box-item:hover::after {
	content: '删除';
	display: block;
	flex: 1;
	text-align: right;
	color: #54A4FF;
	font-size: 16px;
} */

.nav-group-content-box-item .nav-group-checkbox .el-checkbox__label {
    font-size: 16px;
}

.nav-group-checkbox-contnet {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}

.nav-group-checkbox-contnet .status {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    margin-right: 8px;
}

.nav-group-checkbox-contnet .status.offline {
    background-color: #c4c4c4;
}

.nav-group-checkbox-contnet .status.online {
    background-color: #69dfa9;
}

.nav-group-content-box-item .remove-stu {
    flex: 1;
    text-align: right;
    color: #54a4ff;
    font-size: 16px;
}

.layout-box .right-content {
    box-sizing: border-box;
    width: 1520px;
    min-height: 800px;
    padding: 14px 30px;
    background-color: #fff;
    transition: all 0.36s;
}

.layout-box .right-content.expand {
    width: 1860px;
}

.layout-box .right-content .right-title {
    width: 100%;
    padding-bottom: 10px;
    position: relative;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
}

.layout-box .right-content .right-title .title {
    position: absolute;
    left: 30px;
    font-size: 20px;
    color: #333333;
}

.layout-box .right-content .right-title .title-selected {
    display: flex;
    align-items: center;
    color: #31c192;
    cursor: pointer;
}

.layout-box .right-content .right-title .title-utils {
    width: 100%;
    text-align: right;
    height: 28px;
}

.layout-box .right-content .right-title .title-selected img {
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 4px;
}

.title-selected-text {
    display: inline-block !important;
    max-width: 160px !important;
}

.layout-box .right-content .right-title .title-selected > span:nth-of-type(2) {
    display: flex;
    gap: 12px;
    border-bottom: 1px dashed #31c192;
}

.layout-box .right-content .date-pick-box {
    display: flex;
    align-items: center;
}

.layout-box .right-content .date-pick-box .date-pick-box-placeholder {
    width: 60px;
    font-size: 16px;
    color: #888888;
}

.layout-box .right-content .date-pick-box-radio {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.layout-box .right-content .date-pick-box-radio span {
    padding: 4px 10px;
    border-radius: 6px;
    background-color: transparent;
    transition: all 0.26s;
    color: #333333;
    cursor: pointer;
}

.layout-box .right-content .date-pick-box-radio span:hover {
    color: #00bda4;
    background-color: rgba(0, 189, 164, 0.1);
}

.layout-box .right-content .date-pick-box-radio span.selected {
    color: #00bda4;
}

.layout-box .right-content .supervision-version {
    width: 300px;
    height: 42px;
    margin: 0 auto;
    /* display: flex;
	justify-content: space-between;
	align-items: stretch; */
    position: relative;
}

.layout-box .right-content .supervision-version .real-time {
    width: 148px;
    height: 40px;
    border-width: 1px;
    border-style: solid;
    border-color: #d7dae2;
    border-radius: 4px 0px 0px 4px;
    text-align: center;
    line-height: 40px;
    font-weight: 400;
    color: #333333;
    transition: all 0.26s;
    cursor: pointer;
    position: absolute;
    left: 0;
    z-index: 1;
}

.layout-box .right-content .supervision-version .full-version {
    width: 148px;
    height: 40px;
    border-width: 1px;
    border-style: solid;
    border-color: #d7dae2;
    border-radius: 0px 4px 4px 0px;
    text-align: center;
    line-height: 40px;
    transition: all 0.26s;
    transform: translateX(-1px);
    cursor: pointer;
    position: absolute;
    right: 0;
    z-index: 1;
}

.layout-box .right-content .supervision-version .full-version > span {
    font-size: 14px;
    font-weight: 400;
    color: #ff7d7d;
}

.layout-box .right-content .supervision-version .real-time.selected,
.layout-box .right-content .supervision-version .full-version.selected {
    font-size: 18px;
    font-weight: bold;
    color: #31c192;
    border-color: #42c29b;
    z-index: 2;
}

.layout-box .right-content .supervision-content-box {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: start;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

.layout-box .right-content .supervision-content-box .supervision-content-cell {
    width: 364px;
    height: 280px;
    border-width: 1px;
    border-style: solid;
    border-color: #e4e4e4;
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
    transition: all 0.26s;
}

.layout-box .right-content .supervision-content-box .supervision-content-cell:hover {
    border-color: #53a3ff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.supervision-content-cell .supervision-content-cell-title {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 14px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #edf6ff;
}

.supervision-content-cell .supervision-content-cell-title .left-title {
    display: flex;
    align-items: center;
    gap: 4px;
}

.supervision-content-cell .supervision-content-cell-title .left-title .point {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #c4c4c4;
}

.supervision-content-cell .supervision-content-cell-title .left-title .point.online {
    background-color: #69dfa9;
}

.supervision-content-cell .supervision-content-cell-title .left-title .point.offline {
    background-color: #c4c4c4;
}

.supervision-content-cell .supervision-content-cell-title .right-utilst {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.supervision-content-cell .supervision-content-cell-title .right-utilst .right-utilst-cell {
    display: block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-size: 20px;
    background-position: 0 0;
}

.supervision-content-cell .supervision-content-no-data {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
}

.supervision-content-cell .supervision-content-no-data img {
    width: 175px;
    height: 114px;
    margin-top: 45px;
}

.supervision-content-cell .supervision-content-no-data span {
    font-size: 12px;
    color: #333333;
    transform: translateY(-12px);
}

.supervision-content-cell .supervision-content-cell-timeline {
    box-sizing: border-box;
    width: 100%;
    height: 216px;
    padding: 10px 24px 0 24px;
    overflow: auto;
}

/* ! 修改element-plus的样式 */
.supervision-content-cell .supervision-content-cell-timeline .el-timeline-item__tail {
    border-left: 1px dotted #54a4ff;
}

.supervision-date-pick {
    width: 0 !important;
    overflow: hidden;
    position: absolute;
    transform: translateX(7px);
}

.supervision-content-cell-timeline-node .node_cell:nth-child(1) {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: #333;
}

.supervision-content-cell-timeline-node .node_cell:nth-child(2) {
    margin-top: 6px;
    display: flex;
    gap: 6px;
    font-size: 14px;
    color: #666;
}

.supervision-content-cell-timeline-node .node_cell:nth-child(2) .cell_1 {
    width: 42px;
    flex-shrink: 0;
}

.supervision-content-cell-timeline-node .node_cell:nth-child(2) .cell_2 {
    width: 250px;
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.supervision-content-cell-timeline-node .node_cell:nth-child(3) {
    margin-top: 6px;
    font-size: 16px;
    color: #666;
}

/* * 表格 */
.layout-box .right-content .right-table-box {
    margin-top: 20px;
    width: 100%;
}

.layout-box .right-content .right-table-row {
    height: 50px;
}

.layout-box .right-content .point-text {
    color: #54a4ff;
    cursor: pointer;
}

.layout-box .right-content .right-paging {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.layout-box .right-content .right-paging .el-pagination.is-background .el-pager li.is-active {
    background-color: #42c29b;
    color: #fff !important;
}

.layout-box .right-content .right-paging .el-pagination.is-background .el-pager li,
.layout-box .right-content .right-paging .el-pagination.is-background .btn-prev,
.layout-box .right-content .right-paging .el-pagination.is-background .btn-next {
    background-color: #fff;
    border: 1px solid #d9d9d9;
}

.layout-box .right-content .right-paging .el-pagination.is-background .el-pager li:hover,
.layout-box .right-content .right-paging .el-pagination.is-background .btn-prev:hover,
.layout-box .right-content .right-paging .el-pagination.is-background .btn-next:hover {
    border: 1px solid #42c29b;
    color: #42c29b;
}

.layout-box .right-content .right-paging .el-pagination.is-background .btn-prev:disabled,
.layout-box .right-content .right-paging .el-pagination.is-background .btn-next:disabled {
    color: var(--el-text-color-placeholder);
    background-color: var(--el-disabled-bg-color);
    border: none;
}

/* ? end:内容 */

/* ? start:创建组 */
.create-group-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
}

.create-group-title-placehoder {
    font-size: 12px;
    color: #cccccc;
}

.create-group-box .create-group-label {
    width: 80px;
    font-size: 16px;
    color: #666666;
    text-align: right;
}

.create-group-box .create-group-name-box {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
}

.create-group-box .create-group-name-box .create-group-name-input {
    width: 260px;
    height: 40px;
}

.create-group-box .create-group-stu-box {
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 8px;
}

.create-group-append-stu-info {
    width: 380px;
    height: 240px;
}

.create-group-append-stu-info .append-stu-classes-selected,
.create-group-append-stu-info .append-stu-info-search {
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    padding: 13px 0;
    border-bottom: 1px solid #ccc;
}

.create-group-append-stu-info .append-stu-classes-selected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.create-group-append-stu-info .append-stu-classes-info-box {
    box-sizing: border-box;
    width: 100%;
    height: 193px;
    padding: 12px 0;
    overflow-y: auto;
}

.create-group-append-stu-info .append-stu-classes-info-item {
    padding: 6px 0;
    cursor: pointer;
    color: #333;
    background-color: #fff;
    transition: all 0.26s;
    font-size: 16px;
}

.create-group-append-stu-info .append-stu-classes-info-item::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 3px;
    background-color: #54a4ff;
    transform: translateY(-2px);
}

.create-group-append-stu-info .append-stu-classes-info-item:hover {
    color: #54a4ff;
}

.create-group-append-stu-info .append-stu-classes-info-item-check .name-info {
    display: inline-block;
    min-width: 120px;
    margin-right: 10px;
    color: #333;
}

.create-group-append-stu-info .append-stu-classes-info-item-check .number-info {
    display: inline-block;
    margin-right: 10px;
    color: #54a4ff;
}

.append-stu-info-search {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;
}

.append-stu-info-search-input {
    width: 240px;
}

.append-stu-info-search-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
}

.append-stu-info-search-info {
    width: 100%;
}

.append-stu-info-search-info-item {
    margin-top: 8px;
}

.append-stu-info-search-info .reminder {
    margin: 20px 0 2px 0;
}

.import-step-search-class {
    width: 180px;
}

/* ? end:创建组 */

/* ? start:学科选择 */
.selected-buject-list-box {
    box-sizing: border-box;
    width: 720px;
    height: 124px;
    margin: 0 auto;
    padding: 9px;
    border: 1px solid #54a4ff;
    border-radius: 8px;
    display: flex;
    justify-content: start;
    align-items: start;
    align-content: flex-start;
    row-gap: 10px;
    column-gap: 12px;
    flex-wrap: wrap;
    cursor: pointer;
    overflow: auto;
}

.selected-subjec-dropdown {
    left: 30% !important;
}

/* ? end:学科选择 */

/* ? start: 学习历史 */
.study-history-dialog {
    background: transparent;
}

.study-history-dialog .el-dialog__header {
    display: none;
}

.study-history-dialog .el-dialog__body {
    padding: 0;
}

.study-history-body {
    padding: 0 20px 20px 20px;
    border-radius: 12px;
    background-color: #31c192;
    position: relative;
    /* ? 背景图片 */
    background-image: url('../../Images/NewStuManage/study-history/study-history-bg_2.png');
    /* background-size: 155px 110px; */
    background-size: right;
    background-repeat: no-repeat;
}

.study-history-body .study-history-title {
    padding: 13px 0;
    color: #fff;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 100px;
}

.study-history-body .study-history-title span {
    font-size: 16px;
    font-weight: bold;
}

.study-history-body .study-history-title > div {
    padding: 4px;
    background-color: transparent;
    border-radius: 4px;
    transition: all 0.26s;
}

.study-history-body .study-history-title > div:hover {
    background-color: rgba(0, 0, 0, 0.11);
}

.study-history-body .study-history-title > div > img {
    display: block;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.study-history-body .study-history-books-img {
    display: block;
    width: 138px;
    height: 87px;
    position: absolute;
    left: -17px;
    top: -35px;
}

.study-history-body .study-history-card {
    box-sizing: border-box;
    width: 400px;
    height: 436px;
    padding: 20px 20px 13px 20px;
    background: #fff;
    border-radius: 12px;
}

.study-history-card .study-history-stu-info {
    width: 156px;
    height: 32px;
    margin: 0 auto;
    background: #f9f9fb;
    border-radius: 100px;
    border: 1px solid #dddddd;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
}

.study-history-card .study-history-date-pick {
    margin-top: 16px;
    width: 100%;
    text-align: center;
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.study-history-card .study-history-data-box {
    margin-top: 12px;
    width: 100%;
    height: 324px;
    overflow: auto;
}

.study-history-card .study-history-data-box .study-history-data-cell {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    background-color: #fff;
}

.study-history-card .study-history-data-box .study-history-data-cell.point {
    background-color: #f7f6f9;
}

.study-history-card .study-history-data-box .study-history-data-cell .left-point {
    box-sizing: border-box;
    width: 207px;
    padding-left: 30px;
}

.study-history-card .study-history-data-box .study-history-data-cell .left-point > .point {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    margin-right: 6px;
}

/* ? end: 学习历史 */

/* ? start:全屏督导 */
.fullscreen-supervision-content-box {
    margin-top: 20px;
    width: 100%;
    height: 660px;
    background-color: #f3f5f7;
    background: rgba(255, 255, 255, 0);
    border-radius: 10px;
    border: 1px solid #e4e4e4;
    overflow: hidden;
}

.fullscreen-supervision-content-box .fullscreen-supervision-title {
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    padding: 0 30px;
    background-color: #edf6ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fullscreen-supervision-content-box .fullscreen-supervision-title .left-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fullscreen-supervision-content-box .fullscreen-supervision-title .left-info .state {
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: transparent;
    transition: all 0.26s;
}

.fullscreen-supervision-content-box .fullscreen-supervision-title .left-info .state.online {
    background-color: #69dfa9;
}

.fullscreen-supervision-content-box .fullscreen-supervision-title .left-info .state.offline {
    background-color: #c4c4c4;
}

.fullscreen-supervision-content-box .fullscreen-supervision-title .left-info .stu-info {
    font-size: 18px;
    color: #333333;
}

.fullscreen-supervision-content-box .fullscreen-supervision-title .right-utils {
    display: flex;
    gap: 12px;
}

.fullscreen-supervision-content-box .fullscreen-supervision-title .right-utils img {
    display: block;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.fullscreen-supervision-content-box .fullscreen-supervision-data {
    box-sizing: border-box;
    height: calc(100% - 56px);
    padding: 20px 36px 6px 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fullscreen-supervision-content-box
    .fullscreen-supervision-data
    .fullscreen-supervision-data-scroll {
    flex: 1;
    overflow-y: auto;
    /* ! 防止左边显示不完全 */
    padding-left: 2px;
}

.fullscreen-supervision-content-box
    .fullscreen-supervision-data
    .fullscreen-supervision-statistics {
    width: 360px;
    height: 384px;
    background: rgba(255, 255, 255, 0);
    border-radius: 10px;
    border: 1px solid #54a4ff;
}

.fullscreen-supervision-statistics-date {
    margin-top: 13px;
    text-align: center;
    color: #54a4ff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.fullscreen-supervision-statistics-data {
    width: 100%;
    margin-top: 12px;
}

.fullscreen-supervision-statistics-data .data-cell {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    padding-left: 30px;
    display: flex;
    align-items: center;
    background-color: rgba(84, 164, 255, 0.03);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.fullscreen-supervision-statistics-data .data-cell.cell-head {
    background-color: #fff;
}

.fullscreen-supervision-statistics-data .data-cell .left-title {
    width: 160px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fullscreen-supervision-statistics-data .data-cell .left-title .point-box {
    width: 8px;
    height: 8px;
    border-radius: 4px;
}

.fullscreen-supervision-statistics-data .data-cell .right-data {
    color: #54a4ff;
}

/* ? end:全屏督导 */

.mode-group-fill {
    width: 100%;
    display: flex;
    justify-content: center;
}

.mode-group-fill img {
    display: block;
    width: 283px;
    height: 267px;
}

/* ? start:校长端-过滤学生 */
.principal-stu-filter {
    width: 416px;
    height: 36px;
    display: flex;
    justify-content: start;
    /* border: 1px solid #42C29B; */
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.principal-stu-filter .principal-stu-filter-button {
    flex-shrink: 0;
    width: 100px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #d7dae2;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.26s;
}

.principal-stu-filter .principal-stu-filter-button:nth-of-type(1) {
    border-radius: 4px 0 0 4px;
}

.principal-stu-filter .principal-stu-filter-button:nth-of-type(4) {
    border-radius: 0 4px 4px 0;
}

.principal-stu-filter .principal-stu-filter-button:hover {
    color: #42c29b;
}

.principal-stu-filter .principal-stu-filter-button.point {
    color: #42c29b;
    border-color: #42c29b;
}

/* ? end:校长端-过滤学生 */

/* ? start:校长端-搜索学生 */
.principal-stu-search {
    width: 232px;
    height: 32px;
    margin-bottom: 16px;
}

/* ? end:校长端-搜索学生 */

.import-stu-label {
    display: inline-block;
    max-width: 136px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-nowrap .el-input__inner {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.search-nowrap .el-input__inner {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.layout-box .right-content .goBack {
    color: #31c192;
    position: absolute;
    top: 4px;
    right: 0;
    cursor: pointer;
}

.item-per {
    width: 42% !important;
}

/* zzb */
.layer_sections {
    padding: 0 5px 5px 5px;
    line-height: 25px;
    width: 400px;
    max-height: 200px;
    overflow-y: auto;
}

.layer_sections .section {
    padding: 2px 8px;
    color: #676464;
    border-bottom: 1px dotted #42c29b;
    text-align: start;
    display: flex;
    align-content: center;
}

.layer_sections .section:hover {
    cursor: pointer;
    color: #fff;
    background-color: #42c29b;
}

.layer_sections > div {
    text-align: center;
    padding: 10px;
}

.data_choic {
    margin-right: 6px;
}

.data_choic .cxun {
    margin-right: 6px;
}

/* zzb */

/* ? start: loading */

#main-loading {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 199999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-farmar {
    animation: loader 1000ms infinite linear;
    border-radius: 100%;
    border: 6px solid #2dbb55;
    border-left-color: transparent;
    border-bottom-color: transparent;
    color: transparent;
    display: inline-block;
    line-height: 1.2;
    width: 32px;
    height: 32px;
}

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ? end: loading */

.expand-icon {
    width: 20px;
    height: 20px;
    position: absolute;
    cursor: pointer;
    top: 5px;
    left: 0px;
    transform: rotate(180deg);
}

.expand-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

.expand-icon.expand {
    transform: rotate(0deg);
}