@main-bgColor:rgb(43,43,46); //主背景颜色
@borderColor: #3d3d3d;
@primary-textColor:#e0e0e0; //文本主颜色
@second-textColor:#a5a5a5; //文本副级颜色
@primary-fontSize:16px;
@second-fontSize:14px;
@title-fontSize:18px;

.new-syllabus {


    &-container {
        height: 100%;
        background: @main-bgColor;
    }

    &-header {
        height:  60px;
        border-bottom: 1px solid @borderColor;
        .fl-row-center;
        justify-content: space-between;
        padding: 0 20px;
        z-index: 1;


        span {
            margin-right: 10px;
            color: @second-textColor;
            border-bottom: 2px solid transparent;
            font-size: @second-fontSize;
            font-weight: bold;
            padding: 5px 0;
            cursor: pointer;
        }

        .tab-active {
            border-color: @primary-textColor;
            color: @primary-textColor;
            font-size: @primary-fontSize;
        }
    }

    &-content {
        height: calc(100% - 50px);
        width: 100%;
        .fl-row-center;

        .ns-col {
            position: relative;
            height: 100%;
            overflow: hidden;
            border-right: 1px solid @borderColor;



            .ns-header {
                padding: 0 15px;
                height: 50px;
                font-size: @primary-fontSize;
                font-weight: bold;
                color: @primary-textColor;
                border-bottom: 1px solid @borderColor;

                &-content {
                    height: 50px;
                    .fl-row-center;
                    justify-content: space-between;
                }
            }


            .gl {
                width: 100%;
                height: 100%;
                padding: 0 0 0 10px;
                overflow: hidden;
                padding-bottom: 50px;


                &-item {
                    position: relative;
                    width: 100%;
                    padding: 20px 15px;
                    border-bottom: 1px solid @borderColor;
                    cursor: pointer;


                    &:hover {
                        .item-active;
                    }

                    &-name {
                        font-size: @title-fontSize;
                        color: @primary-textColor;
                        font-weight: bold;
                    }

                    &-info {
                        padding: 1px 0;
                        font-size: @second-fontSize;
                        color: @second-textColor;

                        span {
                            display: inline-block;
                            width: 3px;
                            height: 10px;
                            margin-right: 5px;
                            background: @second-textColor;
                        }
                    }
                }
            }

            .vl {
                .gl-item-info {
                    span {
                        margin-left: 5px
                    }
                }

                .gl-item:hover {
                    .btn-delete, .btn-edit, .btn-users {
                        display: unset;
                    }
                }

                .btn-delete {
                    position: absolute;
                    right: 30px;
                    top: 44px;
                    display: none;
                }

                .btn-users {
                    position: absolute;
                    right: 60px;
                    top: 44px;
                    display: none;
                }

                .btn-edit {
                    position: absolute;
                    right: 90px;
                    top: 44px;
                    display: none;
                }

                .count-nums{
                    color:#0f9272;
                    font-weight:bold;
                }

                .count-nums .ivu-icon{
                    font-size:18px;
                    color:#0f9272;
                    margin:10px 0 0 10px;
                }
            }
        }

        .ns-col {
            width: 15%;
            // box-shadow: 6px 6px 9px 0px #000000;
            z-index: 2;
            // background: #171717;
        }

        .ns-col2 {
            width: 19%;
            // background: #202020;
            // box-shadow: 6px 6px 9px 0px #000000;
            z-index: 1;

            .funnel-box {
                .fl-col-center;
                align-items: flex-start;
                padding-bottom: 10px;

                p {
                    margin: 10px 5px;
                }
            }

            .gl-item{
                padding:10px 15px;
            }
        }

        .ns-col3 {
            width: 66%;
            background: #2c2c2cd6;

            .tree-info {
                width: 100%;
                height: 80px;
                /*box-shadow: 0 0 10px 2px #212020;*/
                padding: 0 30px;
                justify-content: space-between;
                .fl-row-center;

                .ivu-icon {
                    font-size: 26px;
                    color: #fff;
                    margin: 0 10px 0 10px;
                }

                .ivu-btn {
                    background: transparent;
                    border: none;
                    color: #fff;
                }

                .tree-name {
                    color: #fff;
                    font-size: 22px;
                    font-weight: bold;
                }

                .tree-version {
                    color: #fff;
                    font-size: 14px;
                    letter-spacing: 1px;
                    margin-left: 10px;
                    font-weight: bold;
                }
            }
        }
    }
}

.fl-row-center{
    display:flex;
    align-items:center;
}

.fl-col-center {
    display: flex;
    flex-direction:column;
    align-items: center;
}

.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%);
}




