@main-bgColor:rgb(43,43,46); //主背景颜色
@borderColor: #444444;
@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;
        // box-shadow: 0px 4px 9px 0px #010101;
        .fl-row-center;
        justify-content: space-between;
        padding: 0 20px;
        z-index: 1;

        .school-tools {
            font-size: var(--font-size-normal);
            margin-right: 30px;
            margin-top: 13px;
            float: right;
        }

        .school-tools .ivu-icon {
            font-size: @font-size-large;
            margin-right: 5px;
            vertical-align: text-top;
        }

        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% - 70px);
        width: 100%;
        .fl-row-center;

        .drag-active {
            background-color: rgba(149, 149, 149, 0.2);
        }

        .gl-new-area {
            text-align: center;
            color: @primary-textColor;
            background: #3e3e3e;
            padding: 35px 0 !important;
        }

        .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 #353535;

                &-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 25px;
                    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 {
                    padding: 20px 15px
                }

                .gl-item-name {
                    width: 70%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    pointer-events: none;
                }

                .gl-item-info {
                    pointer-events: none;

                    span {
                        margin-top: 15px
                    }
                }

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

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

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

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

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

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


            .btn-compose-block {
                background: #0f9272;
                border: none;
                color: #fff;
                margin-left: 20px;
            }

            .points-wrap {
                display: flex;
                flex-wrap: wrap;
                padding-top: 20px;

                .point-item {
                    position: relative;
                    margin: 10px;
                    padding: 5px 30px;
                    border-radius: 50px;
                    background: #545454;
                    box-shadow: 1px 4px 0px 0px #000000;
                    cursor: pointer;

                    &-tools {
                        margin-left: 10px;
                        // display: none;
                        .btn-delete {
                            margin-left: 4px;
                        }
                    }
                }

                .point-item-active {
                    background: #0f9272 !important;
                }
                // .block-point-item:before{
                // 	content:'';
                // 	display:block;
                // 	width:8px;
                // 	height:14px;
                // 	border-right:#fff solid 2px;
                // 	border-bottom:#fff solid 2px;
                // 	transform:rotate(35deg);
                // 	position:absolute;
                // 	bottom:12px;
                // 	left:12px;
                // 	z-index:2;
                // }
                .block-point-item {
                    background-color: #006988;
                }

                .point-item:hover {
                    .point-item-tools {
                        display: unset;
                    }
                }
            }
        }
    }
}

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




