.menulist-container{
    overflow: hidden;
    background: #fff;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    
    .menulist-body{
        display:flex;
        margin: 0;
        padding: 0;
        position:relative;
        transition: left 300ms ease-in-out;
        list-style: none;
        .menulist-body-page{
            width:100%;
            .menulist-page-content{
                display:flex;
                flex-wrap:wrap;
                justify-content:flex-start;
                .menulist-module{
                    padding: 0;
                    height:74px;
                    display:block;
                    width:25%;
                    overflow: hidden;
                    box-sizing: border-box;
                    .menulist-module-inner{
                        margin:0 6px;
                        height : 100%;
                        overflow: hidden;
                        box-sizing: border-box;
                        .menulist-module-inner-edit{
                            display: none;
                        }
                        
                    }
                }
                .menulist-sort-helper {
                    z-index: 10000;
                    overflow: visible !important;
                    background: transparent !important;
                    .menulist-module-canCompile {
                        overflow: visible !important;
                        background: transparent !important;
                        .menulist-module-inner {
                            background: #fff;
                            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
                        }
                    }
                }
                .menulist-module-container {
                    width: 25%;
                }
                .menulist-module-canCompile{
                    height:74px;
                    display:block;
                    // width:25%;
                    box-sizing: border-box;
                    margin:6px 0;
                    position:relative;
                    background: #fff;
                    overflow: hidden;
                    .menulist-module-inner{
                        margin:0 3px;
                        height : 100%;
                        box-sizing: border-box;
                        position: relative;
                        overflow: hidden;
                        .menulist-module-inner-edit{
                            width: 16px;
                            height: 16px;
                            background: url('../assets/menu-add.svg') no-repeat;
                            border-radius: 50%;
                            position: absolute;
                            top: 4px;
                            right: 5px;
                        }
                        .menulist-module-inner-edit-true {
                            background: url('../assets/menu-reduce.svg') no-repeat;
                        }
                        .menulist-module-inner-edit-false {
                            background: url('../assets/menu-add.svg') no-repeat;
                        }
                        .border{
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            > div {
                                position: absolute;
                            }
                            .border-t {
                                top: 0;
                                left: 0;
                                right: 0;
                                border-top: 1px solid #E6E7E8;
                                transform: scaleY(0.5);
                                transform-origin: 0 0;
                            }
                            .border-r {
                                top: 0;
                                bottom: 0;
                                right: 0;
                                border-right: 1px solid #E6E7E8;
                                transform: scaleX(0.5);
                                transform-origin: 100% 0;
                            }
                            .border-b {
                                bottom: 0;
                                left: 0;
                                right: 0;
                                border-bottom: 1px solid #E6E7E8;
                                transform: scaleY(0.5);
                                transform-origin: 0 100%;
                            }
                            .border-l {
                                top: 0;
                                bottom: 0;
                                left: 0;
                                border-right: 1px solid #E6E7E8;
                                transform: scaleX(0.5);
                                transform-origin: 0 0;
                            }
                        }
                    }
                }
                .menulist-module-label{
                    text-align: center;
                    width: 100%;
                    height: 14px;
                    line-height: 14px;
                    font-size: 12px;
                    color:#3A4247;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin:0 0 8px;
                }
                .grid_icon_solt{
                    width: 38px;
                    height:38px;
                    margin:8px auto 6px;
                    display: block;
                    border-radius: 8px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(to right top, #419bff, #6bbfff);
                    svg {
                        width: 24px;
                        height: 24px;
                    }
                }
                .sys-bgcolor-f1 {
                    background: linear-gradient(to right top, #fe7189, #fc829b);
                }
                .sys-bgcolor-f2 {
                    background: linear-gradient(to right top, #ff8c00, #ffae00);
                }
                .sys-bgcolor-f3 {
                    background: linear-gradient(to right top, #fea500, #ffcf00);
                }
                .sys-bgcolor-f4 {
                    background: linear-gradient(to right top, #5ad61c, #98e320);
                }
                .sys-bgcolor-f5 {
                    background: linear-gradient(to right top, #31cc9b, #36e0aa);
                }
                .sys-bgcolor-f6 {
                    background: linear-gradient(to right top, #08c2c6, #00dcd7);
                }
                .sys-bgcolor-f7 {
                    background: linear-gradient(to right top, #419bff, #6bbfff);
                }
                 .sys-bgcolor-f8 {
                    background: linear-gradient(to right top, #4c88ff, #7aa7ff);
                }
                 .sys-bgcolor-f9 {
                    background: linear-gradient(to right top, #7d7ff7, #96a5fb);
                }
                .sys-bgcolor-more {
                    background: #E6E7E8;
                }

            }
            .small-icon-page{
                margin: 0 24px 12px ;
                display:flex;
                height:24px;
                .small-icon{
                    display:block;
                    width: 29px;
                    margin-right: 10px;
                    height:24px;
                    svg {
                        width: 24px;
                        height: 24px;
                    }
                }
                .small-icon-more {
                    background: url('../assets/s-more.svg') no-repeat;
                }
            }
        }

    }
    .menulist-pageNos{
        margin:8px 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center

    }
    .menulist-pageNos span{
        width:10px;
        height:2px;
        margin: 0 2px;
        background:#BFC4C7;
        opacity: 0.3;
    }
    .menulist-pageNos .active{
        opacity: 1;
    }
    .ui-sortable {
        width: 25% !important;
    }
}
.react-reorderable-item {
    width: 25%;
    float: left;
}
.menulist-page-content>div{
   width: 100%;
}
.react-drag-dragging {
    // visibility: hidden;
    display: none;
}

.new-point{
  width: 31px;
  height: 16px;
  text-align: center;
  position: absolute;
  right: 8px;
  top: 1px;
  line-height: 16px;
  font-size: 10px;
  color: #fff;
  z-index: 10;
  border-radius: 8px;
  background-image: linear-gradient(to left, #FF842F 0%, #FF516C 100%);
  border-bottom-left-radius: 0;
}