.org-user-range-modal{

    .org-user-range-modal-wrapper{
        margin-bottom: 20px;
    }

    .org-user-range-modal-tip{
        padding-top: 16px;
    }

    ul,li{
        list-style: none;
    }

    .m-r-10{
        margin-right: 10px;
    }

    .m-l-5{
        margin-left: 5px;
    }

    .m-l-10{
        margin-left: 10px;
    }

    .org-user-range-modal-row{
        border: 1px #e8e8e8 solid;
        border-radius: 4px;
        overflow: hidden;

        .org-user-range-modal-left{
            border-right: 1px #e8e8e8 solid;

            .ant-empty-normal{
                margin: 0;
                padding-top: 150px;
            }

            .ant-tabs-nav{
                margin: 0 0 8px 0;
                .ant-tabs-nav-wrap{
                    padding: 0 20px;
                }
            }

            .org-user-range-modal-left-search{
                position: relative;
                padding: 10px;

                .org-user-range-modal-left-search-group{
                    display: flex;
                }

                .org-user-range-modal-left-search-select{
                    width: 140px;
                }

                .org-user-range-modal-left-search-item{
                    display: flex;
                    align-items: center;

                    &.org-user-range-modal-left-search-item-disabled{
                        cursor: not-allowed;
                        color: rgba(0,0,0,.25) !important;
                    }

                    .ant-checkbox-inner, .ant-checkbox-checked::after{
                        border-radius: 50%;
                    }

                    .title{
                        display: flex;
                        align-items: center;

                        .view-name{
                            max-width: 250px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }

                        .view-member{
                            cursor: pointer;
                            color: rgba(0, 0, 0, 0.65);
                            &:hover{
                                color: #1677ff;
                            }
                        }
                    }

                    .remark{
                        font-size: 12px;
                        color: rgba(0,0,0,.45);
                    }
                }

                .org-user-range-modal-left-search-member{
                    position: relative;

                    .org-user-range-modal-left-search-member-close{
                        display: inline-block;
                        position: absolute;
                        z-index: 1002;
                        top: 10px;
                        right: 20px;
                        cursor: pointer;
                        color: rgba(0, 0, 0, 0.45);

                        &:hover{
                            color: rgba(0, 0, 0, 0.75);
                        }
                    }

                    .org-user-range-modal-left-search-member-layout{
                        position: absolute;
                        top: 10px;
                        z-index: 1001;
                        padding: 7px 0;
                        width: 354px;
                        overflow-y: auto;
                        background: #FFF;
                        border: 1px solid #d2d2d2;
                        border-radius: 2px;
                        box-sizing: border-box;
                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);

                        ul{
                            min-height: 200px;

                            li{
                                padding: 7px 20px;
                                cursor: pointer;
                                border-bottom: 1px solid #f6f6f6;

                                &.org-user-range-modal-left-search-member-disabled{
                                    cursor: not-allowed;
                                    color: rgba(0,0,0,.25);

                                    span{
                                        color: rgba(0,0,0,.25) !important;
                                    }
                                }

                                &.org-user-range-modal-left-search-member-one{
                                    span {
                                        color: #1677ff;
                                        font-size: 12px;
                                        &:hover{
                                            color: #4096ff;
                                        }
                                    }
                                }

                                .org-user-range-modal-left-search-member-item{
                                    display: flex;
                                    align-items: center;

                                    .remark{
                                        font-size: 12px;
                                        color: rgba(0, 0, 0, 0.45);
                                    }
                                }

                                &:not(.org-user-range-modal-left-search-member-one):hover{
                                    background: #e6f7ff;
                                }
                            }

                        }


                    }

                    .play-down-enter-active, .play-down-leave-active {
                        transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
                    }

                    .play-down-enter, .play-down-leave-to, .play-down-leave-active{
                        transform: translateY(40px);
                        opacity: 0;
                    }
                }
            }

            .org-user-range-modal-left-org{
                margin: 0 20px 0 3px;
                overflow: auto;

                .org-user-range-modal-left-org-node-text{
                    position: relative;
                    top: 1px;

                    .ant-checkbox-wrapper{
                        margin-left: 5px;

                        .ant-checkbox-inner, .ant-checkbox-checked::after{
                            border-radius: 50%;
                        }
                    }

                    .icon-type{
                        color: #1677ff;
                        margin-right: 5px;
                    }

                    .select-all-current{
                        margin-left: 10px;
                        color: #1677ff;

                        &:hover{
                            color: #4096ff;
                        }
                    }
                }
            }

            .org-user-range-modal-left-user{
                margin: 0px 20px;

                .org-user-range-modal-left-user-all-ordinary{
                    margin-bottom: 5px;
                }

                .org-user-range-modal-left-user-all-checked{
                    margin-bottom: 5px;
                }

                .select-range-modal-left-user-list{
                    overflow: auto;

                    ul{
                        padding: 0;
                        margin: 0;

                        li{
                            position: relative;
                            padding: 5px 0;

                            .select-range-modal-left-user-list-label{

                                .select-range-modal-left-user-list-label-text{
                                    cursor: pointer;
                                }

                                .icon-type{
                                    color: #1677ff;
                                    margin-right: 5px;
                                }
                            }
                        }
                    }

                    .select-range-modal-left-user-more{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;

                        span{
                            color: #1677ff;
                            text-decoration: none;
                            outline: none;
                        }

                        .icon{
                            margin-left: 10px;
                            width: 20px;
                            height: 20px;
                            font-size: 20px;
                            color: #1677ff;
                            transform: rotate(90deg);
                        }
                    }
                }
            }

            .org-user-range-modal-left-text-disabled{
                cursor: not-allowed !important;
                color: rgba(0,0,0,.25) !important;

                & + .select-all-current{
                    cursor: not-allowed;
                    color: rgba(0,0,0,.25) !important;
                }
            }
        }

        .org-user-range-modal-right{
            position: relative;
            overflow: hidden;
            .org-user-range-modal-right-empty{
                height: 50%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-content: center;
            }

            .org-user-range-modal-right-btns{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10px 30px;
                text-align: right;
                height: 52px;
                line-height: 52px;

                .empty{
                    padding: 0;
                }
            }

            .org-user-range-modal-right-list{
                position: absolute;
                margin-top: 20px;
                overflow-y: auto;
                width: 100%;

                .org-user-range-modal-right-list-draggable{
                    padding: 0 30px;
                    margin: auto;

                    &.drag-move{
                        li{
                            transition : unset;
                        }
                    }

                    li{
                        height: 45px;
                        display: flex;
                        align-items: center;
                        padding: 5px 0;
                        cursor: pointer;
                        box-sizing: border-box;

                        .org-user-range-modal-right-list-item-type{
                            font-size: 21px;
                            color: #3391d1;
                        }

                        .org-user-range-modal-right-list-item-content{
                            padding: 0 10px;
                            flex: 1;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            user-select: none;

                            .text{
                                font-size: 14px;
                                font-weight: bold;
                            }

                            .remark{
                                font-size: 12px;
                                color: rgba(0,0,0,.45);
                            }
                        }

                        .org-user-range-modal-right-list-item-close{
                            color: rgba(0, 0, 0, 0.65);
                            cursor: pointer;
                        }

                        &.sortable-ghost{
                            border-left: 2px #1677ff solid;
                            i:nth-child(1){
                                margin-left: 5px;
                            }
                        }

                        &.sortable-drag{
                            border:1px #3391d1 dashed;
                            i:nth-child(3){
                                display: none;
                            }
                        }
                    }
                }

            }
        }
    }
}

.org-user-range-active{
    div{
        line-height: 40px;
    }
}