//header border主色调
// $titleback:rgb(23,39,96);
// $paneltitle:rgb(63,79,136);
$titleback:#2c80ff;
$paneltitle:#3c90ff;
$impback:mix(#ffffff,$titleback, 30%);
//重点显示label背景色
$implabelback:#f0f0f0;
//重点显示label前景色
$implabelfore:#222;
//边线颜色
$bordercolor:#f0f0f0;

.am-left-button{
    justify-content: flex-start;
}

.ui-panel-header{
    background-color:$paneltitle !important;
    color:#f0f0f0 !important;
}

.ui-btn-active{
    background-color:$titleback !important;
}

.ui-tab{
    flex:1;
    display:flex;
    flex-direction: column;
}

.ui-tab-body{
    flex:1;
    display:flex;
    flex-direction: column;

    > div{
        flex:1;
        display:flex;
        flex-direction: column;
    }
}

.ui-grid-rowct label{
    width:120px;
    display: inline-block;
}

.ui-layout-center{
    display:flex;
    >div{
        flex:1;
        display:flex;
    }
}



.ui-form{
    label{
        margin-right:3px;
    }
}

.ui-form-item-content{
    >div{
        flex:1;
    }
}

.ui-dialog-hide{
    .ui-dialog-body{
        padding:0;
        overflow:hidden;
    }
}

.am-showtitle{
    background:$paneltitle;
    color:$implabelback;
    line-height:40px;
    text-align: center;
}

.header{
    position:relative;
    height:50px;
    background-color:#fff;
    color:$titleback;
    padding-right:10px;
    flex:1;
    display:flex !important;
    flex-direction: row !important;
    font-weight:bold;
    box-shadow: 0px 1px 5px #ccc;
    .menuicon{
        font-size:24px;
        cursor:pointer;
        padding:13px;
        height:24px;
        width:24px;
        background-color:$titleback;
        color:#fff;
        transition:all linear 0.3s;
    }
    
    .title{
        flex:1;
        font-size:24px;
        line-height:50px;
        text-align: center;
    }

    .user{
        height:42px;
        margin-top:4px;
    }

    .list{
        position:fixed;
        height:110px;
        box-sizing: border-box;
        right:2px;
        top:50px;
        z-index:10000;
        background-color:#fff;
        color:#333;
        box-shadow: 0px 1px 5px #999;
        width:100px;
        transition: all linear 0.3s;
        overflow:hidden;

        >div{
            padding:10px 0px;
            background-color:#fff;
        }
        
        .list-item{
            padding:5px 10px;
            background-color:#fff;
            cursor: pointer;    
            &:hover{
                background-color:#f0f0f0;
                color:$titleback;
            }
        }

        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    .list-hide{
        height:0px;
    }
}


.menulist{
    position:fixed;
    background-color:#fff;
    color:#333;
    left:0px;
    top:52px;
    bottom:0px;
    box-shadow: 1px 1px 5px #999;
    padding:0px;
    width:580px;
    font-size:14px;
    z-index:10001;
    transition: width linear 0.3s;
    overflow:auto;
    >div{
        width:540px;
        padding:20px;
    }
    .firstmenu{
        padding:15px 0;
    }

    .secondmenu{
        .second-item{
            display:inline-block;
            padding:8px 15px;
            width:150px;
            font-weight:normal !important;
            cursor: pointer;
            text-overflow: ellipsis;
            &:hover{
                background:#f0f0f0;
            }
        }
    }
}

.menulist-hide{
    width:0px;
    // padding:0px;
    overflow:hidden;
}

.home{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    right:0;
    display:flex;
    align-items: center;
    justify-content: center;
    background:#e0e0e0;
    background-image:url(imgs/back.jpg);
    // background-image: radial-gradient(circle,mix(#ffffff,$titleback, 80%), mix(#000,$titleback, 10%)); 
    background-repeat: no-repeat;
    background-size:cover;

    .center{
        color:#d0d0d0;
        // background-color:fade-out($titleback,0.1);
        background-color:$titleback;
        width:350px;
        box-sizing: border-box;
        padding:30px 20px;
        border-radius:5px;

        .title{
            color:#f9f9f9;
            font-size:24px;
            font-weight:bold;
            text-align:center;
        }

        .input{
            font-size:16px !important;
            border-bottom:0.5px solid $paneltitle;
            margin:15px 0;
            display:flex;
            flex-direction: row;
            align-items: center;

            .ui-input-before{
                display:flex;
                width:50px;
                background:#f0f0f0;
                justify-content: center;
                align-items: center;
            }

            input{
                background:transparent !important;
                outline: none;
                margin-left:10px;
                box-sizing: border-box;
                font-size:16px !important;
                flex:1;
                border:0px;

                &:hover,&:focus{
                    background:transparent !important;
                    outline: none;
                }
            }
        }
        .button{
            background-color:mix(#333,$titleback,20%);
            font-size:16px;
            width:100%;
            padding:15px 0;
            text-align:center;
            border-radius:5px;
            color:#f0f0f0;
            cursor:pointer;

            &:hover{
                background-color:rgb(61,94,162);
                color:#ffffff;
            }
        }
    }
}

.mainbody{
    padding:10px;
    .maintab{
        flex:1;
    }
}

/*数据导入类型显示*/
.datatype-list{
    padding:10px;
    display:flex;
    .datatype-list-item{
        cursor: pointer;
        // height:40px;
        // width:80px;
        padding:20px;
        display:flex;
        justify-items: center;
        justify-content: center;
        margin:10px;
        border-radius:5px;
        background:#f0f0f0;
        color:#222;
        border:1px solid #999;
        &:hover{
            background:rgb(61,94,162);
            color:#fff;
            border: 1px solid rgb(61,94,162);
        }
    }
}

/*导入项*/
.import{
    display:flex;
    flex:1;
    flex-direction: column;

    > .data{
        display:flex;
        flex:1;
    }

    .import-item{
        .title{
            font-weight:bold;
            font-size:14px;
            background-color:$implabelback;
            color:$implabelfore;
            padding:10px;
        }
        .ui-grid{
            max-height:250px;
        }
    }
}

.chartct{
    flex:1;
    display:flex;
    flex-direction: column;
    overflow:auto;
    box-sizing: border-box;
    display:flex;
    flex:1;
    flex-direction:column;

    .chartxy{
        display:flex;
        flex:1;
        flex-direction:row;
        justify-content: space-around;

        .ui-select{
            min-width:150px;
        }
    }

    .chart{
        flex:1;
        box-sizing: border-box;
    }
}

/**数据展示*/
.datashow{
    flex:1;
    .select-style{
        padding:10px;
        flex-direction: row !important; 
        height:50px;
        display:flex;
        align-items: center;
        
        label{
            margin-right:10px;
        }
    }

    .cond-tree{
        flex:1;
        display:flex;
        // border:1px solid #999;
        box-sizing: border-box;
        overflow:auto;
        .ui-tree{
            flex:1;
            padding:10px;
        }
    }

    .cond-grid{
        flex:1;
        display:flex;
        padding:10px;
        >.ui-grid{
            flex:1;
        }
    }

    .cond-pagination{
        height:50px;
        border-top:1px solid $bordercolor;
    }

    .ui-layout-middle{
        border-top:1px solid $bordercolor;

    }

    .ui-layout-center{
        border-right:1px solid $bordercolor;
        border-left:1px solid $bordercolor;
        flex-direction:column;
    }
    .ui-layout-east{
        padding:10px;
        display:flex;
        flex:1;
    }

    .ui-layout-west{
        width:200px;
        overflow:auto;
        display:flex;
        >div{
            flex:1;
        }
    }
}