@first-bgColor: #141414;
@second-bgColor: #1b1b1b;
@third-bgColor: #222222;
@borderColor: #424242;
@primary-textColor: #fff; //�ı�����ɫ
@second-textColor: #a5a5a5; //�ı�������ɫ
@primary-fontSize: 14px;
@second-fontSize: 16px;

.course-plan-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;

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

    .cus-table-wrap {
        width: ~"calc(100% - 400px)";
        height: 100%;
        padding-left: 15px;
    }
}
.class-list-header {
    display:block;
    color:@second-textColor;
    height: 45px;
    width: 100%;
    line-height: 45px;
    border-bottom: 1px solid @borderColor;
}
.action-btn-icon{
    color:white;
    float:right;
    cursor:pointer;
    margin-right:15px;
    font-size:20px;
    margin-top:10px;
}
.class-list-content{
    width:100%;
    height:~"calc(100% - 45px)";
}
.class-list-item {
    padding: 15px 0px;
    border-bottom:1px solid @borderColor;
    cursor: pointer;
    position: relative;

    &:hover {
        .active-item-bg,
        .period-btn-edit {
            display: inline-block;
        }

        .class-list-item-tool {
            display: inline-block;
        }
    }
}

.class-name {
    font-size: 20px;
    color: white;
    font-weight: 900;
}
.head-teacher{
    color:@second-textColor;
    margin-top:10px;
}
.cus-table-header {
    width:100%;
    height:45px;
    line-height:45px;
    border-bottom:1px solid @borderColor;
    color:@second-textColor;
}


.error-tips-wrap{
    width:100%;
    height:50px;
    line-height:50px;

}

.course-setting-wrap {
    width: ~"calc(100% - 15px)";
    min-height: 120px;
    background:#454545;
    margin-top:5px;
    border-radius:5px;
    border-right: 1px solid @borderColor;
    padding: 10px;
    padding-bottom:50px;
}

.label-text{
    color:@second-textColor;
    display:inline-block;
    width:65px;
    margin-right:10px;
}

.add-cus-box {
    display: flex;
    flex-direction: column;
    color: #999999;
    justify-content: center;
    align-items: center;
    padding:10px;
    border:1px dashed #999999;
    border-radius:5px;
    width:fit-content;
    margin:auto;
    cursor:pointer;
    margin-top:10px;
    span{
        margin-top:10px;
    }
    &:hover{
        border-color:#1cc0f3;
        color:#1cc0f3;
    }
}
.cus-table-content{
    height: ~"calc(100% - 45px)";
}