.tt_planlist {
    .task-hot-add {
        padding: 30px 20px 20px 20px;
    }
    position: relative;
    margin-top: 2px;
    .child-list-wraper {
        &.p1 {
            margin-left: 45px; //100 + 10
        }
        &.p2 {
            margin-left: 50px; //30 + 10
        }
        &.p3 {
            margin-left: 50px; //38
        }
        .left_left {
            top: 8px;
        }
        .right_ttpl {
            top: 10px;
        }
        .list-li {
            padding: 8px 0;
        }
    }
    .task-tag {
        display: inline-block;
        margin-right: 10px;
        width: 64px;
        text-align: center;
        padding: 2px 0;
        border-radius: 12px;
        color: #9d91fb;
        background-color: #ebebfa;
    }
    .mine-tag {
        color: #479edd;
        background: #e7f3fb;
    }
    .join-tag {
        color: #5BD900;
        background: #ebf8f0;
    }
    .assess-tag{
        color: #FFBF00;
        background: rgba(255,191,0,0.10);
    }
    .ration-tag{
        color: #00C4CB;
        background: rgba(0,196,203,0.10);
    }
    .progress-tag {
        // width: 40px;
        padding-left: 6px;
        padding-right: 6px;
        height: 18px;
        border-radius: 12px;
        margin-right: 10px;
        text-align: center;
        font-size: 12px;
        line-height: 19px;
        display: inline-block;
    }
    .list-li {
        @include clearfix;
        padding: 10px 0;
        position: relative;
        z-index: 10;
        .handle {
            position: absolute;
            left: -14px;
            top: 0;
            display: none;
            width: 14px;
            height: 100%;
            font-size: 14px;
            background: #e4ebf0;
            &:before {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                height: 12px;
                line-height: 12px;
            }
        }
        .packup {
            position: absolute;
            z-index: 3;
            top: 3px;
            left: 2px;
            cursor: pointer;
            font-size: 18px;
        }
        .work_hour {
            display: inline-block;
            width: 44px;
            height: 24px;
            line-height: 24px;
            border-radius: 12px;
            margin-right: 10px;
            font-size: 12px;
            text-align: center;
            color: #f3a474;
            background-color: #fdf3ed;
        }
        .icon-task {
            vertical-align: text-top;
            margin-right: 3px;
        }
        .status_ttpl.status_disabled {
            cursor: default;
            color: #a9b8bf;
        }
        .status_ttpl_wraper {
            position: absolute;
            top: 3px;
            left: 25px;
        }
        .apply_status {
            position: absolute;
            z-index: 9;
            left: 0px;
            top: 0px;
            width: 50px;
            height: 20px;
            line-height: 24px;
            color: #fff;
            font-size: 12px;
        }
        .set-mark {
            float: left;
            margin: 4px 0 0 0;
        }
        &:hover,
        &_active {
            background-color: #f5f8fa;
            .task-name {
                color: #34434e;
            }
            .right_ttpl {
                .sup-delete {
                    visibility: visible;
                }
            }
            .handle {
                display: inline-block;
                cursor: pointer;
                z-index: 100;
            }
            .move-top {
                display: inline-block;
            }
            .all-icons .new {
                display: inline-block;
            }
        }
        .task-new-experience {
            display: none;
            padding-left: 50px;
            font-size:12px;
            color:#34434e;
            align-items: center;
            margin: 5px 0 -7px;
            i {
                font-size:14px;
                color:#1687d9;
                margin-right: 5px;
            }
            .experience-wrapper {
                flex: 1;
                padding-right: 20px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
    /*  .plan_list_total{
        margin-top:-2px;
        padding-bottom:10px;
        overflow:hidden;
        
        &.p1{
            background-position:28px 0;
        }
        &.p2{
            background-position:30px 0;
        }
        &.p3{
            background-position:90px 0;
        }
        .delete{
            float:left;
            margin-right:10px;
            cursor:pointer;
        }
        .sub-delete-placeholder{
            float:left;
            width:22px;
            height:1px;
        }
        .plan_total_left{
            margin-left:150px;
            float:left;
            span{
                float:left;
                width:5em;
                font-size:12px; 
                color:$gay5;
                &.plan_date{
                    color:$gay13;
                    font-family:$baseFontFamily;
                    margin-right:5px;
                }
            }
        }
        .plan_total_right{
            float:right;
            margin-right:12px;
            font-size:12px;
            color:$gay5;
            .start-date{float:left;margin-right:1em;}
            .txt{float:left;margin-left:5px;cursor:pointer;}
            .notice-wraper{float:left;margin-right:10px}
            .notice{float:left;cursor:pointer;}
        } 
    } */
    .planitem {
        position: relative;
        padding-right: 0px;
        @include clearfix();
        border-bottom: 1px solid #e3ecf1;
        .child-list {
            .planitem {
                border-top: 1px solid #e3ecf1;
                border-bottom-style: none;
            }
        }
    }
    .label {
        margin-left: 5px;
    }
    .task-cycle {
        &:before {
            position: relative;
            top: 2px;
        }
        vertical-align: text-bottom;
    }
    .ico-position {
        display: inline-block;
        border-radius: 2px;
        padding: 0 4px;
        font-size: 12px;
        line-height: 18px;
        color: #fff;
    }
    .ico-position-6 {
        background: #f79c6f;
    }
    .ico-position-7 {
        background: #a1a5ee;
    }
    .ico-position-8 {
        background: #c5aae5;
    }
    .ico-position-16 {
        background: #96bf65;
    }
    .ico-position-20 {
        background: #adcf51;
    }
    .ico-position-21 {
        background: #79c7b7;
    }
    .all-icons {
        display: inline;
        line-height: 24px;
        .icon {
            position: relative;
            display: inline-block;
            margin-right: 10px;
            vertical-align: text-bottom;
            &:before {
                position: relative;
                top: 2px;
                margin-right: 5px;
            }
        }
        .new {
            position: relative;
            display: inline-block;
            margin-right: 10px;
            vertical-align: text-bottom;
            display: none;
            &:before {
                position: relative;
                top: 2px;
                margin-right: 5px;
            }
        }
        .add-ico {
            position: absolute;
            bottom: -5px;
            right: -4px;
        }
    }
    .left_left {
        position: absolute;
        top: 10px;
        left: 0;
        padding-left: 53px;
    }
    .left_ttpl {
        @include clearfix;
        position: relative;
        margin-right: 255px;
        word-break: break-all;
        &.p1 {
            margin-left: 57px;
        }
        &.p2 {
            margin-left: 57px;
        }
        &.p3 {
            margin-left: 51px;
        }
        .task-name {
            margin-right: 10px;
            font-size: 14px;
            line-height: 24px;
            padding-right: 20px;
            display: inline-block;
            cursor: pointer;
            &.child {
                font-size: 12px;
            }
            &.disable {
                color: #a9b8bf;
            }
            &.warn {
                color: #eb4447;
                
                min-width: 40px;
                max-width: 500px;
            }
        }
    }
    .right_ttpl {
        position: absolute;
        top: 10px;
        right: 0;
        padding-right: 10px;
        line-height: 24px;
        .tt_evaluation {
            margin-right: 10px;
        }
        .notice-wraper {
            margin-top: 4px;
            margin-right: 10px;
            .sup-notice {
                float: left;
                margin-right: 10px;
            }
        }
        .sup-notice-placeholder {
            width: 23px;
            height: 1px;
        }
        .sup-set-mark {
            color: #f69e17;
            vertical-align: middle;
            &.active {
                color: #f69e17;
            }
        }
        .principle {
            display: inline-block;
            width: 48px;
            font-size: 12px;
        }
        .sup-delete {
            visibility: hidden;
            color: #145c98;
            font-size: 12px;
            cursor: pointer;
        }
        .sup-delete-placeholder {
            width: 24px;
            height: 1px;
            display: inline-block;
        }
        .date {
            font-size: 12px;
            @include border-radius($baseBorderRadius);
            display: inline-block;
            margin-right: 15px;
            font-family: "Arial";
            width: 62px;
            text-align: right;
            &.warn {
                color: #f25857;
            }
        }
        .expire {
            color: #fe8282;
            border-radius: 6px;
        }
        .disable {
            color: $gay4;
        }
        .move-top {
            display: none;
            line-height: 21px;
            color: #555;
            font-size: 17px;
            margin-right: 10px;
            vertical-align: middle;
            &:hover {
                cursor: pointer;
                color: #005999;
            }
        }
    }
    .klass_box_ttpl {
        display: inline-block;
        line-height: 24px;
        width: 100px;
        text-overflow: ellipsis;
        .tt_class_dialog {
            top: 34px;
            left: 0px;
        }
        &.pointer {
            cursor: pointer;
        }
        .app-icon {
            font-size: 16px;
            color: #8fc5ed;
            vertical-align: middle;
        }
        .ico-eb {
            font-size: 16px;
            color: #8fc5ed;
            vertical-align: middle;
        }
        .mubiao-app {
            color: #81cdbe;
        }
        .shenpi-app {
            color: #a7d596;
        }
        .zhiwei-app {
            color: #2dab92;
        }
    }
    .klass_ttpl {
        @include feedSetFont(12px, 16px);
        vertical-align: middle; // -webkit-mask-image: -webkit-gradient(linear, 0 0,80 0, from(#8a8a8a), to(rgba(197, 197, 197,0)));
        // -moz-mask-image : -moz-gradient(linear, 0 0,80 0, from(#8a8a8a), to(rgba(197, 197, 197,0)));
    }
    .notice {
        cursor: pointer;
        float: left;
    }
}

.quick-cat {
    text-align: left;
    color: #fff;
    a {
        color: #fff;
    }
    &__btn {
        width: 185px;
        height: 30px;
        line-height: 30px;
        background: #4b5861;
    }
    &__content {
        max-height: 100px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    &__button {
        padding-bottom: 5px;
    }
}