/*
    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
*/
.content {
    display: flex;   
    width: 100%;
    min-height: 917px;
    i.anticon {
        cursor: pointer;
        font-size: 18px;
        padding: 2px;
        &:hover{
            color: #0DA9E2;
        }
    }
    li.active{
        &:hover{
            cursor: pointer;
            color: #3C4F8C;
            // background:linear-gradient(to right, #E5F6FF, #CFEEFA)
            background-color: #e6f7ff;
        }
    }
    .chearts {
        display: inline-block;
        width: 32%;
        margin-right: 1.5%;  
        vertical-align: top;
        height: 100%;
        >div{
            padding: 20px 20px;
        }
        .Cu,.type{
            min-height: 438px;
            height: 46.5vh;
            width: 100%;
            margin-right: 2.5%;
            border-radius: 5px;
            background-color: #fff;
            box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
            p{
                color: #0DA9E2;
                font-family:"ArialMT";
            }
        }
        .Cu {
            margin-bottom: 20px;
            p{
                margin-bottom: 60px;
            }
            div:last-child{
                color: #ddd; 
                font-weight: 700;
                font-size: 19px;
                height: 200px;
                text-align: center;
                line-height: 8;
            }
        }
        .type {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            app-bar{
                position: relative;
                left: 0px;
                top: -6%;
                width: 100%;
            }
            .footname{
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 100%;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: #3C4F8C;
                margin-bottom: 20px;
                
                img{
                    margin-right: 5px;
                    margin-bottom: 3px;
                }
            }
            // &::after{
            //     display: block;
            //     content: '';
            //     height: 1px;
            // }

        }
    }
    .customer {
        min-height: 897px;
        height: 95.7vh;
        overflow: hidden;
        width: 32%;
        margin-right: 1.5%;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
        display: inline-block;
        vertical-align: top;
        .customer_title {
            line-height: 3.5em;
            width: 100%;
            border-bottom: 1px #07A9E1 solid;
            .customers {
                padding: 0 20px;
                span {
                    color: #0DA9E2;
                    font-family:"ArialMT";
                }
                img {
                    width: 30px;
                    height: 30px;
                    float: right;
                    margin-top: 7px;
                    cursor: pointer;
                }
            }
        }
        .customer_detail {
            height: 95%;
            width: 100%;
            overflow: auto;
            border-top: 1px #07A9E1 solid;
            .customer_add {
                line-height: 3.5;
                height: 50px;
                width: 100%;
                padding: 0 20px;
                background-color: #F4F5F8;
                .customer_name {
                    width: 52%;
                    font-size: 12px;
                    color: #CCCCCC;
                    font-family: ArialMT;
                    border-color: #3F9CFF;
                }
                .customer_addbut {
                    float: right;
                    margin-top: 9px;
                    width: 28%;
                    background-color: #0DA9E2;
                }
            }
            .customer_list {
                .active {
                    background:linear-gradient(to right, #E5F6FF, #CFEEFA);
                    color: #3C4F8C;
                }
                li {
                    display:flex; 
                    align-items: center;                 
                    padding: 0 20px;
                    height: 50px;
                    line-height: 3.5;
                    width: 100%;
                    cursor: pointer;
                    color: rgba(60,79,140,0.5);
                    img {
                        width: 30px;
                        height: 30px;
                    }
                    span {
                        width: 70%;
                        padding-left: 10%;
                        display: block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
        
    }
    .services_type {
        min-height: 897px;
        height: 95.7vh;
        overflow: hidden;
        border-radius: 5px;
        width: 32%;
        background-color: #fff;
        box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
        display: inline-block;
        vertical-align: top;
        .services_type_title {
            line-height: 3.5em;
            //height: 5%;
            width: 100%;
            border-bottom: 1px #07A9E1 solid;
            .servicess {
                padding: 0 20px;
                span {
                    color: #0DA9E2;
                    font-family:"ArialMT";
                }
                img {
                    width: 40px;
                    height:40px;
                    float: right;
                    margin-right: -10px;
                    margin-top: 5px;
                    cursor: pointer;
                }
            }
        }
        .services_type_detail {
            height: 95%;
            width: 100%;
            overflow: auto;
            border-top: 1px #07A9E1 solid;
            .services_add {
                line-height: 3.5;
                height: 50px;
                width: 100%;
                padding: 0 20px;
                background-color: #F4F5F8;
                .services_name {
                    width: 52%;
                    font-size: 12px;
                    color: #CCCCCC;
                    font-family: ArialMT;
                    border-color: #3F9CFF;
                }
                .services_addbut {
                    float: right;
                    margin-top: 5px;
                    width: 28%;
                    clear: both;
                    background-color: #0DA9E2;
                }
            }

            .services_list_content {
                background:linear-gradient(to right, #E5F6FF, #CFEEFA);
                height: 100%;
                .border_size{
                    position: absolute;
                    margin-left: -8px;
                    width: 0;
                    height: 0;
                    border-top: 24px solid transparent;
                    border-bottom: 24px solid transparent;
                    border-right: 10px solid #E5F6FF;
                }
                .services_list{ 
                    padding:0 20px;
                    li {
                        height: 50px;
                        line-height: 50px;
                        width: 100%;
                        vertical-align: middle;
                        border-bottom: 2px #FFFFFF dashed;
                        position: relative;
                        color: #3C4F8C;
                        i {
                            display: inline-block;
                            vertical-align: middle;
                            position: absolute;
                            width: 48px;
                            height: 48px;
                            top: 0;
                            right: -16px;
                            line-height: 46px;
                        }
                    }
                }
                    
            }
            
        }
    }

    
}