.userList{
    width: 100%;
    height: 100%;
    position: relative;
    overflow-x: hidden;
    background: var(--body-bg);
    .userLists{
        float: left;
        width: 100%;
        height: 100%;
        border-right: 1px solid var(--border-color);
        transition: all 0.7s;
        position: absolute;
        &.isSetting{
            width: 70%;
        }
        .serch-box{            
            padding: 5px 5px 5px 20px;
            border-bottom: 1px solid var(--border-color);
            height: 45px;
            /* background: -webkit-linear-gradient(left,#2a2a2a,#1b1b1b);
            background: -o-linear-gradient(right,#2a2a2a,#1b1b1b);
            background: -moz-linear-gradient(right,#2a2a2a,#1b1b1b);
            background: linear-gradient(to right,#2a2a2a,#1b1b1b); */
            background: var(--body-bg);
            .multiSet{
                float: right;
                color: var(--second-text-color);
            }
            .share-icon{
                position: relative;
            top: 0px;
            -moz-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            transform: scaleX(-1);
            }
        }
        .userListContent{
            // padding-left: 20px;
            height: calc(100% - 45px);
            background-color: var(--body-bg);
        }
    }
    .authSetting{
        float: left;
        height: calc(100% - 100px);
        width: 30%;
        position: absolute;
        transition: all 0.7s;
        right: -30%;
        padding-left: 20px;
        background: var(--body-bg);
        &.isSetting{
            right: 0;
        }
        .header{
            height: 45px;
            line-height: 45px;
            width: 100%;
            border-bottom: 1px solid var(--border-color);
            .title{
                color: var(--primary-text-color);
            }
            .ctrlList{
                float: right;
                display: flex;
                align-items: center;
                justify-content: space-around;
                height: 45px;
                line-height: 45px;
                width: 210px;
                .btn{
                    font-size: 12px;
                    &.ivu-disabled{
                        background-color:#999;
                    }
                }
                .icon{
                    cursor: pointer;
                    &:hover{
                        color: #1cc0f3;
                    }
                }
            }
        }
        .users{
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);           
            .title{
                color: var(--second-text-color);
                font-size: 12px;
                height: 50px;
                line-height: 50px;
            }
            .ids{
                color: var(--primary-text-color);
                height: 130px;
                overflow: auto;
                &.singleMode{
                    height: 80px;
                }
            }
        }
        .authContent{
            height: calc(100% - 208px);
            overflow: auto;
            .authBox{
                padding-right: 20px;
            }
            .title{
                color: var(--second-text-color);
                font-size: 12px;
                padding: 10px 0;
            }
            .subTitle{
                padding: 10px 0 10px 10px;
                color: var(--primary-text-color);
                font-size: 13px;
                display: flex;
                justify-content: space-between;
                &:hover{
                    /* background: -webkit-linear-gradient(left,#272727,#373737);
                    background: -o-linear-gradient(right,#272727,#373737);
                    background: -moz-linear-gradient(right,#272727,#373737);
                    background: linear-gradient(to right,#272727,#373737); */
                    background: var(--hover-text-color);
                }
                .checkSty{
                    display: flex;
                    width: 150px;
                    justify-content: space-around;
                    .checkTitle{
                        color:var(--primary-text-color);
                        margin-right: 10px;
                    }
                }
                .switch{
                    float: right;
                }
            }
            .detail{
                padding: 10px 0 10px 20px;
                display: flex;
                justify-content: space-between;
                &:hover{
                    /* background: -webkit-linear-gradient(left,#272727,#373737);
                    background: -o-linear-gradient(right,#272727,#373737);
                    background: -moz-linear-gradient(right,#272727,#373737);
                    background: linear-gradient(to right,#272727,#373737); */
                    background: var(--hover-text-color);
                }
                .auth{
                    color: var(--primary-text-color);
                    font-size: 12px;
                }
                .checkSty{
                    display: flex;
                    width: 150px;
                    justify-content: space-around;
                    .checkTitle{
                        color:var(--primary-text-color);
                        margin-right: 10px;
                    }
                }
                .switch{
                    float: right;
                }
            }
        }
        .authBtn{
            padding: 15px;
        }
       
    }
    //空間輸入框
    .input-num{
        text-align: center;
         color: #c0c0c0;
         font-weight: 700;
         font-size: 14px;
         outline: none;
         background-color: #333237;
         width: 60px;
         border-radius: 8px;
         padding:4px 5px;
         margin:0 5px;
         top:0px;
         position: relative;
         border:#4a4a4d 1px solid !important ;
         &:focus{
          border:#909096 1px solid !important ;
         }
          
      }
}