@first-bgColor: #141414;
@second-bgColor: #1b1b1b;
@third-bgColor: #222222;
@borderColor: #424242;
@primary-textColor: #fff; //文本主颜色
@second-textColor: #a5a5a5; //文本副级颜色
@primary-fontSize: 14px;
@second-fontSize: 16px;

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

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

    .course-info-wrap {
        width: ~"calc(100% - 400px)";
        height: 100%;
        padding-left: 15px;
        display: flex;
        flex-direction: row;
    }
}
.course-list-header {
    width: 100%;
    height: 45px;
    position: relative;
    border-bottom: 1px solid @borderColor;
    line-height: 45px;

    .list-label {
        font-size: 16px;
        color: @second-textColor;
    }

    .search-course {
        display: inline-block;
        position: absolute;
        left: 10px;
        right: 10px;
        top: 16px;
    }
    
}
.add-icon {
    float: right;
    margin-right: 20px;
    margin-top: 8px;
    cursor: pointer;
    color:white;
    font-size:18px;
}
.course-list {
    /*width: 100%;*/
    /*height: ~"calc(100% - 45px)";*/
    /*height:100%;*/

    .show-course-label {
        font-size: 10px;
        color: @second-textColor;
        display: block;
        padding: 4px 0px 4px 15px;
        border-bottom: 1px solid @borderColor;
        font-weight: 800;
    }

    .course-list-item {
        width: 100%;
        padding: 12px 0px 12px 15px;
        color: @second-textColor;
        border-bottom: 1px solid @borderColor;
        position: relative;
        cursor: pointer;

        .course-code {
        }

        .course-name {
            font-size: 20px;
            color: white;
            font-weight: 600;
            margin: 5px 0px;
        }

        .course-item-tool {
            position: absolute;
            right: 50px;
            top: 35px;
            display: none;
        }
    }

    .course-list-item-active {
        background-image: -webkit-linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
        background-image: -o-linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
        background-image: -moz-linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
        background-image: linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);

        .course-item-tool {
            display: inline-block;
        }
    }
}
.course-detail-header {
    width: 100%;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid @borderColor;

    .setting-label {
        color: @second-textColor;
        margin-right: 50px;
        cursor: pointer;
        height: 45px;
        display: inline-block;
    }

    .setting-label-active {
        color: white;
        font-weight: 600;
        border-bottom: 2px solid white;
    }
}
.action-btn-wrap {
    margin-left:20px;
    cursor:pointer;
}