@main-bgColor: rgb(40,40,40); //主背景颜色
@borderColor: #424242; //边框颜色
@primary-textColor: #fff; //文本主颜色
@second-textColor: #a5a5a5; //文本副级颜色
@third-textColor: #dddddd;//其他颜色
@fourth-textColor: #1cc0f3;
@primary-fontSize: 14px;
@second-fontSize: 16px;
@large-fontSize: 20px;
.class-mgt-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;

    .class-list-wrap {
        width: 400px;
        height: 100%;
        border-right: 1px solid @borderColor;
    }

    .class-info-wrap {
        width: ~"calc(100% - 400px)";
        height: 100%;
        padding-left:15px;
    }
}
.class-list-header{
    width:100%;
    height:45px;
    line-height:45px;
    border-bottom:1px solid @borderColor;
    padding-left:15px;
    color:@second-textColor;
}
.action-btn {
    float: right;
    display: flex;
    align-items: center;
    margin-right: 15px;
    &-icon {
        color: white;
        font-size: 16px;
        margin-right: 12px;
        margin-left: 10px;
        cursor: pointer;

        &.hide-icon {
            display: none;
        }
    }
}
.class-info-header{
    width:100%;
    height:45px;
    line-height:45px;
    border-bottom:1px solid @borderColor;
}
.class-info-content{
    width:100%;
    height:~"calc(100% - 45px)";
    position:relative;
}
.main-header-tab {
    color: @second-textColor;
    margin-right: 15px;
    cursor: pointer;
    position: relative;
    display: inline-block;
    line-height: 25px;
}

.border(right) {
    border-right: 1px solid @borderColor;
}
.border(top) {
    border-top: 1px solid @borderColor;
}
.border(left) {
    border-left: 1px solid @borderColor;
}
.border(bottom) {
    border-bottom: 1px solid @borderColor;
}
.container-left {
    width: 59%;
    height:100%;
    .border(right);

    &-title {
        width: 100%;
        padding-left: 15px;
        height: 50px;
        .border(bottom);
        line-height: 50px;
        padding-right: 35px;
    }
}
.container-right {
    width: 41%;
    height:100%;

    &-title {
        width: 100%;
        height: 45px;
        line-height: 45px;
        .border(bottom);
    }
}
.first-title {
    font-size: @primary-fontSize + 1;
    color: @second-textColor;
    font-weight:900;
}

.label-style {
    font-size: @primary-fontSize - 1;
    color: @second-textColor;
    float: right;
    margin-right: 40px;
    cursor: pointer;
}
.label-style .label-icon{
    margin-right:15px;
}
.save-btn {
    margin-top: 5px;
    /*color: black;*/
    float: right;
    margin-right: 30px;
}
.school-plan-wrap {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
}
.school-plan-wrap p{
    position:absolute;
    top:0px;
    right:0px;
    padding:8px 35px 6px 20px;
    .border(bottom);
    color:white;
    cursor:pointer;
}
.school-plan-wrap .label-icon {
    margin-right: 15px;

}
.container-left-wrap{
    width:100%;
    height:~"calc(100% - 50px)";
    display:flex;
    flex-direction:row;
}
.container-left-box {
    width: 38%;
    height: 100%;
    .border(right);
    
    .list-order {
        padding: 5px 0px 5px 15px;
        color: white;

        .label-icon {
            margin-right: 10px;
        }
    }
}
.container-right-box {
    width: 62%;
    height: 100%;
    padding-left:15px;
}
.class-search-input{
    width:~"calc(100% - 15px)";
    margin-left:10px;
    height:45px;
    line-height:45px;
}
.class-list {
    width: 100%;
    height:~"calc(100% - 50px)";
    padding-left: 15px;
    
}
.active-item-bg {
    background-image: linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
}
.class-list-item {
    padding: 8px 0px;
    .border(bottom);
    cursor:pointer;
    position:relative;
    display: flex;
    justify-content: space-between;
    align-items: center;    
    &:hover {
        .active-item-bg,
        .period-btn-edit {
            display: inline-block;
        }
    }
}
.class-name {
    font-size: @large-fontSize;
    color: white;
    font-weight: 500;
}
.second-text-color {
    color: @second-textColor;
    font-size: 12px;
}
.third-text-color{
    color:@third-textColor;
}
.fourth-text-color {
    color: #1cc0f3 !important;
    /*text-shadow:1px 1px 1px white;*/
}
.class-hiteach-code {
    margin-top:5px;
}
.class-type {
    margin-top:6px;
    margin-bottom:4px;
    align-items: center;
    display: flex;
    span{
        color: rgb(28, 192, 243);
    }
}
.iconHi{
    display: inline-block;
    margin-right: 5px;
    width: 14px;
    height: 14px;
}
.iconBoard {
    width: 14px;
    height: 14px;
    background: rgb(165, 165, 165);
    border-radius: 16%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
}
.primary-text-color{
    color:@primary-textColor;
}

.class-attr-wrap{
    width:35%;
    height:100%;
    .border(right);
    &-label{
        display:inline-block;
        color:@second-textColor;
        font-size:@second-fontSize - 4px;
    }
}
.hiteach-code-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    &-header {
        width: ~"calc(100% - 30px)";
        margin-left: 20px;

        p {
            padding: 10px 0px;
            color: @second-textColor;
            .border(bottom);
        }
    }

    &-list {
        .border(top);
        width: 100%;
        height: ~"calc(100% - 72px)";
        padding-left: 25px;
        h1 {
            font-weight: 400;
        }

        ul {
            list-style: none;

            li {
                color: #dbdbdb;
                display: flex;
                align-items: center;
                margin-bottom: 5px;
            }
        }
    }
}
#school-plan {
    background: none;
}
.school-plan-zoom {
    position: absolute;
    right: 150px;
    top: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    .ivu-icon {
        margin-right: 10px;
        cursor: pointer;
    }

    span {
        color: white;
        font-size: 16px;
        margin-right: 15px;
        display: inline-block;
        letter-spacing: 3px;
        cursor: pointer;
    }
}
.school-plan-box {
    width: ~"calc(100% - 60px)";
    max-height: 90%;
    overflow: scroll;
    text-align: center;

    &::-webkit-scrollbar { /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 8px;
    }

    &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgb(124,124,124);
    }

    &::-webkit-scrollbar-track { /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(68,68,68,.5);
    }
}
.hiteach-collapse{
    border-bottom: 1px solid #424242;
    position: relative;
    cursor: pointer;
    &-main{
        display: flex;
        align-items: center;
        padding: 20px 0 20px 20px;
        &:hover{
            background-image: linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
        }
        .arrowIcon{
            position: absolute;
            right: 5px;
            top: 20px;
        }
        .proIcon{
            width: 60px;
            height: 60px;
            margin-right: 30px;
        }
        .proCont{
            font-size: 12px;
            letter-spacing: 1px;
            ul li{
                .title{
                    display: inline-block;
                    margin-right: 12px;
                    font-size: 16px;
                    font-weight: 500;
                    color: #bdbdbd;
                    color:white;
                }
                .serialType{
                    margin-right: 12px;
                    padding: 2px 5px;
                    background: #1cc0f3;
                    border-radius: 3px;
                    color: white;
                }
                .tag{
                    display: inline-block;
                    border: 1px solid #8d8d8d;
                    padding: 3px 10px;
                    color: #8d8d8d;
                    margin-top: 5px;
                    margin-right: 10px;
                    border-radius: 5px;
                    &.active{
                        color: #1cc0f3!important;
                        border-color: #1cc0f3!important;
                    }
                }
            }
        }
    }
    .hiteach-collapse-sub{
        display: flex;
        align-items: center;
        border-top: 1px solid rgb(66, 66, 66);
        margin-left: 20px;
        letter-spacing: 1px;
        font-size: 12px;
        padding: 20px;        
        &:hover{
            background-image: linear-gradient(90deg, #2a2a2e, #293942);
        }
        &-detail{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        &.linked{
            ul li{
                color: #888888;
            }            
            cursor: not-allowed;
        }
        &-linkBtn{
            cursor: pointer;
            border-radius: 5px;
            padding: 5px 12px;
            font-size: 12px;
            background-color: #1cc0f3;
            color: white;
            text-align: center;
            font-weight: 700;
            margin-right: 70px;
            border-color: transparent;
            &:hover{
                background-color: #0ba2d1;
            }
        }
    }
}

.class-id-tag {
    color: aqua;
    font-size: 14px;
    margin-right: 5px;
    border: 1px solid aqua;
    padding: 1px 3px;
    border-radius: 3px;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    line-height: 16px;
    height: 18px;
}
.item-tools{
    display:none;
}

.reset-no-btn{
    display: inline-block;
    margin-left: 10px;
    cursor: pointer;
}
.grade-year-tips{
    display: inline-block;
    width: 100%;
    position: relative;
    vertical-align: middle;
    line-height: normal;
    color: white;
}