@showtree:~`'showtree'`;
@hidetree:~`'hidetree'`;
@showtable:~`'showtable'`;
@hidetable:~`'hidetable'`;

.main{
    height: 100%;
    display: flex;
    width: 100%;
    .left{
        flex: 0 0 auto;
        background: #ECEEF3;
        height:100%;
        >div:nth-child(1){
            height: 100%;
        }
        :global{
            .react-resizable {
                position: relative;
                background-clip: padding-box;
            }
            .react-resizable-handle {
                position: absolute;
                width: 10px;
                height: 100%;
                bottom: 0;
                right: -5px;
                cursor: col-resize;
                z-index: 1;
            }
            .centerinfo-tree .centerinfo-tree-treenode{
                white-space: nowrap;
            }
            .react-contexify{
                min-width: 120px;
            }
            .centerinfo-tree-list-holder{
                overflow: hidden;
            }
            // .centerinfo-tree-list-scrollbar{
            //     width: 15px !important;
            //     display: inline-block !important;
            // }
        }
    }
    .middle{
        width:15px;
        height:100%;
        border-left: 1px solid #efefef;
        position: relative;
        .point{
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-align-items: center;
            align-items: center;
            left: 0;
            right: 0;
            background: #f2f5fc;
            position: absolute;
            top: calc(50% - 40px);
            font-size: 14px;
            width: 12px;
            height: 80px;
            border-radius: 0 12px 12px 0;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            cursor: pointer;
        }
    }
    .right{
        flex:1 1;
        height:100%;
        // padding-left: 20px;
        // width: calc(100% - 250px);
        overflow: hidden;
        :global{
            .centerinfo-table-thead > tr > th {
                padding: 8px 8px !important;
            }
              
            .centerinfo-table-tbody > tr > td  {
                padding: 12px 8px !important;
            }
              
            .centerinfo-table-tbody > .centerinfo-table-measure-row > td  {
                padding: 0px !important;
            }
              
            .centerinfo-table-tbody > tr .centerinfo-table-row-selected > td {
                background: #fff !important;
            }
              
            tr.centerinfo-table-expanded-row > td {
                background: #fff !important;
            }
              
            .centerinfo-table-thead > tr > th {
                background-color: #F2F5FC !important;
            }
        }
    }
    .showtrees{
        width:100%;
        overflow: hidden;
        animation:@showtree .3s ease-in forwards;
    }
    .hidetrees{
        width:0;
        overflow: hidden;
        animation:@hidetree .3s ease-in forwards;
    }
    .showtables{
        width:100%;
        overflow: hidden;
        animation:@showtable .3s ease-in forwards;
    }
    .hidetables{
        width:0;
        overflow: hidden;
        animation:@hidetable .3s ease-in forwards;
    }
    :global{
        @keyframes @showtree {
            0% {
                width:0px
            }
            100% {
                width:230px
            }
        }
        @keyframes @hidetree {
            0% {
                width:230px;
            }
            100% {
                width:0px;
            }
        }
        @keyframes @showtable {
            0% {
                width:calc(100% - 250px);
            }
            100% {
                width:calc(100% - 20px);
            }
        }
        @keyframes @hidetable {
            0% {
                width:calc(100% - 20px);
            }
            100% {
                width:calc(100% - 250px);
            }
        }
    }
}

.lefttreepanel{
    height: 100%;
    background-color: #fff;
    .lefttree{
        border-bottom:1px solid #EFEFEF;
        padding: 12px;
        height:57px;
        align-items: center;
        display: flex;
    }
    
    .treebody{
        height: calc(100% - 58px);
        overflow: auto;
        padding:12px;
    }
}

.inputpanel{
    width: 100%;
    border-bottom:1px solid #EFEFEF;
    padding:12px;
    >div{
        height: 32px;
    }
}

.maintable{
    height:calc(100% - 100px);
    padding:12px;
    width: 100%;
}

.mainaction{
    height:calc(100% - 32px);
    padding:12px;
    width: 100%;
}

.mainpage{
    text-align: center;
}
