/*
    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 {
    width: 100%;
    height: 100%;
    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;
        }
    }
    .customer {
        height: 100%;
        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;
            //height: 5%;
            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;
                }
            }
        }
        .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 {                  
                    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: inline-block;
                    }
                }
            }
        }
        
    }
    .services_type {
        overflow: hidden;
        height: 100%;
        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: 50px;
                    height: 50px;
                    float: right;
                    margin-right: -10px;
                    margin-top: 5px;
                }
            }
        }
        .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 {
                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;
                }
                    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;
                        }
                    }
                }
            
        }
    }
    .chearts {
        display: inline-block;
        width: 32%;
        margin-right: 1.5%;  
        vertical-align: top;
        height: 100%;
        >div{
            padding: 20px 20px;
        }
        .Cu {
            height: 48%;
            width: 100%;
            margin-bottom: 7%;
            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";
            }
            .legend {
                height: 10px;
                width: 10px;
                display: inline-block;
                background: linear-gradient(to right,#7DCEFB, #0DA9E2);
                border-radius: 50%;
                margin: 15px 4px 0 43%;
            }
        }
        .type {
            height: 48%;
            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";
                
            }
        }
    }
}